UI density का अर्थ और इसे design करने के तरीके
(matthewstrom.com)इंटरफ़ेस की density कम होती जा रही है
- मौजूदा वेबसाइटों और applications की 2000 के दशक से तुलना करें तो यह नज़रअंदाज़ करना मुश्किल है कि software अधिक फैला हुआ हो गया है।
- UI density क्या है?
- UI density किसी एक क्षण में इंटरफ़ेस कैसा दिखता है, बस यही नहीं है
- यह इस बात से जुड़ी है कि इंटरफ़ेस कई क्षणों में कितनी information देता है
- यह इस बारे में है कि design decisions इन क्षणों को कैसे जोड़ते हैं, और software जो value देता है उससे उनका क्या संबंध है
Visual density
- density के बारे में सोचते समय सबसे पहले नज़र ही आती है
- visual density का मतलब है कि किसी तय space में आप कितनी चीज़ें देख सकते हैं
- visual रूप से high-density software interface स्क्रीन पर बहुत सारे elements दिखाता है
- visual रूप से low-density interface स्क्रीन पर कम elements दिखाता है
- उदाहरण: Bloomberg Terminal
- Bloomberg Terminal visual density का एक प्रतिनिधि उदाहरण है
- एक ही स्क्रीन पर प्रमुख market indices की sparklines, detailed trading volume distribution, दर्जनों rows और columns वाली tables, latest news headlines, keyboard shortcuts और quick-action UI signposts दिखते हैं
- उदाहरण: Craigslist और McMaster-Carr
- Craigslist सैकड़ों सरल links और search तथा filter interface के कारण visual रूप से dense है
- McMaster-Carr website भी ऐसे ही design elements साझा करती है और छोटे space में product variants की बहुत-सी details सूचीबद्ध करती है
- density की intuitive perception
- ऐसी websites की density के बारे में राय कुछ ही सेकंड में बन जाती है
- यह निर्णय तेज़ी से और सहज रूप में अवचेतन स्तर पर होते हैं
- लेकिन ऐसे तेज़ निर्णय पक्षपाती हो सकते हैं और हमेशा भरोसेमंद नहीं होते
- visual density की example images
- दो rectangles का उदाहरण:
- बायाँ: बहुत-से dots जो random तरीके से रखे गए हैं
- दायाँ: उतने ही dots जो rows और columns में साफ़-सुथरे ढंग से रखे गए हैं
- ज़्यादातर लोगों को दायाँ image अधिक dense लगता है
- एक और example image:
- बायाँ: बहुत-से dots जो rows और columns में व्यवस्थित हैं
- दायाँ: उतने ही dots जो दो groups में बाँटकर व्यवस्थित किए गए हैं
- dots की संख्या समान होने पर भी, groups में बाँटने से density के बारे में हमारी perception बदल जाती है
- दो rectangles का उदाहरण:
- visual density की अनिश्चितता
- design में पूरी तरह objective होना संभव नहीं है
- फिर भी density पर बातचीत के लिए हमें ऐसी definition की ओर बढ़ना चाहिए जो consistent, meaningful और useful हो
Information density
- Edward Tufte ने The Visual Display of Quantitative Information में charts और graphs के design पर चर्चा की है
हर graphic ink का कोई कारण होना चाहिए, और वह कारण नई information देना होना चाहिए।
- Data-ink
- data-ink का मतलब है किसी visualization का वह हिस्सा जो वास्तव में useful हो
- जो visual elements data नहीं हैं, उन्हें हटा देना चाहिए
- data-ink, chart के घेरने वाले space से अलग चीज़ है। यह information density के बारे में है
- information density की गणना
- information density की गणना chart में मौजूद data-ink की मात्रा को chart छापने के लिए आवश्यक कुल ink की मात्रा से भाग देकर की जा सकती है
- data-ink की definition subjective हो सकती है, लेकिन अहम बात यह है कि ratio को जितना संभव हो 1 के करीब लाया जाए
- ratio बढ़ाने के तरीके:
- data-ink जोड़ना: अतिरिक्त useful data देना
- non-data ink हटाना: graphic के उन हिस्सों को मिटाना जो data नहीं बताते
- उदाहरण
- ऐसे graphic का उदाहरण जिसमें बहुत excess ink है, और उसका बेहतर version जो कम ink में अधिक information देता है
- information density की एक upper limit होती है; आप बहुत ज़्यादा ink हटा सकते हैं या बहुत ज़्यादा information जोड़ सकते हैं
- audience भी महत्वपूर्ण है: advanced users को high density पसंद आ सकती है, जबकि छोटे बच्चों को low density
- information density और visual density का संबंध
- information density जितनी अधिक होती है, इंटरफ़ेस अक्सर visual रूप से उतना ही dense दिखाई देता है
- उदाहरण: 1885 में E.J. Marey की train timetable visualization, जहाँ arrival और departure times छोटे और dense space में दिखते हैं
- Tufte data density और data को तर्कसंगत रूप से अधिकतम करने की वकालत करते हैं
- Shrink Principle
- graphics को बहुत छोटा किया जा सकता है
- information density charts और graphs के लिए उपयोगी है
- क्या इसे interfaces पर भी लागू किया जा सकता है?
- interfaces में information density का उपयोग
- information को स्क्रीन पर लागू किया जा सकता है
- इंटरफ़ेस का हर हिस्सा जितनी संभव हो उतनी information दिखाए, यह सोचा जा सकता है
- ink को pixels मान लेना आकर्षक है, लेकिन interfaces में elements के बीच संबंध समझाने के लिए dividers, structural elements और signposts की ज़रूरत होती है
- Shrink Principle के अनुसार हर whitespace हटाने का प्रलोभन होता है
- लेकिन कुछ whitespace का अर्थ visual elements जितना ही महत्वपूर्ण होता है। shadows, gradients और color emphasis की भूमिका भी ध्यान में रखनी चाहिए
- information density एक उपयोगी concept है, लेकिन यह पूरी तस्वीर का सिर्फ़ एक हिस्सा है
- हमें इंटरफ़ेस के हर design decision को अधिक objective और quantitative ढंग से समझने के तरीक़े खोजने चाहिए
Design density
- design decisions के नज़रिए से density को define करने की पहली चुनौती यह पहचानना है कि decision किसे कहें
- design decisions को समझना
- UI, UX और product design में information संप्रेषित करने के लिए हम सचेत या अवचेतन रूप से बहुत-से decisions लेते हैं
- हमें पूछना चाहिए कि कौन-सी choices वास्तव में meaning देती हैं, कौन-सी सिर्फ़ aesthetic हैं, और कौन-सी सच में महत्वपूर्ण हैं
- Gestalt principles
- 20वीं सदी के German psychologists ने अध्ययन किया कि मनुष्य forms और patterns को कैसे समझते हैं
- Gestalt शब्द का अर्थ है "form"
- इस शोध में कुछ बुनियादी design laws सामने आए:
- Proximity: पास की चीज़ों को हम एक group के रूप में पहचानते हैं
- Similarity: shape, size, color आदि में समान objects एक-दूसरे से जुड़े हुए लगते हैं
- Closure: design में खाली जगहों को भरकर हम पूरी form को पहचान लेते हैं
- Symmetry: symmetric shapes को हम एक center point के आधार पर group करते हैं
- Common Fate: जो objects एक ही तरह move करते हैं, उन्हें हम साथ में group करते हैं
- Continuity: overlapping objects को हम अलग-अलग रूप में पहचानते हैं
- Past Experience: परिचित forms और patterns को हम अनजाने संदर्भों में भी पहचान लेते हैं
- Figure-Ground Relationship: 2D image में foreground और background elements को अलग करना
- UI design पर Gestalt principles का प्रभाव
- similarity principle की वजह से एक ही size, font और color वाला text एक ही purpose दिखाता है
- proximity principle बताता है कि जब chart headline के पास हो तो headline chart की व्याख्या करती है
- past experience और figure-ground principles की वजह से users तुरंत समझ लेते हैं कि toggle switch कैसे काम करेगा
- design density की अवधारणा
- pixels पर ध्यान देने के बजाय, Gestalt principles का उपयोग करके हम उन design decisions के बारे में सोचते हैं जो जान-बूझकर meaning देते हैं
- जैसे Tufte का data-ink ratio chart के लिए आवश्यक ink और कुल ink की तुलना करता है, वैसे ही design density आवश्यक design decisions और कुल decisions के ratio की तुलना करती है
- यह subjective है, लेकिन user interfaces में data या ink गिनने की तुलना में design decisions गिनना ज़्यादा उपयोगी हो सकता है
- design density की सीमाएँ
- user interfaces tasks पूरा करने, आनंद देने, समय बिताने, understanding बनाने और personal connection बढ़ाने के लिए मौजूद होते हैं
- इनमें user की पूरी journey के दौरान की गई हर action शामिल होनी चाहिए
- density को components, layout और screens से आगे बढ़कर space और time में user की हर action पर विचार करना चाहिए
Temporal density
- किसी तय समय में user कितने काम कर सकता है, यही temporal density तय करता है
- loading time temporal density का सबसे बड़ा factor है। इंटरफ़ेस जितनी तेज़ प्रतिक्रिया देता है और नए pages या screens जितनी जल्दी load करता है, UI उतना ही dense होता है
- Bloomberg Terminal data लगभग तुरंत load करता है, इसलिए उसकी temporal density बहुत अधिक है
- temporal density बढ़ाने के तरीके
- loading time को जितना संभव हो कम करके temporal density बढ़ाई जा सकती है
- लेकिन हर loading time को कम नहीं किया जा सकता। उदाहरण के लिए, आप user के internet connection की speed या CPU speed नहीं बदल सकते
- कुछ tasks, जैसे file upload, customer support response का इंतज़ार, payment processing आदि, complex systems और unpredictable variables से जुड़े होते हैं
- time perception बदलने के तरीके
- 100 milliseconds के भीतर: अगर दो actions के बीच का समय 100 milliseconds से कम हो, तो वे एक साथ हुए लगते हैं। इस स्थिति में animation उल्टा app को धीमा महसूस करा सकती है
- 100 milliseconds से 1 second के बीच: दो actions के बीच संबंध टूटना शुरू होता है। animation और transitions इस perceptual gap को भर सकते हैं
- 1 second से 10 seconds के बीच: सिर्फ़ animation काफ़ी नहीं है। 10 seconds के भीतर user के page छोड़ने की संभावना बढ़ जाती है। इस स्थिति में indeterminate loading indicator का उपयोग कर यह दिखाना चाहिए कि system सामान्य रूप से काम कर रहा है
- 10 seconds से 1 minute के बीच: indeterminate loading indicator 10 seconds से अधिक चलने पर static लगने लगता है। इस स्थिति में clear loading indicator, जैसे progress bar, का उपयोग कर बचा हुआ समय स्पष्ट दिखाना चाहिए
- 1 minute से अधिक: user को page छोड़ने या कोई दूसरा काम करने की अनुमति होनी चाहिए। 1 minute से अधिक बिना कुछ किए रुकना frustration बढ़ा सकता है। लंबे processes में errors की संभावना भी अधिक होती है
- time और space की density
- UI की density सिर्फ़ एक साधन है। UI की value उसके दिखने में नहीं, बल्कि उन outcomes में है जिन्हें वह संभव बनाता है
- density का मतलब है कम-से-कम time, space, pixels और ink में अधिक-से-अधिक value देना
Value density
- value density उस value से जुड़ी है जो user को outcome के रूप में मिलती है
- उदाहरण: किसी लंबे form को छोटे हिस्सों में बाँटकर wizard-style interface बनाना बेहतर हो सकता है, क्योंकि आधा-भरा form किसी काम का नहीं होता
- सारे सवाल एक ही page पर डालना visual रूप से dense लग सकता है, लेकिन अगर उसे भरने में बहुत समय लगे तो कई users उसे submit नहीं करेंगे
- form का उदाहरण
- ऐसा form जो कई हिस्सों में बँटा हो और errors व उनके solutions को स्पष्ट रूप से दिखाए
- errors कम करना और user से form पूरा भरवाना, design में अधिक space और time माँग सकता है
- लेकिन अगर visual और temporal density में यह sacrifice outcome को अधिक valuable बनाता है, तो overall value density बढ़ जाती है
- value density बढ़ाना
- form को छोटा, जल्दी load होने वाला और कम error-prone बनाकर visual और temporal density बढ़ाई जा सकती है
- अगर इससे user की value या business value कम नहीं होती, तो overall density बढ़ती है
- Tufte के approach की तरह हमें value density को यथासंभव अधिकतम करने की कोशिश करनी चाहिए
- optimization problem
- optimization problems हल करने पर paradoxical results आ सकते हैं
- शुरुआती internet में Craigslist जैसी कंपनियाँ information को aggregate करके page links के रूप में दिखाती थीं, जिससे value density बढ़ती थी
- Yahoo और Altavista information को search करने देते थे, लेकिन फिर भी aggregation पर ज़ोर था
- Google ने अलग approach अपनाया और internet की link chain से मिली information को search box में उपयोग किया
- information ने ख़ुद को aggregate कर लिया था, और users को केवल एक text input के ज़रिए पूरे web तक पहुँच चाहिए थी
- Google और Yahoo की approach
- Google की शुरुआती screen (2001) और 2024 की screen की तुलना करें तो visual density कम है, लेकिन value density बहुत अधिक है
- नतीजा: Google की value 2004 में $23B से बढ़कर आज $2T से अधिक हो गई, जबकि Yahoo 2000 में $125B से घटकर आज $4.8B रह गया
- कई बार visual density से अधिक महत्वपूर्ण value density होती है
- यह महत्वपूर्ण है कि design और functionality को इस तरह optimize किया जाए कि user को अधिकतम value मिले
निष्कर्ष
- UI density को ध्यान में रखकर किया गया design इंटरफ़ेस के सिर्फ़ visual पहलू से आगे जाना चाहिए
- इसमें हमारे हर explicit और implicit design decision और स्क्रीन पर दिखाई जाने वाली हर information शामिल है
- इसमें वह हर action और समय भी शामिल होना चाहिए जो user software से value पाने के लिए लगाता है
- UI density की ठोस definition
- UI density = इंटरफ़ेस से user को मिलने वाली value / इंटरफ़ेस द्वारा घेरा गया time और space
- महत्वपूर्ण factors
- speed
- usability
- consistency
- predictability
- information richness
- functionality
- successful interfaces के सफल होने का कारण: इन सभी factors पर विचार करने से हम समझ सकते हैं कि कुछ interfaces सफल क्यों होते हैं और कुछ असफल क्यों
- design goal
- density को ध्यान में रखकर design करना चाहिए ताकि लोग हमारे बनाए software से अधिक value पा सकें
1 टिप्पणियां
Hacker News राय
Hacker News टिप्पणियों का सारांश
रेस्टोरेंट मेनू का भौतिक रूप मोबाइल साइट मेनू से बेहतर क्यों है
रूप से ज़्यादा कार्य को महत्व देने वाले डेटा की अहमियत
temporal density की अवधारणा
मोबाइल इंटरफ़ेस के sparse होने के कारण
UI के अधिक sparse होने पर आलोचना
जटिल UI और trends की समस्या
पारंपरिक UI के फायदे
information density का असंतुलन
मोबाइल UI की समस्याएँ
कम density वाले UI का उदाहरण