Покупець у каталозі постійно відповідає собі на два питання: «де я зараз?» і «куди піти далі?». Якщо сайдбар не дає відповіді за секунду, людина повертається у пошук — часто вже не ваш. Ми переробили навігацію каталогу так, щоб обидві відповіді були на видноті: одна зрозуміла гілка категорій замість двох списків, кількість товарів біля кожної підкатегорії й фільтри, які не тікають за межі екрана.
Що було не так
Раніше на сторінці категорії у сайдбарі йшли поспіль два незалежні списки: картка «Підкатегорії» й повне дерево каталогу магазину. Результат — типова для інтернет-магазинів плутанина:
- та сама підкатегорія зустрічалася двічі, у двох різних списках;
- поточна категорія дублювала заголовок сторінки, але виглядала як звичайне посилання;
- у великого дерева не було навіть заголовка — покупець не розумів, що це взагалі за перелік;
- найголовніше: через два довгі списки фільтри опускалися нижче першого екрана — інструмент, заради якого сайдбар і існує, покупець просто не бачив.
Як стало: одна гілка «Категорії»
Тепер у сайдбарі один блок із заголовком «Категорії», який показує рівно те, що потрібно людині в цій точці каталогу:
- крок угору — посилання зі стрілкою на батьківську категорію (а для категорії верхнього рівня — «Усі категорії»);
- поточна категорія — виділена й без посилання: покупець бачить, де він, і не клікає туди, де вже перебуває;
- підкатегорії з кількістю товарів — «Столи (28)», «Крісла, стільці, лавиці (45)»;
- якщо категорія кінцева й підкатегорій немає — показуються сусідні категорії того ж рівня разом із поточною. Тобто глухого кута не буває: завжди видно, куди рушити далі.
Повне дерево всього каталогу зі сторінки категорії прибрано — воно нікуди не зникло, а живе там, де його й шукають: у меню «Каталог» у шапці та в бічній панелі каталогу. Сайдбар категорії більше не намагається бути картою всього магазину.
Числа біля підкатегорій
Кількість товарів біля назви підкатегорії — дрібниця, яка змінює поведінку. Покупець одразу бачить, де «густо», а де одна позиція, і не витрачає кліки на порожні розділи. Власнику магазину ті самі числа показують перекоси асортименту: у якій підкатегорії лише один товар і чи варта вона окремого розділу взагалі.
Фільтри повернулися на перший екран
Оскільки сайдбар більше не займають два довгі списки, фільтри знову видно одразу. До того ж колонка навігації «прилипає» під шапкою: коли покупець гортає товари, категорії й фільтри лишаються поруч, а не їдуть кудись угору. Якщо фільтрів багато, вони прокручуються всередині своєї колонки — сторінка від цього не розтягується.
Разом із фільтрами з лічильниками товарів це дає цілісний сценарій: покупець бачить, де він, скільки товарів у сусідніх розділах і скільки залишиться після кожного фільтра.
На мобільному — стрічка категорій
На телефоні сайдбара немає, тому навігація перетворюється на горизонтальну стрічку «чипів» одразу під заголовком категорії. Перший чип — крок угору зі стрілкою, далі сусідні розділи; поточна категорія в стрічці виділена й некликабельна. Це та сама логіка, що на десктопі, але в форматі, звичному для мобільних маркетплейсів: один рух пальцем — і покупець бачить усі сусідні розділи.
Чим це корисно магазину
- більше переглянутих сторінок. Коли сусідні розділи видно, покупець ходить каталогом, а не повертається в Google;
- менше «глухих кутів». Навіть у кінцевій категорії видно, куди рушити далі;
- фільтри працюють. Інструмент, який реально впливає на конверсію, більше не ховається під двома списками;
- зрозуміла структура. Одна гілка замість двох переліків знімає плутанину з дублями й повторами;
- звичний патерн. Так влаштована навігація великих маркетплейсів — покупцеві не треба вчитися користуватися вашим каталогом.
Що потрібно налаштувати
Нічого — нова навігація вмикається сама разом з оновленням платформи й працює в усіх темах оформлення, у макетах із сайдбаром і на повну ширину, у режимах «плитка» та «список». Єдине, що дійсно варто зробити власнику, — привести до ладу структуру каталогу: логічні рівні вкладеності й категорії, у яких є товари. Навігація показує вашу структуру чесно, тож усі перекоси в ній стають помітними — і це добра нагода їх виправити.
Часті питання
Куди поділося повне дерево каталогу? Воно лишилося в меню «Каталог» у шапці й у бічній панелі каталогу. Зі сторінки категорії його прибрано, щоб не дублювати навігацію.
Чому поточна категорія не клікається? Це навмисно: посилання «саме на себе» лише збиває з пантелику. Виділення показує, де покупець зараз.
Що буде, якщо в категорії немає підкатегорій? Покупець побачить сусідні категорії того ж рівня разом із поточною — щоб можна було перейти вбік, а не тільки назад.
Чи працює це на мобільному? Так, у вигляді горизонтальної стрічки категорій над товарами.
Чи треба щось міняти в темі магазину? Ні. Оновлення приходить з платформою в усі теми оформлення.
Підсумок
Навігація каталогу — це не декор, а робочий інструмент: вона тримає покупця всередині магазину й доводить його до товару. Одна зрозуміла гілка категорій, числа біля підрозділів, фільтри на першому екрані й стрічка категорій на мобільному працюють на одну мету — щоб людина не гадала, де вона й куди далі. Усе це вже в платформі, налаштувань не потрібно. Інші можливості — у рубриці «Можливості».