Хлібні крихти і шлях користувача

1) Роль і цінність

• показують, де я перебуваю в ієрархії;
• дають швидкий зворотний шлях на рівень вище;
• зменшують «back-bounce» (повторні кліки «назад»);
• підвищують виявлюваність сусідніх рівнів і покращують SEO для контентних сторінок.

Принципи: простота> деталізація, ієрархія> історія кліків, стійка структура> динамічний шум.

2) Коли використовувати

Глибокі каталоги і контент (провайдер → категорія → гра/стаття).
B2B-адмінки та звіти з 2-3 + рівнями вкладеності.
Лонгриди/доки з розділами і змістом (крихти + TOC).
Не потрібні на екранах верхнього рівня (лобі/дешборд), де глибини немає.

3) Типи крихт

1. Ієрархічні (структурні) - відображають IA, а не маршрут користувача:

'Головна › Провайдери › Play'n GO › Book of Dead'

2. По дорозі (history-based) - відображають фактичний маршрут (рідко доречно у вебі; ближче до «назад»).
3. Гібрид - ієрархія + останній крок зі збереженими фільтрами/контекстом.

Рекомендація: за замовчуванням - ієрархічні, щоб уникнути «шуму» від випадкових переходів.

4) Склад і формат

Роздільник: '›'або '/' (консистентно з дизайном і локаллю).
Стартова точка: «Головна «/логотип клікабелен.
Усічення: при глибині> 4 рівнів приховувати середні ланки в «»... з розкриттям.
Останній елемент: поточна сторінка, неклікабельна і візуально акцентована.
Довжини заголовків: обрізка з багатоточністю, але з повним'title '/tooltip при hover/focus.

5) Генерація крихт (логіка)

Будувати по канонічній ієрархії URL/IA, а не по referer'y.
Для сутностей (гра/стаття) брати основну категорію (або «хлібну» категорію), а не випадкові теги.
Для динамічних сторінок (фільтри, сортування) - крихти вказують шлях до базового розділу, а контекст показується окремо (чіпи фільтрів).
При мультитенантності додавати контекст бренду/оператора на початку або в селекторі поруч, але не перевантажувати крихти.

6) Фільтри, сортування, пагінація

Фільтри не повинні «подовжувати» крихти. Відображайте їх нижче в чіпах («Провайдери › Live» + чіпи: Geo=CA, Device=Mobile).
Пагінація не входить в крихти; поточна сторінка показується в контролі списку.
Скидання фільтрів по кліку на батьківський рівень: повернення до «чистої» категорії.

7) Мобільний UX

Розміщувати крихти під H1 одним рядком; при нестачі місця - горизонтальний скролл або усічення середніх ланок.
Тап-таргети ≥ 44px, помітний фокус при клавіатурній навігації (для PWA).
Не дублювати системний «Назад» - крихти для структури, кнопка - для історії.

8) Доступність (A11y)

Використовувати семантику'nav [aria-label = «breadcrumb»]'і'ol> li'.
Вказувати'aria-current =» page»'на останньому елементі.
Контраст посилань відповідає WCAG AA; фокус - видимий.
Іконка/роздільник - не єдиний сигнал (є текстові лейбли).
Порядок в DOM відповідає візуальному порядку.

9) SEO і дані

Для контентних сторінок використовувати структуровані дані BreadcrumbList (JSON-LD).
Канонічні URL і стабільні крихти допомагають пошуку розуміти ієрархію.
Не індексувати «порожні» проміжні вузли без контенту (уникати thin pages).

10) Патерни відображення

Класичний ряд: 'Головна › Розділ › Підрозділ › Сторінка'.
З усіченням: «Головна ›... › Категорія › Картка».
З контекстом бренду (B2B): 'Brand A › Звіти › Дохід › NGR'.
З якорями в доках: «Документація › KYC › #Уровни -перевірки» (якір - в TOC, крихти - до розділу).

11) Поведінка та мікроінтеракції

Hover/focus підсвічує посилання і область кліка (вся «крихта», а не тільки текст).
Остання «крихта» може мати доп.меню з сусідніми сутностями (наприклад, інші ігри цього провайдера) - акуратно, не перевантажуючи.
Перехід «на рівень вище» зберігає позицію/сторінку списку, якщо це не ламає каноніку (наприклад, к'? page = 2').

12) Метрики і телеметрія

• `breadcrumb_click(level, label, url)`
• 'breadcrumb _ expand _ more'( для усічених)
• 'back _ to _ parent _ retained _ context'( якщо зберегли позицію/сторінку)

• Use Rate: частка користувачів, які клікнули по крихтах на глибині ≥2.
• Back-bounce ↓: зниження кількості «назад» відразу після входу на глибокій сторінці.
• Time-to-Parent: час повернення на рівень вище.
• SEO CTR: зміна CTR сторінок з розміткою крихт.

13) Приклади для iGaming

B2C (казино): 'Головна › Провайдери › Pragmatic Play › Gates of Olympus'. На сторінці провайдера - чіпи фільтрів (Live/Slots/Megaways); крихти - тільки структура.
Турніри: «Головна › Турніри › Осінній кубок › Правила».
B2B (провайдер): 'Панель › Контент › Релізи › Book of Ra (ID 12345)'- останній елемент не клікабелен; поруч кнопка «Відкрити в операторі».

14) Антипатерни

Крихти, які повторюють H1 слово-в-слово без користі.
Історичні маршрути замість структури (хаотична «вервечка»).
Включення фільтрів і пагінації в крихти («Ігри › Слоти › page = 5»).
Остання крихта - посилання на саму себе.
Надмірна глибина, дрібний розмір, низький контраст - «невидимі крихти».
Неузгоджені назви ланок з меню/URL.

15) Чек-лист впровадження

1. Карта IA: визначити канонічні шляхи для сутностей.
2. Генератор: функція, що будує крихти з IA/URL (без залежності від referer).
3. Усічення: правила на глибині> 4, popover з повним шляхом.
4. A11y/SEO: `nav[aria-label]`, `ol/li`, `aria-current`, JSON-LD.
5. Стиль: контраст AA, адаптив на мобайлі, роздільники, розміри.
6. Контекст: фільтри/сортування - чіпами нижче, не в крихтах.
7. Телеметрія: події кліків/expand, Time-to-Parent, back-bounce.
8. Документація: приклади, анти-кейси, гайд за іменуванням ланок.

16) Підсумок

1. заснованими на канонічній ієрархії,

2. читаються і доступними,

3. стійкими до фільтрів/станів сторінки,

4. з вимірною користю (телеметрія/SEO).

Так вони дійсно допомагають орієнтуватися і скорочують шлях користувача до мети.