С каждым годом рынок модной одежды становится все более прибыльным. И хотя, в основе работы всех интернет-магазинов лежат одни и те же принципы, существует ряд дизайн-паттернов и UI/UX-практик, характерных исключительно для монобрендовых и мультибрендовых сайтов.
Для кого будет полезно это исследование?
Наши выводы помогут улучшить юзабилити и повысить конверсию сайта электронной коммерции вне зависимости от того, идет ли речь о мелком, среднем или крупном ритейлере модной одежды, моно- или мультибрендовом магазине. Вы найдете здесь лучшие практики и дизайн-паттерны, которые мы выявили в ходе исследования британского рынка модной одежды, а также UX/UI-решения, которые помогут оптимизировать опыт взаимодействия.
Почему мы его провели?
Студия Turum-burum имеет 12-летний опыт работы в сфере UX/UI и CRO (оптимизация коэффициента конверсии), а также обладает глубокими знаниями в области моды.
Мы давно заметили, что UX/UI-паттерны отличаются в зависимости от типа магазина, поэтому решили провести исследование и подвести итог всем нашим наблюдениям.
Почему мы выбрали Великобританию?
Великобритания всегда была основной движущей силой в мире модной электронной коммерции, и это не просто слова. В 2021 году онлайн-продажи одежды, обуви, сумок и аксессуаров составили почти треть общего дохода страны от онлайн-продаж, а это более 40 миллиардов долларов США.
Как мы это сделали?
На первом этапе исследования мы проанализировали 50 мульти- и монобрендовых британских сайтов модной одежды разного размера. Для второго этапа мы отобрали 10 самых популярных британских интернет-магазинов модной одежды по данным Statista и дополнили список 10 случайными монобрендовыми магазинами с посещаемостью от 30 000 до 1 000 000 пользователей в месяц.
Наши эксперты протестировали различные пользовательские сценарии, чтобы воспроизвести путь пользователя на разных сайтах. В результате мы выявили 5 дизайн-паттернов, характерных для каждого типа магазинов (мульти- и монобрендовых), которые помогают оптимизировать конверсию.
В конце статьи вы найдете сравнительную таблицу, показывающую различия между мульти- и монобрендовыми интернет-магазинами с точки зрения UX/UI.
Мультибрендовые интернет-магазины
1. Навигация: сужение фокуса
Мультибрендовые интернет-магазины часто перегружены категориями и отделами, поэтому хорошая идея — позволить пользователям упорядочить товары и персонализировать свой выбор, предоставив им возможность сузить фокус до какой-то общей категории. Если они сразу выбирают пол или отдел, это упрощает навигацию и сокращает количество отображаемых товаров.
Плюсы
- Пользователи могут выбрать пол, прежде чем перейти к содержимому сайта, благодаря чему они увидят более персонализированные предложения и релевантные товары.
- Упрощается дальнейший выбор из списка товаров (на один фильтр меньше).
- В меню можно отобразить больше подкатегорий, что также облегчает поиск конкретного товара.
.webp)
2. Умный поиск
Умный поиск на основе высокочастотных запросов помогает быстрее находить нужные товары.
Поскольку в мультибрендовых магазинах количество товаров и вариативность запросов пользователей достаточно высоки, поисковые панели обычно полноразмерные и включают текстовое поле.
Плюсы
- Умный поиск сохраняет историю запросов и предоставляет подсказки, что помогает пользователям быстро вернуться к предыдущей сессии.
- Часто доступна возможность переключения пола или выбора категории прямо внутри панели поиска.
- Умные поисковые запросы могут включать некоторые дополнительные популярные параметры, например, тип продукта или бренд.
- Если запрос достаточно специфичен, умный поиск может также предложить конкретные товары.
3. Фильтры и сортировка
Отображение наиболее популярных фильтров и подкатегорий сортировки в верхней части списка товаров облегчает поиск нужных опций и экономит время пользователей. Эта функция довольно популярна в мультибрендовых магазинах.
Плюсы
- Фильтры могут включать как подкатегории, так и конкретные параметры.
- Фильтры могут быть настроены в соответствии с текущей маркетинговой кампанией.
На сайтах Lyst и Next наиболее популярные фильтры отображаются в верхней части экрана:
4. Кнопка "Купить сейчас"
Еще одно популярное решение в дизайне мультибрендовых магазинов — размещение кнопки "Купить сейчас" на странице списка товаров. Она позволяет пользователям добавлять товары в корзину сразу, без дополнительных шагов и кликов.
Плюсы
- Пользователь может выбрать размер или цвет товара.
- Товар можно добавить в корзину прямо из списка товаров.
- Пользователь может рассмотреть изображение товара и изучить его характеристики без перехода на страницу товара.
На сайтах Shein и Hanon клиенты могут добавить товар в корзину и выбрать его размер прямо на странице списка товаров с помощью кнопки "Купить сейчас".
Shein также дает возможность ознакомиться с руководством по размерам и рассмотреть изображение товара в более крупном размере:
.webp)
5. Отзывы покупателей
Отзывы покупателей очень сильно помогают пользователям принять решение о покупке, особенно в мультибрендовых магазинах.
Плюсы
- Товары в списке можно сортировать по среднему рейтингу.
- Отзывы часто включают фотографии, сделанные покупателями, поэтому пользователи могут увидеть, как выглядит товар в реальной жизни.
- Пользователи могут сопоставить информацию из таблицы размеров с отзывами покупателей.
.webp)
Монобрендовые интернет-магазины
1. Фильтры и сортировка
В монобрендовых интернет-магазинах фильтры и элементы сортировки обычно располагаются горизонтально в верхней части страницы со списком товаров. Таким образом, пользователи получают к ним быстрый доступ, а вся нижняя часть экрана отводится под карточки товаров, что помогает показать товары в выгодном свете и сфокусировать на них внимание пользователя.
Плюсы
- Пользователи точно не пропустят фильтры.
- Горизонтальные фильтры остаются на месте при прокрутке, что позволяет быстро обратиться к ним, когда это необходимо.
- Благодаря отсутствию боковых панелей вы можете разместить на странице более крупные фотографии товаров, которые нравятся пользователям, показать все детали и создать правильное первое впечатление о бренде.
Фильтры чаще всего группируются в верхней части экрана, что помогает сделать основной акцент на товарах, расположенных ниже:
.webp)
2. Поиск
В монобрендовых интернет-магазинах поиск чаще всего представлен не строкой поиска, а маленькой иконкой. Такое решение оправдано меньшим количеством товаров и более простой навигацией (в отличие от мультибрендовых интернет-магазинов).
Пользователи монобрендовых магазинов обычно знают, что им нужно, и находят конкретный товар, просматривая списки и применяя фильтры. Поскольку поиск используется реже, нет смысла слишком сильно акцентировать на нем внимание.
Плюсы
- Интерфейс проще, меньше отвлекающих элементов.
- Для разработки функции поиска требуется меньше усилий.
- Пользователи, просматривающие страницы сайта, более вовлечены в процесс.
Stone Island и Nobody's Child используют маленькие иконки лупы вместо полноразмерной панели поиска с текстовым полем.
3. Корзина
Корзина реализована не как отдельная страница, а как выдвижная боковая панель. Пользователь может просматривать ее содержимое, не покидая страницу товара, и быстрее завершить покупку.
Плюсы
- Сокращается количество шагов в воронке, а значит, увеличивается коэффициент конверсии.
- Снижается коэффициент выхода из системы.
- Легче сравнивать товары.
Stone Island и Nobody's Child используют выдвижную боковую панель с возможностью быстрого перехода к оформлению заказа, чтобы сделать путь пользователя на один шаг короче:
4. Образы и эмоции
На фотографиях товаров мы чаще всего видим одетых в них моделей, которые транслируют эмоции, соответствующие стилю и концепции бренда. Это помогает пользователям правильно воспринимать характер и настроение бренда.
Плюсы
- Товары выглядят более привлекательно и реалистично.
- Пользователи лучше понимают, с чем их носить и как сочетать.
- Обычно покупатели модных вещей — люди, желающие выразить себя, поэтому они часто приобретают не отдельные товары, а целые образы.
Примеры фото товаров с моделями, которые транслируют эмоциональные сообщения, можно увидеть на сайтах Nobody's Child и The Couture Club:
5. Классификация товаров по коллекциям / темам
Помимо классификации товаров по типу, монобрендовые интернет-магазины часто добавляют тематические подразделы и коллекции. Это позволяет проводить поиск по различным критериям, даже если пользователи не знают точно, какой тип товаров им нужен.
Плюсы
- Дополнительные способы поиска товаров.
- Легче выбирать из вариантов, которые имеют одно предназначение.
- Пользователи могут создавать образы и комбинировать товары из одной коллекции.
- Такой подход вдохновляет аудиторию.
Примеры классификации товаров по коллекциям, событиям и трендам вы можете найти в интернет-магазинах Rixo, Select и Stone Island:
.webp)
Заключение
Паттерны, характерные для мульти- и монобрендовых интернет-магазинов, во многом обусловлены их структурными и функциональными особенностями. Если первые представляют собой большие маркетплейсы, "дома брендов", где требуется более тщательный поиск и отбор, то монобрендовые ритейлеры напоминают маленькие дизайнерские бутики, продвигающие свой бренд и предлагающие пользователям готовые образы и сочетания товаров.
Результат — различия в UX/UI-дизайне категорий меню, списков товаров, панелей поиска, кнопок "Купить сейчас", интерфейса корзины.
Чтобы вам было проще сравнить два типа сайтов, мы собрали основные тезисы в этой таблице:
Внедряйте описанные выше паттерны, разграничивайте задачи и решения, характерные для мульти- и монобрендовых сайтов, и вы обязательно сможете создать успешный интернет-магазин модной одежды.
