РАБОТА С КАТАЛОГОМ ТОВАРОВ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
152
ГАЙДЛАЙНА
От того, насколько грамотно спроектирован каталог в интернет-магазине, зависит, найдет ли клиент то, что ему нужно. И на этом шаге есть множество тонкостей, которые помогут сделать путь клиента максимально комфортным. На что стоит обратить внимание? 151 гайдлайн с примерами в сегодняшней статье.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
Это один из 18 больших чек-листов по eCommerce. Остальные – в моем Telegram.

1. КНОПКА КАТАЛОГА

Фиксирована в шапке

Зафиксируйте кнопку каталога в шапке, чтобы она была доступна в 1 клик при любом скролле страницы.

Доступна в таббаре

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

В рамках F-паттерна

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

Рядом со строкой поиска

Так как каталог и поисковая строка – 2 основных метода поиска товаров, имеет смысл разместить эти элементы рядом друг с другом.
hardclient

Не прилипает к другим элементам

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

Привлекает внимание

Так как ознакомление с каталогом – одно из целевых действий, кнопка каталога должна быть достаточно контрастной и хорошо привлекать внимание.
hardclient

Достаточно большая

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

Содержит текст

Разместите в кнопке понятный текст о том, что это именно каталог, чтобы исключить какие-либо вопросы у клиента.
hardclient

Содержит иконку

Снабдив кнопку понятной иконкой, вы можете упростить восприятие информации и сделать ее более заметной.
hardclient

Иконка в хорошем качестве

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

Иконка общепринятая

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

Реакция на наведение

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

Изменение вида при клике

При клике кнопка каталога может изменять свой вид и превращаться в кнопку его закрытия.
hardclient

Анимация клика

Кнопку каталога также можно анимировать при клике. Это сделает отклик интерфейса на действия клиента более приятным глазу.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

2. ПОЯВЛЕНИЕ КАТАЛОГА

При клике по кнопке

Появление каталога при клике по его кнопке – наиболее ожидаемая реакция интерфейса на действия клиента.

Не при наведении на кнопку

Лучше воздержаться от открытия каталога при наведении на кнопку: возникает риск ошибочного открытия, когда клиент просто ведет курсор по странице.

Без задержек

Реакция интерфейса на клик по кнопке должна быть моментальной: каталог должен отображаться без каких-либо задержек.

Без изменения верстки

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

Плавная анимация

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

Без чрезмерной анимации

При этом избегайте чрезмерной анимации в появлении каталога. Особенно если клиент сталкивается с ней не 1 раз, такая анимация может вызвать раздражение.

Выделяется на фоне страницы

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

Контент каталога отображается

Контент каталога должен отображаться при клике по кнопке. Да, я понимаю, что момент очевидный. И я бы его не добавил, если бы не этот замечательный пример:

3. СТРУКТУРА КАТАЛОГА

Различные классификации

Каталог можно структурировать по нескольким направлениям: по типу товара, поводу, стилю и т.д. – дайте клиенту возможность пойти тем путем, который ему более удобен.
hardclient

На основе паттернов поиска

Структура каталога должна соответствовать тому, как клиенты ищут товары. Проведите клиентское исследование, чтобы понять, каковы паттерны в вашем случае.

Подобное к подобному

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

Уровневая структура

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

От общего к частному

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

Объем отображаемого контента

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

Поэтапное отображение

Эта механика позволяет решить проблему перегрузки интерфейса за счет отображения категорий следующего уровня лишь по выбранному элементу:
hardclient

Без пересекающихся подкатегорий

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

Детализация достаточна

Сделайте каталог достаточно детальным, чтобы сэкономить клиенту время. Не заставляйте его переходить в листинг на уровне «Ноутбук», когда он хочет купить себе Macbook.
hardclient

Детализация не слишком высокая

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

Не все в одну корзину

Проектируя каталог, думайте о том, чтобы клиенту легко было найти нужный товар: не объединяйте множество разнородных подкатегорий в одну мега-категорию.
hardclient

Без категорий с 0 товаров

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

Товары и аксессуары

Размещая товары и аксессуары к ним в одной категории, вы облегчаете поиск нужного товара для клиента. Разбивая на разные категории, как в примере – усложняете.
hardclient

Корректная категоризация товаров

Каким бы удобным ни был каталог, если товары промаркированы так, что находятся не в своих категориях, шансы на то, что клиент их найдет (и купит), невысоки.

Единая структура

Структура каталога должна быть единой для desktop и mobile версий сайта. У клиента не должно возникать диссонанса при переключении между версиями.

4. КОНТЕНТ КАТАЛОГА

Списки подкатегорий

Базовый момент: если у категории есть подкатегории, их список должен отображаться при выборе этой категории в рамках каталога.
hardclient

Аксессуары

Помимо подкатегорий в рамках категории также можно разместить и ссылки на листинги подходящих аксессуаров.
hardclient

Услуги

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

Бренды в категории

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

Гайды по выбору товаров

Если вы выпускаете статьи и видео о том, как выбрать нужные товары, их можно разместить на соответствующих страницах каталога.
hardclient

Конструкторы продуктов

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

Подборки товаров

В каталог можно включить еще и тематические подборки. Клиент может воспользоваться ими на стадии discovery и открыть с их помощью для себя интересные товары.
hardclient

Подарочные карты

Не всегда мы ищем товары для себя. И не всегда можем угадать предпочтения того, кому хотим их подарить. Поэтому highlight подарочных карт в каталоге может быть полезен.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

5. LAYOUT КАТАЛОГА

Мега-меню

Если у вас широкий спектр товаров и много разнородных категорий, мега-меню позволит уместить всю структуру каталога в рамках единого интерфейса.
hardclient

Dropdown

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

Занимает всю полезную площадь

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

Каталог единообразен

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

Мобильная оптимизация

Не думал, что в 2022г такая рекомендация будет еще для кого-то актуальной. Но что имеем, то имеем: у магазина 3.43 млрд.руб выручки за 2021 год.

Реализован в виде вкладок

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

Каталог не перекрывается

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

Без многоуровневых popup'ов

Отображение еще одного всплывающего списка на всплывающем меню каталога может быть чересчур в плане нагромождения контента.

Категории первичны

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

6. КАТЕГОРИИ ПЕРВОГО УРОВНЯ

Видны сразу

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

Как часть главной страницы

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

В начале главной страницы

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

Отсортированы по популярности

Сортировка по популярности позволит большей части клиентов быстрее найти нужную им категорию.
hardclient

Без прокрутки на мобильных

Не располагайте категории с горизонтальной прокруткой в мобильной версии. Далеко не все клиенты ее заметят. Это снизит шансы на успешный поиск и покупку товара.

Активная категория выделяется

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

Переход между категориями

Убедитесь, что переключение списков подкатегорий осуществляется корректно при перемещении курсора по категориям верхнего уровня. Вот так делать не стоит:

Диагональное перемещение

Часто встречается некорректная обработка диагонального перемещения курсора от категории к подкатегориям. В этом примере клиент попадает не в тот список:

Тайминг переключения категорий

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

Стрелка, если есть подкатегории

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

Категории кликабельны

Сделайте категории верхнего уровня кликабельными. При клике по ним клиент должен переходить на страницы соответствующих категорий.

Клик в мобильной версии

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