خرده نان و مسیر کاربر

1) نقش و ارزش

• نشان می دهد که در آن من در سلسله مراتب هستم ؛
• یک مسیر بازگشت سریع به سطح بالا ؛
• کاهش «بازگشت» (کلیک های مکرر «بازگشت») ؛
• افزایش قابلیت تشخیص لایه های همسایه و بهبود SEO برای صفحات محتوا.

اصول: سادگی> جزئیات، سلسله مراتب> تاریخ کلیک، ساختار مداوم> سر و صدای پویا.

2) هنگام استفاده

کاتالوگ های عمیق و محتوا (ارائه دهنده → دسته → بازی/مقاله).
مدیران B2B و گزارش ها با 2-3 + سطح تودرتو.
Longrides/اسکله با بخش و جدول محتویات (خرده + TOC).
در صفحه نمایش های سطح بالا (لابی/دشبورد) مورد نیاز نیست، جایی که عمق وجود ندارد.

3) انواع خرده

1. سلسله مراتبی (ساختاری) - منعکس کننده IA، نه مسیر کاربر:

ارائه دهندگان › خانگی › Play 'n GO › Book of Deads

2. در طول راه (مبتنی بر تاریخ) - نمایش مسیر واقعی (به ندرت در وب مناسب است ؛ (نزدیک به «عقب»)

3. Hybrid - سلسله مراتب + آخرین مرحله با فیلترهای ذخیره شده/زمینه.

توصیه: به طور پیش فرض - سلسله مراتبی برای جلوگیری از «سر و صدا» از انتقال تصادفی.

4) ترکیب و قالب

Delimiter: «›» یا «/» (مطابق با طراحی و محلی).
نقطه شروع: «خانه «/لوگو قابل کلیک است.

قطع: در عمق> 4 سطح، پنهان کردن لینک های میانی در... "با افشای

آخرین عنصر: صفحه فعلی، غیر قابل کلیک و بصری لهجه.
طول عنوان: برش با بیضوی اما کامل 'عنوان '/نکته ابزار در شناور/تمرکز.

5) تولید خرده (منطق)

با توجه به سلسله مراتب canonical URL/IA، نه با referer 'y ساخت.
برای اشخاص (بازی/مقاله)، دسته اصلی (یا «نان» رده)، و نه برچسب های تصادفی.
برای صفحات پویا (فیلترها، مرتب سازی) - خرده ها مسیر بخش پایه را نشان می دهند و زمینه به طور جداگانه نشان داده می شود (تراشه های فیلتر).
با چند اجاره، اضافه کردن زمینه نام تجاری/اپراتور در آغاز و یا در انتخاب کنار هم، اما خرده بار نیست.

6) فیلترها، مرتب سازی، صفحه بندی

فیلترها نباید «طول» خرده ها را افزایش دهند. آنها را در تراشه های زیر نمایش دهید («› Live Providers» + تراشه ها: 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 های کانونی و خرده های پایدار به جستجو در درک سلسله مراتب کمک می کنند.
گره های میانی «خالی» را بدون محتوا فهرست نکنید (از صفحات نازک اجتناب کنید).

10) الگوهای نمایش

سری کلاسیک: «صفحه اصلی › بخش › زیر بخش › صفحه».
کوتاه: «صفحه اصلی ›... › دسته › کارت».
با زمینه نام تجاری (B2B): «نام تجاری A › گزارش › درآمد › NGR».
با لنگرها در اسکله: «مستندات › KYC › # سطح چک» (لنگر - در TOC، خرده - قبل از بخش).

11) رفتار و میکرو تعاملات

شناور/تمرکز برجسته لینک و کلیک کنید منطقه (کل «خرده»، نه فقط متن).
آخرین «خرده» می تواند یک منوی اضافی با نهادهای همسایه (به عنوان مثال، بازی های دیگر از این ارائه دهنده) - منظم، بدون اضافه بار.

رفتن «بالا» موقعیت/صفحه لیست را حفظ می کند مگر اینکه کانون را بشکند (به عنوان مثال به.. صفحه = 2 ')

12) متریک و تله متری

• 'breadcrumb _ click (level, label, url)'
• 'breadcrumb _ expand _ more' (کوتاه شده)
• 'back _ to _ parent _ retained _ context' (اگر موقعیت/صفحه حفظ شود)

• Use Rate: نسبت کاربرانی که در عمق ≥2 روی خرده ها کلیک کرده اند.
• ↓ بازگشت گزاف گویی: کاهش مقدار «بازگشت» بلافاصله پس از ورود به صفحه عمیق.
• Time-to-Parent: زمان برای بازگشت به سطح بالاتر
• CTR SEO: تغییر CTR صفحات مشخص شده خرده.

13) نمونه هایی برای iGaming

B2C (کازینو): «ارائه دهندگان › خانگی › بازی عملی › گیتس الیمپوس». در صفحه ارائه دهنده - تراشه های فیلتر (زنده/شکافها/Megaways); خرده - تنها ساختار.
مسابقات: «مسابقات › خانگی › قوانین › جام پاییز».

B2B (ارائه دهنده): «Panel › Content › Releases › Book of Ra (ID 12345)» - آخرین عنصر قابل کلیک نیست ؛ در کنار دکمه Open in Statement

14) ضد گلوله

خرده هایی که H1 را کلمه به کلمه بدون فایده تکرار می کنند.
مسیرهای تاریخی به جای ساختار («رشته» هرج و مرج).
گنجاندن فیلتر و صفحه بندی در خرده («بازی ها › شکافها › صفحه = 5»).
آخرین قطره یک اشاره به خود است.
عمق بیش از حد، اندازه کوچک، کنتراست کم - «خرده نامرئی».
نام لینک های ناسازگار با منو/URL.

15) چک لیست پیاده سازی

1. IA map: مسیرهای متعارف را برای موجودیت ها تعریف می کند.
2. Generator: تابعی که خرده هایی را از IA/URL ایجاد می کند (به ارجاع دهنده وابسته نیست).
3. قطع: قوانین در عمق> 4، popover با مسیر کامل.
4. A11y/SEO: 'nav [aria-label]', 'ol/li', 'aria-current', JSON-LD.
5. سبک: کنتراست AA، † در تلفن همراه، تقسیم، ابعاد.
6. زمینه: فیلترها/مرتب سازی - تراشه های زیر، نه در خرده.
7. تله متری: روی رویدادها/گسترش، زمان به والدین، گزاف گویی کلیک کنید.
8. مستندات: نمونه ها، ضد موارد، راهنمای نامگذاری لینک.

16) خط پایین

1. بر اساس سلسله مراتب متعارف،

2. قابل خواندن و در دسترس،

3. مقاوم در برابر فیلتر/صفحه ایالات،

4. با سود قابل اندازه گیری (تله متری/SEO).

بنابراین آنها واقعا به حرکت و کوتاه کردن مسیر کاربر به هدف کمک می کنند.