Изучили 60 сайтов мировых аэропортов в поисках идеального UX — что из этого вышло
Рассказываю, как мы с командой проанализировали UX и дизайн 60 сайтов аэропортов, чтобы определить неудачные решения и лучшие образцы интерфейса. В конце сводка лучших идей, можно адаптировать под свой продукт и использовать.
Накопилась база интересных наблюдений о дизайне и UX. Делюсь с вами!
Недавно мы с командой завершили проект по созданию сайта для Внуково, поэтому в офисе Riverstart только и разговоров, что об аэропортах. Во время работы над проектом команда анализировала интерфейс на примере сайтов аэропортов России, Европы, Азии и Америки.
Совет: проводите бенчмаркинг
Бенчмаркинг — так называется анализ конкурентов, во время которого вы сравниваете качество продуктов, работу сайта, пользовательский спрос, бизнес-процессы и прочее, чтобы вывести идеальные показатели — бенчмарки.
Учиться на чужом опыте дешевле, чем набивать свои шишки. Изучите конкурентов: поймите, в чем они ошибаются, а в чем преуспевают, чтобы перенять лучшие идеи и избежать проблем.
Как провести бенчмаркинг:
- Соберите список сайтов для изучения: включите и конкурентов, и сайты из смежных тем. Используйте парсер выдачи для экономии времени. Мы частенько пользуемся парсером топа выдачи от PR-CY, но вы можете взять любой удобный вам.
- Составьте список параметров для анализа. К примеру, вы можете сравнить путь пользователя по воронке на каждом сайте.
- Проанализируйте сайты и заведите таблицу, в которой будете сопоставлять результаты.
- Соберите негативные результаты — это слабые стороны ваших конкурентов, вам нужно избежать их на своем сайте.
- Соберите позитивные примеры — удачные решения можно использовать.
- Проанализируйте лучшие решения и составьте список бенчмарок — эталонных показателей, к которым вы должны стремиться.
Сайт должен решать задачи пользователя, чтобы в принципе быть ему интересным. Иначе никакого трафика и никаких конверсий владелец не увидит.
Что важно пользователю
В нашем случае пользователи — это пассажиры, встречающие, провожающие и партнеры аэропорта.
Полеты — мероприятие волнительное. Кто-то привык к полетам и в аэропорту чувствует себя как дома, но многие летают редко. У клиентов обычно много вопросов: как лететь с маленькими детьми, с животными, какие условия есть для пассажиров с ограниченными возможностями здоровья, как правильно упаковать багаж, что можно перевозить и другие.
Пассажирам сайт должен помочь сориентироваться:
- быстро узнать, когда и где регистрация на рейс и выход на посадку;
- увидеть изменения, которые сразу отображаются на онлайн-табло;
- без труда найти путь до нужного магазина, туалета, кафе, упаковки багажа и других услуг, связанных с перелетом;
- комфортно ориентироваться в массе разделов сайта, чтобы получить ответы на вопросы.
Что важно компании
У аэропорта свой интерес — кроме основной деятельности, связанной с перелетами, ему нужно привлечь партнеров, сдать в аренду площади, продать вип-обслуживание. Ему нужно:
- ответить на все вопросы аудитории по правилам перелетов;
- предоставить актуальную информацию по каждому рейсу в понятном интерфейсе, чтобы разгрузить отдел обслуживания и повысить лояльность клиентов;
- привлечь клиентов коммерческих услуг;
- упростить коммуникацию клиентов со структурами аэропорта.
Задачи, которые важны пользователю в первую очередь, и на сайте должны быть в приоритете.
Поскольку мы анализируем сайты аэропортов, то рассмотрим интерфейсы с точки зрения типовых задач пассажира.
Заранее оговоримся: все суждения в материале — это наше мнение. Мы не пытаемся поучать коллег, лишь обозреваем интерфейсные решения: на наш взгляд, удачные или имеющие потенциал к улучшению. С чем-то вы можете быть не согласны — это хороший повод обменяться мнениями в комментариях.
Какие аэропорты вошли в анализ
Мы с командой изучили сайты российских аэропортов:
svo.aero, goj.aero, new.sipaero.ru, kazan.aero, mvairport.ru, airportufa.ru, airkem.ru, belgorodavia.ru, iktport.ru, kgdavia.ru, klf.aero, aeroport-adler.ru, pkc.aero, svx.aero, rov.aero, kuf.aero, nux.aero, pkc.aero, gsv.aero, rmz.aero, bqs.aero, oren.aero.
Европейских:
flughafen-zuerich.ch, gva.ch, parisaeroport.fr, finavia.fi, swedavia.com, manchesterairport.co.uk, cph.dk, schiphol.nl, heathrow.com, london-luton.co.uk, aeropuertomadrid-barajas.com, isavia.is, sofia-airport.eu, ber.berlin-airport.de, aeroport-fiumicino.ru, dublinairport.com, maltairport.com.
И аэропортов Азии и Востока:
changiairport.com, zvartnots.aero, abudhabiairport.ae, dubaiairports.ae, esenbogaairport.com, beirutairport.gov.lb, akartaairportonline.com, manila-airport.net, narita-airport.jp.
Обратите внимание, часть зарубежных сайтов не открывается без VPN.
Что пассажиру нужно сделать на сайте:
1. Быстро найти информацию о рейсе
Допустим, пассажир не так часто летает, поэтому немного волнуется. Ему нужно быстро узнать, что с рейсом: нет ли задержек, когда начнется регистрация, куда идти.
Что может помочь это сделать:
- Доступ к к онлайн-табло за наименьшее число кликов (а лучше вовсе без них).
- Элементы, упрощающие поиск своего рейса в списке.
- Обозначения статуса рейса: регистрация, посадка и прочее.
- Указание, куда идти — терминал, гейт, стойка.
Онлайн-табло
Одно из решений — взять потребности пользователей за основу навигации по сайту: разделить вылет для пассажиров, ждущих свой рейс, прилет для встречающих, пересадку для транзитных. Пассажиры сразу поймут, какая информация для них.
В примере сайта Шереметьево так и сделали. До табло один клик с Главной, нужно выбрать раздел по потребности: улететь, встретить, пересесть на стыковочный рейс — тогда откроется соответствующее табло прилета или вылета.
Отображение даты стоило бы сделать более заметной, поскольку пользователи в первую очередь проверяют дату рейса, когда ищут информацию.
На сайте аэропорта Сан-Франциско до онлайн-табло нужно добираться: с Главной перейти на страницу, выбрать прилет или вылет, перейти на страницу и прокрутить экран вниз. При этом поиск в мобильной версии ломает шаблон так, что появляется горизонтальная прокрутка.
Сайт Иркутского аэропорта сразу предлагает пользователю табло, без лишних переходов с Главной. Минус в минималистичности, которая не помогает ориентироваться в списке: нет цветовых индикаторов, логотипов, разных обозначений статусов рейсов. По умолчанию открывается раздел прилета, хотя тем, кто улетает, актуальнее быстрее добраться до табло.
Информация о рейсе
Два популярных варианта:
- Сэкономить время пользователя и сделать проще: вывести краткую информацию о рейсе на той же странице табло.
- Позаботиться о пассажире: не ограничиваться данными с физического табло аэропорта, а разложить правила и этапы, которые нужно пройти до посадки, посоветовать транспорт, сориентировать, когда лучше приехать в аэропорт. Также дать ему возможность сохранить страницу рейса или поделиться ей с встречающими.
Первый вариант, как на сайте аэропорта Кемерово: минималистичное табло на Главной, для получения подробностей о рейсе не нужно переходить на другие страницы, информация раскрывается и сворачивается по клику. Тем не менее, не хватает пользы для пассажира: нет информации о регистрации и других статусах рейса, цветовой индикации.
Еще один важный пункт: актуальность данных. Пользователю нужны актуальные данные, а также нужно, чтобы информация на онлайн- и физическом табло аэропорта совпадала — иначе непонятно, какому табло верить.
На сайте Кемерово пользователь должен сам обновлять расписание вручную, так что если он не заметил кнопку обновления, рискует пропустить начало регистрации или задержку рейса.
Второй вариант, как на Внуково: в быстром доступе то, что поможет найти рейс и пройти все проверки, а по клику открывается отдельная страница — карточка рейса с подробностями, правилами и советами, которая дает возможность позаботиться о пассажире, который редко летает.
Еще один вариант реализовали на сайте финских аэропортов: информация о рейсе открывается на той же странице в виде бокового окна. Сюда же добавили полезные функции: рекомендации магазинов и возможность подписаться на уведомления.
⭐ Бенчмарки:
- Самый быстрый путь до табло — размещение онлайн-табло на Главной странице. Пользователь найдет табло на Главной без кликов, не будет тратить время и трафик, загружая больше одной страницы.
- Улетающим важнее быстро узнать информацию о рейсе, чем встречающим, поэтому по умолчанию открывается табло вылета.
- Табло закрывает все вопросы, возникающие у пользователя, который должен сесть в самолет или встретить пассажира. Оно содержит время вылета с обозначением задержек, направление, номер рейса, авиакомпанию, терминал, выход и статус рейса с указанием, где пройти регистрацию.
- Подписи столбцов помогают разобраться в обозначениях тем, кто редко летает.
- Пользователям на мобильных будет удобнее смотреть табло при скролле вниз, если шапку с обозначениями столбцов закрепить на экране.
- Вся информация помещается на экране без горизонтальных прокруток на любом устройстве.
- Изменения статуса рейса визуально обозначено, чтобы пассажир видел начало регистрации, посадки, задержку вылета.
- Дополнительная информация, советы и правила демонстрируют заботу, хоть и увеличивают длину детальной страницы рейса.
2. Вовремя узнать об изменениях
В расписании бывают изменения: задержали вылет, передвинули регистрацию. Пассажиры должны быстро узнавать об этом, чтобы спокойно подготовиться к посадке и пройти все проверки.
Что может помочь это сделать:
- Обновление онлайн-табло без задержек, совпадение с физическим табло в здании аэропорта.
- Графические подсказки.
- Уведомления об изменениях.
Отображение изменений
Пользователь может не заметить изменений в расписании, если при быстром взгляде на табло визуально ничего не поменялось. Нужно показать время по расписанию, чтобы пассажир нашел свой рейс, и отобразить изменения.
На сайте аэропорта Чкалов время прилета по расписанию и фактическое время прилета разделены на два столбца. Не так удобно сравнивать изменения, учитывая, что данные находятся по разным краям табло далеко друг от друга.
На сайте Шереметьево неактуальное время зачеркнуто, а изменения выделены контрастным красным цветом, чтобы точно привлечь внимание пассажира:
Уведомления
Мы столкнулись с несколькими вариантами реализации оповещений об изменениях в расписании. Лучшим будет тот, который требует от пользователя приложить минимум усилий и передать минимум личной информации.
Аэропорт Схипхол в Нидерландах предлагает уведомления об изменениях рейса. Для этого нужно скачать приложение аэропорта и зарегистрироваться в нем. Не очень удобно, особенно если пассажир редко летает.
Внуково предлагает несколько вариантов оповещений на выбор: пуши на сайте, уведомления в Телеграме, ВКонтакте или по email. Пользователю нужно поделиться личным контактом, но зато он не будет привязан к сайту — уведомления придут по каналу, который он точно просматривает.
Аэропорт Хитроу позволяет добавить рейс в панель закладок на самом сайте, чтобы не искать его в общем списке. Регистрация не требуется, данные передавать также не нужно, но и узнавать информацию можно только на сайте.
Аэропорт Дублина также позволяет добавить рейс в закладки, а еще отображает время обновления табло, чтобы пользователь удостоверился в актуальности данных:
⭐ Бенчмарки:
- Изменения отображаются на табло рядом с тем значением, которое поменялось.
- Цветовые или графические акценты помогают привлечь внимание к переменам в расписании.
- Подписка на уведомления о рейсе помогает сразу узнавать о смене его статуса, не проверяя табло вручную. Функция закладок на сайте позволяет не передавать личные данные, но подписка на уведомления в соцсетях избавляет от необходимости проверять сайт.
3. Сориентироваться в аэропорту
Если пассажир — не частый гость аэропорта, ему может быть сложно сориентироваться в здании, особенно если аэропорт большой.
Что может помочь это сделать:
- Масштабируемая карта здания аэропорта на сайте.
- Отметки магазинов, кафе, туалетов, пунктов упаковки багажа и прочих объектов с подписями.
- Возможность найти нужный объект по поиску.
Часть сайтов просто размещают карту с условными обозначениями, как в примере на сайте аэропорта Казани:
На других сайтах карта интерактивная, с поиском, масштабированием и подписями конкретных объектов.
Аэропорт Чкалова предоставляет карту с отметками и возможностью фильтровать объекты. Минус карты — искажение схемы в перспективе, оно не помогает ориентироваться, а лишь затрудняет поиск.
На сайте Внуково использовали навигацию самого физического аэропорта — те же условные обозначения, цвета и пиктограммы. Так пользователю будет проще ориентироваться в здании, когда он изучит сайт.
⭐ Бенчмарки:
- Интерактивная карта с масштабированием, чтобы все объекты были видны на любом устройстве.
- Маркеры объектов, причем с логотипами и названиями. Они помогут найти не просто магазин, а конкретный магазин бренда.
- Список объектов с указанием их расположения.
- Поиск по карте, который распознает общие обозначения: магазины, кафе, пункты упаковки багажа, и конкретные названия: «Крошка картошка», «Boss».
- Единая система условных обозначений на сайте и в здании аэропорта: иконки, цвета, названия объектов и прочее.
4. Найти услуги для комфортного полета
Пассажира могут заинтересовать возможности, которые сделают ожидание вылета и сам полет комфортнее. Задача компании — увеличить прибыль, получаемую с кафе, ресторанов, бизнес и vip-залов, продажи рекламных услуг. Для того нужно доступно и ненавязчиво презентовать дополнительные услуги, чтобы пассажир понял, как они облегчат его поездку.
Что может помочь это сделать:
- Разделы с услугами в зависимости от потребности.
- Объяснение, как получить услугу, как найти объект в здании аэропорта.
Часть сайтов сосредоточилась на понятной структуре услуг для пассажира. На сайте аэропорта «Уфа» услуги собрали в список с переключателями по виду и поиском. Каждая ссылка ведет на страницу с пояснениями:
Услуги аэропорта должны быть в быстром доступе для пассажира. Чем больше кликов до услуги, тем сложнее ее найти, и тем меньше конверсия. В этом примере ключевые услуги аэропорта вывели на Главную, а сами услуги оформили в виде привлекательных карточек:
Некоторые сайты используют эмоциональные страницы с продающими элементами. К примеру, голландский аэропорт оформил категории услуг как яркие конверсионные страницы и даже вывел на сайт некоторые товары. Такие страницы продают еще до приезда в аэропорт.
Аэропорт Цюриха добавил шоппинг в аэропорту как этап действий пассажира перед регистрацией. Блок содержит рекламу, напоминает купить подарки и, подозреваем, неплохо увеличивает конверсию.
⭐ Бенчмарки:
- Услуги структурированы и разделены по категориям в зависимости от потребности пассажира.
- До конверсионных услуг можно добраться за минимальное количество кликов.
- Страницы услуг привлекательно оформлены и ведут к конверсии — онлайн-брони, звонку, построению маршрута до места.
- Есть понятное объяснение, как получить услугу: номера телефонов, режим работы, отметка на схеме аэропорта.
- Указаны особенности получения услуг: до досмотра, по прилету, в международной зоне и так далее.
5. Пользоваться сайтом без ограничений
Не важно, какой у пользователя уровень владения ПК, ограничения по здоровью или устройство — ему должно быть удобно и легко найти информацию.
Что может помочь это сделать:
- Поиск на сайте.
- Адаптивная версия для мобильных устройств.
- Режимы для слабовидящих.
- Языковые версии.
Все российские сайты аэропортов делают версии для слабовидящих, на зарубежных такая практика не так распространена.
Подробная настройка версии для слабовидящих содержит несколько цветовых режимов и размеров текста, возможность отключить картинки, как на сайте Тобольского аэропорта «Ремезов»:
Финский аэропорт тоже сделал кое-что для инклюзивности сайта: добавил озвучку текста для шведской и финской версии. Пользователь может прослушать весь интерфейс или выделить только нужный фрагмент.
Пассажиры будут активно пользоваться сайтом с мобильных, пока едут в аэропорт или сидят в зоне ожидания. Мобильный адаптив должен вмещать в себя все функции сайта в удобном виде для использования на небольшом экране. На сайте аэропорта Сан-Франциско поиск слегка ломает шаблон так, что появляется горизонтальная прокрутка:
⭐ Бенчмарки:
- Поиск на видном месте, который выдает результаты по сайту. Строка поиска закреплена на экране, чтобы возможность поиска сохранялась при скролле.
- Протестированная адаптивная версия сайта для мобильных. Она должна содержать весь тот же контент, что и на десктопной версии, но в удобном для мобильного использования формате: без горизонтального скролла, с крупными объектами под подушечки пальцев, адаптивными изображениями и мобильными шрифтами.
- Режимы для слабовидящих с несколькими вариантами размера текста и цветовой схемы. Текст должен быть адаптирован для работы голосовых помощников. Иконка в виде очков располагается справа вверху.
- Возможность выбора дневной и ночной темы оформления.
- Несколько языковых версий, подобранных под пассажиропоток.
Итог: формула идеального сайта
Вы можете адаптировать бенчмарки, которые мы собрали для каждого пункта, под свою тематику. Главное — выделить принцип, за счет чего решение оказалось удачным.
Слагаемые идеального сайта:
- Сайт ориентирован на потребности основных пользовательских категорий, поэтому в первую очередь предлагает решение основных запросов, а потом — второстепенных.
- Самодостаточность: он содержит всю информацию, которая нужна пользователю для решения задачи, так что другие ресурсы не требуются.
- Адаптив под мобильные устройства: сайт быстро загружается и корректно отвечает на действия пользователя.
- Визуальные подсказки помогают ориентироваться и расставить акценты для привлечения внимания.
- Интерактивные элементы, возможность приблизить, рассмотреть, повернуть упрощают понимание.
- Конверсионные элементы нативно встроены в этапы, которые проходит пользователь, так что действительно интересны и могут ему помочь.
- Уведомления о важных новостях, которые легко подключить.
- Инклюзивность. Забота о пассажирах, которым может быть сложно работать на сайте: иноязычных, плохо владеющих ПК, пассажирах со слабым зрением.
Продолжите список в комментариях! Добавляйте пункты, которые считаете не менее важными.
Присоединяйтесь к обсуждению сайта аэропорта Внуково в комментариях к статье:
Поделюсь опытом, как мы с командой создали новый сайт для Международного аэропорта Внуково.
Отличный материал, будете ещё что-то аналогичным образом анализировать - обязательно печатайте.
Очень странно, что вы заявляете об изучении UX сайтов, но ничего не слышали о требованиях доступности. Прямо на скриншоте в самом начале, видно что контрастность слова «Прилёт» составляет 1,39 — это слишком мало. Согласно WCAG 2 (или переведённого на русский аналога ГОСТ Р 52872-2019), чтобы текст был читаем, контрастность должна быть не меньше 3,0.
На практике это значит, что с выкрученной на мониторе контрастностью такая надпись просто сольётся с белым фоном и не будет видна! А сколько я таких мониторов настраивал до нормальной цветопередачи в офисе! И таких моментов с меню много на сайте.
И да, сайт должен быть хорошо различим для всех, а не только в «версии для слабовидящих». «Версии для слабовидящих» по-хорошему вообще быть не должно — это признак некомпетентности дизайнеров, и, как правило, они настолько вырвиглазны, что невозможно читать обычным людям даже со слабым зрением. Сайт «Внукова» тут не исключение.
К слову анимированные изображения (да ещё отвратно пережатые) на фоне тоже могут вызвать у некоторых людей головокружение и морскую болезнь. Тут тоже провал. Директор попросил «сделать красиво»? С лучшими практиками у вас явно не задалось.
Спасибо, что спасаете криворуких дизайнеров и разработчиков, настраивая мониторы до нормальной цветопередачи как у всех)
Как показывает практика, такой контраст сейчас, в эпоху IPS-матриц, избыточен. Многие разработчики уже уходят от таких жестких требований в своих интерфейсах и смещают его пусть не к 1.39, но к 2-2.5.
Иногда использование более прозрачного серого улучшает интерфейсы. В частности, пользватель быстрее понимает какие элементы задизейблены при большем контрасте между основным цветом шрифта и серым выключенным.
Комментарий недоступен
Очкалов 🤦♂️
былоб еще по клику на "рейсы в процессе" переход на флайтрадар.