11 июля 2017, 15:20 21973 16

Новый дизайн для сайта «Аэрофлота»: кейс, которого не было

Дизайнеры PINKMAN подумали, как сделать сайт главной российской авиакомпании удобнее.

Новый дизайн для сайта «Аэрофлота»: кейс, которого не было

Aeroflot conception

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

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

Что ж, поможем национальному авиаперевозчику несколькими макетами от компании PINKMAN.

Сначала — ресёрч

Открываем список лучших авиакомпаний мира и просматриваем пятёрку сайтов.

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

Намного лучше, но не самый современный подход к лэйауту, и форма слева очень грузная

Цифровая Пятница 2017

COSSA приглашает на первую в истории массовую распродажу онлайн-сервисов для бизнеса — Цифровую Пятницу 2017!

Сразу 85 компаний объявили неделю скидок и специальных условий на свои продукты для предпринимателей: CRM-системы, сервисы для управления бизнес-процессами, инструменты интернет-маркетинга и другие, более 17 категорий решений.

Акция идет всего неделю с 17 по 24 ноября, так что поторопитесь — и удачного вам b2b-шоппинга!

Реклама

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

Сайт S7 настроен на определение языка операционной системы, поэтому интерфейс мне показали на английском языке. Архитектура понятная: большой баннер, затем форма. Интерфейс — один из самых современных среди тех, что мы просматриваем

Архитектура страницы немного необычная: сверху форма, потом баннер. Интерфейс посовременнее, но собран тоже не очень приятно

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

Посмотрим, что интересного есть на сайтах агрегаторов.

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

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

Лидер хит-парада, чистый/приятный/понятный «Авиасейлс». Интерфейс современный, ничего лишнего, все понятно

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

  • форма должна быть в первом экране;
  • требуется место под рекламное сообщение;
  • нужно поддерживать имидж компании;
  • основные действия, к которым привыкли пользователи, нужно вынести в поле зрения первого экрана.

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

Так как для концепции требуется не только главная страница, но и следующая, пройдёмся по шортлисту. Вылетать будем из Нью-Йорка в Лондон, 2 взрослых + 1 ребёнок, чтобы увидеть максимальное количество различных вариантов выдачи.

Ресёрч выдачи

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

«Авиасейлс» выглядит проще/приятнее. Размер карточек оптимальнее, но и визуальное количество возможных настроек кажется более скудным

S7 убил, практически ничего не понятно

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

Практически можно начинать рисовать

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

Вот сценарии, которые выделили мы:

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

Будем использовать этот список и перечисленные принципы, чтобы собрать нашу концепцию.

Дизайн

Мы в студии не занимаемся прототипированием, потому что сегодня тратить на это отдельное время бесполезно: мы последовательно собираем макеты в sketch, и работа происходит фактически по принципу progressive jpeg.

Однако прежде, чем бросаться в бой, стоит немного подумать над структурой страницы.

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

Помимо этого, на главной странице очень много кнопок.

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

  • онлайн-регистрация,
  • проверить бронирование,
  • онлайн-табло,
  • расписание рейсов.

Всё остальное — в бургер-меню.

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

Для интерфейсного шрифта будем использовать Roboto и Roboto Condensed — во-первых, они бесплатные, а во-вторых, выглядят приятно, к тому же condensed-версию удобно использовать, чтобы экономить место. Для акциденции — DIN Round, он хорошо сочетается с roboto. Главную страницу пока бросим, пойдём вперёд.

Дизайн выдачи

До текущего обновления при выборе билетов была одна очень важная, но неудобная и уж тем более неприятная на вид фича. Выглядела она как-то так.

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

Актуальный интерфейс

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

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

В общем, принимаем это во внимание и делаем.

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

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

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

Развёрнутое состояние; свёрнутое состояние; состояние, когда ничего не добавлено в корзину

Остаётся доработать несколько вещей:

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

Вносим изменения — и концепция для десктопа готова.

Главная страница стала значительно проще. Форма избавилась от лишних чекбоксов, переключателей и даже слов, заодно теперь воспринимается проще. А баннер справа стал самостоятельной единицей, которая отлично доносит рекламное сообщение, без ленточек и лишних затемнений.

Страница выдачи стала чище: нет заднего замыленного фона, нет левой пустой колонки. Зато пользователь получил возможность сравнивать данные и принимать более взвешенное решение. Да и процесс заказа стал проще.

Но всё-таки, кажется, выглядит она слишком профессиональной и сложной. Далеко не всем нужно это подробное сравнение, к тому же второй вариант помог бы провести А/Б-тест и настроить интерфейс для конечных пользователей. Поэтому мы сделаем переключатель видов и еще один более простой интерфейс.

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

Адаптив

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

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

Интерфейс слева выглядит как каша, потому что непонятно, на основе чего принимать решение. В интерфейсе справа акцент на стоимость делает навигацию проще. В итоге получается вот такой интерфейс.

Форму прячем в кнопку, чтобы не мешала принимать решения. Дни недели прокручиваем пальцем, не забывая сообщить пользователю о такой возможности. Оставляем элемент корзины. Продвинутый интерфейс скрываем, он сюда всё равно не поместится — при клике на кнопку «Выбрать» появится слой, в котором можно будет выбрать удобный тариф. Все-таки мобильный телефон.

В заключение

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

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

Нам удалось решить несколько поставленных задач:

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

Ну и вообще, сайт теперь выглядит современно и достойно.

В следующий раз попробуем футурологический подход. Stay tuned!

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.

Комментарии:

- +4 +
Dmitry Ukolov #
11.07.2017 18:27
Ребята, вы молодцы!
Круто, что вы публично заявили о проблеме, видно, что вложились в проект – говорит о большой вовлеченности и желании что-то изменить!
Тоже считаем, что сайт Аэрофлота «немного» устарел. Мы задались этим же вопросом ещё в прошлом году и, как результат, это вылилось в два концепта:

Вариант 1: https://youtu.be/UCSToaZaesk
Вариант 2: https://youtu.be/FoXpPP8-gQQ

Жаль, что пока наши труды остаются творчеством...
Ответить
- +1 +
Nikolay Fedotov #
12.07.2017 10:48
Круто! Понравилось решение таблицы выдачи результатов на мобильной версии!

Грамотный подход к проекту, выглядит как руководство, надо взять на заметку)
Ответить
- -3 +
Nikita Babkin #
12.07.2017 14:38
В новом дизайне не увидел решения по увеличению конверсии, дизайн ради дизайна - не интересно.
Ответить
- 0 +
Ali Sporadec #
12.07.2017 16:08
Здесь нужен именно дизайн ради дизайна.
Ответить
- 0 +
Миша Розов #
12.07.2017 17:06
Чтобы говорить о конверсии, нужны замеры текущего состояния и доступ к поведению пользователей. Пальцем в небо говорить о конверсии бессмысленно

Тем более, здесь вообще прямой воронки вида зашел — подобрал — купил нет, это куда более длинные сценарии.
Ответить
- 0 +
Билалов Ильяс #
30.07.2017 20:10
О какой конверсии идёт речь? Это же Вам не бублики покупать.
90% людей покупают билеты исходя из цены. Если цена не конкурентоспособна, то тут ни одна решение не поможет. Это во-первых.

Во-вторых, чтобы увеличивать конверсию нужно иметь исходные данные - что есть на данный момент.

В-третьих, в такой огромной корпорации такие вещи как повышение конверсия не решаются дизайнерами. Это целый комплекс работ, в котором задействованы множество должностных лиц.
Ответить
- 0 +
Игорь Корниенко #
13.07.2017 15:10
Мода пошла редизайнить каких либо монстров и подавать при этом результат как глубоко осмысленные решения проблемы.
На основании каких данных принималось то или иное решение?
Это из серии: "Мы нарисовали дизайн а теперь ищем убедительное подтверждение правильности решений".
Ответить
- 0 +
Миша Розов #
14.07.2017 19:00
Данные, на основании которых нарисован этот дизайн, перечислены выше. Если бы это была клиентская работа, были бы взяты реальные данные и проведена аналитика.
Ответить
- 0 +
U-Jeen Flowers #
13.07.2017 21:47
S7 убил? вроде все ясно и понятно пасссажиру, в отличии от тех же агрегаторов, которые не выдают вариаций тарифов. Летайте чаще.
Ответить
- 0 +
Миша Розов #
14.07.2017 18:59
Спасибо за совет
Ответить
Выглядит стильно и современно. Молодцы! Сложно судить конечно о реальном удобстве и эффективности не попробовав на деле. Меня удивил подход к работе без прототипирования. Ладно когда делаешь для себя. Но, а если это заказчик? Можно же потерять кучу времени... я думаю не стоит объяснять почему.
Ответить
- 0 +
Миша Розов #
14.07.2017 19:02
Сухое проектирование, когда дизайнеры разрисовывают макетики серенькими квардратиками, а потом другие дизайнеры отрисовывают UI, учитывая сегодняшние возможности софта, вещь достаточно бесполезная. Можно рисовать и проектировать одновременно, ничего не мешает.

Серые квадратики придумали студии во времена фотошопа, когда внесение правок в макеты реально могло занимать до двух дней работы, а то и больше.
Ответить
- 0 +
Alex Fedotov #
25.07.2017 11:58
Прототипы для того и создаются, что бы протестировать гипотезу. Серые квадратики это прошлое. Вы правильно делаете что уходите от них.

За визуал пятерка, но реальную пользу сложно оценить. Редизайн получился основательным. Консервативных пользователей такие изменения могут напугать.
Ответить
- 0 +
Alexandr Martynenko #
19.07.2017 16:49
"Чтобы не использовать нативные чекбоксы (в таком количестве они выглядят бородавками)" -- вам там надо было использовать не чек-боксы, а радио-баттон. В том месте интерфейса нельзя выбрать несколько вариантов.

И как-то не сильный результат. Хороший результат испытательного задания для дизайнера при приеме на работу, но посредственный для студии, размещающей кейс результата на профильных сайтах. Что в плане стиля (не похоже на Аэрофлот), что в плане компоновки информации (рассмотрена самая простая ситуация с рейсом в одну сторону, как только добавится обратный рейс - весь интерфейс придется пересмотреть), что в плане мелочей, которые стоило бы проработать для чистоты интерфейса (особенно в мобильной версии). В общем, замах на рубль, а удар на копейку.
Ответить
- 0 +
Напоминает метод "новичка" - Выберу сайт-гуано, сделаю новый дизайн и предложу его клиенту. Не согласится, то хоть в портфолио добавлю, а кто может и подумает, сотрудничал с компанией гигантом (пиар) :)
Без обид, всего лишь ассоциация :)
Но сделали хорошо
Ответить
- 0 +
Oversky #
02.08.2017 12:12
Выглядит приятно, но пара вопросов:

1. Круглая иконка со стрелками туда-обратно между инпутами дат вылета-прилёта -- что это и зачем? Пользователи привыкли, что такая кнопка меняет местами пункты вылета-прилёта и находится между этими инпутами.

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

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

4. Сначала выбор билета туда, потом обратно -- вот это как раз могло бы быть удобно на разделённом пополам экране.
Ответить
Ответить?

Самые интересные статьи, обзоры и размышления —
в рассылке!

Email *


Подпишись!


Вход на cossa.ru

Уже есть аккаунт?
Выбирай любой вариант входа:
Facebook Twitter Vkontakte

Используйте свой аккаунт в социальной сети Facebook или Twitter, чтобы пользоваться сайтом

Не забудьте написать email на странице своего профиля для управления рассылкой