Як інтерфейс допомагає продавати лідерам ринку fashion

Категорія фешн - один з найбільших сегментів у сфері eCommerce. За даними Statista, у 2020 році світовий онлайн-ринок моди сягне $713 млрд. Щоб продавати завтра, потрібно відповідати очікуванням вимогливого користувача вже сьогодні. Що це означає? Що бренди повинні неприривно працювати над поліпшенням інтерфейсу свого сайту, його мобільної версії і додатку. 

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

 ecommerce-report-2019_mobil'nyiy-trafik

Дані по регіону СЕЕ, eCommerce report Promodo 2019

Арт-директор відділу проектування і дизайну Promodo Павло Ченчик проаналізував, які прийоми використовують лідери українського fashion eCommerce для ефективних продажів на своїх сайтах. Оцінював тільки мобільну версію сайтів, як найрелевантнішу у цьому сегменті. Про ТОП-4 фішки, які варто взяти на озброєння, читайте у матеріалі.

Головна сторінка: важливі деталі 

Найчастіше користувачі потрапляють на головну сторінку інтернет-магазину одягу завдяки прямим переходам або брендовим запитам. Серед усіх сайтів хочу звернути увагу на вдалі рішення, які реалізовані на lamoda.ua:

lamoda_yuzabiliti_glavnoy_stranicyi

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

2. Пошук лаконічно вписаний в шапку і правильно акцентований, що підвищує шанси того, що користувачі будуть його використовувати. 

3. Компактно представлені категорії, які легко зчитуються, додатково згорнуті у бургерне меню — і це не помилка. Таким чином рітейлер створює більше шляхів для наступного кроку користувача.

Бургерне меню: «рятівний круг» користувача 

Вже звичний елемент, але далеко не всі фешн-рітейлери підходять до нього з належною увагою, а це «рятівний круг» для користувача. Якщо користувач потрапить “не туди”, то саме таке меню поверне його на потрібну сторінку. Цей елемент добре реалізований у мобільній версії сайту dressa.com.ua:

dressa_yuzabiliti_burgyernogo_myenyu

Замість сухого списку — витримані і якісні зображення як на першому рівні меню, так і на другому, що прискорює зчитування користувачем.

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

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

katalog_i_kartochka_tovara_onlayn_magazin_odyezhdyi

 Одне з найкращих рішень впровадив інтернет-магазин Lamoda:

lamoda_kartochka_tovara_horoshyeye_yuzabiliti 

1. Є кнопка повернення до розділу замість хлібних крихт. Досить зручне рішення, тому що користувач повинен легко повернутися туди, звідки прийшов. 

2. Блок для посилення зацікавленості товаром не нав'язливий і гармонічно розміщений. 

3. Ціна відображена в окремому блоці. Вважаю вдалим рішенням, оскільки це один з основних параметрів. 

4. Розміри представлені відразу у 2-х видах: британський та український. Також під час  вибору розміру є вібро-відгук, таке рішення зустрічаю вперше, і це дуже круто. Єдине зауваження — не варто додавати свайп до такого важливого елементу. Знайдеться відсоток користувачів, які не побачать свій розмір за межами екрану і не додумаються проскролити.

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

А ось онлайн-магазин Answear для картки товару використовував не найвдаліше рішення:

answear_nyeudachnoye_ryeshyeniye_dlya_kartochki_tovara

1. Ціна обов'язково повинна бути вказана біля CTA-кнопки:

• це зона прийняття рішення;

• при зміні кольору або розміру нерідко змінюється й ціна, оскільки останні екземпляри часто продаються зі знижками;

• таке розміщення елементів відрізняється від звичного для користувача, може заплутати.

2. Колір CTA-кнопки такий самий, як і у кнопки для перегляду відео, що розмиває її значимість.

Сторінка оформлення замовлення: дійти до фінішу 

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

Для наочності давайте порівняємо кілька варіантів її реалізації у мобільній версії онлайн-магазинів: Answear, Dressa і Leboutique.

answear_yuzabiliti_korzinyi

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

2. Замовлення згорнуте, з можливістю його побачити — так рітейлер прибрав відволікаючі моменти, але користувач при бажанні може в будь-який момент переглянути склад свого замовлення.

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

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

dressa_yuzabiliti_stranicyi_oformlyeniya_zakaza

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

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

leboutique_adptaciya_pod_mobil'nuyu_vyersiyu

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

Але на цьому етапі все онлайн-магазини одягу врахували одну важливу деталь — відсутність відволікаючих посилань. Про що мова? Зверніть увагу на шапку, коли переходите на сторінку оформлення замовлення на будь-якому пристрої. Щоб сконцентрувати усю увагу користувача на фінішній прямій і не відвести в інший розділ, рітейлери умисно прибирають усі додаткові блоки.
_________

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

Захочете отримати юзабіліті-аудит і персональні рекомендації для свого інтернет-магазину — напишіть нам.


Якщо ви хочете працювати з нами,
давайте почнемо з обговорення завдання

Отримати консультацію

Отримуйте новини інтернет-маркетингу

Тільки корисна інформація від експертів Promodo

Якщо ви хочете працювати з нами,
давайте почнемо з обговорення завдання

Отримати консультацію

Отримуйте новини інтернет-маркетингу