रोटी के टुकड़े और उपयोगकर्ता का रास्ता

1) भूमिका और मूल्य

• दिखाओ कि मैं पदानुक्रम में कहाँ हूँ;
• ऊपर के स्तर पर एक त्वरित वापसी मार्ग दें;
• "बैक-बाउंस" (बार-बार क्लिक "बैक") को कम करें;
• पड़ोसी परतों की पहचान बढ़ाएं और सामग्री पृष्ठों के लिए SEO में सुधार करें।

सिद्धांत: सादगी> विस्तार, पदानुक्रम> क्लिक का इतिहास, लगातार संरचना> गतिशील शोर।

2) कब उपयोग करना है

डीप कैटलॉग और सामग्री (प्रदाता → श्रेणी → गेम/लेख)।

B2B 2-3 + घोंसले के शिकार के स्तर के साथ प्रशासन और रिपोर्ट करता है।

अनुभाग और सामग्री की तालिका (crumbs + TOC) के साथ Longrides/डॉक।

शीर्ष-स्तरीय स्क्रीन (लॉबी/डेशबोर्ड) पर आवश्यक नहीं है, जहां कोई गहराई नहीं है।

3) टुकड़ों के प्रकार

1. पदानुक्रमित (संरचनात्मक) - आईए को दर्शाता है, उपयोगकर्ता मार्ग को नहीं:

'होम › प्रोवाइडर्स › प्ले' एन गो › बुक ऑफ डेड '

2. जिस तरह से (इतिहास-आधारित) - वास्तविक मार्ग प्रदर्शित करें (शायद ही कभी वेब पर उपयुक् "बैक" के करीब)।

3. हाइब्रिड - पदानुक्रम + सहेजे गए फिल्टर/संदर्भ के साथ अंतिम चरण।

अनुशंसा: यादृच्छिक संक्रमण से "शोर" से बचने के लिए डिफ़ॉल्ट - पदानुक्रमित द्वारा।

4) रचना और प्रारूप

परिसीमन: '›' या '/' (डिजाइन और स्थान के अनुरूप)।

प्रारंभिक बिंदु: "होम "/लोगो क्लिक करने योग्य है।

ट्रंकेशन: गहराई> 4 स्तर पर, मध्य लिंक को छुपाएँ... "" प्रकटीकरण के साथ।

अंतिम तत्व: वर्तमान पृष्ठ, गैर-क्लिकेबल और नेत्रहीन उच्चारण।

शीर्षक लंबाई: दीर्घवृत्त के साथ क्लिप लेकिन पूर्ण 'शीर्षक '/होवर/फोकस पर टूलटिप।

5) टुकड़ों की पीढ़ी (तर्क)

रेफरी द्वारा नहीं, विहित URL/IA पदानुक्रम के अनुसार निर्माण करें।

संस्थाओं (गेम/लेख) के लिए, मुख्य श्रेणी (या "ब्रेड" श्रेणी) लें, न कि यादृच्छिक टैग।

गतिशील पृष्ठों (फ़िल्टर, सॉर्टिंग) के लिए - crumbs आधार अनुभाग के पथ को इंगित करते हैं, और संदर्भ को अलग से दिखाया जाता है (फ़िल्टर चिप्स)।

मल्टी-टेनेंसी के साथ, शुरुआत में या चयनकर्ता में ब्रांड/ऑपरेटर संदर्भ जोड़ें, लेकिन टुकड़ों को ओवरलोड न करें।

6) फिल्टर, छंटाई, पृष्ठभूमि

फिल्टर को टुकड़ों को "लंबा" नहीं करना चाहिए। उन्हें चिप्स ("› लाइव प्रदाता" + चिप्स: Geo = CA, डिवाइस = मोबाइल) में नीचे प्रदर्शित करें।

Pagination टुकड़ों में शामिल नहीं है; वर्तमान पृष्ठ सूची नियंत्रण में दिखाया गया है।

मूल स्तर पर क्लिक करके फिल्टर रीसेट करें: "स्वच्छ" श्रेणी में लौटें।

7) मोबाइल UX

एक पंक्ति में H1 के नीचे crumbs रखें; अंतरिक्ष - क्षैतिज स्क्रॉलिंग या मध्य लिंक के छंटनी की कमी के मामले में।

टैप-टारगेट ≥ 44px, कीबोर्ड नेविगेशन (PWA के लिए) के लिए ध्यान देने योग्य फोकस।

सिस्टम "बैक" की नकल न करें - संरचना के लिए crumbs, बटन - इतिहास के लिए।

8) उपलब्धता (A11y)

शब्दार्थ 'नव [आरिया-लेबल = "ब्रेडक्रंब"] और' ओल> ली 'का उपयोग करें।

अंतिम तत्व पर 'aria-corport =' पृष्ठ 'निर्दिष्ट करें.

संदर्भों का विपरीत WCAG AA से मेल खाता है; फोकस - दृश्यमान।

प्रतीक/विभाजक एकमात्र संकेत नहीं है (पाठ लेबल हैं)।

DOM में क्रम दृश्य क्रम से मेल खाता है।

9) SEO और डेटा

सामग्री पृष्ठों के लिए, संरचित डेटा BreadcrumbList (JSON-LD) का उपयोग करें।

कैनोनिकल यूआरएल और स्थिर टुकड़े खोज पदानुक्रम को समझने में मदद करते हैं।

सामग्री के बिना "खाली" मध्यवर्ती नोड्स इंडेक्स न करें (पतले पृष्ठों से बचें)।

10) प्रदर्शन पैटर्न

क्लासिक श्रृंखला: 'होम › सेक्शन › सब्सेक्शन › पेज'।

कटा हुआ: 'होम ›... › श्रेणी › कार्ड'।

ब्रांड संदर्भ (B2B) के साथ: 'ब्रांड A › रिपोर्ट › राजस्व › NGR'।

डॉक में एंकर के साथ: 'डॉक्यूमेंटेशन › KYC › # Leves-Checks' (एंकर - TOC में, crumbs - सेक्शन से पहले)।

11) व्यवहार और सूक्ष्मजीव

होवर/फोकस लिंक पर प्रकाश डालता है और क्षेत्र पर क्लिक करता है (पूरे "क्रम्ब", न कि केवल पाठ)।

अंतिम "क्रम्ब" में पड़ोसी संस्थाओं के साथ एक अतिरिक्त मेनू हो सकता है (उदाहरण के लिए, इस प्रदाता के अन्य खेल) - बड़े करीने से, बिना ओवरलोडिंग के।

"ऊपर" जाना सूची की स्थिति/पृष्ठ को संरक्षित करता है जब तक कि यह कैनन को तोड़ नहीं देता (उदा। 'करने के लिए? पृष्ठ = 2 ')।

12) मेट्रिक्स और टेलीमेट्री

• 'ब्रेडक्रंब _ क्लिक (स्तर, लेबल, url)'
• 'ब्रेडक्रंब _ extram _ more' (छंटनी के लिए)
• 'back _ to _ marce _ rereated _ consection' (यदि स्थिति/पृष्ठ को बरकरार रखा जाता है)

• उपयोग दर: उपयोगकर्ताओं का अनुपात जो crumbs पर crumbs गहराई पर क्लिक करते हैं।
• बैक-बाउंस ↓: गहरे पृष्ठ पर लॉग ऑन करने के तुरंत बाद "बैक" की मात्रा को कम करना।
• समय-से-माता-पिता: उच्च स्तर पर लौटने का समय।
• SEO CTR: crumb-चिह्नित पृष्ठों के CTR को बदलना।

13) iGaming के लिए उदाहरण

बी 2 सी (कैसीनो): 'होम › प्रोवाइडर्स › व्यावहारिक प्ले › गेट्स ऑफ ओलंपस'। प्रदाता के पृष्ठ - फ़िल्टर चिप्स (लाइव/स्लॉट/मेगावेज़) पर; crumbs - केवल संरचना।

टूर्नामेंट: 'होम › टूर्नामेंट › शरद कप › नियम'।

बी 2 बी (प्रदाता): 'पैनल › कंटेंट › रिलीज़ › बुक ऑफ़ रा (आईडी 12345)' - अंतिम तत्व क्लिक करने योग्य नहीं है; स्टेटमेंट बटन में ओपन के बगल में।

14) एंटीपैटर्न

बिना लाभ के H1 वर्ड-टू-वर्ड को दोहराने वाले crumbs।

संरचना के बजाय ऐतिहासिक मार्ग (अराजक "स्ट्रिंग")।

टुकड़ों में फिल्टर और पृष्ठभूमि को शामिल करना ("गेम्स › स्लॉट्स › पेज = 5")।

अंतिम टुकड़ा अपने आप में एक संदर्भ है।

अत्यधिक गहराई, छोटे आकार, कम विपरीत - "अदृश्य टुकड़े।"

मेनू/URL के साथ असंगत लिंक नाम।

15) कार्यान्वयन चेकलिस्ट

1. आईए मानचित्र: संस्थाओं के लिए विहित पथ परिभाषित करें।

2. जनरेटर: फ़ंक्शन जो IA/URL से crumbs बनाता है (रेफरेंसर पर निर्भर नहीं)।

3. ट्रंकेशन: गहराई पर नियम> 4, पूर्ण पथ के साथ पॉपओवर।

4. A11y/SEO: 'नव [आरिया-लेबल]', 'ओल/ली', 'आरिया-वर्तमान', JSON-LD।

5. शैली: एए कंट्रास्ट, † मोबाइल, डिवाइडर, आयाम पर।

6. संदर्भ: फ़िल्टर/सॉर्टिंग - चिप्स नीचे, crumbs में नहीं।

7. टेलीमेट्री: ईवेंट्स/एक्सटेंशन, टाइम-टू-पेरेंट, बैक-बाउंस पर क्लिक करें।

8. प्रलेखन: उदाहरण, विरोधी मामले, लिंक नामकरण गाइड।

16) नीचे की रेखा

1. विहित पदानुक्रम पर आधारित,

2. पढ़ ने योग्य और सुलभ,

3. फ़िल्टर/पृष्ठ राज्यों के लिए प्रतिरोधी,

4. औसत दर्जे का लाभ (टेलीमेट्री/एसईओ) के साथ।

तो वे वास्तव में लक्ष्य के लिए उपयोगकर्ता के मार्ग को नेविगेट और छोटा करने में मदद करते हैं।