Введение
Интернет-магазин — это неотъемлемая часть современной жизни, доля людей, совершающая покупки в интернете, с каждым годом неуклонно растет. Сегодня в сети существуют тысячи больших и маленьких интернет-магазинов. Как оставаться конкурентным в этих условиях?
Одно из главных конкурентных преимуществ интернет-магазина это удобная структура каталога и грамотная система фильтров. От этого зависит качество пользовательского опыта и лояльность потребителей.
В данной статье мы рассмотрим особенности создания каталога и фильтрации в интернет-магазинах, а также частые ошибки начинающих дизайнеров.
Каталог
Структура товарного каталога интернет-магазина — многоуровневая вложенность папок, которые объединены между собой функциональными и смысловыми признаками. Она представляет собой перечень товаров, разбитый на тематические группы. Степень вложенности определяется широтой ассортимента.
Каталог товаров в интернет-магазине — это страница со списком позиций категории. Позиции представлены в виде превью, при нажатии на которое посетитель попадает в карточку товаров.
Грамотное оформление каталога помогает пользователю быстрее сравнивать и находить нужные товары, а также поисковой оптимизации, то есть привлекать целевую аудиторию на ваш сайт.
Сайт-каталог и интернет-магазин: в чем различие?
Каталог — это обязательный элемент любого интернет-магазина. Однако каталог используется не только на сайтах такого типа. Существуют сайты-каталоги, которые очень похожи на интернет-магазины, но между ними есть существенные отличия, которые важно учитывать.
Сайт в формате каталога — это некоторое подобие корпоративного веб-ресурса. Так же, как и в интернет-магазине, на сайте-каталоге размещены карточки позиций товаров с фото, описанием, характеристиками и ценой. А также страницы, но не с описанием каждого товара, а относящихся к целой категории продуктов. С такого сайта можно оформить покупку любого товара, но сделать это можно только после телефонного разговора с консультантом или через форму обратной связи. В этом заключается его ключевое различие с интернет-магазином, где процесс покупки организован онлайн и пользователю нет необходимости связываться с менеджером или ждать его ответа.
Существуют сайты-каталоги «расширенного» типа, они предоставляют пользователю больше возможностей: товары можно каталогизировать по производителю или их свойствам, позиции в каталоге можно фильтровать и сортировать по нужным критериям.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd64ca0d2683741b06f67_Frame%201321317933.webp)
Как создать хорошую структуру каталога для интернет-магазина: основные этапы
Главные характеристики хорошего каталога — это функциональность и информативность.
Его задача заключается в том, чтобы помочь пользователю быстро найти нужный товар среди десятков, сотен и тысяч единиц. Для этого важно реализовать необходимые функции, тщательно продумать список товарных категорий и проработать каждый элемент.
Классический каталог интернет-магазина состоит из следующих элементов:
1. Навигационная цепочка со ссылками на страницы
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd6c6d03071cd5c1bf6db_Frame%201321317932.webp)
2. Категории и подкатегории
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651ffa7b2739b2cf97b84b4e_Frame%201321318027%20(1).webp)
3. Списки товаров
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651ffc65f4d1aa24eaf0c2a7_Frame%201321318027%20(3).webp)
4. Функция сортировки
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd76d0a9a2f97289016b7_Frame%201321317935.webp)
5. Фильтры
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd85a8447bb7ca29f6833_Frame%201321317936.webp)
6. Товарные страницы
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd8927050e4f4068ca589_Frame%201321317937.webp)
7. SEO-описания
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd8e71653264430b5bcce_Frame%201321317938.webp)
8. Страницы корзины и оформления заказа
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd90da4ae0b53f72851b0_Frame%201321317939.jpg)
Для небольших интернет-магазинов, например, бренда одежды, где ассортимент может уместиться на одной странице, каталог может быть выстроен исходя из популярности или новизны товаров.
Для средних и крупных интернет-магазинов существует два основных пути создания структуры каталога — скопировать у конкурентов или разработать самостоятельно с учетом семантического ядра сайта. Преимущество первого варианта заключается в скорости, но второй вариант гораздо эффективнее с точки зрения бизнеса.
Семантическое ядро
Семантическое ядро (или семантика) — это перечень ключевых запросов, по которым пользователи ищут товар в поисковых системах.
Данный инструмент помогает выстроить правильную структуру каталога и лучше продвигать сайт. Ключевые запросы различают по частотности, они бывают низкочастотными, среднечастотными и высокочастотными.
В страницы каталога нужно подключать все вышеперечисленные ключевые запросы.
Собирать семантику можно с помощью специальных сервисов, например, планировщик Google, Yandex Wordstat, SemRush, Key Collector, Keyword Tool, SpyWords, PPC Help и т. д.
Базовые поисковые запросы подбираются по группам товаров, которые будут продаваться в интернет-магазине. Ключевые фразы отражаются в названиях категорий.
Структура должна быть уравновешена, в каждую категорию следует помещать примерно одинаковое количество подкатегорий, в каждую подкатегорию приблизительно равное количество товаров.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd954991a874fdb3eab86_Frame%201321317940.webp)
С древовидной структурой из ключевых фраз рекомендуют комбинировать теги, которые более точно описывают специфические характеристики товара. На определенных уровнях дерева создаются дополнительные страницы с продуктами, которым свойственны конкретные характеристики. Такой метод будет особенно эффективным для сайтов с широким ассортиментом.
Грамотная оптимизация каталога повышает вовлеченность пользователя и положительно сказывается на ранжировании сайта в выдаче. Страница каталога обычно включает сетку товаров, полезный функционал, превью карточек товаров и при необходимости дополнительные элементы.
Превью товара это первое, на что обращает внимание пользователь. Это ключевой элемент, у которого есть две задачи — предоставить пользователю информацию о товаре и показать пользователю как можно больше доступных вариантов, чтобы он мог сравнивать их, не покидая страницу.
Фильтры
Фильтры — это инструмент, который упрощает навигацию по интернет-магазину, помогает пользователю найти необходимый товар.
Фильтры это неотъемлемая часть каталога, без них пользователь просто потеряется в большинстве интернет-магазинов и не сделает покупку.
Правильно настроенный и спроектированный фильтр сокращает путь пользователя, увеличивает среднюю продолжительность сессии, повышает его удовлетворенность, он способен улучшить видимость сайта в поиске, может увеличить конверсию и средний чек. Фильтры в интернет-магазине это замена продавца-консультанта, потому к их созданию следует подходить не менее серьезно, чем к обучению продавцов-консультантов.
Фильтрация товаров — возможность сузить ассортимент до выборки с характеристиками, наиболее релевантными потребностям пользователя. Такими характеристиками может быть цена, цвет, размер, бренд, материал или другой важный для пользователя параметр.
Наиболее распространены два подхода к дизайну меню фильтров: слева в боковой панели и горизонтально под шапкой сайта. Можно комбинировать оба эти подхода для упрощения и ускорения поиска.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd9b36e6d2cbf08075260_Frame%201321317932%20(1).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fd9ea70c6d2e5b1daf6a1_Frame%201321317933%20(3).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fda81bcbf28f2ed18259d_Frame%201321317934%20(2).webp)
В крупном интернет-магазине с широким ассортиментом товаров будет много параметров для поиска, поэтому лучше использовать боковое меню. Такой вариант подходит универсальным интернет-магазинам, а также ресурсам, продающим электронику, детские товары, ткани, и т. п.
На таких сайтах часто можно встретить функцию полного поиска, что дает возможность сравнивать две понравившиеся позиции, а также выборки «лидер по популярности», «новое», «рекомендуемое», «акции», «сопутствующие продукты», «аналогичные товары». Среди дополнительных опций, которые можно добавить: возможность читать статьи, оставлять комментарии, оценивать товары.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fdab8adf426f30f1da36d_Frame%201321317935%20(2).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fdb01474c7aa22f754c82_Frame%201321317936%20(1).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fdb351025aaa2e6bf0441_Frame%201321317937%20(1).webp)
Для интернет-магазинов из ниши модной одежды или украшений больше подойдет верхнее меню фильтра, так как параметров для поиска будет намного меньше. Такое меню занимает меньше места и дает возможность добавить больше товаров на выдаче.
После применения фильтра пользователь попадает на сформированную под его запросы страницу. Товары на ней расположены в соответствии с его приоритетами, наиболее релевантные его потребностям, поэтому коэффициент отказа минимальный, а конверсия максимальная.
Основные принципы организации фильтров в интернет-магазине
Существует ряд основных принципов организации фильтров в интернет-магазине, которых мы советуем придерживаться, чтобы добиться максимального удобства пользователя.
Принципы организации фильтров:
1. Предложите пользователю сначала выбрать категорию, а потом фильтровать
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fdb8899616d7219308b5d_Frame%201321317932%20(2).webp)
2. Разрешите пользователю выбирать в нескольких категориях
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fdc122f6b9e615e891722_Frame%201321317933%20(4).webp)
3. Предоставляйте уникальный набор фильтров для каждой категории
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fea59882d2ff6d7425de5_Frame%201321317934%20(3).webp)
4. Предоставляйте возможность фильтрации по всем характеристикам из превью карточек
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651feab4c66fcc839d0a442b_Frame%201321317935%20(3).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651feb020bc36df9346f2886_Frame%201321317936%20(2).webp)
5. Предложите тематические параметры фильтрации
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651feb4229bade198be6a5da_Frame%201321317936%20(3).webp)
6. Добавьте в фильтр параметры совместимости товаров
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651feb7c14d9ea05e7d06677_Frame%201321317937%20(2).webp)
7. Позаботьтесь о логике работы фильтра
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651febcdf3d12126fd61747b_Frame%201321317938%20(1).webp)
8. Популярные параметры фильтрации выводите выше
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fec0081acf7547cce07cf_Frame%201321317939%20(1).webp)
9. Разрешите комбинировать несколько значений фильтрации одного типа
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fec41a7bba96c5063048c_Frame%201321317940%20(1).jpg)
10. Выводите примененные пользователем фильтры
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651ff320142011abc83adf49_Frame%201321318026.webp)
11. Предусмотрите кнопку сброса фильтров
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fecb9fbc27a584f43a860_Frame%201321317941.webp)
12. Добавьте подсказки
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651ff0ffc2191e75b153c1f4_Frame%201321318024.webp)
13. Укажите количество товаров, соответствующих параметрам фильтрации
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/651fed4c3c080d14e30bf633_Frame%201321317943.webp)
14. Не показывайте пустой список товаров в отфильтрованной категории товаров
Проектируйте и настраивайте фильтры в вашем интернет-магазине по данному чек-листу, это поможет вам ничего не упустить:
Ошибки, которых следует избегать
Функционал фильтрации на страницах каталога призван упрощать выбор, но содержание и логика работы фильтров не всегда помогают пользователю, а иногда, напротив, увеличивают его путь к желаемому товару, что негативно сказывается на конверсии.
В работе над структурой каталога и фильтрами следует избегать следующих ошибок:
1. Слепо копировать чужую структуру
Структура каталога конкурентов может показаться подходящей лишь на первый взгляд, однако ваши ассортименты могут не совпадать, что приведет к тому, что ряд товаров потеряется в не своих категориях. Даже если вы берете уже готовую структуру, то необходимо уделить время, чтобы приладить ее под свой интернет-магазин.
2. Выгружать товары на сайт в том виде, в котором прислал поставщик
Описание и фотографии, которые предоставил поставщик могут быть низкого качества и содержать ошибки. Фото и описание товаров необходимо унифицировать, чтобы все они были выдержаны в едином стиле.
3. Не учитывать специфику товаров
Каждая ниша имеет свою специфику. Товары для дома, для детей и для рыбалки значительно отличаются друг друга. Фильтры и описание должны учитывать это.
4. Нелогично распределять категории
Если в вашем интернет-магазине продается множество разнообразных товаров, то вряд ли пользователь захочет посмотреть на все товары синего цвета в вашем ассортименте. Придерживайтесь разумной логики в процессе создания категорий.
5. Перегружать структуру, создавая слишком много разделов и подразделов
Бесконечный процесс поиска вряд ли обрадует пользователя. Чем сложнее и дольше поиск товара, тем меньше вероятность того, что пользователь найдет его и купит.
Чтобы избежать таких ошибок старайтесь смотреть на каталог вашего интернет-магазина глазами покупателя. Постоянно спрашивайте себя «удобно ли было бы мне совершать покупки на этом сайте?»
Заключение
Всегда помните о пользователе. Каталог и фильтры в интернет-магазине должны помогать ему найти нужный товар и сделать покупку. Структура должна быть удобной и понятной.