Разбор сайтов авиакомпаний Utair, «Аэрофлот» и S7 Airlines

Ошибки в разработке и критерии удобства искало и нашло digital-агентство Red Collar.

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

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

Согласно ряду независимых рейтингов отраслевых СМИ и туристических агентств, Utair, «Аэрофлот» и S7 Airlines — лидеры российского рынка авиаперевозок. Их сайты — ключевые точки коммуникации с клиентами: место получения нужной информации, покупки билетов и регистрации на рейс.

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

В первых трёх пунктах всё можно проверить инструментами вроде PageSpeed Insights, Webpagetest или фокус-группой. Мы сделали сводную таблицу с дифференцированной оценкой и средним баллом, аргументацию оценки сможете найти в блоке с разбором.

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

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

Здесь не будет вау-инсайтов: на всех трёх сайтах всё или терпимо, или хорошо. Utair спрятала и бронь, и проверку рейса вглубь сайта. Мы не нашли акций, кроме «миль». «Аэрофлот» поместил всё, кроме покупки, в неочевидное, на наш взгляд, место, а акции перемешал со специальными предложениями и разделил на две группы. Лидером по функциональности стал сайт S7 — всё сразу на приветственном экране.

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

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

Разработчики Utair не стали делать сайт адаптивным, выбрав самостоятельную мобильную версию. Для пользователя нет разницы: функциональность не урезана, всё достаточно удобно. Неудобно только тому, кто заполняет сайт: приходится дублировать всю информацию как бы на два разных сайта.

Клавиатура не проработана: после подсветки формы поиска и меню фокус пропадает с экрана и начинает подсвечивать невидимые элементы в ещё не открытом меню. Плохая поддержка скринридера.

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

SEO у Utair проведена достаточно хорошо, но учитывая современный mobile-first-подход к индексации и отсутствие адаптивной версии у подавляющей части сайта, смысла в этом немного. Конечно, такие крупные компании выезжают на большом количестве прямых запросов, но если вы не гигант рынка, наш совет — делайте сайт адаптивным сразу.

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

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

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

С SEO у «Аэрофлота», как и у Utair: не учли современную mobile-first-индексацию, в урезанной мобильной версии свели свои старания почти на нет. Впрочем, для «Аэрофлота» SEO может быть не важно.

Сайт S7 Airlines не адаптивен, на маленьких экранах открывается отдельная версия, удобная для покупок, но весьма урезанная. Стандартам доступности сайт тоже не соответствует: по нему можно перемещаться с помощью клавиатуры, но фокус постоянно проваливается во множество скрытых с экрана элементов — придётся запастись терпением.

Крайне плохо оптимизирован и выдаёт оценку производительности 43 из 100 и низкий speed index (отношение скорости загрузки к количеству загружаемого контента) — всего 6 из 100. Это значит, пользователям приходится дольше ждать загрузки сайта, а также снижается рейтинг в поисковиках.

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

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

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

User experience — опыт пользователя или удобство пользования сайтом. Как бы ни были хорошо проработаны функциональность и надёжность — если пользователь несколько минут не может понять, как выбрать подходящий рейс, то он закроет сайт в раздражении и уйдёт к конкурентам.

У Utair меню спрятано в бургере и повторяется слева внутри страниц, ещё тот же путь отражается в «хлебных крошках». А для возврата на главную активны оба логотипа по верхним углам страницы. Это странное решение, которое путает пользователя и загружает страницу.

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

Что можно было сделать? Разделить этапы просмотра информации, спрятав подробности в выпадашку или всплывающее окно, и вывести в первую очередь время и цену. Или просто разверстать посвободнее, чтобы разделить информацию.

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

Зато мобилка удобная, есть перенаправление на обратный путь, и после выбора пункта назначения сам открывает календарь. Лайк.

«Аэрофлот» — гигант на рынке авиаперевозок. У него много услуг, и все они, что приятно, представлены на сайте, но элементы интерфейса маленькие, попасть по ним сложно, и не всегда очевидно, что там скрыта ссылка.

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

Выдача поиска самая понятная из тройки сайтов. Полную информацию о рейсе поместили во всплывающее окно, чтобы не захламлять варианты билетов. Сайт даёт спокойно изучить и время вылета, а затем и варианты тарифов. Лайк за drop-down с правилами провоза багажа: отличное проявление грамотной заботы о клиенте — вовремя и без навязывания.

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

С подсказками как и везде — появляется ошибка, но ни о чём не говорит: «На выбранные даты рейсы не найдены». А когда найдены? Есть ли вообще рейсы? Приходится менять запрос и искать причину отсутствия билетов методом тыка.

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

У S7 Airlines удобное меню: всё грамотно разделено заголовками, нет путаницы, легко найти нужное. Но есть минус: «хлебные крошки» на многих внутренних страницах бесполезны — часть ссылок неактивна, а где-то этот путь и так дублируется слева в виде меню.

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

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

Раздражение вызывает неисполнение обещанного — на версии для смартфона поставили крестик в поле с вводом города, который подразумевает стирание слова одним нажатием, но этого не происходит. Просто бы не ставили, как Utair, и никаких возмущений.

В поиске можно найти море разных мест по всему миру, например, Сан-Жозе-ду-Риу-Прету в Бразилии, но по факту туда нет рейсов. Ощущение, что сайт подтягивает инфу из какой-то базы или всего инета, хотя запрос посылает себе же, но что творится под капотом — неизвестно.

Сайт, как и его конкуренты, не различает ошибки, на всё отвечает, что «Что-то пошло не так». Не выдаёт рекомендаций или подсказок. Ошибка в выдаче не даёт ясности: нет просто билетов или нет вообще рейсов на это направление.

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

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

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

Как через дизайн транслируется позиционирование компании и формируется отношение к бренду. Это UI — User Interface — небольшие мелочи, которые были приятны при пользовании, общее впечатление от дизайна и лёгкое считывание того, что компания хотела донести.

У Utair крутое позиционирование: визуально смелое и отличное от рынка. Фотки панельных и деревенских домов на главной странице сразу ассоциируются с чем-то знакомым и домашним, а в видео раскрывается суть — региональные перелёты.

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

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

Встретили два жирных, портящих всё впечатление, бага:

Итого — хороший пример, когда непродуманный дизайн запорол отличную кампанию.

Как «Аэрофлот» ни старался провести редизайн через конкурсы — итог тот же. Визуально сайт крайне устарел, все старые страницы вызывают тихий ужас, а общее впечатление — государственный колхоз вроде РЖД. Компания красиво расписывает ливреи у юбилейных самолётов, но то, что стиль надо поддерживать везде, — не подумала.

Авиаперевозчик вывозит себя только за счёт сильного бренда, образа старейшей и государственной компании. Когда произносишь «Аэрофлот» — нет какой-то картинки в голове, за этим ничего не стоит кроме узнавания и доверия. Только поэтому вид сайта не отпугивает посетителей.

Как сказал один пользователь: «Сайту будто лет десять! Сразу видно — стабильность!». Считаем, то, что ты самый крупный на рынке, не значит, что надо пренебрегать пользователями.

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

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

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

Чтобы разобраться в этом критерии, мы взяли экспертную оценку у арт-директора агентства — Дениса Ломова.

Итак, ни один из авиаперевозчиков не пошёл дальше третьей ступени: они просто сделали сайт, на котором можно купить билет.

Если сайт менее удобен, чем агрегатор, если он не делает пользователя лояльным бренду — зачем тогда он нужен? Можно сразу отправлять клиента на агрегатор, правда, тогда у него появится выбор по цене, и он, скорее всего, уйдёт к конкурентам. Сайт должен цеплять и затягивать, влюблять в бренд. Быть настолько комфортным, что не захочется никуда уходить.

Лидером разбора стал S7 Airlines — он смог вырваться вперёд за удобное расположение всех необходимых действий, современный минимализм и чёткое и приятное позиционирование.

#разборсайтов