Лучшие интерфейсные практики в фэшн-eCommerce: 10 UX-советов

Привет, это Antro. Рассказываем, что внедрить в интернет-магазин и приложение, чтобы делать больше продаж. Осторожно: очень много примеров! Все практики с опорой на исследования и наш практический опыт.

Лучшие интерфейсные практики в фэшн-eCommerce: 10 UX-советов

Несколько дней назад мы выпустили большой обзор фэшн-рынка. В нём мы сложили несколько десятков исследований рынка моды, проанализировали текущее состояние фэшн-eCommerce и осветили тренды индустрии. Получилась презентация больше 150 страниц с множеством инфографики и статистики. Рассказываем, как все эти данные применять на практике — рассмотрели интересные фичи интернет-магазинов, которые помогают продавать больше.

1. Помогайте с выбором размера

Показывать размерную сетку в карточке — база. Не верите — почитайте Baymard Institute. Пользователи могут начать сомневаться в покупке товара, если они не уверены в его размере. Кроме того, если правильный размер трудно найти, то они могут покинуть сайт, чтобы найти дополнительную информацию. А это чревато тем, что они вовсе не вернутся.

Можно сделать выбор размера ещё точнее. Например, показывать дополнительную информацию из отзывов пользователей. Так делает H&M: в магазине добавили специальную шкалу, по которой пользователь может понять, маломерит или большемерит вещь.

Так выглядит шкала на сайте: покупатели в отзывах отмечают, насколько товар соответствует указанному размеру — другие пользователи смогут скорректировать свой выбор
Так выглядит шкала на сайте: покупатели в отзывах отмечают, насколько товар соответствует указанному размеру — другие пользователи смогут скорректировать свой выбор

Показывайте одежду на моделях разных типажей

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

Чтобы покупателю было легче понять, подходит ли ему одежда, представьте её максимально разнообразно. Для этого покажите вещи на моделях разного возраста, телосложения, оттенка кожи. В одной из таких фотографий человек сможет увидеть знакомый образ и представить, как одежда сядет на нём. Эта практика особенно важна, если магазин позиционирует себя открытым для всех, а не закрытым клубом ценителей высокой моды.

Лучшие интерфейсные практики в фэшн-eCommerce: 10 UX-советов
Магазин нижнего белья Curvy Kate делает фото с разными моделями — так проще представить, как одежда выглядит в жизни
Магазин нижнего белья Curvy Kate делает фото с разными моделями — так проще представить, как одежда выглядит в жизни

Указывайте параметры моделей на фото

Ещё один способ, чтобы дать покупателю больше информации — рассказать о модели на фото. Раскройте параметры человека с фотографии, чтобы покупатель мог соотнести их со своими и представить одежду на себе.

GATE31 пишет рост, объём груди, талии и бедёр модели. Указывает, какого размера одежда на ней
GATE31 пишет рост, объём груди, талии и бедёр модели. Указывает, какого размера одежда на ней

Собирайте данные о параметрах покупателя

Упростить выбор пользователя можно, если заранее знать, какая одежда ему подходит. Некоторые магазины и маркетплейсы запрашивают рост, вес и пропорции пользователя. После они предлагают покупателю товары, которые понравились людям со схожими параметрами. Так магазин соотносит пропорции пользователя не с размерами одежды, а с выбором похожих людей — рекомендации чаще выходят удачными.

Лучшие интерфейсные практики в фэшн-eCommerce: 10 UX-советов
ASOS собирает на пользователя целое досье, зато предлагает варианты получше многих консультантов в физических магазинах. При этом за безопасность информации можно не переживать — магазин предупреждает, что данные не раскроют другим людям
ASOS собирает на пользователя целое досье, зато предлагает варианты получше многих консультантов в физических магазинах. При этом за безопасность информации можно не переживать — магазин предупреждает, что данные не раскроют другим людям

Подбор обуви отличается: один и тот же размер может ощущаться иначе у разных брендов. На удобство могут влиять взъём стопы, длина пальцев — каждая компания по-своему подстраивается под эти параметры. Поэтому для выбора обуви нужны другие механики:

ASOS опрашивает пользователей о покупках, а затем автоматически сравнивает размерные линейки брендов и предлагает человеку релевантные товары
ASOS опрашивает пользователей о покупках, а затем автоматически сравнивает размерные линейки брендов и предлагает человеку релевантные товары

Добавляйте отдельные кнопки для каждого размера

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

Zolla сразу показывает, какие размеры в наличии — так пользователь тратит меньше времени на поиск информации
Zolla сразу показывает, какие размеры в наличии — так пользователь тратит меньше времени на поиск информации
12 storiez показывает антипример: заставляет кликать на выбор размера в каждой карточке. Если вы не пришли за чем-то определенным, то лишнее повторяющееся действие может утомить
12 storiez показывает антипример: заставляет кликать на выбор размера в каждой карточке. Если вы не пришли за чем-то определенным, то лишнее повторяющееся действие может утомить

Отображайте доступные размеры в каталоге

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

Чисто, красиво и удобно. Спасибо, Zarina!
Чисто, красиво и удобно. Спасибо, Zarina!

2. Разбивайте товары на категории не слишком подробно

Для более удобной навигации стоит разбивать товары на категории. Но при этом не стоит разделять продукты слишком подробно — это путает пользователя, и найти нужный товар становится только сложнее. Исследования Baymard Institute даже показывают, что из-за излишне подробной разбивки пользователи вовсе отказываются от покупок.

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

Lamoda предлагает выбрать тип брюк в фильтрах внутри категории
Lamoda предлагает выбрать тип брюк в фильтрах внутри категории

3. Объединяйте товары разных цветов

Baymard Institute рекомендует объединять товары разных цветов в одну карточку. Это поможет не загромождать каталог цветовыми вариациями, а показывать только уникальные продукты. Если в магазине продают платье одного фасона в десяти цветах, вы заведёте только одну карточку вместо десяти.

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

Хоть в Zarina и приходится целиться в мелкие иконки выбора цветов, но зато можно посмотреть вариации одежды, не переходя в карточку товара

4. Визуализируйте цвета и оттенки

В отчете по бьюти уже говорили о том, что нужно показывать цвета визуально, а не текстом. По данным Baymard Institute пользователи обычно игнорируют цветовые индикаторы, отображаемые только текстом. Вместе с текстом лучше поставить цветной кружок — он даст более явный сигнал покупателю.

Отличное решение — показывать цветовые вариации не кружочками с оттенками, а сразу на товаре. Так пользователю не придётся открывать новую карточку, чтобы увидеть одежду в другом цвете.

Befree позволяет прямо из карточки посмотреть, как выглядит товар в других расцветках
Befree позволяет прямо из карточки посмотреть, как выглядит товар в других расцветках

В мобильных приложениях такое решение тоже можно реализовать, но стоит предостеречься от трёх проблем, которые обычно возникают:

  • Маленькие иконки. По слишком маленьким и слишком близко расположенным иконкам сложно попасть пальцем — стоит сделать их покрупнее, а между кнопками заложить больше пространства.
  • Скрытые цвета. Интерактивность станет менее полезной, если скрыть часть цветов. Например, написать «ещё 3 варианта». Если оттенков много, лучше использовать карусель.
  • Похожие фото товара. Так бывает, если товар сфотографирован одинаково во всех цветах, а сами цвета плохо различимы. В этом случае пользователи не замечают, что изображение продукта обновляется. Стоит делать отличия между фото более явными, либо иначе обращать внимание на товары других цветов.
Хороший пример — Спортмастер. Миниатюры здесь интерактивные и большого размера
Хороший пример — Спортмастер. Миниатюры здесь интерактивные и большого размера

5. Размещайте большие фото товара

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

Хороший пример показывает SELA — фото одежды занимает половину экрана
Хороший пример показывает SELA — фото одежды занимает половину экрана

6. Покажите одежду в действии

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

Фотографии вещей на моделях уже делают многие интернет-магазины. Но можно пойти дальше и сделать ещё круче — записать с одеждой видео! Это поможет понять, как вещь сидит на теле и ведёт себя в движении: мнётся ли ткань, болтаются ли рукава, красиво ли развевается при ходьбе.

Видео товара от 12storeez помогает разглядеть и текстуру ткани, и ее поведение при движении, и представить себя в нем

7. Показывайте структуру ткани

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

Чтобы сгладить недостаток интернет-продаж и дать пользователю больше ощущений, делайте текстурные фото товара. Это такие изображения, которые помогают разглядеть структуру ткани на одежде. Такое решение не заменит прикосновения к одежде в магазине, но пользователь лучше представит, какой вещь будет на ощупь.

Можно использовать изображение с очень высоким разрешением, либо сфотографировать ткань отдельно — как это делает H&M
Можно использовать изображение с очень высоким разрешением, либо сфотографировать ткань отдельно — как это делает H&M

8. Делайте изображения в масштабе

Некоторые товары сложно оценить без контекста. Например, в карточке товара написано «большой рюкзак» — но из этого трудно понять, насколько именно. Влезет ли туда ноутбук? А в поход с таким пойти можно? А защитит ли рюкзак от взглядов прохожих, если надеть короткие шорты?

Чтобы оценить характеристики товара было проще, показывайте их в контексте. Продаёте сумку — покажите её внутренности и положите книжку для сопоставления масштабов. Продаёте платок — покажите его на модели, чтобы был лучше понятен размер.

Лучшие интерфейсные практики в фэшн-eCommerce: 10 UX-советов
Магазин SHU показывает товары так, что легко оценить их размер. Фото в контексте — понятно, как можно использовать аксессуар
Магазин SHU показывает товары так, что легко оценить их размер. Фото в контексте — понятно, как можно использовать аксессуар

9. Внедрите визуальный поиск

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

Облегчить жизнь пользователям можно при помощи визуального поиска. Добавьте в приложение магазина поиск товаров по фото — чтобы пользователь загружал изображение одежды, а система подбирала похожие варианты. Так человек с большей вероятностью найдёт товар себе по душе и купит его в магазине.

Поиск по фото есть в Wildberries: маркетплейс отображает в выдаче товары, которые похожи на ваше изображение
Поиск по фото есть в Wildberries: маркетплейс отображает в выдаче товары, которые похожи на ваше изображение

10. Сделайте страницы гостевой оплаты

Авторизация — это трудоёмкий процесс для пользователя, поэтому многие люди просто не входят на сайт. Так бизнес может потерять деньги: компания привлекла пользователя в свой интернет-магазин, он подобрал товар, а потом упёрся в логинволл и закрыл страницу. Вся работа улетела в трубу.

Чаще приводить пользователей к покупке можно, если добавить страницы гостевой оплаты. Это возможность оформления заказа без регистрации на сайте. Такой способ избавляет покупателя от дополнительных действий, поэтому они охотнее остаются в интернет-магазине. В этот же момент можно автоматически создавать пользователю личный кабинет для использования программы лояльности — так человек с большей вероятностью купит в магазине ещё раз.

Уже давно многие магазины не заставляют пользователей регистрироваться. Но на ASOS оформить покупки без авторизации всё ещё не получится

В статье мы рассказали только о части фишек, которые можно внедрить в интернет-магазин и увеличить продажи. Ещё больше информации мы раскрыли в нашем большом отчёте — в нём больше 150 страниц с аналитикой исследований и прогнозами трендов. Мастхев для тех, кто развивает магазины одежды.

Это ещё не всё

12 июля в 16:00 по Москве мы проведём вебинар с OZON и Jamilco. Обсудим детали большого отчёта, спикеры ответят на вопросы зрителей и поделятся эксклюзивной информацией об отрасли. В вебинаре примут участие:

  • Александр Соколов, руководитель группы eCommerce в ДжамильКо. ДжамильКо — одна из ведущих российских компаний в сфере маркетинга и дистрибуции брендов одежды, обуви и аксессуаров от Timberland, Victoria’s Secret, Motherbear и других.
  • Яна Пономарёва, руководитель направления маркетинга fashion OZON. OZON — одна из крупнейших eCommerce-компаний. За 2022 количество продавцов в категории фэшн выросло в 2,6 раз.
  • Евгений Князев, CEO Antro. Antro — агенство с 5-летним опытом развития eCommerce и ритейла. В портфолио проекты с New Balance, Timberland, GoodWood, IDDIS, Северсталь, HyperPC и многие другие.

Вебинар полностью бесплатный: достаточно указать электронную почту на лендинге, и мы пришлём ссылку на Zoom-конференцию.

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

44
38 комментариев

в целом дельные советы ,которые к сожалению не везде соблюдаются

2
Ответить

Это правда, но мы не устаём повторять и продвигать эти практики. Всё, чтобы сделать UX лучше, в том числе для себя самих :)

Ответить

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

1
Ответить

А я бы радовался, если бы на WB футболки с пивозавром рекламировались бы на чернокожих ребятах.

1
Ответить
Автор

Думаем, здесь не стоит фокусироваться только на темнокожих людях.

Ответить

Идея с позолоченной рамкой - огонь

1
Ответить
Автор

Спасибо, обязательно передадим дизайнерам. Им будет приятно ❤️

Ответить