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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это ещё не всё

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

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