Как интерфейс помогает продавать лидерам рынка fashion

Категория фэшн – один из самых крупных сегментов в сфере eCommerce. По данным Statista, в 2020 году мировой онлайн-рынок моды достигнет $713 миллиардов. Чтобы продавать завтра – соответствовать ожиданиям требовательного пользователя нужно уже сегодня. Что это значит? Это значит, что бренды должны постоянно работать над улучшением интерфейса своего сайта, его мобильной версии и приложения. 

 

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

 

eCommerce-report-2019_мобильный трафик

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

 

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

Главная страница: важные детали

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

 

lamoda_юзабилити главной страницы

 

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

2. Поиск лаконично вписан в шапку и правильно акцентирован, что повышает его шансы быть использованным.

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

Бургерное меню: «спасательный круг» пользователя

Уже привычный элемент, но далеко не все фэшн-ритейлеры подходят к нему с должным вниманием, а это «спасательный круг» пользователя. Если он, пользователь, забредет не туда, то именно такое меню вернет его на нужную страницу. Этот элемент хорошо реализован в мобильной версии сайта dressa.com.ua:

 

dressa_юзабилити бургерного меню

 

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

 

Понятный UX – обязательное требование, если ваша целевая аудитория – представители поколения X. «Иксы» не всегда понимают механику сайта, им нужны четкие инструкции и простой интерфейс. Больше о том, чего хотят покупатели одежды из разных поколений и как до них дотянуться, рассказываем в одном из последних материалов.

 

Каталог и карточка товара

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

 

каталог и карточка товара_онлайн_магазин_одежды

 

В этом пункте одно из лучших решений внедрил интернет-магазин Lamoda:

 

Lamoda_карточка товара_хорошее юзабилити

 

1. Есть кнопка возврата в раздел вместо хлебных крошек. Весьма удобное решение, потому что пользователь должен легко вернуться туда, откуда пришел.

2. Блок для усиления интереса к товару не навязчивый и хорошо вписан.

3. Цена вынесена в отдельный блок. Считаю удачным решением, поскольку это один из основных параметров.

4. Размеры представлены сразу в 2-х видах: британский и украинский. Также при выборе размера есть вибро-отклик, такое решение встречаю впервые, и это очень круто. Единственное замечание – не стоило добавлять свайп к такому важному элементу. Найдется процент пользователей, которые не увидят свой размер за пределами экрана и не додумаются проскроллить.

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

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

 

 

answear_неудачное решение для карточки товара

 

1. Цена обязательно должна быть указана возле CTA-кнопки:

  • это зона принятия решения;
  • при изменении цвета или размера нередко меняется и цена, поскольку последние экземпляры часто продаются со скидками;
  • такое размещение элементов расходится с привычным для пользователя, может запутать.

2. Цвет CTA-кнопки такой же, как и у кнопки для просмотра видео, что размывает ее значимость.

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

Теперь перейдем к самому «скользкому» месту во многих интернет-магазинах одежды – странице оформление заказа. Чаще всего пользователи уходят именно с нее. Так случается, потому что ритейлерам на этой странице нужно не только донести много информации до покупателя, но и получить данные от него.

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

 

answear_юзабилити корзины интернет магазина одежды

 

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

2. Заказ свернут с возможностью его увидеть, так ритейлер убрал отвлекающие моменты, но пользователь при желании может в любой момент просмотреть состав своего заказа.

3. Единственная деталь, к которой могу немного придраться: поля для ввода информации не разделены по категориям.

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

 

 

1. Очевидно, что чистота и неперегруженность играет Answear на руку. Оформление разбито на три этапа. Вообще поэтапность – очень сильный инструемент, рекомендую применять его всем: человеку проще считывать информацию шаг за шагом и быть уверенным, что он ничего не упустил.  2. Заказ свернут с возможностью его увидеть, так ритейлер убрал отвлекающие моменты, но пользователь при желании может в любой момент просмотреть состав своего заказа.  3. Единственная деталь, к которой могу немного придраться: поля для ввода информации не разделены по категориям информации.

 

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

 

leboutique_адптация под мобильную версию

 

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

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

_________

Интернет-магазины одежды работают с разными аудиториями и предоставляют различный сервис, поэтому не все решения, о которых я рассказал, универсальны. Основное, что нужно помнить – современный пользователь должен приходить к заказу максимально быстро и комфортно.

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

 

Если вы хотите работать с нами,
давайте начнем с обсуждения задачи

Получить консультацию

Получайте новости интернет-маркетинга

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

Если вы хотите работать с нами,
давайте начнем с обсуждения задачи

Получить консультацию

Есть задача?

Давайте обсудим!

Получайте новости интернет-маркетинга