सूची और ग्रिड: UX तुलना
1) जब सूची, जब ग्रिड (नियम 5 प्रश्न)
अपने आप से पूछें:1. उपयोक्ता लक्ष्य: जल्दी से पैरामीटर (सूची) की तुलना करें या दृश्य/कवर (ग्रिड) द्वारा चुनें?
2. डेटा फॉर्म: संरचना क्षेत्र (तालिका/पाठ) → सूची; दृश्य वस्तुओं (खाल, तस्वीरें) → ग्रिड।
3. घनत्व बनाम अवलोकन: प्रति स्क्रीन (सूची) या समान शोकेस (ग्रिड) अधिकतम वस्तुओं की आवश्यकता है?
4. तयशुदा क्रिया: खुला/विवरण (सूची) या तत्काल कार्ड (ग्रिड) से "Play/Buy"?
5. डिवाइस संदर्भ: मोबाइल पोर्ट्रेट - आमतौर पर कार्ड के लिए 2-इन-द-रो ग्रिड; डेस्कटॉप - सूची/तालिका पर रिपोर्ट/टेबल।
संक्षिप्त: तुलना - सूची; अपनी आँखों से चुनें - ग्रिड।
2) कंटेंट मॉडल और आईए
पंक्ति-पहले-मुख्य संकेत पाठ/क्षेत्र है। के लिए उपयुक्त: लॉग, लेनदेन इतिहास, रिपोर्ट, विशेषता खोज परिणाम।
कार्ड-पहला: मुख्य संकेत कवर/पूर्वावलोकन है। के लिए उपयुक्त: खेल/उत्पाद, मीडिया, संग्रह।
हाइब्रिड: "अनुकूली लाइन कार्ड" (मोबाइल पर - एक कार्ड, एक डेस्कटॉप पर - स्तंभों के साथ एक पंक्ति) एक ही डेटा स्रोत के साथ।
3) तत्वों का डिजाइन: पंक्ति बनाम कार्ड
पंक्ति (सूची पंक्ति)
संरचना: आइकन/थंबनेल (वैकल्पिक), शीर्षक, 1-3 कुंजी क्षेत्र, मेटा (तिथि/स्थिति), प्रासंगिक क्रियाएं (⋮)।
ताकत: पढ़ ने योग्यता, उच्च घनत्व, स्तंभों का अच्छा छंटनी योग्य सेट।
UX युक्तियाँ: ऊंचाई ठीक करें; ग्रिड को "खुलासा" में मामूली क्षेत्रों को छिपाने के लिए संरेखित करें।
ग्रिड कार्ड
संरचना: कवर, शीर्षक, कैप्शन/लेबल (नया/जैकपॉट), एक मुख्य सीटीए + अतिरिक्त कार्रवाई "..."।
ताकत: दृश्य पसंद, त्वरित कार्रवाई, भावनात्मक संदर्भ।
UX-tips: पहलू-अनुपात रखें (जैसे। 4: 3/1: 1), एक ही शीर्षक ऊंचाई, टूलटिप के साथ पाठ क्लिपिंग।
4) नेविगेशन, छंटाई और फिल्टर
सामान्य: फ़िल्टर और प्रकार पास और स्थिर हैं (बिना कूदे)। सक्रिय स्थिति - परिणामों पर चिप्स।
सूची: कई कॉलम + "फ्रीज" हेडर का समर्थन करें; हेडर पर क्लिक करके छंटाई।
ग्रिड: ड्रॉप-डाउन सूची द्वारा छंटाई; फिल्टर - चिप्स/पैनल द्वारा। "दृश्य" खोज के लिए - होवर/लॉन्ग-प्रेस पर पूर्वावलोकन।
5) मोबाइल बनाम डेस्कटॉप
मोबाइल:- ग्रिड: 2-इन-ए-पंक्ति (फोन), 3-इन-ए-पंक्ति (टैबलेट)। अंगूठे के क्षेत्र में बड़े सीटीए।
- सूची: कॉम्पैक्ट लाइनें (56-72dp), ढहने योग्य मेटा-फील्ड।
- ग्रिड: 4-6-इन-द-पंक्ति ≥1200px, 'मिनट' कार्ड की चौड़ाई के साथ ऑटो-फिल।
- सूची: तालिका/पंक्ति, स्तंभ नया आकार, त्वरित तालिका खोज.
6) राज्य और डाउनलोड
कंकाल: कंकाल लाइनें (न्यूनतम 3-5), कवर और पाठ प्लग के साथ कंकाल कार्ड।
रिक्त: समझाएं कि क्यों रिक्त और सुझाव प्रीसेट/फिल्टर हटा
त्रुटि: उपयोगकर्ता चयन और स्थिति सहेजें; फिर से कोशिश करें।
रीलोड: "अधिक दिखाओ" (हाइब्रिड) कैटलॉग में अंतहीन टेप के लिए बेहतर है; लॉग के लिए - आप "ठहराव" के साथ स्वतः स्क्रॉल कर सकते हैं।
7) प्रदर्शन
लक्ष्य: INP ≤ 200 ms, CLS ≤ 0। 1, स्क्रॉल-जानक <1%।
सूची: स्ट्रिंग वर्चुअलाइजेशन, फिक्स्ड हाइट्स, आस्थगित गणना।
ग्रिड: आलसी छवियां (AVIF/WebP), 'srcset/sizes', पूर्वानुमानित आकार, 20-60 कार्ड के "बैच" में।
सामान्य: 'सामग्री-दृश्यता: ऑटो', पूर्वावलोकन कैश, नायक तत्वों के लिए प्राथमिकताएं लोड करें।
8) सामर्थ्य
सूची: सही शब्दार्थ वाली तालिकाएं ('टेबल/थेड/टबॉडी', 'आरिया-सॉर्ट'), पंक्तियों/कोशिकाओं पर ध्यान केंद्रित करें।
ग्रिड: 'रोल = "ग्रिड" या' रोल = "लिस्ट" के साथ सूची; DOM = दृश्य में क्रम; छवियों के लिए कैप्शन।
कुंजीपटल: तीर/टैब; प्रविष्ट करें; अंतरिक्ष - "पसंदीदा के लिए" (यदि उचित हो)।
आकार क्लिक करें: ≥ 44px; एए कंट्रास्ट; आइकन पर स्पष्ट हस्ताक्षर।
9) मेट्रिक्स और टेलीमेट्री
घटनाएँ:- 'view _ switch (सूची' grid) ',' sont _ congrid ',' filter _ avplice ',' card _ quice _ action ',
- 'row _ open', 'तुलना करें _ open', 'परिणाम _ load _ batch', 'त्रुटि _ retry'।
- टाइम-टू-फर्स्ट-एक्शन (TTFA), qCTR परिणाम, स्क्रॉल गहराई, शून्य-परिणाम दर,
- दर (सूचियों के लिए), क्विक-एक्शन रेट (ग्रिड के लिए), लेटेंसी p95 की तुलना करें।
10) ए/बी प्रयोग (क्या परीक्षण करना है)
नए/रिटर्न के लिए डिफ़ॉल्ट दृश्य (सूची/ग्रिड)।
प्रति स्क्रीन वस्तुओं की संख्या, पंक्ति ऊंचाई, कार्
फ़िल्टर/छंटाई का क्रम; चिप्स बनाम साइडबार।
कार्ड पर त्वरित क्रियाएं (आइकन/पाठ, एक बनाम दो सीटीए)।
गार्ड: INP/CLS, लेआउट "जंप", जीरो-रिजल्ट ग्रोथ के बारे में शिकायतें।
11) iGaming के लिए उदाहरण
गेम्स लॉबी (बी 2 सी): ग्रिड - कवर + प्ले/डेमो, न्यू/जैकपॉट लेबल, चिप फिल्टर (प्रदाता/श्रेणी/यांत्रिकी)।
प्रदाता सूची: गेम की संख्या के साथ लोगो का ग्रिड; क्लिक - प्रदाता पृष्ठ (अंदर - खेल का एक ग्रिड भी) द्वारा।
रिपोर्ट/वित्त (बी 2 बी): सूची/तालिका - एनजीआर/जीजीआर/एफटीडी/सीआर कॉलम, शीर्षक फिक्सिंग, निर्यात।
लेन-देन का इतिहास: सूची - घनी श्रृंखला, स्थिति, राशि/आईडी/तिथि द्वारा खोज; भागों के लिए स्ट्रिंग फैलाएँ।
प्रचार/टूर्नामेंट: तारीखों और सीटीए के साथ बैनर ग्रिड, "गोइंग नाउ/कमिंग सून" द्वारा क्रमबद्ध।
12) लचीले स्विच और निजीकरण
उपयोगकर्ता को "सूची ↔ ग्रिड" रेडियो बटन दें और चयन याद रखें (प्रति उपयोगकर्ता/किरायेदार)।
प्रदर्शन के प्रीसेट प्रस्तुत करें: "तंग", "आमतौर पर", "बड़े"।
प्रासंगिक तर्क: पहली बार - लॉबी में एक ग्रिड; खोज से - सटीक तुलना के लिए एक सूची।
13) एंटीपैटर्न
निश्चित पहलू अनुपात - "नृत्य" कार्ड और उच्च सीएलएस के बिना ग्रिड।
बहुत सारे स्तंभों के साथ एक सूची आवश्यकता के बिना एक क्षैतिज स्क्रॉल है।
कार्ड में और विभिन्न व्यवहार के साथ होवर में एक्शन बटन का दोहराव।
प्रत्येक लोड पर सॉर्ट/फ़िल्टर मिलाना (फोकस तोड़ ता है)।
छिपे हुए सक्रिय फिल्टर - उपयोगकर्ता "हार" परिणाम।
14) कार्यान्वयन चेकलिस्ट (चरण दर चरण)
1. परिभाषित करें कि क्या स्क्रीन को दृश्य या विशेषता तुलना द्वारा चुना गया
2. मॉडल को परिभाषित करें: सूची/ग्रिड/हाइब्रिड; आईए और डेटा स्रोतों से सहमत हैं।
3. निश्चित कुंजी क्षेत्र आयामों के साथ एक पंक्ति या कार्ड डिजाइन करें।
4. छंटाई/फ़िल्टर: दृश्यमान चिप्स, स्थिर छंटाई नियंत्रण।
5. लोड/रिक्त/त्रुटि: कंकाल, अनुकूल पाठ और पुनः प्रयास।
6. प्रदर्शन: आलसी/वर्चुअलाइजेशन, 'सामग्री-दृश्यता', p95 लक्ष्य।
7. A11y: शब्दार्थ, कीबोर्ड, इसके विपरीत, टैप-लक्ष्य आकार।
8. टेलीमेट्री: TTFA, qCTR, जीरो-रिजल्ट, लेटेंसी p95।
9. A/B डिफ़ॉल्ट दृश्य, आयाम, त्वरित क्रिया
10. मेमोरी चुनें: दृश्य मोड और अंतिम फ़िल्टर रखें।
15) नीचे की रेखा
सूची और ग्रिड विभिन्न कार्यों के लिए उपकरण हैं।
जब विशेषताएं और तुलना महत्वपूर्ण हैं, तो एक सूची लें।
जब दृश्य निर्णय लेता है और त्वरित क्रियाएं - ग्रिड लें।
एक लक्ष्य को परिभाषित करें, आयामों और व्यवहार को पकड़ें, इंटरफ़ेस को तेज़ और सुलभ रखें - और उपयोगकर्ता अनावश्यक संज्ञानात्मक शोर के बिना कम चरणों में परिणाम प्राप्त करेंगे।