Разработка конструктора путешествий, часть 4: Как сделать удобную форму запроса
Как мы разработали новый дизайн важнейшего интерфейса взаимодействия с сайтом. Это продолжение дневника, предыдущие части читайте здесь.
Составление запроса на путешествие — первое, с чем сталкивается пользователь на нашем сайте. Здесь мы указываем места, которые хотим посетить, даты и время, кто путешествует, пожелания по размещению в отелях и прочие детали. Первый позитивный опыт взаимодействия с сервисом критически важен, с него я и начал разрабатывать новые интерфейсы.
Сейчас процесс заполнения запроса разбит на три страницы: места и даты посещения, Люди (сколько, взрослые или дети, разбивка по группам), Настройки (пожелания бизнес/эконом и количеству пересадок):
К этому важному этапу взаимодействия пользователя и сервиса я подошёл достаточно радикально. В моих новых макетах страница запроса встретит вас в таком виде:
Предлагаемая мной форма запроса объединяет три страницы в одну:
Самое заметное различие — я убрал карту и всю площадь страницы отдал запросу. На этапе, когда я не ввёл ни одного города из моего будущего путешествия, единственное, что можно мне показать на карте — точка моего текущего пребывания, потому сейчас карта не даёт мне никакой полезной информации. Добавим её позже, когда будет что показать.
Кроме того, с первого экрана ушли всевозможные мелкие кнопки и контролы, которые понадобятся нам потом: переименование рассчитанного плана путешествия, вкладки текущего плана и создания нового, переключение «карта-календарь», все мои планы, мои контакты, «поделиться планом», помощь и «оставить комментарий».
Многое я решил спрятать в профиль пользователя, открывающийся аватаркой:
Далее — объединив три страницы в одну, мы даём пользователю удобный вид всей формы, когда одним взглядом можно оценить количество полей и времени заполнения, легко вернуться и исправить любую точку или дату вашего путешествия. Кстати, спустя неделю после завершения этого макета я набрёл на небольшое исследование агентства Huge как раз о формах, разбитых на шаги и одностраничных. Они пришли к такому же выводу, почитайте. На левой кромке экрана я поставил три маленькие кнопки, которые позволяют быстро переходить по разделам страницы.
Отдельно можно пояснить шрифтовое решение. Я выбрал пару Scada для заголовков и PT Mono для текста — оба имеют интересную геометрию букв, мультиязычную раскладку, доступны бесплатно. Поиск продолжается в фоновом режиме, но я уже доволен и этим выбором. Моноширинный шрифт PT Mono, в котором буквы, как на печатной машинке или на старых компьютерах, имеют одинаковую ширину, придаёт настроение уютного интерфейса, легко читается в мелком размере, незаслуженно редко используется, что даёт нам возможность создать своё «шрифтовое лицо» и запомниться уже при беглом взгляде.
Оранжевый фон будет основным только на нагруженных формами и прочими видами взаимодействия интерфейсах. Это очень активный цвет, которым нельзя надоедать, поэтому пользователь будет его видеть на кнопках, контролах и прочих активных элементах. Здесь же мы сразу окунаем его в оранжевое море, даём почувствовать, что сервис перешёл в режим взаимодействия и опроса, а не демонстрации результатов.
Основным слоганом при разработке этого интерфейса был «меньше — лучше». Например, раскрыть интерфейс новой точки на маршруте можно просто кликнув в форму «add new destination» — раскрывается выпадающий список мест, отвечающий первым буквам запроса и появляются части запроса касательно этой новой точки. Я решил спрашивать как можно меньше, задавать уместные вопросы, все опции и необязательные вопросы, которые запланированы на будущие релизы, спрятать в настройки и не выпячивать их, пугая множественными полями.
Вся форма вписывается в разработанную с нуля модульную сетку, которая также послужит каркасом всем последующим интерфейсам:
На сегодня хватит, а скоро я расскажу про первые макеты готового плана путешествия:
Продолжение дневника читайте здесь.
Andrey Belikov, арт-директор IQPlanner.com
