इंटरफ़ेस नेविगेशन आर्किटेक्चर
1) नेविगेशन वास्तुकला क्या है और इसकी आवश्यकता क्यों है
नेविगेशन आर्किटेक्चर (एनए) उपयोगकर्ता को एक उत्पाद में उन्मुख करने का एक सिस्टम तरीका है: वह कैसे समझता है कि वह कहां है, वह कहां जा सकता है और कैसे लौटना है। अच्छा NA:- सामग्री संरचना/सुविधा के साथ उपयोगकर्ता लक्ष्यों
- अनुमानित पैटर्न के माध्यम से संज्ञानात्मक लोड को कम करता है।
- परिणाम को गति देता है (कम क्लिक/कूदता है)।
- उत्पाद बढ़ ने के साथ तराजू।
सिद्धांत: स्थिरता> रचनात्मकता, स्पष्ट दिशानिर्देश> छिपे हुए इशारे, पथ प्रमुख लक्ष्य के लिए 3-4 क्रियाओं से छोटा है।
2) नेविगेशन परतें (आईए स्तर)
1. वैश्विक स्तर - उत्पाद अनुभाग (उदाहरण के लिए: लॉबी, लाइव, प्रमोशन, वॉलेट, प्रोफाइल)।
2. अनुभाग/श्रेणी - उपसमूह और कुंजी फ़ंक्शन (कैटलॉग, रिपोर्ट, सेटिंग)।
3. पृष्ठ/दृश्य - विशिष्ट इकाइयाँ (खेल, रिपोर्ट, प्रपत्र)।
4. स्थानीय/प्रासंगिक - टैब, एंकर, "अधिक दिखाएं", पृष्ठभूमि।
5. इतिहास और वापस आने का रास्ता - रोटी टुकड़े, वापस, "अंतिम तक।"
नियम: हर स्तर पर एक स्पष्ट होना चाहिए "मैं कहाँ हूं?" (सक्रिय आइटम आवंटन, H1/crumbs) और "आगे क्या?" (CTA/संदर्भ/सिफारिशें)।
3) नेविगेशन मॉडल और उन्हें कब चुनना है
शीर्ष-नव: 5-7 शीर्ष-स्तरीय खंड। उपभोक्ता इंटरफेस और मोबाइल के लिए अच्छा (निचले टैब में बदल जाता है)।
निम्न टैब (मोबाइल): 5 तक आइटम, फिक्स्ड, आइकन + लेबल। मुख्य क्रियाएं हमेशा अंगूठे के नीचे होती हैं।
लेफ्ट साइडबार: गहराई 2-3 स्तर, उत्पादों और प्रशासकों में काम करती है। अक्सर वस्तुओं के लिए पतन/पिन।
मेगा-मेनू: बड़ी कैटलॉग (दुकानें, सामग्री पूल)। विषय द्वारा समूह, संकेत और त्वरित लिंक जोड़ ता है।
रोटी के टुकड़े: गहरे रास्तों और SEO सामग्री के लिए; H1 और शीर्ष नेविगेशन की जगह न लें।
प्रासंगिक नेविगेशन: टैब, चिप फिल्टर, "संबंधित", लॉन्ग्राइड में सामग्री की तालिका (टीओसी)।
कमांड पैलेट/ग्लोबल सर्च (⌘K): इकाई के नाम और कार्यों पर त्वरित क्लिक करें।
शॉर्टकट और इशारे: पावर-यूजर्स (हॉटकी, स्वाइप्स) - लेकिन हमेशा एक यूआई समकक्ष के साथ।
विकल्प इस पर निर्भर करता है: विभाजन की संख्या, गहराई, उपयोग की आवृत्ति और उपकरणों।
4) यूआरएल रूटिंग और रणनीति
पढ़ ने योग्य URL: '/games/slot/[ slug] ', '/report/ngr? अवधि = Q3 '।
स्थिरता: पुनर्निर्देशन के बिना URL को न बदलें; पिछड़ी संगतता रखें।
स्थिति पैरामीटर वाले मार्ग: फ़िल्टर/सॉर्टिंग - क्वेरी में; आईडी रास्ते में है।
दृश्य सहेजने के लिए, मौजूदा फ़िल्टर/एंकर संदर्भ की नक़ल करें।
डीप लिंक: फुलफ/मेल से - सीधे लक्ष्य तक, सुरक्षित प्राधिकरण के साथ।
ऑफ़ लाइन और पुनर्प्राप्ति: वापसी पर - स्थिति/फ़िल्टर।
5) सूचना स्थल और लेबल
वस्तु की सक्रिय स्थिति (रंग/पट्टी, प्रतीक)।
H1 और लीड - पृष्ठ के संदर्भ में बोलें।
अनुभाग लोकेटर - crumbs, साइडबार में मार्कर, टैब हाइलाइटिंग।
खाली राज्य - सुझाव दें कि आगे कहां जाना है (सीटीए, मदद के लिए लिंक)।
स्थिर शब्दकोश - सभी स्थानों में तत्वों के समान नाम।
6) खोज और कमांड पैलेट
वैश्विक खोज: संस्थाओं का सूचकांक (खेल, प्रदाता, रिपोर्ट) + त्वरित क्रियाएं ("/जमा ", "/kyc ")।
ऑटो-पूर्णता: हाल और लोकप्रिय प्रश्न, संकीर्ण संकेत।
शब्दार्थ: परिणामों के व्यक्तिगत "प्रकार" (संस्थाएं, सहायता पृष्ठ, सेटिंग्स)।
कमांड पैलेट (⌘K): नामों और हॉटकी द्वारा रूटिंग, रूसी/अंग्रेजी/पर्यायवाची शब्दों के लिए समर्थन।
7) राज्यों, भूमिकाओं और पहुंच
RBAC: केवल उपलब्ध विभाजन दिखाएँ; ग्रे "ताले" - आर्थिक रूप से और एक स्पष्टीकरण के साथ।
अतिथि मोड: सीमित मेनू आइटम, CTA पंजीकरण/लॉगिन की ओर ले जाता है।
किरायेदारी: ब्रांड/ऑपरेटर द्वारा रिक्त स्थान - वैश्विक चयनकर्ता में आवंटन।
अधिकारों में वृद्धि: KYC/2FA - नए मार्ग खुलने के बाद।
8) मोबाइल सुविधाएँ
निचला नेविगेशन (≤5): लॉबी, लाइव, प्रमोशन, वॉलेट, प्रोफाइल।
फ्लफ से द्विगुणित: वांछित टैब/टैब/एंकर की ओर ले जाएँ; वापसी - पिछली स्थिति में।
इशारों वापस: स्वाइप हिंडोला (अक्षीय ताला) के साथ संघर्ष न करें।
स्टिकी तत्व: मिनी-प्लेयर/करंट गेम, "डिपॉजिट" - फ्लोटिंग सीटीए।
9) उपलब्धता और स्थानीयकरण
फोकस क्रम दृश्य पदानुक्रम से मेल खाता है।
ARIA मेनू/crumbs/टैब के लिए विशेषता। प्रतीक के लिए हस्ताक्षर आवश्यक हैं।
कुंजीपट नेविगेशन: तीर/टैब/दर्ज करें; दृश्यमान फोकस।
आरटीएल/भाषाएँ: दर्पण ग्रिड और बिंदु क्रम, माइक्रो-कॉपीराइट का स्थानीयकरण करें।
कंट्रास्ट और आयाम: WCAG AA न्यूनतम; टैप टारगेट ≥ 44px।
10) प्रदर्शन और स्थिरता
प्रगतिशील नेविगेशन लोडिंग: साइडबार/मेनू के लिए कंकाल।
मेनू/शब्दकोश कैशिंग: कम अक्सर नेटवर्क खींचते हैं, तत्काल नेविगेशन।
निकटतम मार्गों का प्रीलोडिंग: होवर/फोकस द्वारा; उचित बजट।
स्थिरता: पुनः लोडिंग के दौरान कूद न करें (निश्चित आयाम)।
404/403 से सुरक्षा: अनुकूल पृष्ठ और तेज "वापस"।
11) टेलीमेट्री और मेट्रिक्स
घटनाएँ:- 'nav _ क्लिक' (स्रोत, आइटम, स्थिति), 'रूट _ चेंज', 'search _ query/select',
- 'ब्रेडक्रंब _ क्लिक', 'डीपलिंक _ ओपन', 'बैक _ यूज्ड', 'नॉट _ फाउंड _ व्यू'।
- टाइम-टू-टारगेट।
- नव त्रुटि दर (404/403/अधिकार त्रुटियां)।
- रिटर्न रेट (कितने तुरंत वापस लौटे, एक गैर-स्पष्ट पथ का संकेत है)।
- खोज सफलता% (≤2 क्लिक में परिणाम)।
- दत्तक कमांड पैलेट और कीबोर्ड शॉर्टकट।
- साइडबार बनाम मेगा मेनू; ऊपर बनाम चिप फिल्टर से टैब; "खोज हमेशा दिखाई देती है" बनाम क्लिक करके।
12) iGaming के लिए पैटर्न (उदाहरण)
ऑपरेटर वेब कैसीनो (बी 2 सी):- विश्व स्तर पर: लॉबी/लाइव/एक्शन/टूर्नामेंट/पर्स/प्रोफाइल।
- लॉबी के अंदर: चिप फिल्टर (नया, जैकपॉट, प्रदाता, खरीद-बोनस), खोज।
- Crumbs - प्रदाताओं/लेखों के पृष्ठों पर, लॉबी में नहीं।
- साइडबार: डैशबोर्ड/कंटेंट/पार्टनर/रिपोर्ट/अनुपालन/सेटिंग्स।
- अनुभागों के अंदर - टैब (सूची/रिलीज/प्रमाणन)।
- कमांड पैलेट: "आईडी द्वारा खोलें खेल", "रिलीज़बनाएँ", "निर्यात रिपोर्ट"।
13) एंटीपैटर्न
बिना ग्रुपिंग (दृश्य शोर) के 20 + आइटम के लिए मेनू।
विभिन्न स्थानों पर एक ही खंड के अलग-अलग नाम।
सिर्फ बर्गर मेनू में (डेस्कटॉप पर) महत्वपूर्ण नेविगेशन छुपा.
फिल्टर के रूप में टैब का पुन: उपयोग (विभिन्न अर्थ - एक प्रकार)।
संक्रमण जो राज्य को तोड़ ते हैं ("वापस" होने पर फिल्टर को रीसेट करना)।
स्टिकी पैनल जो सामग्री और सीटीए को ओवरलैप करते हैं।
14) कार्यान्वयन चेकलिस्ट (स्प्रिंट द्वारा)
स्प्रिंट 1 - मानचित्र: अनुभागों की सूची, लक्ष्य पथ (शीर्ष-कार्य), शब्दों का शब्दकोश।
स्प्रिंट 2 - आईए: समूहीकरण, स्तर, मॉडल चयन (शीर्ष-नव/साइड/मेगा/टैब)। प्रोटोटाइप।
स्प्रिंट 3 - राउटिंग/यूआरएल: पढ़ ने योग्य पथ, फिल्टर सहेजने, डिप्लिंक, 404/403।
स्प्रिंट 4 - Poisk/⌘K: इकाई सूचकांक, ऑटो-पूर्णता, त्वरित क्रियाएं।
स्प्रिंट 5 - एक्सेसिबिलिटी/लोकेल: कीबोर्ड, ARIA, RTL, कंट्रास्ट।
स्प्रिंट 6 - टेलीमेट्री/ए-बी: टाइम-टू-टारगेट, सर्च सक्सेस, बैक-बाउंस; परीक्षण मॉडल।
स्प्रिंट 7 - प्रदर्शन: शब्दकोश/मेनू कैश, आसन्न मार्गों का प्रीफेच, कंकाल।
15) शब्दावली
आईए (सूचना वास्तुकला) - अनुभागों/सामग्री की तार्किक संरचना।
शीर्ष-नव/साइड-नव/टैब/मेगा-मेनू - नेविगेशन मॉडल।
ब्रेडक्रंब्स - एक गहरे पदानुक्रम के लिए "ब्रेडक्रंब्स"।
किसी विशिष्ट अवस्था/खंड से गहरी कड़ी।
कमांड पैलेट - हॉटकी द्वारा वैश्विक खोज/क्रिया।
लक्ष्य स्क्रीन/क्रिया तक पहुंचने के लिए समय से लक्ष्य समय।
16) नीचे की रेखा
एक नेविगेशन आर्किटेक्चर एक उत्पाद मानचित्र है जो उपयोगकर्ता के पथ को छोटा और अनुमानित बनाता है। सफलता निम्नलिखित द्वारा दी
1. स्पष्ट आईए,
2. स्थिर पढ़ ने योग्य URL और दृढ़ ता,
3. संयुक्त नेविगेशन मॉडल (मेनू + टैब + poisk/⌘K),
4. उपलब्धता और स्थानीयकरण,
5. लगातार पीसने के लिए मैट्रिक्स और ए/बी।
तो इंटरफ़ेस स्पष्ट और तेज़ रहता है, तब भी जब कार्यक्षमता बढ़ ती है।