«И так сойдет» — почему покупка билетов на сайте Аэрофлота причиняет боль
Сайт Аэрофлота — третий филиал ада на земле после почты.
Вам приходилось покупать билеты на сайте Аэрофлота — старейшей в нашей стране авиакомпании, которая работает уже «100 лет создавая будущее»?
Мы делаем это часто: по рабочим вопросам, для сотрудников, бывает, что и в качестве подарка. Так и выходит, что раз в 2 месяца этот квест приходится регулярно проходить.
Как вы представляете себе этот процесс? Зашел на сайт, выставил нужные даты, выбрал подходящий вариант из предложенных, ввел данные и нажал «оплатить». На сайтах других авиакомпаний это и правда так. А вот как это происходит у Аэрофлота. Все истории реальные от наших сотрудников:
«Бронировала билет, при переходе к оплате вижу, что сумма увеличилась. Оказалось, добавилась страховка, которая мне не нужна. Перерыла всю страницу, протыкала все варианты, но убрать ее так и не смогла. Плюнула, купила через агрегатор. Новый челендж — я коплю мили и хотела их начислить. Чтобы это сделать, я добавляю этот билет в личный кабинет Аэрофлота. Но не факт, что магия случился и бонусы начислят автоматически. Скорее всего придется зайти в лк еще раз и вручную начислить баллы».
«Покупал билет для перелета со щенком в салоне. Ну как покупал — пытался. Оказалось, онлайн такое в Аэрофлоте вообще не провернуть. Чтобы полет состоялся, пришлось пробиваться в их колл-центр, проходить верификацию, а затем процедуру дознания по наличию четвероногого пассажира. Только после всего этого на почту прислали ссылку для оплаты. А ведь можно было бы реализовать все то же самое в рамках дополнительной опции к билету — и сэкономить время и нервы клиента».
«Мне нужно было купить билеты для совместной поездки на компанию друзей, планировали отправиться в культурную столицу. Знаю за собой, что я не самый внимательный человек, поэтому все перепроверяла по несколько раз, чтобы не допустить ошибки. Но опечаталась, и в имени «Ирина» прибавила лишнюю «н». Обрадовалась, что заметила вовремя, а не после покупки. Выдохнув, попыталась вернуться назад и отредактировать данные пассажира, чтобы исправить. Вернемся назад и поправим, Аэрофлот? Не, не слышали, такого функционала на сайте почему-то нет. Пришлось начинать все сначала — искать повторно эти билеты и заново заполнять данные. Но история на этом не закончилась. При оформлении последние 2 билета я забирала по низкой стоимости. Когда начала искать заново, таких цен уже не было, так как мое первое бронирование застолбило за мной выгодные билеты. Пришлось ждать еще час, чтобы заново забронировать билеты и выкупить их наконец по выгодной цене».
А когда мы попытались стать корпоративными клиентами Аэрофлота, чтобы покупать билеты по рабочим вопросам с необходимой для бухгалтерии документацией, сайт компании оказался вообще бесполезен:
- в разделе «Для бизнеса» обнаружилось два варианта: при тратах на перелеты до и свыше 5 млн руб. Мы выбрали тот, что помельче — все-таки так много мы пока еще не летаем;
- выходит огромная форма аж на 42 поля — все обязательны к заполнению. А ведь чем больше надо всего вводить, тем меньше мотивация это делать — следовательно, с каждым новым блоком падает конверсия в оплату;
- решили протестировать вариант для крупного бизнеса — там вообще все только через офис или агентство. И больше нет никакой информации, о том, где искать офисы, как они работают — так и говорят, мол это уж вам надо, вот вы и ищите;
- список офисов нашли-таки через контакты. Но и тут не без подвоха — вместо виджета с картой с отметкой офиса открывается кривенькая инженерная схема улицы и ближайшего метро. Ни приблизить, ни посмотреть, что удобнее — ничего такого, только хардкор.
Мы — команда X Studio. Занимаемся Digital-разработкой, и удобство пользователя для нас — не пустой звук. Кстати, у нас на сайте реализована классная "фишка". Заходите - вы оцените!
Решения, которые мы создаем, сосредоточены не только (и не столько) на красоте и внешней привлекательности ресурса, а в первую очередь направлены на удобство конечного потребителя.
Удобство использования — параметр, которым при создании сайта пренебрегают не только небольшие компании, но и гиганты рынка. И теряют на этом клиентов, а вместе с ними и прибыль. Если у конкурента удобнее и проще, все легко найти, хорошо читается и интуитивно понятно, потребитель уйдет к нему.
А значит, создавая сайт, помимо качественного визуала важно пройти путь клиента, найти все, за что он может «зацепиться», где может забуксовать, выругаться и уйти, плюнув. И построить разработку так, чтобы этого не произошло.
У нас не было задачи потыкать Аэрофлот носом в то, на чем он теряет свои деньги. Или повыпячивать экспертность, раскритиковав сайт в пух и прах. Скорее мы хотели пофантазировать, а как бы нам, как пользователям, было бы удобнее. Критикуешь — предлагай, таким путем мы пошли и показываем, что у нас из этого получилось.
Начали работу мы с того, что провели аналитику пользовательского опыта в сравнении с другими сайтами авиакомпаний и агрегаторов, чтобы взять за основу самые удобные решения. Руководствовались при этом:
- гайдами Baymard Institute (датский институт — признанный лидер в разработке UX ecommerce-сайтов);
- Growth-хаками успешных ИТ-компаний;
- лучшими практиками на рынке
- собственным опытом и насмотренностью.
По итогу анализа выделили и предложили свое видение в части самых, на наш взгляд, важных для пользователя страниц сайта:
- главной — как карты маршрута по ключевым функциям,
- страницы покупки билета — как ключевого источника неудобств.
Главная страница Аэрофлота
Напомним, речь сейчас не о красоте, а о практичности. Для пользователя важно, чтобы здесь можно было легко найти все необходимое: область с поиском билетов, онлайн-регистрация, информация о прилетах и вылетах. Для самой компании главная — важное место для размещения акций и бонусов, с помощью которых ведется работа по привлечению клиентов и повышению их лояльности.
Что есть в этом плане сейчас:
- дублирование функционала покупки билетов в верхнем меню. Только загромождает его, так как форма уже представлена на главной;
- акции — цепляющие фото прекрасная идея. Однако исполнение немного подводит: занимает большую часть экрана, за счет чего выглядит громоздко. Визуал размещен без затемнения, что не дает достаточный контраст для комфортного чтения текста. Эффект теряется;
- неплохая область поиска, разве что дизайн немного устарел;
- дублирующая вкладка с ваучером — функционал итак позволяет применить его в момент поиска;
- в зоне под поиском дублируется онлайн-регистрация. Для этого процесса уже выделена вкладка выше, что гораздо удобнее и интуитивно понятно пользователю;
- блок «о компании» также лишний: вся информация из него представлена в других частях и в подвале сайта;
- отсутствует информация о наличии мобильного приложения. Хотя сейчас многим пользователям удобнее использовать именно его.
Что сделали мы:
- вычистили все лишние дубли: кнопку покупки в верхнем меню, вкладку ваучера, блоки онлайн-регистрации и «о компании»;
- доработали область с акцией: уменьшили размер, чтобы без прокрутки можно было видеть следующий блок, затемнили фото, сделав текст более контрастным и читабельным;
- освежили дизайн области поиска, дополнительных услуг, новостей компании и аудиогида;
- увеличили за счет освободившегося места блок «Аэрофлот-бонус», что позволило больше раскрыть суть и преимущества программы;
- добавили рекламу мобильного приложения;
- привели нижний блок сайта в порядок: выделили важную контактную информацию, чтобы сделать ее более заметной.
Также убрали синюю подложку — благодаря этому страница стала выглядеть чище, свежее и современнее, появился воздух.
Поиск и выдача
Следующая по важности страница — выдача подобранных по условиям поиска билетов.
Она важнее главной, потому что отвечает за то, чтобы у клиента сохранилось желание оформить заказ именно здесь. Информация должна быть размещена логично, понятно и удобно, чтобы не запутать пользователя. При этом важно сохранить максимальную вариативность, чтобы уточнение поиска не превратилось в пытку.
Что режет глаз и ломает мозг здесь у Аэрофлота:
- снова перегруженный верхний блок все с той же кнопкой «купить билет» — постоянно нажимая ее, можно даже перезагружать страницу. Другого функционала и пользы она не несет;
- неочевидный механизм переключения между классами билетов: чтобы просмотреть варианты на бизнес, это нужно указать при поиске. Далее уже все, момент упущен;
- рейсы выходят полотном, в котором неудобно перемещаться;
- чтобы посмотреть подробности и выбрать тариф, нужно жать кнопку «выбрать рейс». Которая открывает отдельное окно и закрывает за счет затемнения остальные рейсы. Сравнивать неудобно.
Что предложили мы:
- вычистить верхнее меню, чтобы не отвлекать пользователя от процесса выбора билета;
- вынести на видное место переключатель между классами билетов: эконом/комфорт/бизнес;
- разбить рейсы на обособленные блоки, которые гораздо комфортнее читаются;
- добавить раскрывающуюся карточку при клике на рейс — так пользователь видит всю необходимую информацию без нужды прыгать со страницы на страницу и что-то запоминать;
- после выбора добавить сводку параметров, с возможностью уточнить детали и внести изменения при необходимости;
- добавить предварительный итог по стоимости.
Как и на главной, сделали немного более свежий дизайн и убрали тяжелые для глаз элементы.
Страница оформления заказа
Наконец, самое важное — оформление и оплата.
Здесь чаще всего возникают ошибки и сложности. И эта же страница решает, будет покупка совершена или нет. Главная проблема Аэрофлота здесь — отсутствие возможности перемещаться по разным шагам, а также формы заполнения будто созданные, чтобы запутать клиента.
Какие вещи стоит исправить здесь:
- индикаторов шагов нет, а значит, неясно, сколько времени займет весь процесс. И если клиент заскочил посмотреть билеты на рабочем перерыве, он скорее всего отложит покупку или забросит на половине. Вернуться при этом невозможно: любой шаг назад обнуляет весь поиск;
- отсутствие указания на то, что уже выбрано на каждом шаге — гораздо спокойнее, когда есть возможность в любой момент убедиться, что все идет как надо и даты и время не выбраны ошибочно;
- сейчас Аэрофлот под каждое новое действие выделяет отдельную страницу. В итоге пользователь бесконечно прыгает в новый интерфейс. Информация не группируется, легко запутаться и забыть, что в итоге выбрал;
- неочевидны дополнительные услуги. Это путает: включены они или нет, как подключить, если что-то нужно или, наоборот, отключить лишнее. Страница с допами выглядит громоздко и перегружено;
- и, наконец, ввод данных — та самая боль с невозможностью что-то поправить без того, чтобы начать весь процесс с нуля.
Здесь мы тоже предложили свои варианты реализации:
- разбили весь процесс на несколько понятных этапов, которые закрепили в виде индикатора в самом верху. Каждый шаг отображается в виде ссылки — между ними можно спокойно переключаться и при необходимости что-то править, без потери всего прогресса. Аллилуйа!
- параллельно на каждом этапе подсвечиваем в специальном блоке все, что ранее выбрано — чтобы была возможность проверить информацию в любой момент;
- упростили интерфейс, сведя все до 2 основных блоков: данные пассажира и дополнительные услуги. Это соответствует логике и убирает необходимость множества страниц, по которым вынужден прыгать пользователь;
- дополнительные услуги разложили и подсветили, чтобы было ясно, что включено или нет, и как подключить при необходимости;
- добавили финальную страницу перед оформлением — итог всей проделанной ранее пользователем работы. Это позволяет лишний раз проверить все целиком, чтобы не приходилось прыгать по этапам назад. На данных пассажира разместили кнопку «редактировать», так как чаще всего ошибки возникают именно здесь.
Получили удобный, логичный и понятный сервис покупки. С простым и интуитивно понятным прохождением по нему. Каждый шаг позволяет менять параметры, а боковой блок отражает, как это влияет на стоимость.
Что имеем в итоге? Комфортный сайт, который никак не отвлекает пользователя от главной задачи — покупка. Кажется, что компании создают сайты именно для этого, нет?
Работу по сайту Аэрофлота провел наш дизайнер Денис Голубев. Предлагаем вам немного подсмотреть за результатом анализа и разработки. Главные принципы подхода Дениса:
Прежде всего, стояла задача привести интерфейсы в современный вид, с учетом новых реалий и привычных современному пользователю сценариев. Попытаться уйти от сайта, который напоминает районную поликлинику или машину времени, отправляющую в 2000-е.
Мы выявили достаточное количество слабых мест с отсутствием необходимого пользователю функционала, информации или простого дизайна, который позволит нормально считывать страницы. Сайт заставляет вас переходить все глубже и глубже, чтобы добраться до необходимых деталей перед тем как принять решение и всё-таки купить билеты.
Огромное количество лишних информационных блоков сбивают пользователя с пути и не дают добраться до ожидаемого финала. Не нужно прикладывать много усилий, чтобы придать устаревшему сайту новый вид, важно пересмотреть подход, делая упор на конечного пользователя и сделать его флоу максимально простым и привычным
В примере с Аэрофлотом мы проработали только основное, не затрагивая весь сайт. Полноценная переработка с упором на пользователя и его удобство повышает конверсию, а значит и продажи, в разы. Вот простой пример в цифрах от одного из наших клиентов — сделали редизайн сайта онлайн-курсов по психологии. Цифры до и после говорят сами за себя: и без того неплохие показатели мы помогли увеличить вдвое.
Но разработка страницы с упором на пользователя дает не только это. Чем удобнее клиенту раз за разом работать с вами в онлайне, чем меньше времени он затрачивает с вами на решение своих задач, тем больше он лоялен компании. С каждым посещением его отношение к вам улучшается, ему гораздо проще купить снова у вас, а не искать у конкурентов. Плюс рекомендации — тоже никто не отменял.
А вы на чьей стороне? За пользователя, или, как и Аэрофлот, предлагаете клиентам самим покопаться в куче текстов, функций и форм?
Если за пользователя, welcome к нам) Мы найдем тонкие места на вашем сайте и поправим их, чтобы генерить конверсию на 50-100% выше, чем есть сейчас. В декабре — на особых, выгодных условиях. Сделайте полезный новогодний подарок своему бизнесу!
Тут кто-то собрал адовый UX форм с вводом телефона:)
Выглядит круто. Предлагаем ставить такие на формах тех. поддержки по типу "оставьте свой номер, мы вам перезвоним", чтобы обращений в ТП было меньше. Л-лайфхак
да там и человеку далекому от ux/ui понятно что все через одно место сделано. Даже при покупке билетов нельзя выбрать разные тарифы для нескольких пассажиров, например 2 взрослых+ ребенок, нахрена нам всем 3 багажа? вот хочу я гибко это все делать. Нет, тут все так кондово и коряво, а очень неочевидных мест просто навалом, те же страховки и черт знает что, надо инфу блоками забирать что ли. да еще и редактирование уже заполненных данных тоже криво сделано. Видимо это какая то отличительная черта крупных компаний или государственных или окологосударственных учреждений. Если кто-нибудь заполнял инфу на визы США меня поймет, просто попаболь сплошная, очень угарал, что заполняя данные за ребенка и выбирая пункт семейное положение - холост, нужно объяснить, почему он еще холост, хотя уже может ходить в садик)
Не думаю что они хоть к чему-то прислушаются. Если кто-то слышал историю про Илью Соболева и как их с женой рассадили и ребенка грудного прикрепили к отцу, то я думал они сделали выводы, ведь времени уже прошло достаточно. Но, как оказалось, нет, со мной произошла та же история, так же мать пересадили в комфорт, а ко мне прикрепили ребенка, хорошо, что уже не грудного, но все равно, где логика?!
Ну раньше примерно так и было: Везде где есть приставка "ГОС" - нормального функционала не жди. Но как минимум Госуслуги уже растопили этот лёд, будем надеяться, что в скором времени подобные приятные изменения коснутся и остальных отраслей/организаций.
Про визу и ребенка - оч смешно))) Действительно уже в садике, почему бы не заключить брак.....
А у кого можно разные тарифы пассажирам выбрать? Я думаю это даже специально делают, чтобы часть людей забила и купила более дорогой тариф на всех.
Мне кажется этого нигде нельзя сделать, отдельно выбрать разные тарифы.