Как оформить каталог товаров в интернет-магазине

Каталог помогает покупателю быстрее изучить ассортимент. Для просмотра интересующих позиций достаточно выбрать категорию и настроить фильтры. Большинство каталогов интернет-магазинов похожи — для удобства пользователя важна предсказуемость и простота. Но иногда и нестандартные дизайн-решения будут выигрышными. Рассказываем о правилах оформления каталогов и показываем примеры для вдохновения.

Структура каталога

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

Карточки

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

Картинки. Пользователь принимает решение о покупке прежде всего по фотографиям товаров. Они должны быть информативными. Например, бренды одежды показывают, как товар сидит на модели и как он играет в образе. Важно единообразие картинок: например, когда везде одинаковый фон, покупателю проще быстро «сканировать» каталог взглядом и выбирать нужное. Но это не отменяет креатив: можно экспериментировать с позами и ракурсами съемки.

Ювелирному бренду важно показать одновременно и качество изделия, и как оно выглядит на модели. На сайте Sunlight есть интересное решение. Главная фотография — это товар крупным планом. А при наведении на карточку открывается другое изображение или видео.

Магазины мебели демонстрируют товар в использовании и интерьере. В карточке дивана будут фотографии того, как он раскладывается и как он выглядит в гостиной. Ниже — пример divan.ru.

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

Цифровые продукты тоже можно подавать интересно. В каталоге лектория «Правое полушарие интроверта» для курсов сделали яркие обложки: черно-белые изображения людей наложены на красочный фон. 

На обложке курса по психологии специалист разговаривает с клиентом. А для курса «Кинокритик» взяли кадр из «Криминального чтива».

А вот сайт «Ленивая мама», где карточки выглядят как открытые вкладки.

В магазине Coffantasy от кофейни Skuratov Coffee представлен лукбук, разделяющий экран на две части. Слева — принт с одежды крупным планом, справа — модель, демонстрирующая этот предмет одежды.

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

Описание товара. У некоторых брендов словесное описание и характеристики идут двумя разделами. В первом продавец рассказывает о товаре, а во втором — указывает технические детали. Например, у магазина одежды 12 STOREEZ под описанием расположена информация о размерах и составе изделия.

А ювелирный бренд Sunlight ограничивается только характеристиками.

А еще описания можно делать забавными:

Категории и подкатегории

Товары в каталогах разделены по группам, что упрощает навигацию. Например, на сайте divan.ru есть категория «Освещение», разделенная на подкатегории «Светильники», «Уличные светильники», «Лампы и торшеры», внутри которых есть еще по несколько видов товаров. Легко сориентироваться и найти нужное.

Когда каталогах нет внутренней логики, они запутывают посетителей. На сайте «Ювелирторга» разделы «Каталог», «Кольца», «Подвески», «Цепи» вынесены в меню. То есть категории, которые должны быть в каталоге, почему-то стоят отдельно. При переходе в сам каталог открывается страница, где нет карточек товаров, но есть фильтры.

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

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

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

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

Навигационная цепочка

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

Пример маршрута для карточки на «ВсеИнструменты»: «Главная» — «Электрика и свет» — «Светильники» — «Ночники» — «ЭРА» — «Детский ночник ЭРА NLED-468-1W-P».  

Поиск

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

В магазине товаров для собак в поисковой строке есть пояснение — вводить «Название товара или категории». А при вводе запроса выскакивает перечень продукции.

У divan.ru в разделе поиска можно увидеть частые запросы и хиты продаж.

Фильтры

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

Гораздо больше фильтров требуется в каталогах бытовой техники и электроники. Например, при выборе смартфона Samsung можно указать диагональ экрана, объем встроенной и оперативной памяти, разрешение камеры, характеристики дисплея, цвет, количество слотов для SIM-карты и карт памяти, а также другие параметры.

Сортировка и количество товаров на странице

Это удобно пользователям, когда ассортимент большой. Чаще всего сортировать товары можно по цене, алфавиту, новизне, популярности и отзывам. Например, если выбрать «Сначала дешевые», можно сразу посмотреть самые бюджетные варианты.

На сайте Samsung есть 8 вариантов сортировки.

Количество товаров на странице настраивается далеко не везде, но это может быть удобной фишкой: одним пользователям удобнее скроллить, а другим переходить по страницам. «Ювелиторг» предлагает показывать по 15, 30 или 60 изделий.

Иногда делают кнопку «Показать еще». Когда пользователь доходит до конца страницы, он может не переходить на следующую, а открыть товары на той же.

Подборки

Многие бренды делают в каталогах подборки, в которых товары чем-то объединены.

Тематика. Например, свадебные украшения от Sunlight:

Или образы на Хэллоуин от Oskelly:

Сезон. В магазине Onicape собрали осенние образы.

Бренды. Ювелирный магазин объединил в подборку товары одного бренда.

Акции, распродажи. Часто в магазине объединяют самые выгодные предложения. В примере ниже — товары по акции в «Золотом яблоке».

«Детский мир» сделал креативный постер для ночи распродаж — это хороший способ привлечь внимание к подборке.

Новинки. На скрине — пример от интернет-магазина товаров для собак FOSY.

Избранное

В карточке товара обычно есть кнопки для добавления товара в «Избранное» и в «Корзину». 

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

Ниже — пример раздела на отдельной странице на сайте «ВсеИнструменты».  

Пример раздела в виде списка — от магазина одежды GRÜN.

Дополнительные фишки

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

Теги

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

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

Сравнение товаров

Покупатель может собрать товары в табличку и сравнить характеристики. Показываем на примере «Технопарка».  

В карточках рядом есть значок «Сравнить», который добавляет товары в список сравнения.

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

С такими таблицами пользователю проще определиться с выбором и принять решение о покупке.

Просмотренное

Это раздел, куда попадают недавно просмотренные карточки товаров.

Пользователь может вернуться к товарам, которые он не сохранил в избранное.

Комплекты

На карточках товаров Lamoda есть кнопка «С чем носить». Если ее нажать, появляется окно с готовыми образами.

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

Аналоги

Функция показывает пользователю аналогичные товары. Например, на сайте «ВсеИнструменты» под описанием продукта есть меню с кнопкой «Аналоги».

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

Как составить каталог

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

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

Соберите семантическое ядро. Важно учитывать SEO при оформлении каталога. Посмотрите, по каким запросам ищет товары ваша аудитория. Для этого есть такие сервисы, как Вордстат, SemRush, Key Collector, Keyword Tool, SpyWords, PPC Help.

Вордстат показывает количество запросов по разным формулировкам. Например, «пальто женское» искали более 350 000 раз, а «пальто мужское» — в 2 раза меньше. Формулировка «демисезонное пальто» встречается гораздо чаще, чем «пальто на осень». Самый популярный цвет, который ищут пользователи, — черный. Уже этой информации достаточно, чтобы приоритизировать товары, составить категории под запросы пользователей и выбрать правильные формулировки для текстов.

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

Как провести анализ конкурентов в digital-маркетинге

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