Разработка конструктора путешествий, часть 4: Как сделать удобную форму запроса

Как мы разработали новый дизайн важнейшего интерфейса взаимодействия с сайтом. Это продолжение дневника, предыдущие части читайте здесь.

Составление запроса на путешествие — первое, с чем сталкивается пользователь на нашем сайте. Здесь мы указываем места, которые хотим посетить, даты и время, кто путешествует, пожелания по размещению в отелях и прочие детали. Первый позитивный опыт взаимодействия с сервисом критически важен, с него я и начал разрабатывать новые интерфейсы.

Сейчас процесс заполнения запроса разбит на три страницы: места и даты посещения, Люди (сколько, взрослые или дети, разбивка по группам), Настройки (пожелания бизнес/эконом и количеству пересадок):

Так сейчас выглядит первая страница составления запроса — точки и места посещения.
На второй странице всё про путешественников — количество, разбивка по группам, взрослые/дети.
На третьей странице запроса вводим предпочтения бизнес/эконом и количество пересадок.

К этому важному этапу взаимодействия пользователя и сервиса я подошёл достаточно радикально. В моих новых макетах страница запроса встретит вас в таком виде:

Сервис встречает простым вопросом «Откуда вы отправляетесь?»

Предлагаемая мной форма запроса объединяет три страницы в одну:

Все шаги заполнения запроса объединены в одну страницу.

Самое заметное различие — я убрал карту и всю площадь страницы отдал запросу. На этапе, когда я не ввёл ни одного города из моего будущего путешествия, единственное, что можно мне показать на карте — точка моего текущего пребывания, потому сейчас карта не даёт мне никакой полезной информации. Добавим её позже, когда будет что показать.

Кроме того, с первого экрана ушли всевозможные мелкие кнопки и контролы, которые понадобятся нам потом: переименование рассчитанного плана путешествия, вкладки текущего плана и создания нового, переключение «карта-календарь», все мои планы, мои контакты, «поделиться планом», помощь и «оставить комментарий».

Многое я решил спрятать в профиль пользователя, открывающийся аватаркой:

Далее — объединив три страницы в одну, мы даём пользователю удобный вид всей формы, когда одним взглядом можно оценить количество полей и времени заполнения, легко вернуться и исправить любую точку или дату вашего путешествия. Кстати, спустя неделю после завершения этого макета я набрёл на небольшое исследование агентства Huge как раз о формах, разбитых на шаги и одностраничных. Они пришли к такому же выводу, почитайте. На левой кромке экрана я поставил три маленькие кнопки, которые позволяют быстро переходить по разделам страницы.

Отдельно можно пояснить шрифтовое решение. Я выбрал пару Scada для заголовков и PT Mono для текста — оба имеют интересную геометрию букв, мультиязычную раскладку, доступны бесплатно. Поиск продолжается в фоновом режиме, но я уже доволен и этим выбором. Моноширинный шрифт PT Mono, в котором буквы, как на печатной машинке или на старых компьютерах, имеют одинаковую ширину, придаёт настроение уютного интерфейса, легко читается в мелком размере, незаслуженно редко используется, что даёт нам возможность создать своё «шрифтовое лицо» и запомниться уже при беглом взгляде.

Оранжевый фон будет основным только на нагруженных формами и прочими видами взаимодействия интерфейсах. Это очень активный цвет, которым нельзя надоедать, поэтому пользователь будет его видеть на кнопках, контролах и прочих активных элементах. Здесь же мы сразу окунаем его в оранжевое море, даём почувствовать, что сервис перешёл в режим взаимодействия и опроса, а не демонстрации результатов.

Основным слоганом при разработке этого интерфейса был «меньше — лучше». Например, раскрыть интерфейс новой точки на маршруте можно просто кликнув в форму «add new destination» — раскрывается выпадающий список мест, отвечающий первым буквам запроса и появляются части запроса касательно этой новой точки. Я решил спрашивать как можно меньше, задавать уместные вопросы, все опции и необязательные вопросы, которые запланированы на будущие релизы, спрятать в настройки и не выпячивать их, пугая множественными полями.

Вся форма вписывается в разработанную с нуля модульную сетку, которая также послужит каркасом всем последующим интерфейсам:

На сегодня хватит, а скоро я расскажу про первые макеты готового плана путешествия:

Продолжение дневника читайте здесь.

Andrey Belikov, арт-директор IQPlanner.com

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
IQPlanner team

IQPlanner team

100 Followers

IQPlanner makes finding your perfect holiday easy. Browse through unique holidays shared by other travellers or build your own. www.iqplanner.com