Редизайн інтернет-магазину. Структура меню та фільтрів

На сьогоднішній день, є основні 3 причини для редизайну інтернет магазину, як і для будь-якого сайту:

  1. Наявність української мови (для України). Вона має бути головною на сайті.
  2. Відсутність зручної мобільної версії сайту. До 80% відвідувань сайтів сьогодні вже відбувається на смартфонах. Для всіх ниш!
  3. Відсутність зручної та зрозумілої структури сайту/магазину. Для інтернет-магазину — це особливо важливо, оскільки найчастіше потрібно знайти один конкретний товар із тисячі.

У цій статті докладно розглянемо проблему та завдання щодо третього пункту — як створити зручну навігацію по сайту, що є структурою сайту.

Зручна навігація сайтом — правильна структура сайту

Структура будь-якого сайту визначається "меню". Структура інтернет-магазину визначається меню та фільтрами. Як правило, товари мають величезну кількість характеристик і властивостей. Саме з них ми маємо сформувати:

  • меню, що складається з категорій та підкатегорій,
  • фільтра — більш тонкі налаштування за характеристиками товару.
Пример меню и фильтра в горизонтальном виде в интернет магазине

Якщо передбачається, що в інтернет магазині продаватиметься якийсь простий товар, то сформувати меню і фільтра досить просто. Так само, це просто зробити, якщо магазин спеціалізується на якомусь одному виді товарів, наприклад одяг або телефони.

Але, якщо інтернет магазин спеціалізується на широкому спектрі товарів, то визначити категорії, підкатегорії та два-три-п'ять фільтрів — це стає часом непосильним завданням.

Наприклад, якщо це буде магазин електроніки і там продаватимуться телефони, комп'ютери, побутова техніка, товари для спорту та багато іншого, як у відомому нам магазині Allo. Або, наприклад, в інтернет-магазині для риболовлі можуть продаватися приманки, вудилища, одяг і навіть посуд. Саме робота над останнім сайтом із прикладів спонукала мене на написання цієї статті.

У чому складність створення структури інтернет-магазину?

Насправді, за словом «Структура» стоїть багато завдань:

  1. Зайшовши на головну або будь-яку іншу сторінку, людина повинна знайти бажаний товар максимум у 3 кліки.
  2. Посилання мають бути ЧПУ — бажано короткі (не більше 3-х рівнів) та зрозумілі.
  3. Будь-яка людина, навіть ваша бабуся, зайшовши в інтернет магазин, повинна легко зрозуміти логіку навігації.
  4. На картках товару можуть бути додаткові розділи: "супутні товари", "рекомендовані товари" або "з цим товаром часто шукають". Технічна реалізація (те, що роблять програмісти) часто обмежена можливостями CMS та фінансовими можливостями замовника. І про це треба подумати ще до того, як дизайнери почнуть малювати дизайн, а не коли ТЗ пишеться програмістам. І не дай Боже, щоб ця проблема вилізла, коли контенщик наповнює сайт.
  5. Потрібно враховувати, що сьогодні 80% відвідуваності інтернет-магазину буде на смартфонах. Це означає, що дуже складне меню та фільтр треба зробити дуже простим для навігації.
  6. Якщо ви плануєте писати SEO статті у категоріях, то важливо пам'ятати, що їх можна написати саме на сторінках категорій, а не фільтрів. В іншому випадку, ви зможете писати SEO статті лише у розділі «Блог». Цей пункт безпосередньо пов'язаний з семантичним ядром (СЯ).

Думаю, важливо запровадити одне правило для інтернет-магазину:

Потрібно зробити все, щоб не вводити нову сутність/змінну!

Властивість товару відправляти в меню чи фільтр?

Чим ширший запит, який потенційний клієнт може шукати ваш товар, то ймовірніше, що він стане складовою меню, тобто категорії чи підкатегорії. Чим вужча властивість, тим швидше, що вона стане частиною фільтра.

Тобто при створенні категорій та фільтра можна (я рекомендую!) спиратися на семантичне ядро (СЯ). Також, у цьому питанні, вам завжди надасть свої рекомендації замовник. Але іноді ці два фактори йдуть у розріз.

На допомогу прийде технічний аспект, який є основою програмування. На сторінках категорій та підкатегорій, на які ми потрапляємо з меню, ми можемо написати текст SEO. Коли ми попадаємо на якісь сторінки з фільтра, може здаватися, що ми також потрапляємо на незалежні статичні сторінки на кшталт категорій. Але це зовсім не так. До того ж, часто ці сторінки взагалі закриті для індексації роботами, для того, щоб на сайті не створювалася величезна кількість дублюючих неунікальних сторінок. Отже, на них нема рації взагалі писати SEO статті. Тому, якщо ви відправите у фільтр, якийсь широкий запит, то надалі можливо не зможете написати SEO текст на сторінці категорії чи підкатегорії.

Як пов’язані категорії/підкатегорії та фільтр із супутніми товарами?

Це дуже важливо зрозуміти! Наприклад, є інтернет магазин для рибалок, де продаються вудлища та котушки до вудилищ.

У цих розділах є підкатегорії: фідерні, коропові, сомові, вудилища спінінгові і відповідно котушки. Ми легко можемо вказати, щоб на товарах з короповими вудилищами супутніми товарами виводились коропові котушки, якщо ці види знаходяться саме у підкатегоріях. Але, якщо кваліфікація фідерні, коропові, сомові, вудилища спінінга і відповідно котушки виявляться у фільтрі, ми вже не зможемо вказати їх як супутні один для одного. Це технічно зробити неможливо! Тобто супутні товари прив'язані до категорій та підкатегорій.

Сопутствующие товары напрямую связаны с категориями и подкатегориями

Приклад категорій, підкатегорій та фільтрів у звичайному житті

Категорії можна порівняти з навігацією у супермаркеті. Це вказівники, які зазвичай звисають над кожним відділом.

Наприклад, каші, макарони, молочна продукція, лікеро-горілчані вироби.

Підкатегорії можна порівняти з найменуванням продукції. Наприклад, у молочному відділі буде секції з молоком, сиром,  кефіром та морозивом.

Розподіл конкретної продукції по виробниках — може бути віднесена, як до підкатегорії, так і до фільтра. Це залежатиме від кількості асортимента. Якщо асортимент невеликий, то на сайті часто можна зустріти сегментацію виробниками саме в меню. Якщо асортимент великий, то виробники, швидше за все, підуть в окремий фільтр.

Властивість морозива на смак піде у фільтр. Наприклад, це може бути морозиво шоколадне, біле, полуничне або з горішками. Або для ковбаси це буде фільтр за сортами: молочна, копчена, балик тощо.

У чому різниця між структурою в інтернет магазині, коли одна та кілька категорій товарів?

Покажу приклади.

Сайт спортивного одягу Марафон. Коли ми заходимо на головну сторінку сайту, одразу бачимо всі категорії одягу. Також виділені категорії за статтю та віком: чоловікам, жінкам, дітям. Зауважте, ми ще не зробили жодного клацання мишкою. Ідеально та все зрозуміло.

Интернет-магазин с одним направлением товаров

Погляньмо на сайт Алло. Ми бачимо багато категорій. І серед них є загальна категорія "Одяг, взуття, аксесуари". Ми вже один раз натиснули мишкою, щоб відкрити «Каталог товару».

І нам потрібно натиснути ще раз (другий) мишкою на цікавий для нас розділ, щоб побачити категорії та підкатегорії.

Пример сложного меню и подкатегорий

А тепер, давайте подивимося, як виглядатимуть посилання та хлібні крихти, якщо ми натиснемо на кросівки в обох випадках.

На сайті компанії Марафон:

  • коротке посилання;
  • короткий шлях у хлібних крихтах із 2-м рівнем вкладеності.
Короткая ссылка и хлебные крошки

На сайті компанії Алло:

  • коротке посилання, яке так зробили штучно, як вимагає SEO оптимізація;
  • хлібні крихти показують 5 рівнів вкладення! Реальне, природне посилання також має 5 рівнів, але, як я вже сказала, її підправили навмисно.
Длинную ссылку искусственно сделали короткой

На реальних прикладах ви самі побачили, у чому різниця між структурою в інтернет-магазині, коли одна і кілька категорій товарів. У другому варіанті додається один, два, а іноді і 5 рівнів вкладеності. А ви пам'ятаєте, я трохи вище писала про те, що в ідеалі користувач сайту повинен знайти потрібний товар в ідеалі в 3 кліки. У великому інтернет-магазині реалізувати це правило майже неможливо.

Але магазин Алло гарний у цьому. Погляньмо, як він вирішує це завдання? Він пропонує одразу кілька варіантів.

Якщо ми просто натиснемо на кореневу категорію «Одяг, взуття, аксесуари», потрапимо на проміжну сторінку з підкатегоріями по статті. Це довгий шлях.

Длинный путь по меню

Але ми можемо не робити цей зайвий крок, а скористатися спливаючим меню.

Пример сложного меню и подкатегорий

Це не стандартне подання меню. Над ним точно працюють давно і ретельно. Підозрюю, що воно ще й може змінюватись в залежності від сезону року. І насправді, щоб натиснути на «Кросівки» для жінок, ми зробили лише один клік, коли натиснули кнопку «Каталог». Далі ми просто вели мишкою.

Так, можливо, відвідувачкі сайта Алло, потрібні були б не кросівки, а босоніжки. Тоді вона натиснула б на посилання «Всі товари» і потрапила на проміжну сторінку.

Подкатегории на сайте

І тоді третій клік її приведе до потрібної категорії, де вона вже зможе скористатися фільтром. І так ми бачимо, що правило 3 кроків на сайті працює.

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

Коротенький підсумок

Давайте подивимося, з якими сущностями ми працюємо/пам'ятаємо, коли йдеться про структуру сайту:

  1. Семантичне ядро.
  2. Категорії та підкатегорії.
  3. Фільтри.
  4. Супутні товари.
  5. Посилання.
  6. Хлібні крихти.
  7. SEO статті.
  8. Дизайн десктопної та мобільної версії.

Коли ми розпочинаємо розробку структури сайту, ми також пам'ятаємо:

  • про зручність для користувача;
  • про можливості движка/CMS або вибраного шаблону сайту;
  • ціна для клієнта. Якщо працюють супер-фахівці програмісти, то, можливо, вони і все зможуть реалізувати. Але питання у тому, скільки це буде коштувати замовнику? Чи він готовий заплатити за роботу?

А в іншому, сьогодні можна зробити будь-який інтернет-магазин.

Нехай ваш інтернет-магазин буде вашим успішним бізнесом!