UI में सामग्री पदानुक्रम
1) पदानुक्रम की आवश्यकता क्यों है
एक सामग्री पदानुक्रम संकेतों की एक प्रणाली है जो टकटकी को निर्देशित करती है, संज्ञानात्मक भार को कम करती है, और निर्णय लेने को गति देती है। अच्छा पदानुक्रम:- 3-5 सेकंड में तीन सवालों के जवाब देता है: यह क्या है? क्या महत्वपूर्ण है?
- इंटरफ़ेस को अनुमानित और स्कैन करने में आसान बनाता है
- त्रुटियों को कम करता है और रूपांतरण को बढ़ाता है।
सिद्धांत: संकेत> शोर, अनुक्रम> विविधता, संदर्भ> पूर्ण नियम।
2) महत्व का स्तर और संरचना
स्तरों की अनुशंसित "सीढ़ी":1. नेविगेशन संदर्भ (ब्रांड, अनुभाग, crumbs/ब्रेड crumbs)।
2. H1 - स्क्रीन लक्ष्य (यथासंभव संक्षिप्त, क्रिया यदि आवश्यक हो)
3. सीसा/उपशीर्षक (लाभ या स्थिति की एक पंक्ति)।
4. प्राथमिक क्रियाएँ (1-2 कुंजी CTA)।
5. प्राथमिक डेटा (मुख्य केपीआई, प्रथम-पंक्ति कार्ड)।
6. द्वितीयक डेटा (भाग, फ़िल्टर, सहायक तालिकाएँ)।
7. मेटा/सहायता (संकेत, नोट्स, कानूनी पाठ)।
नियम: एक स्क्रीन पर - एक एच 1, दो से अधिक प्राथमिक सीटीए।
3) टाइपोग्राफी और लय
फॉन्ट स्केल: H1 28-32, H2 22-24, H3 18-20, बॉडी 14-16, माइक्रो 12 (वेब में px/pt समकक्ष)।
लाइन रिक्ति: 1। 3–1. 5 शरीर के लिए, 1। 2–1. खिताब के लिए 3।
इंडेंटेशन लय: आधार इकाई के कई (4/8 पीएक्स)। Zagolovok↔blok: 16-24; पैराग्राफ: 8-12।
कंट्रास्ट: WCAG AA न्यूनतम; शीर्षक हमेशा कैप्शन/मेटा की तुलना में अधिक विपरीत होता है।
रंग बनाम वजन: रंग - उच्चारण, आकार/वसा के बजाय "बैसाखी" नहीं।
4) ग्रिड और लेआउट
निश्चित गैटर के साथ ग्रिड 12 कॉलम (डेस्कटॉप )/4-6 (मोबाइल)।
नेत्रहीन पहला = DOM में पहला: स्क्रीन रीडर और SEO में मदद करता है।
अक्ष पढ़ ना: बाएं से दाएं (LTR) या दाएं से बाएं (RTL) - संकेतों के क्रम को दर्पण करें।
"ध्यान क्षेत्र": ऊपरी बाएं/केंद्र - शीर्षक और सीसा; "एक्शन बार" - इसके नीचे/नीचे।
5) दृश्य प्राथमिकता संकेत
आकार और वजन (टाइपोग्राफी) प्राथमिक संकेत है।
स्थिति (ऊपर/बाईं ओर = LTR में अधिक महत्वपूर्ण)।
रंग (सीटीए के लिए उच्चारण, स्थिति - एक निश्चित पैलेट के अनुसार)।
आइकनोग्राफी (केवल पाठ समर्थन के रूप में)।
इंडेंट्स/फ्रेम (बहुत अधिक "हवा" वाला एक कार्ड अधिक महत्वपूर्ण है)।
डायनेमिक्स (एनीमेशन ≤ 200 एमएस बिना जलन के ध्यान आकर्षित करने के लिए)।
6) प्रगतिशील प्रकटीकरण
परतों में जटिलता छुपाएँ:- तह के ऊपर - केवल संदर्भ, उद्देश्य और प्राथमिक क्रिया।
- अकॉर्डियन/टैब सेक्शन द्वितीयक डेटा हैं।
- ड्रिल-डाउन: कार्ड → पैनल → मोडल।
- ओवरलोड "मदद" के बजाय इनलाइन संकेत।
- कंकाल/प्लेसहोल्डर लोड की अवधि के लिए संरचना बनाए रखते हैं।
7) ठेठ स्क्रीन में पदानुक्रम
7. 1 डैशबोर्ड
शीर्ष पर H1 + टाइम फ़िल्टर।
केपीआई बार (3-5 कार्ड) - पहली पंक्ति।
ग्राफ/टेबल - सेकंड लाइन, सॉर्टिंग/फ़िल्टर कंधे से कंधा मिलाकर।
Anomalies/alerts - अलग कॉलम/टेप, KPI के साथ मिश्रण नहीं करते हैं।
7. 2 कैटलॉग/लॉबी
H1 + फास्ट फिल्टर/चिप्स।
शीर्षक के करीब छंटाई, कार्ड में CTA "Play/Buy"।
टैग (नया/शीर्ष/जैकपॉट) - नाम के लिए नेत्रहीन द्वितीयक।
7. 3 एंटिटी कार्ड (गेम/आइटम)
हीरो ज़ोन: नाम (H1), प्रमुख तथ्य (RTP/अस्थिरता/रेटिंग), प्राथमिक CTA।
विवरण: विवरण/विशेषता/प्रतिक्रिया टैब।
मेटाडेटा: लेबल और कानूनी पाठ - नीचे।
7. 4 फॉर्म/जादूगर
स्टेप हेडर + शॉर्ट लीड ("2 मिनट, कार्ड डिकमीशन नहीं है")।
आवृत्ति/अनिवार्य द्वारा क्षेत्रों का आदेश
सीटीए राइट/बॉटम, सपोर्टिंग एक्शन - लिंक बॉटम/लेफ्ट।
त्रुटियाँ - क्षेत्र के बगल में, संक्षेप में और मामले पर।
8) राज्य प्राथमिकता
पदानुक्रम को विभिन्न राज्यों का सामना करना चाहिए:- नॉर्म - लोड सफलता/खाली त्रुटि।
- लोडिंग में - फ्रेम (कंकाल) रखें, सीटीए कूदता नहीं है।
- त्रुटि में - H1 "क्या हुआ", CTA में बदल जाता है - "दोहराएं/संपर्क करें।"
9) सामग्री टोकन और डिजाइन प्रणाली
टोकन में पदानुक्रम एनकोड करें:- 'फ़ॉन्ट। शीर्षक। xl ',' फ़ॉन्ट। शरीर। md ',' स्पेस। 200 ',' त्रिज्या। md ',' ऊंचाई। sm '।
- पाठ भूमिकाएँ: 'पाठ। शीर्षक ',' पाठ। लीड ',' पाठ। माध्यमिक ',' पाठ। मेटा ',' पाठ। सहायक '।
- रंग भूमिकाएँ: 'उच्चारण/तटस्थ/सफलता/चेतावनी/खतरा' + 'स्तर' (100-900)।
- घटक: 'केपीआई। कार्ड/अनुभाग। शीर्षक/इनलाइन। मदद/मेटा। लाइन '।
10) मापन और गुणवत्ता
पढ़ ने योग्यता और पदानुक्रम मेट्रिक्स:- स्कैन टाइम (पहले सार्थक क्लिक/एक्शन के लिए औसत)।
- फ़ोकस ऑर्डर त्रुटियाँ (कितनी बार उपयोगकर्ता "लुक" को याद करता है)।
- CTA दृश्यता% (कितने CTA बनाम क्लिक देखा)।
- INP/CLS (पदानुक्रम लोड करते समय "कूदना" नहीं चाहिए)।
- A/B: बड़ा H1 बनाम मजबूत विपरीत; साइड पैनल में शीर्ष बनाम चिप फिल्टर।
- 'first _ focus _ targe', 'प्राथमिक _ cta _ expost/क्लिक', 'sequare _ clonse _ togggle', 'help _ down'।
11) iGaming के लिए अभ्यास (उदाहरण)
कैसीनो लॉबी: एच 1 "लॉबी", "न्यू/लाइव/जैकपॉट्स/पसंदीदा" चिप्स, फिर टाइलें। प्रत्येक कार्ड में एक नाम, प्रदाता आइकन, सीटीए "प्ले" होता है; नया/जैकपॉट टैग - द्वितीयक।
ऑपरेटर का डैशबोर्ड: पहली पंक्ति - एनजीआर/जीजीआर/डीएयू/सीआर, दूसरी - रुझान और विसंगतियां, तीसरी - तालिका।
भुगतान चरण: एच 1 "रिप्लेसमेंट", लीड "नो कमीशन, तुरंत", रूपांतरण विधियों की सूची, शीर्ष पर न्यूनतम मेटेक्स्ट।
12) एंटीपैटर्न
स्क्रीन पर एक ही ताकत के दस उच्चारण ("दृश्य चीख")।
पाठ के बिना चित्र/प्रतीक के रूप में शीर्षक (पहुँच और खोज को तोड़ ता है)।
"छोटे प्रिंट में परिणाम", और विशाल बैनरों में सूचनाएं।
समान दृश्य वजन के साथ प्राथमिक सीटीए के बगल में सहायक लिंक।
असंगत क्रम: आज "ऊपर से फिल्टर", कल "बाईं ओर से"।
13) कार्यान्वयन चेकलिस्ट
1. स्क्रीन लक्ष्य परिभाषित करें (H1 + 1-2 प्राथमिक क्रिया)।
2. स्तरों को चिह्नित करें: प्राथमिक/माध्यमिक/मेटा; डीएस टोकन के लिए पिन।
3. टाइपोग्राफी स्केल और बुनियादी इंडेंटेशन लय एकत्र करें।
4. एसटीए/शीर्षिका कूदने के बिना डिबग स्थिति (बूट/रिक्त/त्रुटि).
5. 3-5 लोगों के साथ 5 मिनट का "स्कैन टेस्ट" आयोजित करें: आपने क्या देखा, जहां आपने क्लिक किया।
6. टेलीमेट्री कनेक्ट करें (एक्सपोज़र CTA, स्कैन टाइम, फ़ोकस ऑर्डर)।
7. उदाहरणों से पहले/बाद में गाइड में पैटर्न को ठीक करें।
14) नीचे की रेखा
सामग्री पदानुक्रम "मुख्य के लिए बड़ा फ़ॉन्ट" नहीं है, लेकिन समाधान की एक प्रणाली है: टाइपोग्राफी, ग्रिड, रंग, इंडेंटेशन ताल, डोम में आदेश और विभिन्न राज्यों में व्यवहार। जब प्रत्येक स्तर की अपनी भूमिका और वजन होता है, तो इंटरफ़ेस स्पष्ट, तेज और अनुमानित हो जाता है, और उपयोगकर्ता अपने कार्यों में आश्वस्त होते हैं।