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 вбив, майже нічого не відомо

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

адаптуюся

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

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

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

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

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

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

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

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

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

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

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

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