छोटे वर्चुअल पेट्स के बढ़ते संग्रह को कैसे प्रदर्शित करें

छोटे पेट्स मुख्य रूप से विज़ुअल आइटम होते हैं, इसलिए एक नियमित ग्रिड एक अच्छा शुरुआती बिंदु है। समान आकार के सेल का उपयोग करें और बाएं से दाएं, फिर ऊपर से नीचे एक स्थिर पठन क्रम बनाए रखें। इससे प्रत्येक नए पेट को एक अनुमानित स्थान मिलता है और दोबारा आने वाले कलेक्टर को गैलरी को स्कैन करने में मदद मिलती है। Apple विज़ुअल संग्रहों के लिए परिचित पंक्ति या ग्रिड लेआउट की अनुशंसा करता है, जबकि Material Design छवि गैलरी के लिए हल्के ग्रिड टाइल्स को उपयुक्त बताता है। (Apple Human Interface Guidelines: Collections; Material Design: Cards)

प्रत्येक सेल को पेट की छवि और उसके नाम के लिए पर्याप्त जगह दें। यदि प्रत्येक पेट के साथ नाम, प्रकार या एक छोटी स्थिति दिखाई देनी चाहिए, तो बॉर्डर, बटन और सजावटी विवरण वाले पूरे कार्ड को जोड़ने के बजाय एक स्पष्ट पदानुक्रम वाली सरल टाइल का उपयोग करें। Material का मार्गदर्शन छवि दीर्घाओं को कार्ड से अलग करता है, जो तब अधिक उपयोगी होते हैं जब आइटमों में भिन्न सामग्री या क्रियाएं होती हैं। अधिकांशतः एकसमान पेट्स के सेट के लिए, अतिरिक्त कार्ड क्रोम संग्रह से ध्यान हटाता है।

संग्रह उपलब्ध स्क्रीन क्षेत्र से आगे बढ़ जाने पर ग्रिड एक ही बार में प्रत्येक पेट को नहीं दिखा सकता है। एक प्राथमिक लक्ष्य चुनें: एक नज़र में अधिकतम संभव संख्या देखना, किसी नामित पेट को जल्दी से खोजना, या किसी विशेष प्रदर्शन (फीचर्ड डिस्प्ले) का आनंद लेना। ये लक्ष्य विभिन्न लेआउट्स की ओर ले जाते हैं।

मुख्य लक्ष्य	उपयोगी प्रदर्शन विकल्प	समझौता (Trade-off)
कई पेट्स को स्कैन करना	सुगठित, एकसमान ग्रिड	व्यक्तिगत पेट्स को कम जगह मिलती है
किसी ज्ञात पेट को खोजना	ग्रिड के साथ खोज या वर्णमाला के अनुसार सॉर्टिंग	नियंत्रण स्क्रीन की कुछ जगह लेते हैं
कुछ पसंदीदा को दिखाना	ग्रिड के ऊपर चुनिंदा पंक्ति या बड़ा प्रदर्शन क्षेत्र	पूरा संग्रह अधिक नीचे चला जाता है
पेट के विवरण की तुलना करना	सूची या विस्तृत दृश्य	प्रारंभिक दृश्य में कम पेट्स समा पाते हैं

फीचर्ड क्षेत्र को संग्रह के लिए एक छोटी खिड़की के रूप में देखें, न कि उसके प्रतिस्थापन के रूप में। उदाहरण के लिए, शीर्ष पर कुछ पसंदीदा दिखाएं, फिर नीचे पूरा ग्रिड रखें। Android का अनुकूली (adaptive) पेट-गैलरी नमूना एक प्रमुख पेट क्षेत्र और एक ग्रिड का उपयोग करता है जो लेआउट में अधिक जगह होने पर अधिक पेट्स दिखा सकता है। यह नीचे एक ब्राउज़ करने योग्य गैलरी को बनाए रखते हुए एक फीचर क्षेत्र को दृश्य प्राथमिकता देने के सामान्य डिज़ाइन विकल्प का समर्थन करता है। (Android Developers: Furry friends and adaptive APIs)

जब ग्रिड लंबा हो जाए, तो इसे ऐसी श्रेणियों का उपयोग करके विभाजित करें जो इस बात से मेल खाती हों कि एक कलेक्टर पेट्स के बारे में कैसे सोचता है। संभावित विकल्पों में प्रजाति या दुनिया, संग्रह सेट, रंग परिवार, या प्राप्ति अवधि शामिल हैं—केवल उन्हीं श्रेणियों का उपयोग करें जो वास्तव में संग्रह में मौजूद हैं। समूहों की एक छोटी संख्या से शुरुआत करें। बहुत सारे छोटे अनुभाग ब्राउज़िंग को अलग-अलग संग्रहों के बीच घूमने जैसा महसूस करा सकते हैं।

एक स्पष्ट डिफ़ॉल्ट दृश्य रखें, जैसे कि "सभी पेट्स", और सक्रिय समूह को दृश्यमान बनाएं। यदि पेट्स एक से अधिक समूहों से संबंधित हो सकते हैं, तो एक ही पेट को कई अनुभागों में दोहराने की तुलना में फ़िल्टर आमतौर पर अधिक स्पष्ट होता है। यदि प्रत्येक पेट ठीक एक स्थिर समूह से संबंधित है, तो लेबल वाले अनुभाग पूरे संग्रह को स्कैन करना आसान बना सकते हैं। ये सामग्री को उसकी संरचना के अनुसार व्यवस्थित करने के व्यावहारिक अनुप्रयोग हैं; सबसे अच्छा समूहीकरण संग्रह की वास्तविक विशेषताओं पर निर्भर करता है, न कि किसी सार्वभौमिक श्रेणी योजना पर।

एक पेट की छवि उसके मालिक के लिए पहचानी जा सकती है, लेकिन नाम बढ़ती सूची में मदद करते हैं और समान दिखने वाले वेरिएंट में अंतर बताते हैं। प्रत्येक थंबनेल के ठीक नीचे एक छोटा नाम रखें। यदि दो पेट्स का एक ही नाम हो सकता है, तो एक संक्षिप्त माध्यमिक पहचानकर्ता जोड़ें, जैसे कि उनका सेट या रूप। प्रत्येक टाइल में कई आंकड़े (stats), बैज और नियंत्रण रखने से बचें: वे विवरण छवि के साथ प्रतिस्पर्धा करते हैं और ग्रिड को अधिक सघन बनाते हैं।

यदि प्रदर्शन किसी वेबसाइट या ऐप का हिस्सा है, तो सुनिश्चित करें कि पेट की पहचान छवि के साथ-साथ टेक्स्ट के रूप में भी उपलब्ध हो। W3C का मार्गदर्शन कहता है कि सूचनात्मक छवियों को टेक्स्ट विकल्पों की आवश्यकता होती है जो उनकी प्रासंगिक जानकारी को व्यक्त करते हैं; जब एक निकटवर्ती लेबल पहले से ही वही जानकारी प्रदान करता है, तो छवि के वैकल्पिक टेक्स्ट में इसे दोहराना अनावश्यक हो सकता है। व्यवहार में, एक दृश्यमान नाम को उपयुक्त सुलभ लेबल (accessible label) के साथ जोड़ें, और किसी विशिष्ट पेट को केवल रंग या छवि द्वारा पहचाने जाने योग्य बनाने से बचें। (W3C WAI: Images Tutorial)

प्रत्येक स्क्रीन पर निश्चित संख्या को बाध्य करने के बजाय कॉलम की संख्या बदलने के लिए उपलब्ध चौड़ाई का उपयोग करें। एक कॉम्पैक्ट फोन दो कॉलम दिखा सकता है; एक विस्तृत स्क्रीन अधिक दिखा सकती है, बशर्ते प्रत्येक छवि और नाम सुपाठ्य बना रहे। रिक्ति को एकसमान रखें और लेआउट के रीफ़्लो होने पर समान बुनियादी क्रम बनाए रखें। Android का अनुकूली-डिज़ाइन उदाहरण कॉम्पैक्ट स्क्रीन पर दो-कॉलम गैलरी और अधिक स्थान उपलब्ध होने पर अधिक सामग्री प्रदर्शित करने का वर्णन करता है। (Android Developers: Furry friends and adaptive APIs)

डिस्प्ले को उस सबसे संकीर्ण आकार पर जांचें जिसका उपयोग लोगों द्वारा किए जाने की संभावना है और एक चौड़े डेस्कटॉप आकार पर भी जांचें। कटे हुए नाम, अपनी पहचान संबंधी विवरण खोने वाली छवियां, असमान टाइल ऊंचाइयों, या अजीब तरह से रैप होने वाले नियंत्रणों की तलाश करें। यदि किसी पेट को लंबे नाम की आवश्यकता है, तो सोच-समझकर दूसरी पंक्ति की अनुमति दें या पूरा नाम देखने के तरीके के साथ लगातार ट्रंकेट करें; किसी एक असामान्य प्रविष्टि को पूरे ग्रिड को चुपचाप विकृत न करने दें।

एक छोटे संग्रह के लिए, एक ग्रिड के माध्यम से स्क्रॉल करना पर्याप्त हो सकता है। खोज तब जोड़ें जब लोगों को लंबी सूची से किसी ज्ञात पेट को खोजने की आवश्यकता हो। सॉर्टिंग तब जोड़ें जब क्रम मायने रखता हो—उदाहरण के लिए, वर्णानुक्रम में या पेट को कब जोड़ा गया था। फ़िल्टर केवल उन विशेषताओं के लिए जोड़ें जो आइटमों में अंतर करने में मदद करती हैं। इन नियंत्रणों को परिणामों के ऊपर रखें और चयनित सॉर्ट या फ़िल्टर दिखाएं ताकि वर्तमान दृश्य समझने योग्य हो। Material का संग्रह मार्गदर्शन फ़िल्टरिंग और सॉर्टिंग को स्वयं कार्ड्स के बाहर रखता है, जो आइटमों को उनकी सामग्री पर केंद्रित रखता है। (Material Design: Cards)

प्रगति की भावना के बिना अंतहीन स्क्रॉलिंग पर निर्भर रहने से बचें। एक दृश्यमान संग्रह गणना, अनुभाग शीर्षक, या एक स्पष्ट "अधिक दिखाएं" क्रिया यह समझाने में मदद कर सकती है कि कितना शेष है। ये आवश्यकताओं के बजाय वैकल्पिक संकेत हैं; सबसे हल्का संकेत चुनें जो बिना दृश्य अव्यवस्था जोड़े किसी को खुद को उन्मुख करने में मदद करता है।

समान दिखने वाले और सबसे लंबे नाम वाले पेट्स सहित कुछ प्रतिनिधि पेट्स जोड़ें, फिर फोन और डेस्कटॉप चौड़ाई पर संग्रह की समीक्षा करें। पूछें: क्या कोई प्रत्येक पेट को पहचान सकता है, उसका नाम पढ़ सकता है, वर्तमान समूह या सॉर्ट को समझ सकता है, और बिना किसी अनुमान के पूरे संग्रह तक पहुंच सकता है? क्या वे प्रत्येक आइटम को स्कैन किए बिना किसी परिचित पेट को ढूंढ सकते हैं? क्या छवियां केंद्र बिंदु बनी हुई हैं?

यदि पहचानना मुश्किल है, तो टाइल्स को बड़ा करें या दृश्यमान विवरणों को कम करें। यदि आइटम ढूंढना मुश्किल है, तो नाम खोज या समझदारी भरी सॉर्टिंग जोड़ें। यदि पहली स्क्रीन पर भीड़भाड़ महसूस होती है, तो एक छोटा फीचर्ड क्षेत्र आरक्षित करें और पूरा संग्रह नीचे रखें। एक समय में एक बदलाव करें और संग्रह बढ़ने पर जांच दोहराएं; सही डिस्प्ले वह है जो पाठक के वास्तविक कार्य का उस आकार और घनत्व पर समर्थन करता है जिसका वे उपयोग करते हैं।

• Apple Developer, “Collections” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, “Cards” — https://m1.material.io/components/cards.html
• Android Developers, “Furry friends and adaptive APIs” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, “Images Tutorial” — https://www.w3.org/WAI/tutorials/images/