I am ready for a long road flight for work with a week- or months-long projects.
РАБОТА С КАТАЛОГОМ ТОВАРОВ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
152
ГАЙДЛАЙНА
От того, насколько грамотно спроектирован каталог в интернет-магазине, зависит, найдет ли клиент то, что ему нужно. И на этом шаге есть множество тонкостей, которые помогут сделать путь клиента максимально комфортным. На что стоит обратить внимание? 152 гайдлайна с примерами в сегодняшней статье.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. КНОПКА КАТАЛОГА
Фиксирована в шапке
Зафиксируйте кнопку каталога в шапке, чтобы она была доступна в 1 клик при любом скролле страницы.
Доступна в таббаре
Добавьте кнопку перехода в каталог в таббар в мобильной версии сайта, чтобы она всегда была доступна, и до нее легче было дотянуться пальцем.
В рамках F-паттерна
В версии для ПК взгляд клиента скользит по траектории, схожей с буквой F. Разместив кнопку каталога с учетом такого паттерна, мы повышаем ее заметность.
Рядом со строкой поиска
Так как каталог и поисковая строка – 2 основных метода поиска товаров, имеет смысл разместить эти элементы рядом друг с другом.
Не прилипает к другим элементам
На мобильных устройствах разместите кнопку каталога с достаточными отступами от других элементов, чтобы сократить риски промаха и нажатия не на ту кнопку.
Привлекает внимание
Так как ознакомление с каталогом – одно из целевых действий, кнопка каталога должна быть достаточно контрастной и хорошо привлекать внимание.
Достаточно большая
Сделайте кнопку каталога достаточно большой, чтобы клиенту легче было на нее нажать, особенно на мобильных устройствах.
Содержит текст
Разместите в кнопке понятный текст о том, что это именно каталог, чтобы исключить какие-либо вопросы у клиента.
Содержит иконку
Снабдив кнопку понятной иконкой, вы можете упростить восприятие информации и сделать ее более заметной.
Иконка в хорошем качестве
Базовый момент: загрузите иконку в хорошем качестве, чтобы она не размывалась и не пикселила. В идеале используйте векторное изображение.
Иконка общепринятая
Если перед вами не стоит задача по снижению использования каталога, выберите для кнопки общепринятую иконку. Клиент не должен гадать, что это за кнопка.
Реакция на наведение
Сделайте кнопку интерактивной, чтобы она реагировала на наведение курсора и давала визуальную обратную связь.
Изменение вида при клике
При клике кнопка каталога может изменять свой вид и превращаться в кнопку его закрытия.
Анимация клика
Кнопку каталога также можно анимировать при клике. Это сделает отклик интерфейса на действия клиента более приятным глазу.
2. ПОЯВЛЕНИЕ КАТАЛОГА
При клике по кнопке
Появление каталога при клике по его кнопке – наиболее ожидаемая реакция интерфейса на действия клиента.
Не при наведении на кнопку
Лучше воздержаться от открытия каталога при наведении на кнопку: возникает риск ошибочного открытия, когда клиент просто ведет курсор по странице.
Без задержек
Реакция интерфейса на клик по кнопке должна быть моментальной: каталог должен отображаться без каких-либо задержек.
Без изменения верстки
При открытии и закрытии каталога верстка страницы не должна меняться, если на это нет какой-либо значимой причины.
Плавная анимация
Вместо прерывистой реакции интерфейса можно предусмотреть открытие каталога с помощью быстрой, но плавной и ненавязчивой анимации (например, выцветания).
Без чрезмерной анимации
При этом избегайте чрезмерной анимации в появлении каталога. Особенно если клиент сталкивается с ней не 1 раз, такая анимация может вызвать раздражение.
Выделяется на фоне страницы
Если каталог занимает не всю площадь экрана, фоновую страницу можно затемнять, чтобы сфокусировать внимание клиента именно на каталоге.
Контент каталога отображается
Контент каталога должен отображаться при клике по кнопке. Да, я понимаю, что момент очевидный. И я бы его не добавил, если бы не этот замечательный пример:
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. СТРУКТУРА КАТАЛОГА
Различные классификации
Каталог можно структурировать по нескольким направлениям: по типу товара, поводу, стилю и т.д. – дайте клиенту возможность пойти тем путем, который ему более удобен.
На основе паттернов поиска
Структура каталога должна соответствовать тому, как клиенты ищут товары. Проведите клиентское исследование, чтобы понять, каковы паттерны в вашем случае.
Подобное к подобному
Объединяйте подкатегории со схожими свойствами в единую категорию верхнего уровня, чтобы упростить поиск нужного товара для клиента.
Уровневая структура
Если у вас широкий спектр товаров, используйте уровневую структуру каталога, чтобы не сталкивать клиента с чересчур длинными списками подкатегорий.
От общего к частному
Основополагающий момент: структурируйте каталог, начиная с категорий верхнего уровня, и двигайтесь в сторону повышения детализации.
Объем отображаемого контента
Чем меньше объектов клиент видит на экране, тем легче ему найти нужный. Отображение слишком большого числа категорий с подкатегориями лишь затрудняет поиск.
Поэтапное отображение
Эта механика позволяет решить проблему перегрузки интерфейса за счет отображения категорий следующего уровня лишь по выбранному элементу:
Без пересекающихся подкатегорий
Подкатегории могут встречаться в рамках разных структур каталога, но не стоит добавлять пересекающиеся подкатегории внутри одной структуры.
Детализация достаточна
Сделайте каталог достаточно детальным, чтобы сэкономить клиенту время. Не заставляйте его переходить в листинг на уровне «Ноутбук», когда он хочет купить себе Macbook.
Детализация не слишком высокая
При этом, если детализация в каталоге слишком высокая, есть риск, что в целевом листинге будет мало товаров, и клиент уйдет, не найдя то, что ему нужно.
Не все в одну корзину
Проектируя каталог, думайте о том, чтобы клиенту легко было найти нужный товар: не объединяйте множество разнородных подкатегорий в одну мега-категорию.
Без категорий с 0 товаров
Предусмотрите, чтобы подкатегории динамически пропадали из списков, если в них нет товаров. Иначе переход в пустой листинг станет неприятным сюрпризом для клиента.
Товары и аксессуары
Размещая товары и аксессуары к ним в одной категории, вы облегчаете поиск нужного товара для клиента. Разбивая на разные категории, как в примере – усложняете.
Корректная категоризация товаров
Каким бы удобным ни был каталог, если товары промаркированы так, что находятся не в своих категориях, шансы на то, что клиент их найдет (и купит), невысоки.
Единая структура
Структура каталога должна быть единой для desktop и mobile версий сайта. У клиента не должно возникать диссонанса при переключении между версиями.
4. КОНТЕНТ КАТАЛОГА
Списки подкатегорий
Базовый момент: если у категории есть подкатегории, их список должен отображаться при выборе этой категории в рамках каталога.
Аксессуары
Помимо подкатегорий в рамках категории также можно разместить и ссылки на листинги подходящих аксессуаров.
Услуги
Если вы помимо товаров предоставляете и услуги, их также можно добавить в каталог. Причем размещать их лучше на страницах соответствующих категорий, а не отдельно.
Бренды в категории
Разместив ссылки на листинги товаров в категории от конкретных брендов, мы можем упростить путь поиска нужного товара для части клиентов.
Гайды по выбору товаров
Если вы выпускаете статьи и видео о том, как выбрать нужные товары, их можно разместить на соответствующих страницах каталога.
Конструкторы продуктов
Если вы продаете комплексные решения, на страницы категорий в каталоге также можно добавить ссылки конструкторы, позволяющие упростить выбор товара.
Подборки товаров
В каталог можно включить еще и тематические подборки. Клиент может воспользоваться ими на стадии discovery и открыть с их помощью для себя интересные товары.
Подарочные карты
Не всегда мы ищем товары для себя. И не всегда можем угадать предпочтения того, кому хотим их подарить. Поэтому highlight подарочных карт в каталоге может быть полезен.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
5. LAYOUT КАТАЛОГА
Мега-меню
Если у вас широкий спектр товаров и много разнородных категорий, мега-меню позволит уместить всю структуру каталога в рамках единого интерфейса.
Dropdown
Формат выпадающих списков можно использовать, когда у вас всего несколько категорий, которые можно разместить сразу же в шапке, и неглубокая структура каталога.
Занимает всю полезную площадь
При активации каталога логично, что внимание будет фиксировано именно на нем. Поэтому в случае с мега-меню ему может отводиться вся площадь экрана.
Каталог единообразен
Используя разные версии каталога на разных страницах сайта, легко можно ввести клиента в заблуждение и затруднить навигацию.
Мобильная оптимизация
Не думал, что в 2022г такая рекомендация будет еще для кого-то актуальной. Но что имеем, то имеем: у магазина 3.43 млрд.руб выручки за 2021 год.
Реализован в виде вкладок
Реализуйте каталог в формате вкладок, не отображайте все категории в рамках единой длинной страницы. Клиент не должен состариться, пока доскроллит до конца списка.