Мода в Великобритании: лучшие UX/UI-практики и дизайн-паттерны для сайтов брендов

Аудио перевод статьи
0:00
0:00
·

С каждым годом рынок модной одежды становится все более прибыльным. И хотя, в основе работы всех интернет-магазинов лежат одни и те же принципы, существует ряд дизайн-паттернов и UI/UX-практик, характерных исключительно для монобрендовых и мультибрендовых сайтов.

Для кого будет полезно это исследование?

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

Почему мы его провели?

Студия Turum-burum имеет 12-летний опыт работы в сфере UX/UI и CRO (оптимизация коэффициента конверсии), а также обладает глубокими знаниями в области моды.

Мы давно заметили, что UX/UI-паттерны отличаются в зависимости от типа магазина, поэтому решили провести исследование и подвести итог всем нашим наблюдениям.

Почему мы выбрали Великобританию?

Великобритания всегда была основной движущей силой в мире модной электронной коммерции, и это не просто слова. В 2021 году онлайн-продажи одежды, обуви, сумок и аксессуаров составили почти треть общего дохода страны от онлайн-продаж, а это более 40 миллиардов долларов США.

На гистограмме показан доход от розничных онлайн-продаж по сегментам в Великобритании с 2017 года по настоящее время, а также прогноз до 2025 года. Годовые продажи модных товаров составляют самый существенный сегмент выручки.

Как мы это сделали?

На первом этапе исследования мы проанализировали 50 мульти- и монобрендовых британских сайтов модной одежды разного размера. Для второго этапа мы отобрали 10 самых популярных британских интернет-магазинов модной одежды по данным Statista и дополнили список 10 случайными монобрендовыми магазинами с посещаемостью от 30 000 до 1 000 000 пользователей в месяц.

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

В конце статьи вы найдете сравнительную таблицу, показывающую различия между мульти- и монобрендовыми интернет-магазинами с точки зрения UX/UI.

Мультибрендовые интернет-магазины

1. Навигация: сужение фокуса

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

Плюсы

  • Пользователи могут выбрать пол, прежде чем перейти к содержимому сайта, благодаря чему они увидят более персонализированные предложения и релевантные товары.
  • Упрощается дальнейший выбор из списка товаров (на один фильтр меньше).
  • В меню можно отобразить больше подкатегорий, что также облегчает поиск конкретного товара.
В интернет-магазине ASOS пользователь может сразу выбрать пол, что ускоряет дальнейший поиск товара.
Shein предлагает на выбор как подразделы пол + дети, так и категории товаров (красота, дом).
2. Умный поиск

Умный поиск на основе высокочастотных запросов помогает быстрее находить нужные товары.

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

Плюсы

  • Умный поиск сохраняет историю запросов и предоставляет подсказки, что помогает пользователям быстро вернуться к предыдущей сессии.
  • Часто доступна возможность переключения пола или выбора категории прямо внутри панели поиска.
  • Умные поисковые запросы могут включать некоторые дополнительные популярные параметры, например, тип продукта или бренд.
  • Если запрос достаточно специфичен, умный поиск может также предложить конкретные товары.
В интернет-магазине The Outnet поиск открывается в отдельном оверлее, что помогает пользователю сосредоточиться. Внутри панели поиска можно выбрать пол для уточнения запроса, а результаты сгруппированы по различным критериям — категориям/типам товаров.
Поиск на сайте Marks & Spencer включает историю запросов и гендерные подкатегории.
3. Фильтры и сортировка

Отображение наиболее популярных фильтров и подкатегорий сортировки в верхней части списка товаров облегчает поиск нужных опций и экономит время пользователей. Эта функция довольно популярна в мультибрендовых магазинах.

Плюсы

  • Фильтры могут включать как подкатегории, так и конкретные параметры.
  • Фильтры могут быть настроены в соответствии с текущей маркетинговой кампанией.

На сайтах Lyst и Next наиболее популярные фильтры отображаются в верхней части экрана:

Lyst
Next
4. Кнопка "Купить сейчас"

Еще одно популярное решение в дизайне мультибрендовых магазинов — размещение кнопки "Купить сейчас" на странице списка товаров. Она позволяет пользователям добавлять товары в корзину сразу, без дополнительных шагов и кликов.

Плюсы

  • Пользователь может выбрать размер или цвет товара.
  • Товар можно добавить в корзину прямо из списка товаров.
  • Пользователь может рассмотреть изображение товара и изучить его характеристики без перехода на страницу товара.

На сайтах Shein и Hanon клиенты могут добавить товар в корзину и выбрать его размер прямо на странице списка товаров с помощью кнопки "Купить сейчас".

Hanon

Shein также дает возможность ознакомиться с руководством по размерам и рассмотреть изображение товара в более крупном размере:

Shein
5. Отзывы покупателей

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

Плюсы

  • Товары в списке можно сортировать по среднему рейтингу.
  • Отзывы часто включают фотографии, сделанные покупателями, поэтому пользователи могут увидеть, как выглядит товар в реальной жизни.
  • Пользователи могут сопоставить информацию из таблицы размеров с отзывами покупателей.
Отзывы помогают понять, действительно ли товар выглядит так же, как его изображение на сайте, соответствует ли качество материала описанию, а указанные размеры реальным. Shein
На сайте Asos есть удобный общий рейтинг покупателей, основанный на таких критериях, как соответствие размеров и качество товара.

Монобрендовые интернет-магазины

1. Фильтры и сортировка

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

Плюсы

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

Фильтры чаще всего группируются в верхней части экрана, что помогает сделать основной акцент на товарах, расположенных ниже:

Select Fashion
Rixo
2. Поиск

В монобрендовых интернет-магазинах поиск чаще всего представлен не строкой поиска, а маленькой иконкой. Такое решение оправдано меньшим количеством товаров и более простой навигацией (в отличие от мультибрендовых интернет-магазинов). 

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

Плюсы

  • Интерфейс проще, меньше отвлекающих элементов.
  • Для разработки функции поиска требуется меньше усилий.
  • Пользователи, просматривающие страницы сайта, более вовлечены в процесс.
Stone Island
Nobody’s Child

Stone Island и Nobody's Child используют маленькие иконки лупы вместо полноразмерной панели поиска с текстовым полем.

3. Корзина

Корзина реализована не как отдельная страница, а как выдвижная боковая панель. Пользователь может просматривать ее содержимое, не покидая страницу товара, и быстрее завершить покупку.

Плюсы

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

Stone Island и Nobody's Child используют выдвижную боковую панель с возможностью быстрого перехода к оформлению заказа, чтобы сделать путь пользователя на один шаг короче:

Stone Island
Nobody’s Child
4. Образы и эмоции

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

Плюсы

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

Примеры фото товаров с моделями, которые транслируют эмоциональные сообщения, можно увидеть на сайтах Nobody's Child и The Couture Club:

Nobody’s Child 
The Couture Club
5. Классификация товаров по коллекциям / темам

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

Плюсы

  • Дополнительные способы поиска товаров.
  • Легче выбирать из вариантов, которые имеют одно предназначение.
  • Пользователи могут создавать образы и комбинировать товары из одной коллекции.
  • Такой подход вдохновляет аудиторию.

Примеры классификации товаров по коллекциям, событиям и трендам вы можете найти в интернет-магазинах Rixo, Select и Stone Island:

Rixo
Nobody’s Child 
Select Fashion
Stone Island

Заключение

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

Результат — различия в UX/UI-дизайне категорий меню, списков товаров, панелей поиска, кнопок "Купить сейчас", интерфейса корзины.

Чтобы вам было проще сравнить два типа сайтов, мы собрали основные тезисы в этой таблице:

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

·
comments powered by HyperComments