Думаю, многим из вас, уважаемые хабрачитатели, хотя бы раз приходилось решать вопрос аренды или покупки жилья. Тогда, вероятно, вы шли в гугл, набирали что-то наподобие “аренда квартиры <город>”, после чего в многочисленных вкладочках начинали загружаться вот такие “замечательные” интерфейсы:
Не буду рассказывать о проблемах этих интерфейсов. Во всяком случае, я считаю, что миллионы людей, которые каждый день пытаются найти себе жилье, определенно достойны лучшего.
В этой статье я расскажу, как можно быстро и дешево создать прототип вполне достойного сайта для поиска недвижимости. Любителей почитать про юзабилити прошу под кат.
Постановка задачи
Необходимо разработать прототип сайта для удобного поиска объектов недвижимости, которые хотят купить, продать, сдать или арендовать. Интерфейс должен быть универсален с точки зрения пользовательского опыта, т.е., в идеале, им сразу должны без проблем воспользоваться все, от мала до велика.
Перед тем, как взять в руки карандаш
Интерфейсом будут пользоваться люди с очень разным уровнем компьютерной грамотности и с разными привычками. Но, когда мы возьмем в руки карандаш, знание об этом само по себе будет бесполезно, ведь у нас в голове не будет картинки нашего целевого пользователя.
Чтобы решить решить эту проблему, нужно сформировать некий собирательный образ всех этих людей и их опытов использования. Для этого нужно проявить немного фантазии. Мне повезло, один добрый человек дал мне доступ в Яндекс.Метрику подобного сайта с хорошим трафиком, поэтому кроме фантазии я располагал еще и кое-какой статистикой.
Берем инструмент для создания ментальных карт и придумываем нашего персонажа. Какие-то факты могут быть совсем вымышленными, но при этом они должны быть, предположительно, наиболее вероятными:
Если попытаться особо не задумываясь пробежать глазами по этой карте, то в голове сформируется некий абстрактный образ этой Маши. Сразу вспоминаются такие “Маши” из реальной жизни, и все становится понятно: что у нее на уме, как она владеет компьютером, что думает о таких сайтах с недвижимостью и так далее. Всего этого вполне достаточно, чтобы проектировать не просто интерфейс, а интерфейс для таких, как Маша. Чтобы усилить собственное впечатление от этого образа, можно добавить выразительную фотокарточку:
Надо сказать, я не сторонник длинных и подробных портретов пользователей, разве что если речь не идет о какой-нибудь узкоспециализированной системе автоматизации. Практика показала, что чем проще и короче портрет, тем чаще им будет пользоваться проектировщик во время создания прототипа, а ведь портрет именно для этого и создается.
Теперь самое время взяться за карандаш
Карандаш — самое верное средство буквально за считанные часы получить прототип интерфейса на уровне, достаточном для согласования концептуальных моментов с заказчиком, поэтому я очень люблю карандаш. А еще он экономит кучу человеко-дней и нервов, а также является отличным предлогом отвлечь уставшие глаза от монитора. Главное во время создания бумажного прототипа — не перестараться с детализацией: в каждом таком прототипе существует некая граничная точка, начиная с которой все последующие доработки выполняются быстрее в интерактивном аналоге на компьютере, чем на бумаге.
Возвратимся к нашему интерфейсу. Для начала нужно определиться с основными блоками и их расположением на странице. У нашей Маши на работе небольшой HD-монитор, дома — IPad. Оба экрана прямоугольные. Еще у нее мог бы быть какой-нибудь нетбук, который тоже прямоугольный, но с небольшим разрешением. Собственно, рисуем прямоугольник:
Раз Маша хочет искать объекты недвижимости, то ей понадобится как минимум список этих объектов. Понятное дело, их там не 10 штук, и стоит также добавить блок с фильтрами этого списка. На мониторах Маши горизонтальные области являются особенно ценными с точки зрения использования пространства прямоугольника, поэтому займем фильтром вертикальную полосу. Сразу же решаются проблемы с возвратом к фильтру после долгой прокрутки списка объектов: фильтр просто всегда будет сбоку, на одном и том же месте.
Маша не вылезает из Вконтакте, поэтому ей привычнее что-то выбрать слева, а контент поглощать справа. Да и вообще, традиционная область для вертикальной навигации — левая полоса страницы. Поэтому разместим наши фильтры для начала слева, а если поймем, что справа лучше — разместим справа (ведь это бумажный прототип, тут можно все):
Для Маши важна удаленность от метро, парков и крупных дорог. Быстрее всего все это показать, обозначив адрес объекта точкой на карте. В нашей выдаче будет несколько объектов, поэтому сделаем для этих объектов общую карту:
Кажется, пока Машу все устраивает, поэтому перейдем к деталям. Как я уже говорил, важно ими не увлекаться, но какие-то ключевые элементы все же стоит показать.
Начнем с фильтра. Вообще, у объектов недвижимости куча параметров, но условно их можно разделить на две группы: нужные и не нужные большинству. Параметры из второй группы всегда можно спрятать в какой-нибудь выдвигающийся или выпадающий элемент, поэтому не будем пока о них думать. Из первой же группы у нас остается тип объявления (аренда, продажа и прочее), тип объекта недвижимости, удаленность от метро и цена.
Блок фильтров должен показывать только актуальные элементы интерфейса. Например, если выбран тип объекта “комната”, то выбор количества комнат в квартире должен скрываться. Наша Маша медленно печатает (по легенде, из-за длинных ногтей) и предпочитает использовать только мышь. Поэтому все параметры поиска Маша должна суметь задать без использования клавиатуры. Получаем вот такой блок с фильтрами (я размыл остальную часть прототипа, чтобы не отвлекаться на нее):
Перейдем к списку объектов. Давайте подумаем, почему Маша из двух примерно одинаковых по параметрам объектов может выбрать один? Видимо, потому что фотография этого выбранного объекта ближе к тому образу идеальной квартиры, который витает в голове у Маши. Так как в списке от объекта к объекту параметры обычно меняются не сильно, то в первую очередь ее взгляду нужно подсунуть именно фотографию (разумеется, самую лучшую), а уже потом цену и все остальное. Все остальное желательно подать как можно более систематично и по делу, чтобы не тратить ценные человеко-секунды на распознавание параметров каждого объявления. Я решил оформить набор стандартных параметров объекта в виде тегов.
Над списком разместим количество найденных объявлений и тип сортировки. Объявления будут подгружаться с сервера пачками при прокрутке. При наведении на объявление будут появляться кнопки добавления в избранное и выделения объекта на карте. Вот что получилось:
Остается добавить саму карту и основной интерфейс готов:
Чуток страшненько, зато быстро и дешево. Зато можно обсудить интерфейс и, при необходимости, так же быстро и дешево все переделать. Теперь оставим карандаш и перейдем к созданию интерактивного прототипа.
Интерактивный прототип
Чтобы создать интерактивный прототип, можно открыть блокнот и написать тонну html-кода. Однако, я предпочитаю тратить время на более интересные занятия, поэтому пользуюсь специальным ПО для динамического прототипирования, а именно, старым добрым Axure.
Для начала перенесем в интерактивный прототип то что уже нарисовано на бумаге. Тут все просто, пояснять особо нечего, это дело техники:
У нас не хватает только двух интерфейсов: выбор станций метро и страница самого объявления. Начнем с метро.
Наша Маша ищет квартиру на востоке синей ветки за пределами кольцевой линии. А еще она посматривает на объявления в ЗАО, потому что там работает ее муж. Позволим ей выбрать все это в пару кликов:
Станции метро выбрали. Остается только придумать страницу объявления. На самом деле аренда и, тем более, покупка жилья — это важная веха в жизни Маши, поэтому ее волнует множество нюансов: есть ли грузовой лифт, чтобы перевезти ее любимый шкаф, как далеко детский сад, в который она поведет ребенка, есть ли у дома специальная парковка с местами для жильцов, потому что Маша не любит парковаться стихийно. Разделим весь этот хаос информации об объекте на три части: информация о квартире, о доме и о районе. Разместим все это последовательно на одной странице с возможностью быстрого перемещения между разделами. Для этого закрепим панель навигации сверху так, чтобы она не попадала в область прокрутки:
Вот и все. Покликать живой прототип можно по ссылке.
Заключение
Путем незамысловатых махинаций с карандашом и мышкой, мы получили прототип интерфейса, в котором наша Маша (а значит и подавляющая часть целевой аудитории) с удобством и комфортом могли бы просиживать лучшие дни своей жизни в поисках подходящего жилья. Итог от внедрения такого интерфейса может быть только положительным: лояльные клиенты, возросшая конверсия и трафик для агентства недвижимости; комфорт и сэкономленное на попытках понять интерфейс время — для клиентов.
Напоследок позволю себе чуточку пиара.
Информационная система занимает не последнее место в вашем бизнесе, и вы уже поняли, что юзабилити в условиях жесткой конкуренции — это “must have”? Тогда добро пожаловать на сайт нашего юзабилити-бюро. Поможем если не делом, то добрым советом — точно.
Не нашли для себя в этой статье ничего нового? Уверены, что смогли бы сделать лучше? Тогда ждем ваших выдающихся портфолио с прототипами на hr@uxman.ru. Возможно, для вас найдется пара интересных задачек.
Благодарю за внимание и жду ваших комментариев!
Автор: Klimentij
