Категорія фешн - один з найбільших сегментів у сфері eCommerce. За даними Statista, у 2020 році світовий онлайн-ринок моди сягне $713 млрд. Щоб продавати завтра, потрібно відповідати очікуванням вимогливого користувача вже сьогодні. Що це означає? Що бренди повинні неприривно працювати над поліпшенням інтерфейсу свого сайту, його мобільної версії і додатку.
Зосередившись на головній меті сайту - це продаж і приріст постійної аудиторії, ми виявляємо його слабкі місця і пропонуємо рішення до розвитку вашого бізнесу в короткостроковій і довгостроковій перспективі.Стратегія Mobile First дісталася й України. Сьогодні оптимизація під мобільну версію важливіша за десктоп. Якщо подивитися на динаміку ринку, у 2020 відбудеться переломний момент - кількість транзакцій з мобільних пристроїв вперше перевищить показники робочого столу, а у розрізі сеансів мобільний трафік вже обійшов десктопний більш аніж вдвічі.
Арт-директор відділу проектування і дизайну Promodo Павло Ченчик проаналізував, які прийоми використовують лідери українського fashion eCommerce для ефективних продажів на своїх сайтах. Оцінював тільки мобільну версію сайтів, як найрелевантнішу у цьому сегменті. Про ТОП-4 фішки, які варто взяти на озброєння, читайте у матеріалі.
ГОЛОВНА СТОРІНКА: ВАЖЛИВІ ДЕТАЛІ
Найчастіше користувачі потрапляють на головну сторінку інтернет-магазину одягу завдяки прямим переходам або брендовим запитам. Серед усіх сайтів хочу звернути увагу на вдалі рішення, які реалізовані на lamoda.ua:
![lamoda_yuzabiliti_glavnoy_stranicyi](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05d84254dd05a2a6333_63764914d30a64c4b31e9b7e_lamoda_yuzabiliti_glavnoy_stranicyi.webp)
1. Верхнерівнева навігація, яка відразу ж дає можливість перейти у потрібний розділ без додаткових взаємодій.
2. Пошук лаконічно вписаний в шапку і правильно акцентований, що підвищує шанси того, що користувачі будуть його використовувати.
3. Компактно представлені категорії, які легко зчитуються, додатково згорнуті у бургерне меню — і це не помилка. Таким чином рітейлер створює більше шляхів для наступного кроку користувача.
БУРГЕРНЕ МЕНЮ: «РЯТІВНИЙ КРУГ» КОРИСТУВАЧА
Вже звичний елемент, але далеко не всі фешн-рітейлери підходять до нього з належною увагою, а це «рятівний круг» для користувача. Якщо користувач потрапить “не туди”, то саме таке меню поверне його на потрібну сторінку. Цей елемент добре реалізований у мобільній версії сайту dressa.com.ua:
![dressa_yuzabiliti_burgyernogo_myenyu](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05d3b83de1b6675e352_63764914d30a64fcd51e9b7f_dressa_yuzabiliti_burgyernogo_myenyu.webp)
Замість сухого списку — витримані і якісні зображення як на першому рівні меню, так і на другому, що прискорює зчитування користувачем.
Зрозумілий UX - обов'язкова вимога, якщо ваша цільова аудиторія - представники покоління X. «Ікси» не завжди розуміють механіку сайту, їм потрібні чіткі інструкції і простий інтерфейс. Більше про те, чого хочуть покупці одягу різних поколінь і як до них дотягнутися, розповідаємо в одному з останніх матеріалів.
Більшість інтернет-магазинів одягу для карток товару використовують кілька типових рішень: деякі показують тільки доступні кольори одягу, інші — розміри, але ніде в українському сегменті не зустрічав поєднання цих варіантів. У самому каталозі дуже часто не вистачає можливості перемикання на відображення більшого розміру фото — тільки одна картка на всю ширину.
![katalog_i_kartochka_tovara_onlayn_magazin_odyezhdyi](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05d9411911c9034a2d2_6376491422f58692cfb396e2_katalog_i_kartochka_tovara_onlayn_magazin_odyezhdyi.webp)
Одне з найкращих рішень впровадив інтернет-магазин Lamoda:
![lamoda_kartochka_tovara_horoshyeye_yuzabiliti](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05e8b148e9129aaca41_6376491361d89504a78dc339_lamoda_kartochka_tovara_horoshyeye_yuzabiliti.webp)
1. Є кнопка повернення до розділу замість хлібних крихт. Досить зручне рішення, тому що користувач повинен легко повернутися туди, звідки прийшов.
2. Блок для посилення зацікавленості товаром не нав'язливий і гармонічно розміщений.
3. Ціна відображена в окремому блоці. Вважаю вдалим рішенням, оскільки це один з основних параметрів.
4. Розміри представлені відразу у 2-х видах: британський та український. Також під час вибору розміру є вібро-відгук, таке рішення зустрічаю вперше, і це дуже круто. Єдине зауваження — не варто додавати свайп до такого важливого елементу. Знайдеться відсоток користувачів, які не побачать свій розмір за межами екрану і не додумаються проскролити.
5. Вказана дата доставки у регіон, нехай навіть і з уточненням «... і пізніше». Конкретні цифри і дати добре впливають на прийняття користувачем кінцевого рішення.
А ось онлайн-магазин Answear для картки товару використовував не найвдаліше рішення:
![answear_nyeudachnoye_ryeshyeniye_dlya_kartochki_tovara](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05d45988932765fb570_637649136bacf34c3e5341de_answear_nyeudachnoye_ryeshyeniye_dlya_kartochki_tovara.webp)
1. Ціна обов'язково повинна бути вказана біля CTA-кнопки:
• це зона прийняття рішення;
• при зміні кольору або розміру нерідко змінюється й ціна, оскільки останні екземпляри часто продаються зі знижками;
• таке розміщення елементів відрізняється від звичного для користувача, може заплутати.
2. Колір CTA-кнопки такий самий, як і у кнопки для перегляду відео, що розмиває її значимість.
СТОРІНКА ОФОРМЛЕННЯ ЗАМОВЛЕННЯ: ДІЙТИ ДО ФІНІШУ
Тепер розглянемо найпідступніше місце у багатьох інтернет-магазинах одягу — сторінка оформлення замовлення. Найчастіше користувачі залишають саме її. Так трапляється, тому що рітейлерам на цій сторінці потрібно не тільки донести багато інформації до користувача, а й отримати його дані.
Для наочності давайте порівняємо кілька варіантів її реалізації у мобільній версії онлайн-магазинів: Answear, Dressa і Leboutique.
![answear_yuzabiliti_korzinyi](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05d9411919e1a34a2d1_63764913735960af8eb16c6d_answear_yuzabiliti_korzinyi.webp)
1. Очевидно, що чистота і неперевантаженість грає Answear на руку. Оформлення розділене на три етапи. Взагалі поетапність — дуже сильний інструмент, рекомендую застосовувати його всім: людині простіше зчитувати інформацію крок за кроком і бути впевненим, що він нічого не втратив.
2. Замовлення згорнуте, з можливістю його побачити — так рітейлер прибрав відволікаючі моменти, але користувач при бажанні може в будь-який момент переглянути склад свого замовлення.
3. Єдина деталь, до якої можу трохи причепитися: поля для введення інформації не розділені за категоріями.
Магазин Dressa використовує не покроковий тип, але це теж цілком коректні рішення: чітко розділяти на сторінці всю інформацію, опціональний вибір і поля для введення.
![dressa_yuzabiliti_stranicyi_oformlyeniya_zakaza](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05d8ce7c62d7cc3d4e1_637649140d3167f42c06248d_dressa_yuzabiliti_stranicyi_oformlyeniya_zakaza.webp)
А ось Leboutiqe практично не адаптував свою сторінку оформлення замовлення під мобільні пристрої: маленький розмір шрифту, дрібні елементи, неактуальний для етапу замовлення блок з описом сервісних вигод, акценти на бонусах, а не на сумі замовлення.
Користувача на цьому етапі турбує коректність усіх грошових сум, тому не варто відволікати його увагу іншими цифрами.
![leboutique_adptaciya_pod_mobil'nuyu_vyersiyu](https://cdn.prod.website-files.com/630ca98fcd033036c3a993f5/637cb05d106afabc27ec7055_63764914735960ed24b16c76_leboutique_adptaciya_pod_mobil%252527nuyu_vyersiyu.webp)
Вцілому сам сайт leboutique.com орієнтований на оформлення замовлення за телефоном, що збільшує навантаження на колл-центр і іноді призводить до спотворення даних. Крім того, частина споживачів не хоче взаємодіяти з операторами колл-центру.
Але на цьому етапі все онлайн-магазини одягу врахували одну важливу деталь — відсутність відволікаючих посилань. Про що мова? Зверніть увагу на шапку, коли переходите на сторінку оформлення замовлення на будь-якому пристрої. Щоб сконцентрувати усю увагу користувача на фінішній прямій і не відвести в інший розділ, рітейлери умисно прибирають усі додаткові блоки.
_________
Інтернет-магазини одягу працюють з різними аудиторіями і надають різний сервіс, тому не всі рішення, про які я розповів, універсальні. Основне, що потрібно пам'ятати — сучасний користувач повинен приходити до замовлення максимально швидко і комфортно.
на розсилку