От того, насколько грамотно спроектирован каталог в интернет-магазине, зависит, найдет ли клиент то, что ему нужно. И на этом шаге есть множество тонкостей, которые помогут сделать путь клиента максимально комфортным. На что стоит обратить внимание? 152 гайдлайна с примерами в этой статье.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим материалом с коллегами по цеху.
Это один из 20+ чек-листов по UX/UI в e-commerce. К середине декабря 2022г все они будут доступны в моем профиле на Habr.
Структура статьи
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
1. Кнопка каталога
Фиксирована в шапке
Зафиксируйте кнопку каталога в шапке, чтобы она была доступна в 1 клик при любом скролле страницы.
Смотреть пример
Доступна в таббаре
Добавьте кнопку перехода в каталог в таббар в мобильной версии сайта, чтобы она всегда была доступна, и до нее легче было дотянуться пальцем.
Смотреть пример
В рамках F-паттерна
В версии для ПК взгляд клиента скользит по траектории, схожей с буквой F. Разместив кнопку каталога с учетом такого паттерна, мы повышаем ее заметность.
Смотреть пример
Рядом со строкой поиска
Так как каталог и поисковая строка – 2 основных метода поиска товаров, имеет смысл разместить эти элементы рядом друг с другом.
Смотреть пример
Не прилипает к другим элементам
На мобильных устройствах разместите кнопку каталога с достаточными отступами от других элементов, чтобы сократить риски промаха и нажатия не на ту кнопку.
Смотреть пример
Привлекает внимание
Так как ознакомление с каталогом – одно из целевых действий, кнопка каталога должна быть достаточно контрастной и хорошо привлекать внимание.
Смотреть пример
Достаточно большая
Сделайте кнопку каталога достаточно большой, чтобы клиенту легче было на нее нажать, особенно на мобильных устройствах.
Смотреть пример
Содержит текст
Разместите в кнопке понятный текст о том, что это именно каталог, чтобы исключить какие-либо вопросы у клиента.
Смотреть пример
Содержит иконку
Снабдив кнопку понятной иконкой, вы можете упростить восприятие информации и сделать ее более заметной.
Смотреть пример
Иконка в хорошем качестве
Базовый момент: загрузите иконку в хорошем качестве, чтобы она не размывалась и не пикселила. В идеале используйте векторное изображение.
Смотреть пример
Иконка общепринятая
Если перед вами не стоит задача по снижению использования каталога, выберите для кнопки общепринятую иконку. Клиент не должен гадать, что это за кнопка.
Смотреть пример
Реакция на наведение
Сделайте кнопку интерактивной, чтобы она реагировала на наведение курсора и давала визуальную обратную связь.
Смотреть пример
Изменение вида при клике
При клике кнопка каталога может изменять свой вид и превращаться в кнопку его закрытия.
Смотреть пример
Анимация клика
Кнопку каталога также можно анимировать при клике. Это сделает отклик интерфейса на действия клиента более приятным глазу.
Смотреть пример
2. Появление каталога
При клике по кнопке
Появление каталога при клике по его кнопке – наиболее ожидаемая реакция интерфейса на действия клиента.
Смотреть пример
Не при наведении на кнопку
Лучше воздержаться от открытия каталога при наведении на кнопку: возникает риск ошибочного открытия, когда клиент просто ведет курсор по странице.
Смотреть пример
Без задержек
Реакция интерфейса на клик по кнопке должна быть моментальной: каталог должен отображаться без каких-либо задержек.
Смотреть пример
Без изменения верстки
При открытии и закрытии каталога верстка страницы не должна меняться, если на это нет какой-либо значимой причины.
Смотреть пример
Плавная анимация
Вместо прерывистой реакции интерфейса можно предусмотреть открытие каталога с помощью быстрой, но плавной и ненавязчивой анимации (например, выцветания).
Смотреть пример
Без чрезмерной анимации
При этом избегайте чрезмерной анимации в появлении каталога. Особенно если клиент сталкивается с ней не 1 раз, такая анимация может вызвать раздражение.
Смотреть пример
Выделяется на фоне страницы
Если каталог занимает не всю площадь экрана, фоновую страницу можно затемнять, чтобы сфокусировать внимание клиента именно на каталоге.
Смотреть пример
Контент каталога отображается
Контент каталога должен отображаться при клике по кнопке. Да, я понимаю, что момент очевидный. И я бы его не добавил, если бы не этот замечательный пример:
Смотреть пример
3. Структура каталога
Различные классификации
Каталог можно структурировать по нескольким направлениям: по типу товара, поводу, стилю и т.д. – дайте клиенту возможность пойти тем путем, который ему более удобен.
Смотреть пример
На основе паттернов поиска
Структура каталога должна соответствовать тому, как клиенты ищут товары. Проведите клиентское исследование, чтобы понять, каковы паттерны в вашем случае.
Подобное к подобному
Объединяйте подкатегории со схожими свойствами в единую категорию верхнего уровня, чтобы упростить поиск нужного товара для клиента.
Смотреть пример
Уровневая структура
Если у вас широкий спектр товаров, используйте уровневую структуру каталога, чтобы не сталкивать клиента с чересчур длинными списками подкатегорий.
От общего к частному
Основополагающий момент: структурируйте каталог, начиная с категорий верхнего уровня, и двигайтесь в сторону повышения детализации.
Смотреть пример
Объем отображаемого контента
Чем меньше объектов клиент видит на экране, тем легче ему найти нужный. Отображение слишком большого числа категорий с подкатегориями лишь затрудняет поиск.
Смотреть пример
Поэтапное отображение
Эта механика позволяет решить проблему перегрузки интерфейса за счет отображения категорий следующего уровня лишь по выбранному элементу:
Смотреть пример
Без пересекающихся подкатегорий
Подкатегории могут встречаться в рамках разных структур каталога, но не стоит добавлять пересекающиеся подкатегории внутри одной структуры.
Смотреть пример
Детализация достаточна
Сделайте каталог достаточно детальным, чтобы сэкономить клиенту время. Не заставляйте его переходить в листинг на уровне «Ноутбук», когда он хочет купить себе Macbook.
Смотреть пример
Детализация не слишком высокая
При этом, если детализация в каталоге слишком высокая, есть риск, что в целевом листинге будет мало товаров, и клиент уйдет, не найдя то, что ему нужно.
Смотреть пример
Не все в одну корзину
Проектируя каталог, думайте о том, чтобы клиенту легко было найти нужный товар: не объединяйте множество разнородных подкатегорий в одну мега-категорию.
Смотреть пример
Без категорий с 0 товаров
Предусмотрите, чтобы подкатегории динамически пропадали из списков, если в них нет товаров. Иначе переход в пустой листинг станет неприятным сюрпризом для клиента.
Смотреть пример
Товары и аксессуары
Размещая товары и аксессуары к ним в одной категории, вы облегчаете поиск нужного товара для клиента. Разбивая на разные категории, как в примере – усложняете.
Смотреть пример
Корректная категоризация товаров
Каким бы удобным ни был каталог, если товары промаркированы так, что находятся не в своих категориях, шансы на то, что клиент их найдет (и купит), невысоки.
Смотреть пример
Единая структура
Структура каталога должна быть единой для desktop и mobile версий сайта. У клиента не должно возникать диссонанса при переключении между версиями.
4. Контент каталога
Списки подкатегорий
Базовый момент: если у категории есть подкатегории, их список должен отображаться при выборе этой категории в рамках каталога.
Смотреть пример
Аксессуары
Помимо подкатегорий в рамках категории также можно разместить и ссылки на листинги подходящих аксессуаров.
Смотреть пример
Услуги
Если вы помимо товаров предоставляете и услуги, их также можно добавить в каталог. Причем размещать их лучше на страницах соответствующих категорий, а не отдельно.
Смотреть пример
Бренды в категории
Разместив ссылки на листинги товаров в категории от конкретных брендов, мы можем упростить путь поиска нужного товара для части клиентов.
Смотреть пример
Гайды по выбору товаров
Если вы выпускаете статьи и видео о том, как выбрать нужные товары, их можно разместить на соответствующих страницах каталога.
Смотреть пример
Конструкторы продуктов
Если вы продаете комплексные решения, на страницы категорий в каталоге также можно добавить ссылки конструкторы, позволяющие упростить выбор товара.
Смотреть пример
Подборки товаров
В каталог можно включить еще и тематические подборки. Клиент может воспользоваться ими на стадии discovery и открыть с их помощью для себя интересные товары.
Смотреть пример
Подарочные карты
Не всегда мы ищем товары для себя. И не всегда можем угадать предпочтения того, кому хотим их подарить. Поэтому highlight подарочных карт в каталоге может быть полезен.
Смотреть пример
5. Layout каталога
Мега-меню
Если у вас широкий спектр товаров и много разнородных категорий, мега-меню позволит уместить всю структуру каталога в рамках единого интерфейса.
Смотреть пример
Dropdown
Формат выпадающих списков можно использовать, когда у вас всего несколько категорий, которые можно разместить сразу же в шапке, и неглубокая структура каталога.
Занимает всю полезную площадь
При активации каталога логично, что внимание будет фиксировано именно на нем. Поэтому в случае с мега-меню ему может отводиться вся площадь экрана.
Смотреть пример
Каталог единообразен
Используя разные версии каталога на разных страницах сайта, легко можно ввести клиента в заблуждение и затруднить навигацию.
Смотреть пример
Мобильная оптимизация
Не думал, что в 2022г такая рекомендация будет еще для кого-то актуальной. Но что имеем, то имеем: у магазина 3.43 млрд.руб выручки за 2021 год.
Смотреть пример
Реализован в виде вкладок
Реализуйте каталог в формате вкладок, не отображайте все категории в рамках единой длинной страницы. Клиент не должен состариться, пока доскроллит до конца списка.
Смотреть пример
Каталог не перекрывается
Добавляя поверх сайта различные виджеты, такие как онлайн-чат или заказ обратного звонка, убедитесь, что они не влияют на отображение каталога и не перекрывают его.
Смотреть пример
Без многоуровневых popup'ов
Отображение еще одного всплывающего списка на всплывающем меню каталога может быть чересчур в плане нагромождения контента.
Смотреть пример
Категории первичны
Функция навигации в каталоге должна быть первичной. Не прячьте подкатегории за множеством рекламных баннеров, брендов и товаров. Разместите их в начале.
Смотреть пример
6. Категории первого уровня
Видны сразу
Если число категорий верхнего уровня не слишком большое, их можно разместить прямо в шапке. Таким образом, они сразу будут видны клиенту при загрузке страницы.
Смотреть пример
Как часть главной страницы
Категории верхнего уровня можно снабдить иллюстрациями и представить как часть главной страницы. Особенно это удобно для мобильной версии:
Смотреть пример
В начале главной страницы
При этом, так как каталог – один из основных методов поиска в магазине, его не стоит прятать слишком глубоко на главной странице. Разместите его ближе к началу.
Смотреть пример
Отсортированы по популярности
Сортировка по популярности позволит большей части клиентов быстрее найти нужную им категорию.
Смотреть пример
Без прокрутки на мобильных
Не располагайте категории с горизонтальной прокруткой в мобильной версии. Далеко не все клиенты ее заметят. Это снизит шансы на успешный поиск и покупку товара.
Смотреть пример
Активная категория выделяется
При просмотре подкатегорий в рамках категории верхнего уровня выделяйте ее на фоне остальных, чтобы облегчить навигацию для клиента.
Смотреть пример
Переход между категориями
Убедитесь, что переключение списков подкатегорий осуществляется корректно при перемещении курсора по категориям верхнего уровня. Вот так делать не стоит:
Смотреть пример
Диагональное перемещение
Часто встречается некорректная обработка диагонального перемещения курсора от категории к подкатегориям. В этом примере клиент попадает не в тот список:
Смотреть пример
Тайминг переключения категорий
Добавьте задержку в обработчик наведения на категорию, чтобы свести риски показа не тех подкатегорий к нулю при перемещении курсора по диагонали.
Смотреть пример
Стрелка, если есть подкатегории
Чтобы подчеркнуть наличие подкатегорий в категории верхнего уровня, можно снабдить ее стрелкой.
Смотреть пример
Категории кликабельны
Сделайте категории верхнего уровня кликабельными. При клике по ним клиент должен переходить на страницы соответствующих категорий.
Смотреть пример
Клик в мобильной версии
В мобильной версии лучше сделать действие раскрытия списка подкатегорий приоритетным по отношению к переходу в общий листинг категории.
Смотреть пример
Анимация при переходах
На мобильных устройствах переходы от категорий к подкатегориям и обратно можно реализовать с помощью приятной глазу анимации.
Смотреть пример
Категория – заголовок
Для упрощения навигации название категории верхнего уровня можно дублировать в качестве заголовка в области с подкатегориями.
Смотреть пример
7. Иллюстрации категорий
Используются
Снабдив верхнеуровневые категории иконками или миниатюрами, можно облегчить восприятие информации на стороне клиента.
Смотреть пример
Поиск по иллюстрациям
Иллюстрации играют еще одну важную роль: иногда клиент может не знать, как товар называется, но знать, как он выглядит. В этом случае иллюстрации помогут в поиске.
Смотреть пример
Релевантны
Базовый момент: добавляя иллюстрации, позаботьтесь о том, чтобы они соответствовали категориям, рядом с которыми они расположены.
Смотреть пример
Репрезентативны
Иллюстрации должны быть репрезентативными и олицетворять всю категорию, а не подсвечивать лишь какой-то один конкретный товар.
В едином стиле
Иллюстрации категорий должны быть выполнены в едином стиле. В противном случае это может создать ощущение несогласованности.
Смотреть пример
Визуально не «кричащие»
Иллюстрации должны привлекать внимание, но во всем важно знать меру. Если сделать их чересчур «кричащими», это может лишь рассеять внимание и затруднить восприятие.
Смотреть пример
Если иллюстрации есть, то везде
Если уж вы решили сделать свои категории более понятными и добавить иконки, не стоит останавливаться лишь на 2-3 – извольте добавить иконки по всем категориям.
Смотреть пример
В хорошем качестве
Если уж вы решили добавить иллюстрации, добавьте их в хорошем разрешении, чтобы они не пикселили и не ухудшали впечатление о качестве сайта.
Смотреть пример
Различия в иллюстрациях заметны
Если вы добавляете иллюстрации не для галочки, сделайте так, чтобы они значимо отличались друг от друга. В этом случае кто-то точно схалтурил:
Смотреть пример
Иллюстрации понятны клиенту
Подготавливая иллюстрации, протестируйте их на понятность у целевой аудитории. Если клиент не понимает, что изображено на иллюстрации, ее ценность стремится к нулю.
8. Списки подкатегорий
Отображаются
Базовый момент: убедитесь, что по всем категориям верхнего уровня, по которым подкатегории доступны в листинге, они отображаются и в каталоге.
Смотреть пример
Появляются моментально
При наведении курсора на категорию верхнего уровня область с подкатегориями должна загружаться моментально, без каких-либо задержек.
Смотреть пример
Видны при тапе на мобильных
Так как на мобильных устройствах размер интерфейса ограничен, отображайте списки подкатегорий при нажатии на категорию, а не по умолчанию, чтобы сэкономить место.
Смотреть пример
Без списка, если подкатегорий нет
Если подкатегории отсутствуют, нет смысла дублировать в списке название категории. Просто переводите клиента в соответствующий листинг при клике.
Смотреть пример
Характеристики, как подкатегории?
В некоторых случаях в качестве подкатегорий отображают характеристики. Как считаете, в чем плюсы и минусы такого подхода? Напишите, пожалуйста, в комментариях.
Смотреть пример
Списки обособлены
Сделайте списки подкатегорий обособленными: отступы между заголовком списка и его элементами не должны быть больше, чем отступы между списками.
Смотреть пример
Заголовки кликабельны
Сделайте заголовки списков кликабельными – так, чтобы они вели на соответствующие страницы категорий со ссылками на все подкатегории и листингом товаров.
Смотреть пример
Ссылка на все товары категории
Не для всех клиентов будет очевидно, что категория в заголовке списка кликабельна. Поэтому снабдите список подкатегорий ссылкой на все товары категории.
Смотреть пример
Единообразие форматирования
Убедитесь, что при переключении между категориями верхнего уровня подкатегории выглядят единообразно и одинаково форматированы.
Смотреть пример
Отступы между пунктами
Проектируя каталог, не забудьте, что текст некоторых категорий может переноситься на новую строку и адаптируйте верстку, чтобы одни элементы не наезжали на другие.
Смотреть пример
Подкатегории унифицированы
Не смешивайте в рамках единого списка подкатегории разных уровней. Это ухудшает восприятие и затрудняет поиск товара.
Смотреть пример
Списки выровнены
Выровняйте списки подкатегорий по левому краю. Маркеры и прочие элементы не должны влиять на выравнивание.
Смотреть пример
9. Пункты в списках
Подкатегории в виде списков
Размещайте подкатегории в виде списков. Реализация подкатегорий в формате «облака тегов» может затруднить поиск нужного элемента.
Смотреть пример
Пункты не дублируются
Базовый момент: дублировать подкатегории в рамках одного списка не стоит. Но примеры того, как кто-то наступает на эти грабли, обязательно найдутся.
Смотреть пример
Списки с одной (?) подкатегорией
Как считаете, стоит ли отображать по категориям списки всего с одним элементом? И почему? Напишите, пожалуйста, в комментариях.
Смотреть пример
Сочетание цветов
Убедитесь, что цвет текста категорий хорошо сочетается с цветом фона. Иначе есть риск, что клиент уйдет на этапе ознакомления с каталогом.
Смотреть пример
Категории vs. подкатегории
Сделайте так, чтобы подкатегории визуально отличались от категорий: например, выполните их чуть более выцветшими, меньшего размера или менее жирными.
Смотреть пример
Текст подкатегорий контрастный
При этом текст подкатегорий должен быть достаточно контрастным к фону. Иначе либо его будет сложно прочитать, либо может возникнуть ощущение, что ссылки неактивны.
Смотреть пример
Названия не обрезаются
Спроектируйте категории и подкатегории так, чтобы их названия не обрезались. В противном случае это ухудшит их восприятие и затруднит навигацию.
Смотреть пример
Терминология, сленг, сокращения
По возможности старайтесь обойтись без использования специфических сокращений, сленга и терминов, которые могут быть не понятны для целевой аудитории.
Смотреть пример
Без ошибок в тексте
Особенно «радует», когда компании с оборотом почти 60 млрд.руб не могут вычитать тексты в каталоге и допускают ошибки.
Смотреть пример
Умеренный CAPS LOCK
CAPS LOCK хорош тогда, когда его мало. Например, в заголовках. Но если все элементы списка будут в верхнем регистре, это может усложнить восприятие.
Смотреть пример
Единый регистр
По возможности реализуйте элементы списков в едином регистре. Если уж одни списки идут с заглавной буквы, будьте добры реализовать в таком формате и остальные.
Смотреть пример
Количество позиций
Как считаете, насколько уместно на уровне каталога отображать количество позиций по категориям? В чем это помогает? Напишите, пожалуйста, в комментариях.
Смотреть пример
Реакция на наведение
Сделайте категории и подкатегории интерактивными, чтобы они реагировали на наведение курсора и давали визуальную обратную связь.
Смотреть пример
Без дублирующей подсказки
По возможности избегайте появления дублирующей контекстной подсказки при наведении курсора на категории и подкатегории. Смысла в этом особого нет.
Смотреть пример
Кликабельная область
Сделайте кликабельным не только текст пункта, но и всю область по ширине списка. Это снизит количество промахов и упростит переход к листингу.
Смотреть пример
10. Ограничение длины списков
Списки не слишком длинные
По возможности группируйте подкатегории в более короткие и легкие для восприятия списки. Это упростит процесс поиска нужной подкатегории.
Смотреть пример
Наличие ограничителей
Если подкатегорий в рамках категории слишком много, можно ограничить их список, дав клиенту возможность раскрыть его полностью.
Смотреть пример
Не виден 1 пункт – не сокращаем
Если в списке обрезается всего 1 пункт, вместо надписи «Еще 1» можно просто его отобразить. Больше места такая механика не займет.
Смотреть пример
Ссылки не вызывают вопросов
Текст ссылок на все подкатегории должен быть привычным, понятным для аудитории и не должен вызывать вопросов.
Смотреть пример
Визуальное отличие ссылок «Еще»
Сделайте ссылки для перехода ко всем категориям визуально отличными от основных элементов списка, так как их функции различаются.
Смотреть пример
Выбор на уровне каталога
Дайте клиенту возможность ознакомиться с оставшимися категориями прямо в рамках каталога, без необходимости переходить на новую страницу и ждать ее загрузки.
Смотреть пример
Highlight числа скрытых пунктов
Ссылки раскрытия списка можно сделать более информативными, добавив число скрытых пунктов. Интерфейс при этом особо не перегрузится.
Смотреть пример
Скрытие раскрытых списков
Помимо раскрытия списка предусмотрите также и возврат к краткой версии – так, чтобы после ознакомления с категориями список не занимал много места.
Смотреть пример
11. Highlight категорий
Используется
Внимание клиента к определенным категориям (например, новинкам) можно привлечь за счет размещения рядом с ними специальных маркеров.
Смотреть пример
Highlight с помощью emoji
Для highlight'а категорий могут использоваться не просто маркеры, а релевантные emoji. Если стилистика сайта позволяет, выглядеть это может симпатично.
Смотреть пример
Highlight текущей категории
Выделяйте в каталоге категорию, в которой клиент находится в данный момент. Это позволит упростить навигацию.
Смотреть пример
Featuring категории
Наиболее популярную категорию можно выделить более явно, снабдив ее релевантной иллюстрацией. Это упростит путь клиента в большом количестве случаев.
Смотреть пример
Highlight категорий понятен
Если вы выделяете какие-то подкатегории, дайте клиенту понять, на основе чего они выделены. Там есть новинки? Они популярны? Есть специальные предложения?
Смотреть пример
Без highlight'а всех категорий
Если highlight отображается по всем элементам списка, он фактически теряет свою функцию выделения категории на фоне остальных.
Смотреть пример
Highlight новинок
Если вы хотите отдельно презентовать новинки, выделите их специально и не допускайте случаев, когда они визуально сливаются с другими категориями.
Смотреть пример
12. Прокрутка каталога
Скролл только если это необходимо
Не размещайте скролл там, где можно обойтись и без него. В примере мы видим большое неиспользуемое пространство, но при этом часть элементов обрезаются и не видны.
Смотреть пример
Внутренний скролл списка
Реализуйте внутренний скролл списка категорий, чтобы клиент не прокручивал сначала вниз до категории, а затем вверх, чтобы ознакомиться с подкатегориями.
Смотреть пример
Без скролла при переключении
Если список категорий прокручен (скролл не нулевой), при переключении между категориями скролл не должен меняться.
Смотреть пример
Scrollbar виден, если есть прокрутка
Если контент каталога не помещается на экран, сделайте scrollbar видимым по умолчанию, чтобы подсветить возможность прокрутки.
Смотреть пример
Scrollbar ненавязчив
При этом scrollbar – это вторичный элемент и он не должен бросаться в глаза. Тем более он не должен перекрывать собой другие элементы интерфейса.
Смотреть пример
Без чрезмерного скролла
Спроектируйте каталог таким образом, чтобы клиенту не приходилось прокручивать страницу слишком долго, чтобы добраться до нужного элемента.
Смотреть пример
Визуальный highlight прокрутки
В некоторых случаях возможность скролла подсвечивается в хорошо заметной визуальной форме. Как вам такое исполнение? Хорошо или перебор? Напишите в комментариях.
Смотреть пример
Прокрутка ограничена
Зона скролла в области с подкатегориями должна быть ограничена контентом: у клиента не должно быть возможности бесконечно долго прокручивать пустую область.
Смотреть пример
Без горизонтального скролла на мобильных
Блокируйте горизонтальный скролл категорий на мобильных. В противном случае взаимодействие со списком категорий может стать не совсем удобным:
Смотреть пример
Без скролла фоновой страницы
Если каталог фиксирован, отключайте скролл фоновой страницы при его открытии: в нем нет смысла, и он может «конкурировать» с внутренним скроллом каталога.
Смотреть пример
Фиксация категории при скролле
В мобильной версии категорию можно фиксировать на экране при просмотре списка подкатегорий. Это облегчит навигацию, особенно если список длинный.
Смотреть пример
13. Бренды в каталоге
Присутствуют в каталоге
Помимо подкатегорий в рамках категории верхнего уровня также можно подсветить и ключевые бренды, которые в ней представлены.
Смотреть пример
Визуальный формат
Если стилистика сайта позволяет это сделать, бренды можно представить как в текстовом формате, так и в виде знакомых клиентам логотипов.
Смотреть пример
Бренды, как раздел каталога
В некоторых сферах (например, fashion) клиенты могут сразу искать товары по бренду, поэтому под бренды можно выделить отдельную категорию в каталоге.
Смотреть пример
Сортировка по алфавиту
Если под бренды выделен раздел в каталоге и их достаточно много, отсортируйте их по алфавиту, чтобы клиенту легче было найти нужный.
Смотреть пример
Встроенный поиск по бренду
Помимо сортировки в некоторых случаях можно встретить встроенный в каталог поиск по названию бренда, который также может упростить жизнь клиенту.
Смотреть пример
Логотипы в хорошем качестве
Базовый момент, но встречается: если уж вы используете логотипы брендов на страницах категорий, загрузите их в хорошем качестве, чтобы они не пикселили.
Смотреть пример
Целевые листинги по брендам
При клике по брендам в рамках категории клиент должен переходить не на общий листинг товаров бренда, а именно к его товарам в данной категории.
Смотреть пример
14. Страницы категорий
Есть по категориям 1-2 уровней
Разработайте страницы категорий, как минимум, по 1 и 2 уровням иерархии. Это позволит облегчить поиск по сравнению с просто массивным листингом.
Содержат ссылки на подкатегории
Разместите на страницах категорий ссылки на подкатегории. Это позволит упростить навигацию клиента по каталогу.
Смотреть пример
Подкатегории в начале страницы
На странице категории сделайте функцию навигации первичной: разместите ссылки на подкатегории в начале, не перебивайте их рекламой и акциями.
Смотреть пример
Иллюстрации подкатегорий
По возможности снабжайте подкатегории иллюстрациями, чтобы облегчить восприятие информации и упростить поиск
Смотреть пример
Требования к иллюстрациям
Требования к иллюстрациям подкатегорий на страницах категорий аналогичны тем, что применимы к иллюстрациям в рамках самого каталога.
Содержат листинг товаров
Дополните разбиение по категориям полным листингом товаров с фильтрацией – так, чтобы каждый клиент мог пойти тем путем, который ему более удобен.
15. Закрытие каталога
Кнопка каталога кликабельна
Если вы изменяете кнопку каталога на кнопку закрытия, убедитесь, что она будет выполнять свою функцию, и при клике по ней каталог будет закрываться.
Смотреть пример
Видоизменение кнопки каталога
При клике по кнопке каталога и его открытии она может видоизменяться и превращаться в кнопку закрытия.
Смотреть пример
Клик по крестику
Если кнопка каталога не видна, в каталог можно добавить привычную большинству кнопку крестика, разместив ее в верхнем правом углу.
Смотреть пример
Фиксация кнопки закрытия
Фиксируйте кнопку закрытия каталога в мобильной версии сайта, чтобы она была доступна в любой момент вне зависимости от уровня прокрутки списка категорий.
Смотреть пример
Клик по области вне каталога
Также реализуйте закрытие каталога с помощью клика по фоновой части страницы, если он не занимает 100% ее площади.
Смотреть пример
Без закрытия при отводе курсора
При этом не закрывайте каталог, если клиент лишь отвел курсор на фоновую часть страницы. Иначе риски непреднамеренного закрытия повышаются.
Смотреть пример
Закрытие нажатием на Esc
Реализуйте поддержку закрытия каталога с помощью нажатия на клавишу Esc. Это повысит удобство для клиентов, предпочитающих навигацию с помощью клавиатуры.
Без закрытия при клике в каталоге
Клиент может промахнуться и по ошибке нажать на область рядом с нужной категорией. Закрытие каталога при таком клике может стать неприятным сюрпризом.
Смотреть пример
To be continued...
Итак, в этой статье мы разобрали работу с каталогом товаров. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться этим материалом с коллегами. Будем на связи.
