Донецкий техникум промышленной автоматики

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

  1. Aeroflot conception Я користуюся сайтом «Аерофлоту» досить часто, і він мені не подобається. Але,...
  2. Весь інтернет-маркетинг за 19 тижнів!
  3. Ресёрч видачі
  4. Практично можна починати малювати
  5. Дизайн
  6. Дизайн видачі
  7. адаптуюся
  8. На закінчення

Aeroflot conception

Я користуюся сайтом «Аерофлоту» досить часто, і він мені не подобається. Але, кажуть, критикувати може кожен, а запропонувати рішення - немає. Тому ми вирішили перемалювати його заново з реалістичним підходом до вирішення: помріяти, щоб він став простіше, приємніше у використанні і краще вирішував деякі з маркетингових завдань. У тексті нижче описується не тільки результат, але і послідовність і хід думок.

До того моменту, як ми зважилися зробити цей неіснуючий кейс, внутрішні сторінки сайту вже встигли трохи оновитися в кращу сторону, але не більше.

Що ж, допоможемо національному авіаперевізнику декількома макетами від компанії PINKMAN.

Спочатку - ресёрч

Відкриваємо список кращих авіакомпаній світу і переглядаємо п'ятірку сайтів.

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

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

Весь інтернет-маркетинг за 19 тижнів!

Cossa рекомендує: онлайн-курс по інтернет-маркетингу від Ingate - digital-агентства з 17-річним досвідом.

  • 17 навчальних блоків з ключових питань інтернет-маркетингу
  • підтримка менторів
  • диплом
  • Стажування в топових агентствах Росії
  • Допомога в працевлаштуванні
Дізнатися більше >>

Реклама

Акценту на формі немає, зате перераховані всі основні сценарії справа. Правда, корпоративний шрифт погано сумісний з використанням в Інтернеті

Сайт S7 налаштований на визначення мови операційної системи, тому інтерфейс мені показали на англійській мові. Архітектура зрозуміла: великий банер, потім форма. Інтерфейс - один з найсучасніших серед тих, що ми переглядаємо

Архітектура сторінки трохи незвичайна: зверху форма, потім банер. Інтерфейс сучасніше, але зібраний теж не дуже приємно

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

Подивимося, що цікавого є на сайтах агрегаторів.

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

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

Лідер хіт-параду, чистий / приємний / зрозумілий «Авіасейлс». Інтерфейс сучасний, нічого зайвого, все зрозуміло

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

  • форма повинна бути в першому екрані;
  • потрібно місце під рекламне повідомлення;
  • потрібно підтримувати імідж компанії;
  • основні дії, до яких звикли користувачі, потрібно винести в поле зору першого екрану.

Тут варто зауважити, що при замовний розробці ми отримали б доступ безпосередньо до аналітики сайту «Аерофлоту» і склали б конкретний список найпопулярніших дій.

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

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

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

На відміну від головної сторінки, тут все круто. Але це агрегатор, і його цінність в тому, щоб дати нам якнайбільше налаштувань для пошуку самого підходящого рейсу. Добре відображаються альтернативи за загальними польотів, є колірне маркування туди-назад. У мінуси запишемо хіба що розмір одного квитка по висоті

У мінуси запишемо хіба що розмір одного квитка по висоті

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

Розмір карток оптимальніше, а й візуальне кількість можливих налаштувань здається більш убогим

S7 вбив, майже нічого не відомо

S7 вбив, майже нічого не відомо

Класичне для «Аерофлоту» розподіл: спочатку вибираєш білет в одну сторону, потім в іншу. У нашому інтерфейсі збережемо цей принцип, до нього всі звикли. Зовсім немає фільтрів переваги за часом, але з якогось дива: квитків на кожен запит відносно небагато, немає сенсу фільтрувати. І в такому ключі дуже дивно виглядає використання лівої колонки. Можливо, на майбутнє?

Практично можна починати малювати

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

Ось сценарії, які виділили ми:

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

Будемо використовувати цей список і перераховані принципи, щоб зібрати нашу концепцію.

Дизайн

Ми в студії не займаємося прототіпірованії, тому що сьогодні витрачати на це окремий час марно: ми послідовно збираємо макети в sketch, і робота відбувається фактично за принципом progressive jpeg.

Однак перш, ніж кидатися в бій, варто трохи подумати над структурою сторінки.

Однак перш, ніж кидатися в бій, варто трохи подумати над структурою сторінки

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

Крім цього, на головній сторінці дуже багато кнопок.

І майже всі вони не потрібні. Ми залишаємо іконку пошуку, перемикач мов, а з блоку «онлайн-сервіси» залишаємо найпопулярніші:

  • онлайн-реєстрація,
  • перевірити бронювання,
  • онлайн-табло,
  • розклад рейсів.

Все інше - в бургер-меню.

Накидали ось такий концепт. Є багато проблем з вирівнюванням, не вистачає картинки і деяких перемикачів. Загалом, потрібна закінченість.

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

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

До поточного оновлення при виборі квитків була одна дуже важлива, але незручна і вже тим більше неприємна на вигляд фіча. Виглядала вона якось так.

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

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

Виходить, що можливості порівняти вартість різних опцій на різний рейсах немає. Потрібно натискати, запам'ятовувати, потім натискати на інший рейс - і це дуже незручно.

Проблема-номер-два росте приблизно звідти ж. Всі користувачі системи «Аерофлот-бонус» відразу мене зрозуміють. Припустимо, ти збираєшся летіти, і тобі потрібно зрозуміти - летіти за гроші або за милі. Доводиться шукати двічі і порівнювати. А якщо ще пошукати політ в різні дати ...

Загалом, приймаємо це до уваги і робимо.

Загалом, приймаємо це до уваги і робимо

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

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

Щоб не використовувати нативні чекбокси (в такій кількості вони виглядають бородавками), робимо підказку для користувача при наведенні на різні варіанти. Ось так буде виглядати вибір квитка.

Ось так буде виглядати вибір квитка

Розгорнуте стан; згорнуте стан; стан, коли нічого не додано в кошик

Залишається допрацювати кілька речей:

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

Вносимо зміни - і концепція для робочого столу готова.

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

Сторінка видачі стала чистішою: немає заднього замилений фону, немає лівої порожній колонки. Зате користувач отримав можливість порівнювати дані та приймати більш зважене рішення. Та й процес замовлення став простіше.

Але все-таки, здається, виглядає вона занадто професійної і складною. Далеко не всім потрібно це докладний порівняння, до того ж другий варіант допоміг би провести А / Б-тест і налаштувати інтерфейс для кінцевих користувачів. Тому ми зробимо перемикач видів і ще один більш простий інтерфейс.

Тому ми зробимо перемикач видів і ще один більш простий інтерфейс

Схоже на те, що виводиться на актуальній версії, але подача приємніше, інтерфейс кошика для вибору квитків - логічніше, і все-таки є порівняння з милями. Без цього зовсім нікуди.

адаптуюся

Звичайно, який сучасний сайт без адаптивної версії? З головною сторінкою все просто: два блоки встають один під одного, залишається лише вирішити, який з них важливіше. Ми за користувачів: спочатку форма, потім реклама. У реальному житті, напевно, переміг би зворотний варіант.

Загалом, передбачувано. А ось сторінка видачі виявилася дещо складніше: при проектуванні інтерфейсу, в якому об'єкти знаходяться поруч, деталі визначають сприйняття. Ось наприклад.

Інтерфейс зліва виглядає як каша, тому що незрозуміло, на основі чого приймати рішення. В інтерфейсі справа акцент на вартість робить навігацію простіше. В результаті виходить ось такий інтерфейс.

Форму ховаємо в кнопку, щоб не заважала приймати рішення. Дні тижня прокручуємо пальцем, не забуваючи повідомити користувачеві про таку можливість. Ми залишаємо елемент кошика. Високий рівень інтерфейс приховуємо, він сюди все одно не поміститься - при кліці на кнопку «Вибрати» з'явиться шар, в якому можна буде вибрати зручний тариф. Все-таки мобільний телефон.

На закінчення

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

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

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

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

Ну і взагалі, сайт тепер виглядає сучасно і гідно.

Наступного разу спробуємо футурологічний підхід. Stay tuned!

Думка редакції може не збігатися з думкою автора. Ваші статті надсилайте нам на [email protected] . А наші вимоги до них - ось тут .

Можливо, на майбутнє?