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

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

Сегодня поговорим об авиаперелетах. Рассмотрим UX форм поиска билетов на сайтах крупных авиакомпаний, покажем хорошие решения и обозначим моменты, которые можно улучшить Как говорится, пристегните ремни — мы взлетаем :)

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

Для исследования были взяты ведущие авиакомпании России за 2021 год:

* Несмотря на то, что Победа — дочерняя компания Аэрофлота, процесс поиска билетов на сайте имеет определённые отличия.

В этом исследовании мы рассмотрим версии сайтов для ПК, поскольку в РФ всё ещё 42,6% трафика приходится на эти устройства (по состоянию на май 2022 года):

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

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

✦ Аэрофлот

Форма размещена в первом экране сразу под шапкой сайта:

На заднем фоне компания расположила слайдер с рекламной информацией. Шесть слайдов сменяются каждые 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. Они сначала выводят популярные города:

А затем уже остальные по алфавиту.

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

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

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

✦ Подсказки

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

Аэрофлот продолжает показывать города по алфавиту, а не по популярности:

S7, Победа и Utair показывают совпадения в первых символах названий городов:

Победа ещё и выделяет совпадение символов. За это плюс им в карму :)

Россия, Уральские авиалинии и Nordwind показывает вроде и по популярности, а вроде и нет:

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

То Ницца не может похвастаться тем же:

Nordwind — единственная компания, которая показывает Ереван, тем самым следуя последним тенденциям:

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

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

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

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

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

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

Аэрофлот, S7, Победа и Nordwind просто не дают найти город, который уже был выбран ранее:

Россия и Уральские авиалинии не видят проблем в том, чтобы дать пользователю вылететь и прилететь в один и тот же город:

И только Utair подсказывает пользователям, в чем же проблема:

Вы прочитали первую часть исследования. В полной версии доступен UX-разбор дат вылета и прилёта, выбора пассажиров, кнопок подбора, а также дополнительных опций в формах. Полный текст материала опубликован на сайте Исследовательского центра и доступен по ссылке.

Также у нас есть полезная и ёмкая презентация с распространёнными проблемами и рекомендациями. Если вы представитель компании из сферы туризма, авиаперевозок или ваш продукт близок к тематике исследования и вам интересно получить презентацию — оставьте заявку и мы свяжемся с вами.

Наши аналитики могут помочь:
— запустить новый продукт (проведем предпроектные исследования бизнеса, пользователей, конкурентов и подготовим документ с требованиями);
— улучшить существующий (выявим проблемы и предложим оптимальные варианты для их решения).

Если вам нужно исследование с упором на UX и юзабилити интерфейса, пишите на почту info@everest-media.ru

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

→ Шоурил 2022 с нарезкой работ
→ Телеграм-канал студии
→ Телеграм-канал Исследовательского центра

Предыдущее исследование:
— Разбираем UX формы поиска лекарств в онлайн-аптеках