Сторінка категорії

Сторінка категорії — це сторінка інтернет-магазину, яка збирає товари однієї групи (наприклад, «Кросівки» чи «Холодильники») і допомагає перейти до потрібного. Її часто плутають зі сторінкою списку товарів (product listing page): категорія — це проміжний крок із описом і підкатегоріями, а список — це самі товари з фільтрами.

Простими словами

Покупець рідко одразу потрапляє на картку товару. Спершу він заходить у розділ, дивиться, що там є, і звужує вибір. Від того, наскільки зрозуміла ця сторінка, залежить, чи дійде він до картки товару.

Nielsen Norman Group описує дві моделі (NN/g):

• Традиційна категорія — проміжна сторінка з описом, меню підкатегорій і промо. Підходить для складних товарів, які треба спершу зрозуміти (розумні годинники, спортивне обладнання), та для великих каталогів із багатьма підкатегоріями.
• Гібрид — одразу список товарів із фільтрами; короткий опис, підкатегорії або промо розміщені на самому списку.

Дослідники NN/g також помітили, що багато сайтів відмовляються від окремих категорійних сторінок і поєднують їх зі списком, щоб скоротити кількість кліків (NN/g).

Що має бути на сторінці

За NN/g (NN/g):

• Підкатегорії окремо від фільтрів, зазвичай над списком. Це допомагає звузити вибір і не перевантажує.
• Мінімум на картці у списку: коротка назва зі значущими характеристиками, великі фото, що показують відмінності, ознаки інших кольорів чи варіантів, ціна.
• Додатково: рейтинг, позначки «новинка», «знижка», наявність (наприклад, доступні розміри), швидкий перегляд, друге фото при наведенні.
• Чіткі назви категорій у головному меню замість одного пункту «Каталог».
• Поліерархія: товар чи підкатегорія може бути в кількох розділах, щоб покупець знайшов її там, де шукає.

Пошук не повинен вести на рекламну категорію: за NN/g, коли людина вводить назву бренду, вона хоче бачити товари (NN/g).

Довгі списки: сторінки чи нескінченна прокрутка

NN/g радить обирати за розміром каталогу (NN/g):

• пагінація — для дуже великих каталогів;
• нескінченне завантаження — для невеликих (близько до 40 товарів на сторінці), за умови хороших фільтрів;
• кнопка «Показати ще» — компроміс: підвал сайту з умовами доставки лишається досяжним.

Показуйте загальну кількість товарів і скільки вже відкрито («Показано 40 із 333») та повертайте покупця на те саме місце списку після кнопки «Назад».

Як на це дивляться різні джерела

Baymard оцінював списки товарів на 170+ сайтах: 58% десктопних і 78% мобільних сайтів мають «посередній» чи гірший результат. 42% сайтів не об'єднують варіації товару (кольори) в один пункт списку (Baymard). Це збігається з порадою NN/g тримати варіанти одного товару в одному записі (NN/g). Докладніше про фільтри: фільтри каталогу.

Типові помилки

• Категорія з одним лише банером і без підкатегорій.
• Фото, що не показують різницю між товарами.
• Кожен колір як окремий товар у списку.
• Нескінченна прокрутка без підвалу й без лічильника.
• Втрата місця у списку після повернення з картки.

FAQ

Чим сторінка категорії відрізняється від сторінки списку товарів? Категорія — проміжна сторінка з описом і підкатегоріями, список — самі товари з фільтрами та сортуванням. Багато сайтів їх поєднують.

Чи потрібен текст на сторінці категорії? NN/g радить стислий опис, який можна пропустити, не він має блокувати товари (NN/g).

Пагінація чи нескінченна прокрутка? Залежить від кількості товарів. Для великих каталогів — пагінація, для малих — завантаження «Показати ще» чи нескінченне.

Пов'язані терміни

• Фільтри каталогу
• Картка товару
• Пошук по сайту
• Мобільна версія магазину
• Що таке юзабіліті сайту і як його оцінити

Джерела

• Nielsen Norman Group. Traditional and Hybrid Category Pages — nngroup.com/articles/category-pages
• Nielsen Norman Group. UX Guidelines for Ecommerce Homepages, Category Pages, and Product Listing Pages — nngroup.com/articles/ecommerce-homepages-listing-pages
• Nielsen Norman Group. Alternatives to Pagination on Product-Listing Pages — nngroup.com/articles/alternatives-pagination-listing-pages
• Nielsen Norman Group. Design Guidelines for Selling Products with Multiple Variants — nngroup.com/articles/products-with-multiple-variants
• Baymard Institute. Product List UX Best Practices 2025 — baymard.com/blog/current-state-product-list-and-filtering