Покупатели, которые попадают не прямо на страницу товара, почти всегда сначала проходят через страницу категории или страницу результатов поиска. Именно здесь магазин либо помогает им сузить сотни товаров до нескольких, либо теряет их из-за кнопки «назад». Дизайн страницы каталога получает меньше внимания, чем главная страница или оформление заказа, но именно он решает, дойдут ли посетители до товара. Вот что нужно сделать правильно: фильтры, карточки товаров, сортировку и собственный поиск магазина.
Чего должен добиться дизайн страницы каталога
Хороший UX страницы категории помогает посетителю быстро выполнить четыре действия подряд:
- Сориентироваться: увидеть, в какой он категории, сколько в ней товаров и что охватывает ассортимент.
- Сузить выбор: сократить список по важным для него атрибутам.
- Сравнить: просмотреть оставшиеся товары, не открывая каждый.
- Двигаться дальше: открыть товар или вернуться к списку, не потеряв своё место.
Краткое введение и ссылки на подкатегории помогают на первом шаге; остальное зависит от фильтров и карточек товаров. Страницы категорий — один из шаблонов, которые мы прототипируем в Figma в рамках работы по UX-дизайну интернет-магазина, вместе со страницами товаров и оформлением заказа.
UX фильтров интернет-магазина, который помогает, а не мешает
Большинство проблем с фильтрами начинается с данных, а не с дизайна. Фильтры могут быть лишь настолько хороши, насколько хороши атрибуты товаров за ними, поэтому первый вопрос — какими атрибутами покупатели на самом деле пользуются при выборе: размер и посадка для одежды, совместимость для запчастей, габариты для мебели, мощность для инструментов. Лучшие источники — слова, которые люди вводят в поиск вашего магазина, и вопросы, которые слышат ваши продавцы.
- Показывайте количество рядом с каждым значением фильтра, а значения, которые ничего не вернут, скрывайте или отключайте.
- Показывайте применённые фильтры над результатами в виде чипов, которые можно убрать по одному, с единой кнопкой «сбросить всё».
- Используйте слова клиентов: «Подходит для моделей 2018–2023 годов», а не внутренний код.
- Упорядочивайте фильтры по полезности, а не по алфавиту, и сохраняйте список коротким там, где значимы лишь несколько атрибутов.
- Сохраняйте устойчивость страницы. Обновление результатов без перезагрузки допустимо, если страница не «прыгает», а выбранные фильтры переживают кнопку «назад».
Когда атрибуты тысяч товаров несогласованны, исправлять нужно сами данные о товарах, и этой стороной занимается наша услуга интеграция ERP и PIM.
Мобильные фильтры
На телефоне мобильные фильтры лучше всего работают в полноэкранной панели, открываемой закреплённой кнопкой «Фильтр» рядом с «Сортировкой». Позвольте выбирать несколько значений и применять их вместе кнопкой, показывающей, сколько товаров останется. После применения возвращайте людей к началу результатов и оставляйте применённые фильтры видимыми над списком.
Дизайн карточки товара
Каждая карточка должна за секунду-другую ответить на вопрос «стоит ли это открывать?». Полезный дизайн карточки товара включает:
- Изображения с одинаковым соотношением сторон и одинаковым фоном, чтобы глаз сравнивал товары, а не фотографии.
- Название с отличительной деталью, такой как модель, размер или ёмкость, а не только линейка товаров.
- Цену, причём цены со скидкой показаны ясно и честно.
- Один-два решающих факта: образцы цветов, размеры в наличии или срок доставки.
- Рейтинги — только если они основаны на реальных отзывах.
Не включайте то, что относится к странице товара. Карточка, перегруженная значками и кнопками, замедляет просмотр, а на мобильных устройствах каждая лишняя строка выталкивает следующий товар с экрана.
Варианты сортировки, пагинация или бесконечная прокрутка
Предлагайте варианты сортировки, соответствующие тому, как люди выбирают в этой категории: по умолчанию релевантность или хиты продаж, цена в обоих направлениях, новинки для моды и техники и рейтинг там, где много отзывов. Запоминайте выбор, пока посетитель просматривает каталог.
У спора «пагинация или бесконечная прокрутка» для большинства магазинов есть практический ответ: кнопка «показать ещё». Бесконечная прокрутка делает подвал недоступным и затрудняет возвращение на то же место после открытия товара, а классическая пагинация добавляет касаний на мобильных устройствах. Кнопка «показать ещё» оставляет контроль за людьми, а у каждого загружаемого блока по-прежнему должен быть собственный URL страницы, доступный для обхода, чтобы поисковые системы могли добраться до каждого товара.
Поиск по интернет-магазину и страница без результатов
Посетители, пользующиеся поиском, обычно знают, чего хотят, поэтому поиск по интернет-магазину заслуживает такого же внимания, как и меню. Он должен прощать опечатки и формы множественного числа, понимать синонимы вроде «диван» и «софа», находить товары по артикулу и номеру модели и предлагать товары и категории, пока посетитель печатает. Раз в месяц просматривайте журнал поиска: запросы, не вернувшие ничего, — готовый список недостающих товаров, синонимов и атрибутов.
Страница без результатов никогда не должна быть тупиком. Предложите исправление написания, популярные категории, несколько хитов продаж и способ обратиться к живому человеку. Тот, кто воспользовался поиском, — человек с намерением, и полезная страница без результатов сохраняет хотя бы часть таких посетителей.
Часто задаваемые вопросы: дизайн страницы каталога
Сколько фильтров должно быть на странице категории?
Столько, сколько покупатели действительно используют для выбора, и не больше. Упорядочите их по важности, а редко используемые фильтры уберите под ссылку «больше фильтров», а не удаляйте.
Нужно ли показывать в каталоге товары, которых нет в наличии?
Обычно да, но ниже в списке и с чёткой пометкой, с возможностью их скрыть. Полное удаление ломает ссылки и скрывает товары, которые скоро вернутся.
Как понять, сработали ли изменения на странице каталога?
Отслеживайте использование фильтров, поиски, заканчивающиеся без клика, и то, сколько посещений каталога приводят на страницу товара. Для крупных изменений более чёткий ответ даёт A/B-тест, который охватывает наша услуга оптимизация конверсии.
Теряются ли покупатели между вашим меню и вашими товарами? Наша услуга UX- и UI-дизайн интернет-магазина начинается с аудита пользовательского опыта, а затем переходит к прототипам в Figma для страниц категорий, фильтров, страниц товаров и оформления заказа в магазинах на WooCommerce, Magento и PrestaShop. Пришлите нам адрес вашего магазина и самые продаваемые категории, и мы подскажем, с чего начать.
