अच्छा यूजर इंटरफेस, स्पष्टता और अभिव्यक्ति

मार्क मिलर के एक लेख का एक और अनुवाद:

महान उपयोगकर्ता इंटरफेस, स्पष्टता, और जोर



पिछले अनुवाद:

• एक अच्छा उपयोगकर्ता इंटरफ़ेस बनाना इतना मुश्किल क्यों है?
• अच्छा यूजर इंटरफेस, स्पष्टता और सूचना की प्रासंगिकता

पिछले लेख में, हमने यूजर इंटरफेस में स्पष्टता हासिल करने के लिए एक महत्वपूर्ण निष्कर्ष निकाला है:



दृश्य वजन जानकारी के महत्व के लिए प्रासंगिक होना चाहिए ।



इस निष्कर्ष का सार - इसे प्रदर्शित करने के तरीकों को चुनकर जानकारी के महत्व की उपेक्षा न करें। यहां अभिव्यक्ति को नियंत्रित करने के तरीकों पर चर्चा करते समय, यह याद रखना चाहिए कि हमारा लक्ष्य एक आसान और सुरुचिपूर्ण इंटरफ़ेस प्राप्त करना है, जिसमें यह व्यक्त करना है कि एडवर्ड टफ्टी "सबसे कम प्रभावी अंतर" कहते हैं । (अनुवादक से: आप यहाँ और यहाँ रूसी में पढ़ सकते हैं)।



टफ्टी खुद इसे इस तरह से समझाता है - "सभी दृश्य भेदों को जितना संभव हो उतना सूक्ष्म बनाओ, लेकिन अभी भी स्पष्ट और प्रभावी है" - दृश्य अंतरों को यथासंभव अदृश्य बनाना आवश्यक है, जिसमें, हालांकि, अंतर पूरी तरह से समझ में आएगा।



इसके विपरीत

अभिव्यक्ति को नियंत्रित करने का सबसे आसान और सबसे शक्तिशाली तरीका इसके विपरीत का उपयोग करना है। नीचे Adobe Lightroom का एक और स्क्रीनशॉट है:





ध्यान दें कि बाईं ओर कम महत्वपूर्ण व्याख्यात्मक पाठ दाईं ओर अधिक महत्वपूर्ण डेटा की तुलना में थोड़ा कम विपरीत है।



परिपूर्णता

रंग अर्थ व्यक्त कर सकता है, खासकर जब शायद ही कभी इस्तेमाल किया जाता है। मुख्य रूप से काले और सफेद आंकड़ों के एक समुद्र में, अत्यधिक संतृप्त जानकारी बहुत प्रमुख होगी।



ट्रिलियन, एक त्वरित संदेश कार्यक्रम, एक बहुत ही दिलचस्प विशेषता है - अर्ध-अंकों के साथ या ग्रे के रंगों के साथ आउट-ऑफ-फोकस फ़ोकस प्रदर्शित करना। नीचे दिए गए उदाहरण में, बाईं विंडो सक्रिय है, और दाईं ओर इनपुट फोकस खो गया है:





पारदर्शिता

पारदर्शिता संतृप्ति और इसके विपरीत के साथ निकटता से संबंधित है। ग्राफिक तत्वों की बढ़ती पारदर्शिता के साथ, उनके विपरीत और संतृप्ति में गिरावट आएगी। आंशिक रूप से सुलभ तत्वों को इंगित करने के लिए पारदर्शिता का उपयोग किया जा सकता है।



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





जब हमने पहली बार रिफ्लेक्टर जारी करना शुरू किया! समर्थक तीर पूरी तरह से अपारदर्शी थे और हमें उपयोगकर्ताओं से बहुत शिकायतें मिलीं कि तीर ने उन्हें भी विचलित कर दिया। अगली रिलीज के लिए, हमने तीरों को पारदर्शी बना दिया और शिकायतों की संख्या लगभग शून्य हो गई, हालांकि हमें अभी भी कुछ ईमेल मिले हैं, जिन्होंने इस तरह के नोटिफिकेशन को बेकार बताया। इस प्रकार, पारदर्शिता का प्रबंधन करते हुए, हम एक विचलित करने वाले इंटरफ़ेस तत्व को ले सकते हैं जिसमें उपयोगी (लेकिन शायद ही कभी आवश्यक) जानकारी होती है और इसे कुछ उपयोगी में बदल देते हैं जो कि सहज रूप से ठीक से माना जाएगा।



फ़ॉन्ट

बोल्ड फ़ॉन्ट का उपयोग करके, आप किसी चीज़ के मूल अर्थ पर ध्यान आकर्षित कर सकते हैं, जैसा कि Microsoft Word टूलटिप में किया गया है जो कि चेंज केस कमांड के उद्देश्य को स्पष्ट करता है।





नीचे कुछ चेकबॉक्स का स्क्रीनशॉट दिया गया है - इस बात पर ध्यान दें कि आप विवरण पर नज़र डालकर कितनी जल्दी नियंत्रण पा सकते हैं।





एक अच्छा इंटरफ़ेस बनाने के लिए एक नियंत्रण के पाठ के कुछ हिस्सों पर ध्यान केंद्रित करने की क्षमता बहुत महत्वपूर्ण है, और इस कार्य को DevExpress नियंत्रणों का उपयोग करके हल किया जा सकता है।



आकार मायने रखता है

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





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



निष्कर्ष

स्पष्टता और डिजाइन के संदर्भ में स्पष्टता का सार, चुनिंदा रूप से जानकारी के महत्व पर जोर देने के लिए निम्नलिखित तरीकों में से केवल कुछ (आमतौर पर एक) का उपयोग करना है:

• इसके विपरीत
• परिपूर्णता
• पारदर्शिता
• आकार

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





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





इस दृष्टिकोण को लागू करने में मुख्य समस्या यह है कि, सूचना को महत्व के स्तरों से बहुत अधिक विभाजित करके और प्रत्येक स्तर के लिए एक अलग प्रकार की अभिव्यंजना को लागू करने से (अपने आप में स्पष्ट और समझ में आता है), दृश्य शोर प्राप्त करना आसान है जो जानकारी के आसान, सहज धारणा के साथ हस्तक्षेप करेगा। इसलिए, इस तथ्य के साथ कि इसे प्रदर्शित करने के तरीके को चुनते समय जानकारी के महत्व के स्तर को ध्यान में रखना आवश्यक है,

यह उतना ही महत्वपूर्ण है कि इसे ज़्यादा न करें और कई स्तरों को उत्पन्न न करें, जो इंटरफ़ेस में अनावश्यक शोर को प्रस्तुत कर सकता है।