Статьи

175457141

Михаил Фролов. Создание универсальной формы ввода данных о пассажире

Рассмотрим стандартный процесс онлайн покупки билета на самолет, который условно можно разделить на 3 шага:
0_86fc3_a7637a4e_xxl

Сосредоточимся на шаге 1, а точнее на интерфейсе для его преодоления.
Я подробно рассмотрю реализацию оформления в четырех популярных агентствах по продаже авиабилетов:
AnyWayAnyDay
Билет-он-лайн
Ozon Travel
Sindbad

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

1. А нужен ли заголовок на странице?

Попасть на страницу оформления покупки можно не только с сайта агентства, но и с многочисленных сервисов поиска дешевых авиабилетов, например с сайта компании Aviasales, вместе с которой была подготовлена эта статья. Учитывая это, стоит поблагодарить Ozon и Билет-он-лайн за то, что они озаглавили данную страницу, и, тем самым, хоть как-то сориентировали пользователя, в то время как их коллеги из Anywayanyday и Sindbad сочли что пользователь и сам без труда разберется куда это он попал.

0_86fc4_fba2eafd_l
Мое видение: Заголовок должен быть неотъемлемой частью этой и подобных форм, помимо этого дополню его кратким описанием того что и для чего пользователю нужно сделать:
0_86fc5_62ad8d4b_xl

2. Информация о приобретаемом билете

В 3х случаях информация о перелете, билет на который оформляется, находится в верхней части страницы, причем занимает значимую ее часть, хотя, казалось бы, все детали перелета (количество пересадок, время в пути, авиакомпании и т.п.) были изучены и приняты как удовлетворяющие запросу на этапе поиска и сравнения билетов, и можно ограничиться выжимкой: «откуда /куда /когда /кто /за сколько», при этом не прибегая к использованию шрифтов размером с ладошку младенца. Именно так поступили в агентстве Билет-он-лайн, забыв только указать время прилета, и, почему-то, поместили данный блок в скромный прямоугольник слева от заполняемых полей:
0_86fc6_b8818b41_xl
А вот как выглядит страница на Ozon при покупке билетов на рейс с 1 пересадкой:
0_86fc7_2b47fe5_xl

Не правда ли, многовато за багаж 11 414руб.? (на самом деле это подсказка о том что плата за багаж взимается отдельно и не входит в стоимость билета, но расположена она на радость удачно). При отображении этой картинки на мониторе 13” в поле зрения попадает только информация о перелете “туда”, что весьма печально для страницы “Ввод данных о пассажирах”.
На сайте Sindbad, видимо для верности, расположили и краткую и развернутую информацию о перелете, зачем-то поместив между ними выбор валюты и способа оплаты:
0_86fc8_45a45f48_xl
Найти стоимость билета можно без труда на всех рассматриваемых сайтах, что безусловно хорошо:
0_86fc9_8b6d7ac8_l
Мое видение: В своей форме расположу краткую информацию и цену в верхней части страницы:
0_86fca_146c6305_xl

3. Данные о пассажире

Разобравшись с тем что и почем приобретать, переходим к вводу данных о пассажире. Здесь стоит отметить что число пассажиров во всех агентствах выбирается до начала поиска и в процессе оформления добавить себе попутчика не представляется возможным, смиримся с этим и полетим одним взрослым человеком.
Для пассажира необходимо заполнить следующие поля: Фамилия Имя, дата рождения, данные документа удостоверяющего личность, пол, гражданство. Сначала рассмотрим расположение этих полей и движение взгляда пользователя при последовательном заполнении.
У Anywayanyday все эти поля расположены в строчку, поле ввода под названием, подсказки по заполнению находятся внутри полей:
0_86fcb_b8d8a61e_xxl1
Как считывает такой формат пользователь:
0_86fcc_db9c5d1e_xxl
У агентства Билет-он-лайн расположение полей вертикальное, подсказки справа:
0_86fcd_486a8635_l
Пользователь перемещает взгляд так:
0_86fce_56cf850a_l
Заполнять такую форму проще и привычней хотя бы потому что читаем и пишем мы все слева направо, сверху вниз.
Sindbad и Ozon предпочли комбинацию этих способов:
0_86fcf_5ccb2805_xl

0_86fd0_42ec2637_xl
Как будет метаться пользователь? заполняя эти формы трудно предсказать, поэтому без стрелочек. Несомненно, все в итоге справятся с заполнением, как бы поля ни располагались, вопрос лишь в удобстве и времени, потраченном на этот процесс.
Поэтому для своей формы я выберу вертикальное расположение.
Теперь перейдем непосредственно к полям и подсказкам:

3.1 Фамилия и Имя

Требования ограничиваются тем, что вводить данные нужно латинскими буквами, и вот как об этом нам сообщают рассматриваемые интерфейсы:
Sindbad при попытке набрать русским нещадно удаляет то, что успело появиться и подсказывает:
0_86fd1_9df058cb_m
BiletOnline требует: «По-английски!»
0_86fd2_f0e0cb0c_m
Ozon при активации поля ввода отображает подсказу справа в поле:
0_86fd3_c6374f55_m
при этом название самого поля в момент ввода не отображается
Способ оповещения на сайте AnyWayAnyDay кажется самым лояльным:
0_86fd4_2b174716_m
т.к. предупреждает пользователя до того как тот что-то начал вводить, и не так грубо как это делает BiletOnline. А вот расположение выигрышное все-таки у грубияна, т.к. такой формат подсказки легко можно перенести на поля, размер которых будет меньше текста подсказки, либо если это будут поля выбора значений из списка.

Мое видение: в своей форме название полей я буду писать слева, а подсказки, с примером заполнения, справа от области ввода
0_86fd5_6e47c67f_xl1

3.2 Пол

Зачем указывать пол при покупке билета на самолет для меня загадка, но раз везде есть – нельзя не рассмотреть. Вариантов представления всего два:
— пиктограммами у AnyWayAnyDay
0_86fd6_4859cfdc_xs
— выбор из списка, у всех остальных
0_86fd7_9f92a193_m
Применение выпадающего списка для переключения между двумя пунктами не кажется оправданным, хотя бы потому что для смены нужно 2 клика а не 1 как в случае когда оба варианта представлены на экране одновременно. В качестве маленького улучшения: можно пиктограммы заменить словами, чтобы не мучать людей с плохим зрением идентификацией юбчонки на иконке изображающей девушку:
0_86fd8_15fe90a3_m

3.3 Дата рождения

Выбор даты рождения на рассматриваемых сайтах представлен в трех вариантах:
— ввод вручную в формате дд.мм.гг
0_86fd9_6250a506_m
— ввод значений дня и года вручную, выбор месяца из списка:
0_86fda_90433b0_m
— выбор всех значений из списка:
0_86fdb_e5530458_m
Однозначно сказать какой из них является лучшим трудно, кому-то удобней выбирать из списка, кому-то вводить цифры руками. Однако, как мне кажется, совмещать эти 2 способа не стоит, дабы не заставлять пользователя лишний раз менять устройство ввода (клавиатура/мышь).

Мое видение: остановлюсь на заполнении всех полей даты рождения вручную
0_86fdc_77c35c30_l
В идеале, после ввода месяца, система должна заменять его цифровое обозначение на полноценное буквенное, чтобы после заполнения поле выглядело так:
0_86fdd_df152b3e_l1

3.4 Документ, удостоверяющий личность

Что это за документ, уточняется только на сайтах Билет-он-лайн и Ozon посредством поля «тип документа»
0_86fde_8b3debeb_m
Остальные же предлагают сразу ввести номер документа. Вводим номер, это совсем не сложно, далее следует поле «срок действия», которое нужно заполнить, только если документом является загранпаспорт. Посмотрим, что нам предлагают:
0_86fdf_c907ecef_m

никаких подсказок, пробую ввести дату, а никак, навожу курсор на кнопку-флажок слева от поля – вот она подсказка:
0_86fe0_9240f871_m

прекрасно, у меня как раз загранпаспорт, но ввести дату можно только поставив галочку на кнопке-флажке, иначе поле просто не реагирует

— Sindbad
0_86fe1_1a1bb888_m

Тут сочли что подсказка как вводить значение поля «год» куда существенней чем рассказ о том, что это за срок действия. А для тех кто не разобрался – облегчающий задачу чек бокс «без срока действия», и правда, давайте без него. На OZON и BiletOnline такой проблемы нет, т.к. там поле “срок действия” появляется в зависимости от того, какой документ был выбран из списка. Этот вариант нам годится.

Мое видение: Оставляю поле «тип документа», а в качестве подсказки размещу ссылку на справочную статью о том, с какими документами куда можно лететь:
0_86fe2_8ef6fbc4_xl

4. Контактные данные

Для связи с заказчиком билета (а это не обязательно сам пассажир) присутствует блок с контактными данными, где просят указать телефон и e-mail. Везде это сделано по-разному, больше всего мне понравилось решение от OZON
0_86fe3_e7269562_xl

где помимо полей ввода описано зачем нужна эта информация. Тут же, на мой взгляд, и самое простое поле ввода телефона – блок для ввода текста, в то время как конкуренты предлагают более изощренные варианты:
0_86fe4_5f48a72d_l

Мое видение: Уж что-что, а собственный контактный телефон пользователь наверняка введет правильно, и не стоит его озадачивать излишними требованиями к формату, на мой взгляд достаточно примера в подсказке:
0_86fe7_cdbcbd09_xl

На этом оформление пассажира закончено, можно переходить к следующему шагу: оплате, либо к бронированию с последующей оплатой.

5. Бронирование или оплата

Только одно агентство (anywayanyday) предлагает провернуть оплату или бронирование не покидая формы ввода данных, причем выбор предоставляется в виде кнопок-переключателей:
0_86fe8_1fc0c3be_xl

(встречается еще вариант «забронировать с последующей оплатой картой», но закономерность его появления мне установить не удалось) Ниже следует информация о комиссии, данные банковской карты, итоговая сумма и кнопка «оплатить» или подтвердить бронь, в зависимости от того что выбрано. Мне такой способ не приглянулся. Кажется, что пользователю нужно более очевидно показать какие действия ему доступны, и, исходя из выбранного, продолжать обработку запроса. Что предлагают другие агентства после проверки правильности заполнения полей?
Ozon, после нажатия кнопки «продолжить», просит авторизацию
0_86fe9_8b3db289_xl

это после того как я выбрал рейс, заполнил все данные, а для полноты ощущений тут нет возможности зарегистрироваться для нового пользователя, а ведь так хочется полететь…
Sindbad предлагает выбрать способ оплаты:
0_86fea_51dcc646_xl1

вроде бы все неплохо, но, к сожалению, тут нет никакой возможности изменить свои данные, если вдруг закралась опечатка, а также никак не узнать где же этот офис в Санкт-Петербурге.
Билет-он-лайн также не дает возможности вернуться к редактированию, и до сих пор хранит в тайне каким способом можно оплатить билет:
0_86feb_67bd3cf7_xl

Мое видение: Нужно очевидно показать пользователю доступные действия, помимо этого тут стоит разместить всю информацию, которая может понадобиться для принятия окончательного решения. В итоге получилась вот такая форма:
0_86fec_861c4a4_xxl

Дальнейшее развитие событий подразумевает 2 пути – подтвердить бронь, либо ввести данные кредитной карты. Но это уже совсем другая история.

Бонус: форма ввода данных для мобильной версии сайта

Основное отличие мобильной версии сайта обусловлено ограничением видимой области (при читаемом масштабе), что бы не заставлять пользователя скролить длинную простыню, разобьём весь процесс на три шага: заполнение данных о пассажире, ввод данных о документе, контактная информация. Для уменьшения горизонтальной составляющей формы расположим название полей над ними, а подсказки внутри.
0_86fed_72ed5014_xxl