29 ноября 2022

UX форм поиска билетов
на сайтах российских авиакомпаний

Всем привет! На связи UX-студия Everest. Уже шесть лет мы разрабатываем крупные веб-сервисы и мобильные приложения с фокусом на UX для банков, ритейла, телекома и других отраслей. В этом году мы запустили собственный Исследовательский центр, который регулярно публикует экспертные обзоры популярных сайтов и сервисов с фокусом на UX-составляющую. Это наше 14-е исследование. Сегодня поговорим об авиаперелетах и формах поиска и подбора билетов. Как говорится, пристегните ремни — мы взлетаем :)
Примечание
За время подготовки исследования часть проблем, о которых мы пишем, могут быть исправлены компаниями на момент публикации. В материале они оставлены в качестве примера, чтобы вы обратили на них внимание и не использовали подобные решения в своих или клиентских проектах.
Изменения в мире ударили по российским авиакомпаниям ещё за время пандемии, сократив вдвое объёмы авиапассажирских перевозок в России в 2020 году. Сегодня список возможных маршрутов сократился ещё больше. Но, несмотря на это, остаются страны, в которые перелеты доступны, а учитывая размеры нашей страны, авиаперелеты будут актуальными даже в условиях полной изоляции — деловые поездки никто не отменял, кроме того, наша страна богата разнообразными рекреационными ресурсами, которые разбросаны по разным уголкам России.

Объекты исследования

*Несмотря на то, что Победа — дочерняя компания Аэрофлота, процесс поиска билетов на сайте имеет определённые отличия.
В этом исследовании мы рассмотрим версии сайтов для ПК, поскольку в РФ всё ещё 42,6% трафика приходится на эти устройства (по состоянию на май 2022 года):
Также небольшое внутреннее исследование показало, что ПК пользуются большей популярностью из-за удобства широкого экрана, где видна навигация и одновременно параметры подбора. Многие пытались искать билеты с мобильных, но для заказа переходили на ПК.

UX формы подбора

Расположение

Очевидно, что форма поиска и бронирования — основной функционал, с которым взаимодействует пользователь при переходе на сайт авиакомпании. Однако есть некоторые отличия в расположении формы на первом экране.
✦ Аэрофлот
Форма размещена в первом экране сразу под шапкой сайта:
На заднем фоне компания расположила слайдер с рекламной информацией. Шесть слайдов сменяются каждые 8 секунд. То есть всё время, пока пользователь пытается сосредоточиться на вводе необходимых данных, перед глазами проскальзывают разные картинки и тексты. Фокус на форме превалирует, а значит, высок риск того, что пользователи будут игнорировать предложения, к которым хочет привлечь их внимание отдел маркетинга Аэрофлота.

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

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

При том, что это два одинаковых сценария поиска билета, Аэрофлот по-разному их называет. На главной странице в табе используется «Бронирование», а на кнопке в шапке — «Купить билет». Возможно, это психологический прием, который завязан на мотивации пользователей, ведь «бронирование» не всегда означает трату денег, а «купить» — целенаправленный глагол, который подчёркивает решимость пользователя отдать деньги. Интересно было бы заглянуть в системы статистики сайта и узнать, с какого варианта выше конверсия.
✦ S7 Airlines
У компании S7 форма поиска билетов расположена после слайдера с баннерами:
В этом случае пользователю наверняка удастся увидеть 1–2 рекламных предложения, прежде чем он сфокусируется на форме и перестанет обращать внимание на окружающую информацию.

Под шапкой есть узкий по высоте блок, который информирует пользователей, где посмотреть информацию об отмене и изменении рейсов, а также о субсидируемых и льготных тарифах. Однако из-за того, что объекты управления слайдером расположены слишком далеко от основной информации (особенно на full-hd-экранах) высок риск того, что пользователь попросту не заметит эту возможность:
✦ Победа
Белый фон, минимум элементов в шапке сайта, форма. Ничто не отвлекает пользователя от формы:
✦ Россия
На сайте авиакомпании Россия форма расположена слева в одном из прямоугольных блоков, из которых состоит главная страница. При этом форме выделяется всего ⅓ пространства экрана:
Таким образом, компания отдает визуальное преимущество слайдеру и баннерам, а не форме, с которой будет взаимодействовать пользователь для поиска билета.

Кроме того, нельзя не заметить проблему с внутренними отступами в самой форме и объёмное количество полей. Из-за этого блок смотрится громоздким и неаккуратным:
✦ Уральские авиалинии
Форма находится в первом экране. Перед ней только информационный блок с важными ссылками и чистая шапка сайта. Ниже — рекламные предложения с минимумом текста (направления и стоимость), — довольно лаконично и просто. Правда, не на всех фото текст читается хорошо, т. е. люди, у которых есть проблемы со зрением, могут испытывать трудности при взаимодействии с такими баннерами:
✦ Utair
Очень минималистичная первая страница. Из графики только одна небольшая иллюстрация:
Правда, из-за того, что в левой нижней части совсем пусто, эта область притягивает на себя основное внимание. Тут советуем поработать с пространством и воздухом, чтобы основной фокус всё-таки был на форму.
✦ Nordwind
Форма находится сразу после шапки сайта, фон однотонный. Ниже расположены слайдер и другие возможности, которые предоставляет компания:

Дополнительные сценарии

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

Однако у каждой компании свой набор дополнительных возможностей. Давайте посмотрим, какая компания что предлагает своим клиентам:
Какие выводы мы можем сделать, исходя из полученных данных?
  • Во-первых, у разных компаний — свой нейминг одних и тех же функций. Например, «Онлайн-регистрация», «Регистрация на рейс», «Зарегистрироваться на рейс». Возможно, это сделано намеренно, чтобы увеличить психологический барьер перехода клиента к конкуренту. Ведь пользователям, которые уже привыкли к одному неймингу, бывает сложно перестроиться. Никто не хочет долго разбираться в новом интерфейсе и чувствовать при этом себя глупым.
  • Во-вторых, напрашивается вывод, что регистрация на рейс и управление бронью — вторые по популярности сценарии.

Далее компании располагают менее востребованные функции по типу: статус рейса, онлайн-табло или программы привилегий. Интересно, что Россия — единственная компания, которая вывела в быстрый доступ «Статус розыска багажа». Может ли это говорить о том, что у компании чаще других бывают проблемы с багажом? Как вы думаете? Пишите своё мнение в комментариях — нам будет интересно :)

Однако тема нашего исследования — всё-таки форма поиска, поэтому сосредоточимся именно на ней.

Сравнительная таблица полей в форме поиска

По своему наполнению формы очень похожи. В основном первичными данными для поиска выступают следующие параметры:
  • Город вылета
  • Город прилёта
  • Дата вылета туда
  • Дата вылета обратно
  • Число и возраст пассажиров
Далее в сравнительной таблице мы подробно рассмотрим, как работает каждое поле и функция.

Город вылета и прилета

Общая таблица

✦ Автоматическое определение города

Наш офис находится в Тамбове (из аэропорта можно улететь только определенными авиакомпаниями — Руслайн, Алроса, Utair), для этого местоположения компании по-разному подходят к автоматическому определению города.

Зачастую они либо не определяют его (Аэрофлот, Победа, Россия) либо показывают Москву (Уральские авиалинии, Nordwind). Лишь S7 определил Липецк как наиболее близкий и возможный город вылета. Правда, сервис не учел тот факт, что аэропорт в Липецке временно не работает (актуально на 19.07.2022):
А значит, пользователь, который не знает об этом, будет тратить время на заполнение оставшихся полей, чтобы в итоге увидеть информацию о том, что рейсы не найдены:
Хорошим UX-решением было бы указать ближайший город, из которого действительно можно вылететь, а в выпадающем списке (если пользователь настойчиво хочет вылететь из Липецка) сделать город неактивным и добавить дескриптор «временно не работает». Так система будет грамотно информировать пользователя, не вводя его в заблуждение.

Utair и вовсе очень странно подходит к определению города. Несмотря на то, что можно улететь из Тамбова их самолетами, компания в разные дни показывает разные города: Ташкент, Усинск, Каунас:
Интересно, исходя из каких целей компания предлагает подобные точки отправления? Может, стоит задача — повысить популярность этих городов?

✦ Выбор города

Все компании для поиска и выбора города используют выпадающие списки.
У Аэрофлота и Победы список городов/аэропортов появляется сразу после активации поля (клик в область ввода). У S7 и Utair для появления списка нужно сначала удалить автоматически определённый город. Лишнее действие, которое можно было бы опустить, ускорив процесс выбора города и сняв с пользователей лишнюю задачу. Так сделали Уральские авиалинии и Nordwind. Но у них, в свою очередь, другая проблема. В активированном поле пропадает указанный город, как будто поле очищается, но на самом деле он всё ещё введен, и если Nordwind это хотя бы показывает выделением строки:
то Уральские авиалинии никак не информируют пользователя, какой город выбран сейчас, когда список открыт:
У авиакомпании Россия для того, чтобы увидеть выпадающий список, нужно кликнуть по определённой области в поле, в которой расположена иконка раскрытия списка «∨». Это заставляет пользователя концентрироваться, так как область иконки меньше, чем область всего поля. При этом есть риск, что, кликнув на поле и не увидев списка, пользователи подумают, что его и вовсе нет.

Хорошим UX-решением будет раскрывать список городов сразу по клику на поле, при этом иконку можно даже не убирать, а только изменить её состояние в открытом виде:
При анализе заметили у компании S7 ссылку «Все направления», значение которой для нас осталось загадкой:
Можно предположить, что это просто заголовок списка, который говорит нам: «Смотри, ниже все доступные города вылета».
Но тогда почему он кликабельный? И почему после клика в поле «Откуда» ничего не происходит, а после клика в поле «Куда» автоматически выбирается «Москва»? Так много вопросов и так мало ответов…

✦ Поиск конкретного аэропорта

Часть компаний не показывают конкретные аэропорты. Аэрофлот при поиске Домодедово, Шереметьево, Внуково выдаёт один результат — «Москва». Это уместное решение, так как показывает пользователю допустимый вариант. Но вот почему-то на запрос «Жуковский» похожего результата нет:
Стоит доработать этот момент.

Некоторые компании показывают только те аэропорты, из которых летают их самолеты:
Победа (Внуково)
Россия (Внуково, Шереметьево)
Nordwind (Шереметьево, Домодедово)

Лучше всего справилась компания Уральские авиалинии. Их функционал показывает конкретные аэропорты, а при поиске варианта, которого нет в списке, система предлагает выбрать город:
Utair ищет только «Внуково», а с поиском остальных проблемы — либо вовсе не показывает, либо выдаёт достаточно странные результаты:
Кстати, интересный момент с Питером. Запрос частотный:
Но только S7 и Utair его понимают и предлагают Санкт-Петербург. Остальные не распознают название, и это стоит изменить, чтобы не заставлять пользователей стирать запрос и вводить полное название:

✦ Сортировка городов

Аэрофлот, Россия выводят списки по алфавиту, S7 и Utair — по популярности. Utair также ограничивает выдачу, показывая только 7 вариантов. Очевидно, ребята из этой компании знакомы с законом Миллера, который говорит, что краткосрочная память человека может запоминать одновременно только семь объектов. Правда, к данному случаю этот закон не очень применим, потому что список городов перед глазами и пользователю не нужно его запоминать.

Хорошие решения используют компании Победа, Уральские авиалинии, Nordwind. Они сначала выводят популярные города:
  • Победа — Москва
  • Уральские авиалинии — Екатеринбург, Москва, Санкт-Петербург
  • Nordwind — Москва, Санкт-Петербург
А затем уже остальные по алфавиту.

✦ Код аэропорта

Все компании, кроме России, используют коды аэропортов.

Код ИАТА (IATA) — уникальный трёхбуквенный код, который присваивается каждому аэропорту. Пассажирам нужно знать код, чтобы не перепутать аэропорт, из которого они вылетают, и аэропорт, в который прилетают. Ещё код аэропорта важен в случаях, когда пользователь покупает билеты с пересадкой, так как вылет может быть из другого аэропорта в городе и пассажиру нужно учесть время на поездку между аэропортами.

✦ Подсказки

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

Аэрофлот продолжает показывать города по алфавиту, а не по популярности:
S7, Победа и Utair показывают совпадения в первых символах названий городов:
Победа ещё и выделяет совпадение символов. За это плюс им в карму :)

Россия, Уральские авиалинии и Nordwind показывает вроде и по популярности, а вроде и нет:
Например, при вводе «ни» в форме России мы видим Калининград, а потом Ницца, Римини, Нижний Новгород и пр. И если показ Калининграда обосновывается его популярностью:
То Ницца не может похвастаться тем же:
Nordwind — единственная компания, которая показывает Ереван, тем самым следуя последним тенденциям:

✦ Кнопка сброса

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

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

✦ Смена городов «Вылет» — «Прилет»

Из всех компаний только у России нет смены города вылета и прилёта.

Также интересно, как компании подходят к ситуации, когда пользователь выбирает один и тот же город в поле «Откуда» и «Куда».

Аэрофлот, S7, Победа и Nordwind просто не дают найти город, который уже был выбран ранее:
Россия и Уральские авиалинии не видят проблем в том, чтобы дать пользователю вылететь и прилететь в один и тот же город:
И только Utair подсказывает пользователям, в чем же проблема:

Дата вылета и прилёта

Общая таблица

✦ Автоматическая подстановка даты вылета

Аэрофлот по умолчанию указывает в поле «Туда» сегодняшнюю дату (остальные компании предоставляют этот выбор пользователю). Возможно, это не самое лучшее решение, так как пользователи в основном фокусируются на заполнении пустых полей и могут пропустить заполнение важной информации.
Интересно, какой процент посетителей действительно покупает билеты с вылетом в день покупки, а скольким приходится менять её...

✦ Календари

Также интересно, как компании подходят к отображению календарей. В основном они показывают либо один месяц — текущий (Россия, Nordwind), либо два — текущий и следующий (Аэрофлот, S7 Airlines, Победа, Уральские авиалинии, Utair).
Для бесшовного процесса выбора дат S7 Airlines, Уральские авиалинии, Utair реализовали единый календарь. В нём можно сразу выбрать и дату вылета, и дату прилёта. У Аэрофлота, Победы, России, Nordwind отдельные календари для полей «Туда» и «Обратно». Некоторым пользователям такая реализация может быть не вполне удобной, так как требует лишних кликов.

✦ Обратный билет не нужен

Компании по-разному дают возможность отказаться от обратного билета:
S7 Airlines, Победа, Уральские авиалинии и Nordwind размещают кнопку в календаре:
Россия использует переключатели сразу в форме
А Utair предлагает выбрать билет в одну сторону и прячет переключение вариантов «только туда» и «туда — обратно» в табы внутри календаря. Несмотря на то, что они крупные, заметить их удаётся не сразу, так как основное внимание забирает на себя сам календарь с датами.
При этом результат выбора пользователь в любом случае увидит в одном поле.
У Аэрофлота функции отказа от обратного билета нет. Пользователь должен просто оставить поле «Обратно» пустым и начать поиск. Такое решение может привести пользователя в замешательство. Ведь если учесть реализацию этого функционала на сайтах других компаний и эвристику «Согласованность и стандарты» (придерживайтесь единообразия и следуйте отраслевым стандартам), пользователь будет ждать подсказки и помощь, а вместо этого ему придется самому разбираться в том, как работает поле.
Отметим, что интерфейсы всех компаний, кроме России, поймут пользователя и найдут билет в одну сторону при выборе только даты отправления и пустом поле «Обратно» вне зависимости от того, нажата ли кнопка «Обратный билет не нужен» или нет.

✦ Кнопка сброса

Если пользователь введет обе даты, а потом передумает и решит искать билеты в одну сторону, очистить дату обратного билета получится не всегда.

Только у Аэрофлота, S7, Победы это можно сделать одним кликом на крестик в соответствующем поле.
На сайтах России, Уральских авиалиний, Utair, Nordwind придётся снова искать кнопку «Обратный билет не нужен». Это нарушает эвристику «Пользовательский контроль и свобода», по которой пользователь должен иметь возможность отменить совершённое действие.

После этого поле вернется в исходное положение на всех сайтах, а интерфейс Nordwind ещё и текстом обозначит намерение пользователя:
За работу над микротекстами в интерфейсе ставим плюс!

✦ Смена месяца и года

Мы уже говорили, что в основном компании показывают либо один, либо два месяца, если поездка не слишком длинная. При этом, если планируется длительное отсутствие или путешествие только в следующем году, будьте добры листать до нужного месяца стрелочками на сайтах S7 Airlines, Победа, Россия, Уральские авиалинии, Utair.

Аэрофлот упростил эту задачу возможностью ввода даты в поле при помощи клавиатуры или выбора из выпадающего списка.

Nordwind тоже позаботился о пользователе и по клику на месяц в отдельном выпадающем окне даёт полистать годы и выбрать месяц. Правда, визуально отобразить, что месяц кликабелен, забыли.

✦ Доступные даты и наличие билетов

Другая популярная проблема в календарях — отсутствие визуального отображения доступных для вылета/прилёта дат и наличия билетов на эти даты.

Аэрофлот, S7 Airlines, Победа, Уральские авиалинии, Utair, Nordwind показывают прошедшие даты как недоступные для выбора:
У России прошедшие даты тоже недоступны, но понять это можно только опытным путем, так как визуально они ничем не отличаются от будущих:
Также у самолетов есть определённое расписание рейсов. И очевидно, что не все самолеты ежедневно летают из страны в страну и из города в город. Если календарь при выборе дат не проинформирует пользователя — это может вызвать неудобства на следующих этапах, так как на выбранные даты билетов может не оказаться. Пользователю придётся возвращаться к выбору и менять их.

Хорошо информируют пользователя Уральские авиалинии — в календаре отмечены даты, в которые рейсы есть. А Nordwind сделали путь ещё проще, указав примерную стоимость доступных билетов на каждую дату:

✦ Обработка ошибок

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

Аэрофлот, Россия (хоть это и не будет видно визуально) и Nordwind ошибки не допустят и заблокируют для выбора даты возвращения, которые находятся до даты вылета:
S7 будет стирать некорректную дату возвращения и возвращать пользователя к выбору дат:
Utair тоже ошибиться не даст, ввести дату отправления и возврата можно только последовательно.

Есть риск купить билеты на те даты, которые вводил, у пассажиров Победы и Уральских авиалиний. Победа сама подставит одинаковые даты в оба поля и не сообщит пользователю. Уральские авиалинии тоже без уведомления меняют местами даты вылета и возвращения:

Пассажиры

✦ Данные в форме

Аэрофлот и S7 Airlines, помимо пассажиров, зашили в форму выбор класса. У Аэрофлота это «Эконом», «Комфорт», «Бизнес». У S7 Airlines — «Эконом» и «Бизнес»:

✦ Данные по умолчанию

По умолчанию все компании выбирают одного взрослого, а Аэрофлот и S7 Airlines дополнительно указывают эконом-класс.

Интересно, что все компании используют термин «Пассажиры», кроме Победы. У них вместо пассажиров — клиенты, что снова противоречит эвристике «Согласованность и стандарты», которая транслирует важность единообразия и следование отраслевым стандартам.

✦ Возрастные категории

В целом все компании придерживаются одинаковых возрастных категорий:
  • Взрослые (от 12 лет)
  • Дети (от 0 до 12 лет)
  • Младенцы (до 2 лет)
Но есть некоторые нюансы.

Победа, например, вместо одной категории «Взрослые (от 12 лет)» выделяет две:
  • Взрослый от 18 лет
  • Подросток от 12 до 17 лет
А вместо «Дети» использует термин «Ребёнок». Но мы уже определили тягу компании к использованию уникальных обозначений.

Младенцы до 2 лет могут лететь либо с родителем без дополнительного места, либо отдельно.

Аэрофлот текстом говорит, что «для оформления билета на ребенка до 2 лет без предоставления места, совершающего перевозку со взрослым пассажиром по премиальному билету, обратитесь в ближайший офис продаж».
При этом что такое «премиальный билет» не поясняется. Так же, как и что делать родителям, у которых не премиальный билет и как найти ближайший офис продаж.

Зато в выпадающем списке есть кнопка «Закрыть». Правда, есть она только в этом поле, а в других почему-то нет, что в целом нарушает консистентность формы в целом:
S7 Airlines, Utair и Nordwind по умолчанию продают билеты младенцам без отдельного места:
Россия и Уральские авиалинии вообще не дают информации о том, какой будет билет — с местом или без:
И только Победа разрешает выбрать, какой билет нужен из двух вариантов:

✦ Отдельный билет детям

Аэрофлот, Россия, Уральские авиалинии, Utair, Nordwind не даст возможность выбрать билет ребенку отдельно от взрослого билета. Победа разрешает покупать отдельные билеты подросткам. И только S7 Airlines не видит проблемы для покупки отдельного билета детям от 0 до 12 лет.
Нам стало интересно, как далеко нужно зайти, чтобы понять, когда выбрать взрослого. Ответ — после выбора билета «Туда» и «Обратно» всплывает долгожданное окно:
Но из информации не совсем ясно, что же делать и как быть. А в разделе «Пассажиры» нас ждал вот такой блок:
Если дополнительно открыть модалку «Где найти номер бронирования?», становится понятно, что нужно указать номер брони ранее купленного билета. И это узнается на 5-м из 7 этапов:
Советуем пересмотреть UX этого сценария и заранее предупреждать пользователей о том, что стоит либо сразу выбрать место, либо добавить номер брони уже купленного билета на этапе «Пассажиры», иначе очень тяжело морально возвращаться к самому началу и проходить все этапы заново.

✦ Отдельный билет младенцу

Ни одна компания не разрешает, чтобы количество билетов для младенцев превышало количество выбранных билетов для взрослых. Но только Уральские авиалинии информируют об этом подсказкой:
Если выбирать билеты с местом — то Победой можно отправить несколько детей до 2 лет с одним взрослым:

✦ Ограничение билетов

Максимальное количество билетов (6) вы сможете купить на сайте Россия. Если у вас большая семья или корпоративный заказ — выбирайте S7 Airlines. Там можно за раз заказать 15 билетов. На Аэрофлоте, Победе, Уральских авиалиниях, Utair и Nordwind вас ждет ограничение в 9 билетов.

Если на S7 Airlines и Уральских авиалиниях вы покупаете максимальное количество билетов (15 и 9) для взрослых, такое же количество можете выбрать и для младенцев. А на сайтах Аэрофлота, Победы, России, Utair и Nordwind ограничение касается всех возрастных категорий.

Кнопки подбора

В основном у всех компаний используются текстовые кнопки, и только у S7 Airlines вместо текста иконка лупы.

Также интересен нейминг. Популярный вариант «Найти» используется у Аэрофлота, Победы, Utair.

Россия использует «Найти авиабилеты», Уральские авиалинии — «Искать», а Nordwind — «Найти билеты».

Поиск по Enter не происходит. Хотя пользователи для запуска тех или иных процессов (в нашем случае — поиска билетов) используют эту клавишу клавиатуры. К Enter чувствителен только S7 и Nordwind, но по клику меняются местами города в условиях подбора.

Дополнительные опции

Некоторые компании размещают в форме дополнительные опции:

Аэрофлот

В форме подбора можно воспользоваться следующими опциями:
— Ввести промокод
— Использовать ваучер
— Выбрать опцию «За мили»
✦ Промокод
При клике на ссылку открывается модальное окно с полями для ввода:
✦ Ваучер
При клике на ссылку осуществляется переход на новую страницу с модальным окном с полями для ввода.
✦ Опция «За мили»
При клике на чек-бокс опция «Введите промокод» скрывается и становится недоступной:

S7 Airlines

В форме подбора можно воспользоваться следующими опциями:
— Составить сложный маршрут.
— Выбрать опцию «Лечу по работе».
— Выбрать опцию «Лечу с питомцем».
— Выбрать опцию «Оплата милями».
✦ Составить сложный маршрут
При клике происходит переход на новую страницу, где можно дополнительно выбрать 8 перелетов:
✦ Дополнительные опции
При выборе чек-боксов в форме ничего не меняется, а на странице с результатами выдачи:
— пропадает опция «Лечу по работе»;
— вместо чек-боксов появляется переключатель;
— текст «Оплата милями» меняется на «За мили»;
— появляется опция «Для молодёжи и пенсионеров».
Такое поведение системы нарушает эвристику «Согласованность и стандарты», которая транслирует важность единообразия в интерфейсах. Необходимо придерживаться единого нейминга и функционала (если на главной чек-боксы, то и на странице с результатами — тоже).

При активации опции «Лечу с питомцем» появляются метки о допустимом весе животного:
При активации опции «Оплата милями» рубли конвертируются в мили:

Уральские авиалинии

В форме подбора можно воспользоваться следующими опциями:
— Ввести промокод.
— Участие в программе «Крылья».
— Сопровождение ребёнка в полете.
— Субсидии/льготы.
✦ Промокод
При активации чек-бокса сразу в форме появляется поле для ввода, что удобнее, чем у Аэрофлота, когда открывается модальное окно.

Есть обработка ошибок. Система подсказывает, что буквы должны быть латинскими, но при клике на Enter ничего не происходит, тем самым пользователю сложно понять — подошёл ли промокод по количеству символов и применится ли он к покупке:
✦ Программа «Крылья»
При активации чек-бокса в форме появляются поля для ввода:
Но при этом непонятно, что это за программа, что она даёт и в чём её преимущества. То есть у новых пользователей будет много вопросов. Можно было бы сделать подсказку с краткими преимуществами и дать ссылку на подробную информацию о программе.
✦ Сопровождение ребенка в полете
Чек-бокс «зашит» в выпадашку «Пассажиры». При его активации исчезает взрослый билет и выбирается один ребенок (или 5/6 до 11 лет). Что означает эта услуга, не совсем понятно, а информация в справке по ховеру тоже неоднозначна. Чтобы узнать больше, нужно перейти по ссылке «Подробнее», которая уводит пользователя на неработающую страницу сайта. Не очень-то дружелюбно :(
✦ Субсидии/льготы
Чек-бокс «зашит» в выпадшку «Пассажиры».
И показывается только тогда, когда заполнены другие поля в форме.
При его активации сбрасывается предустановленный выбор одного взрослого билета и меняются возрастные категории:
Кроме этого, добавляется подсказка о том, что «при перелётах с детьми в бронировании должен быть хотя бы один пассажир старше 18 лет», а при наведении на заголовок «Субсидии/льготы» появляется тултип (короткая всплывающая подсказка, появляющаяся при наведении курсора на элемент):
Но что именно изменится для пользователей при выборе этого чек-бокса, всё равно непонятно. Придётся переходить по дополнительной ссылке и разбираться в большом объеме информации. Лучше было бы сразу кратко пояснить, что даёт опция и кто может ей воспользоваться, чтобы провести первичную фильтрацию — подходит эта опция пользователю или нет.

Nordwind

В форме подбора можно воспользоваться следующими опциями:
— Добавить промокод.
— Использовать мили.
✦ Добавить промокод
При активации чек-бокса сразу в форме появляется поле для ввода. Но при вводе нет плейсхолдера, а при клике на Enter меняются почему-то города «Откуда» и «Куда». Нет даже обработки ошибок. Соответственно, как и у Уральских авиалиний, пользователь останется в неведении, подошёл ли промокод и применится ли он к выдаче.
✦ Использовать мили
При активации чек-бокса возможность использовать промокод становится недоступной:
Нужно исследование или юзабилити-аудит?
Улучшить существующий. Выявим проблемы и предложим оптимальные варианты для их решения
Запустить новый продукт. Соберём требования, проведём необходимые исследования и подготовим ТЗ для разработки
Наши аналитики помогут:

Выводы

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

Проработанный функционал до мелочей — редкость, а ведь именно в деталях кроется удобство взаимодействия и позитивный пользовательский опыт.

Давайте посмотрим на итоговые выводы по каждой компании.

Аэрофлот

Советуем сделать визуальный акцент именно на форме. Рекламные баннеры с текстами и ссылками могут отвлечь от сценария и случайно увести пользователя на другую страницу. Также можно улучшить следующие моменты:
— список городов в полях «Город вылета» и «Город прилета» лучше выводить по популярности;
— более наглядно обозначить процесс покупки билета в одну сторону;
— добавить полезные подсказки (например, едут ли младенцы отдельно или билет без места);
— отображать в календаре доступные даты для перелетов;
— соблюдать единообразие (например, убрать кнопку «Закрыть» в выпадашке с пассажирами, так как в других выпадашках её нет).

S7 Airlines

Форма подбора приятная и визуально аккуратная, но UX необходимо доработать. Например:
— при автоматической подстановке города в поле «Откуда» учитывать ситуацию в стране и проверять действительно ли аэропорт работает;
— пересмотреть необходимость в неоднозначном функционале (например, все направления в выпадашке городов) и либо убрать его, либо сделать более понятным для пользователей;
— доработать сценарий покупки билетов только детям и своевременно информировать о возможных ограничениях и дополнительных действиях;
— отображать в календаре доступные даты для перелётов;
— придерживаться единообразия в нейминге и элементах управления.

Победа

Минималистичную форму подбора можно улучшить. Советуем:
— скорректировать длину полей под контент, который в ней отображается (например, поля с датами явно длиннее, чем контент, который в них заложен);
— придерживаться отраслевых стандартов (например, заменить «клиентов» на «пассажиров»);
— отображать в календаре доступные даты для перелётов.

Россия

В форме подбора достаточно много недоработок, которые требуют улучшения.
Начать нужно с расположения формы. Сейчас на сайте большую часть внимания забирает рекламный слайдер.
Также стоит уделить внимание полям и улучшить их юзабилити:
— при клике на поле показывать выпадашку с городами;
— выводить города по популярности;
— неактивные даты в календаре сделать цветом, отличным от активных дат;
— выводить календарь на 2 месяца;
— отображать в календаре доступные даты для перелётов;
— длину полей с пассажирами сделать соразмерным контенту, который в них находится.

Уральские авиалинии

Форма крупная и аккуратная. По оформлению и функционалу схожа с Nordwind. Ею приятно пользоваться. Советуем доработать такие моменты:
— при клике на заполненное поле с городом не убирать название города из поля;
— подсвечивать ошибку, если пользователь выбирает один и тот же город в поле вылета и прилета;
— добавить крестик для сброса даты «Обратно»;
— сообщать об автоматическом изменении дат, если пользователь выбирает в поле «Обратно» дату, которая раньше даты вылета;
— добавить подсказку, какие места продаются младенцам (с отдельным местом или без).

Utair

От формы ничего не отвлекает — главная страница выполнена в стиле минимализма. Однако можно улучшить следующие моменты:
— подгружать в поле «Откуда» не рандомный город, а тот, в котором находится пользователь;
— сделать табы «туда — обратно» и «только туда» более заметными или разбить в форме даты на 2 поля по примеру других компаний;
— отображать в календаре доступные даты для перелётов.

Nordwind

Форма крупная и аккуратная. По оформлению и функционалу схожа с Уральскими авиалиниями. Ею приятно пользоваться. Советуем доработать такие моменты:
— при клике на заполненное поле с городом не убирать название города из поля;
— выводить календарь на 2 месяца;
— добавить крестик для сброса даты «Обратно».
Исследовательский центр работает на базе UX-студии Everest
Мы проектируем интерфейсы и логику для крупных сервисов, личных кабинетов, автоматизированных рабочих мест сотрудников
Телеграм-канал
Шоурил 2022
Наш сайт
Исследовательский центр работает
на базе UX-студии Everest