Разработка конструктора путешествий, часть 5: Проще… Ещё проще.
Продолжаем улучшать интерфейс составления путешествия. Сегодня я расскажу о том, насколько стоит упрощать взаимодействие с пользователем и как я подумал — вдруг все вокруг неправы?
Это продолжение дневника, предыдущие части читайте здесь.
Прежде чем показать, что я наработал за первые недели этого года, расскажу небольшую сценку.
Разговаривают два приятеля. Первый вдруг спрашивает:
— Откуда вы решили ехать в отпуск?Второй удивлён вопросом:
— В смысле «куда решили»?— Нет. Сначала скажи, откуда, а потом уже куда.
Странный диалог, правда? Конечно же, всем интересно говорить или даже просто помечтать, куда они отправятся, чем обсуждать детали менее красочные. Так почему все сервисы по составлению плана путешествий первым делом спрашивают, откуда отправляется пользователь? Да-да, это понятно — таков порядок, мы сначала отправляемся, а потом уже прибываем. Но почему бы не спросить более интересную вещь, тем более, что пункт отправления пользователя мы, скорее всего, сможем узнать по IP-адресу, и показать его с возможностью правки? В предыдущем посте этого дневника я показывал интерфейс, который начинался вот так:
Тоже неплохо, понятно и привычно. Но я очень люблю задавать вопросы «Почему?» и «Зачем?», а мой любимый вопрос — «Почему бы и нет?». Так что давайте отложим эту мысль и пойдём дальше.
Ко второму большому изменению интерфейса меня привели следующие вопросы:
- Что мы хотим, чтобы пользователь сделал после того, как он ознакомится с главной страницей сайта?
- Как его «заставить» сделать это?
- Как сфокусировать его внимание именно на том, что мы хотим ему показать?
- Как не отвлечь на второстепенные вещи?
Ответить получается так:
- Когда человек узнал всё о сервисе, что мы ему сообщили на главной странице, я хочу, чтобы он уже взял и попробовал составить план своего будущего путешествия. Конечно, я приложу все усилия, чтобы составить красочное, захватывающее и правдивое описание сервиса, но лучше и понятнее всех слов, видео и отзывов для пользователя будет, если он просто попробует составить свой план, так ведь?
- Как мы проведём его на составление плана? Поставим в конце главной страницы большую кнопку «Составьте свой план»? Можно и так. А можно сразу загрузить начало анкеты и поставить фокус, курсор в поле, где можно будет ввести пункт назначения. И не нужна даже большая кнопка. Логично?
- Далее — фокусируем внимание. Первый шаг — самый важный, потому давайте покажем только то, что нужно пользователю на данном этапе, не будем его пугать и отвлекать. Сейчас нам нужна только форма ввода пункта назначения. Да, вот так скромно, как у Google:
Забавно то, что на момент, когда я пишу эти строки, наши парни не видели моей новой задумки. Интересно, когда они звали меня как арт-директора на проект со словами «нам нужно разработать новый UI, сделать его более понятным и удобным», они рассчитывали вместо вот этого:
увидеть что-то подобное?
Итого — пользователю остаётся только начать вводить название пункта назначения. Первых трёх букв названия должно хватить, чтобы в выпадающем списке предложенных пунктов оказался нужный, так почему бы не показать название крупно, ярко, красивым шрифтом?
И тогда уже мы можем показывать все остальные детали интерфейса, которые нужны для дальнейшей работы: когда и на сколько мы прибываем в Антверпен, нужно ли нам размещение в отеле, сколько путешествующих и прочие настройки. Здесь же мы можем добавить другие пункты назначения, чтобы составить сложное путешествие. И помните, что мы ещё должны удостовериться, что верно поняли пункт отправления из IP-адреса? Там же мы должны спросить, когда отправление и нужны ли билеты обратно. Я поставил эту часть после всех точек маршрута, под заголовком «Вы отправляетесь из…». И вот уже после всей этой анкеты стоит большая кнопка «Рассчитайте мой план», которая запускает расчёт и оптимизацию вашего будущего плана.
Рассмотрите подробнее:
Вот такой получается новый сценарий этого важного этапа взаимодействия путешественников с нашим сайтом. Мне очень интересно ваше мнение, так что давайте обсудим!
UPD 28 марта: На этом история не заканчивается, и спустя практически два месяца, я хочу показать вам следующую версию страницы, в которую я успел внести некоторые улучшения ещё до того, как страница начала верстаться. Я пошёл дальше в сторону упрощения и в результате получил такой вид:
Давайте подробно рассмотрим изменения, так как с беглого взгляда они незаметны, но могут быть интересны разработчикам интерфейсов.
Три шага. Сейчас я разбил страницу на три чётко разделённых шага — Куда едем, Откуда едем, Кто едет. С одной стороны, мы остались в рамках единой страницы и не уходим в слайды, с другой — делим прохождение анкеты на краткие части, которые воспринимаются как понятные и элементарные шаги для пользователя. Раньше в конце анкеты после этих шагов ещё стояли настройки путешествия, которые я решил убрать в настройки профиля (бизнес-эконом, количество пересадок), ведь человек чаще всего их не меняет от одного путешествия к другому.
Понятные данные. Ранее в каждом пункте мы спрашивали «Когда прибываете в город?», «Сколько времени вы там пробудете?» и «Когда покидаете город?». Странный набор вопросов, не правда ли? Понятно, что пользователь вправе не отвечать на все из них, но, тем не менее, логично было бы задавать только первый и последний вопросы. А тем редким пользователям, которым важно указать продолжительность пребывания вместо дат, мы оставили такую возможность во всплывающем окошке календарика — видите темную полоску внизу?
Унификация стилей. Теперь все тексты стали чёрными, неважно, ссылка это или простой текст. Интерактивные текстовые блоки на странице — это пункты путешествия, ссылка-кнопка добавления нового пункта, названия групп путешественников — все они оформлены одинаково (шрифт Noto Serif bold, с толстой линией подчёркивания) и не вызывает сомнений то, что они отзываются на клик. Помимо текстов, все кнопки тоже оформлены одинаково — белыми квадратами в ряд. Эти мелкие изменения убрали визуальный шум и внесли постоянство в оформлении похожих элементов на странице. Если вернётесь немного наверх и посмотрите предыдущий макет, то заметите, как рябил чёрный контрол в ряду белых (переключатель Да/Нет среди календариков).
С течением времени возвращаешься к своим макетам или даже свёрстанным страницам и новым взглядом оцениваешь каждый винтик. Не пренебрегайте ими — иногда изменение нескольких небольших деталей, которые выбиваются, «режут глаз» или не согласовываются по стилю или поведению с элементами, разработанными ранее или позднее по проекту, помогают незаметно, но верно улучшить опыт пользователя и впечатление от всего сервиса. Я предчувствую, как тщательно буду полировать все подобные элементы после запуска, основываясь на своих новых замечаниях, комментариях пользователей или парней из команды.
Andrey Belikov, арт-директор IQPlanner.com
