डार्क या लाइट यूआई? अपने इंटरफ़ेस के लिए एक रंग योजना चुनने के लिए टिप्स

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

रंग योजना की पसंद को प्रभावित करने वाले कारक

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

पठनीयता और सुगमता

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

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

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

इस प्रकार, कोई भी रंग योजना काफी पठनीय हो सकती है यदि डिजाइनर विभिन्न पृष्ठभूमि पर पाठ की धारणा की विशेषताओं का अध्ययन करता है और ध्यान से फ़ॉन्ट का चयन करता है।



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

ऐसा क्यों है? सेंसर परसेप्शन एंड इंटरेक्शन रिसर्च ग्रुप (यूनिवर्सिटी ऑफ ब्रिटिश कोलंबिया) के जेसन हैरिसन इस घटना को इस प्रकार बताते हैं। दृष्टिवैषम्य वाले लोग (जो, विभिन्न आँकड़ों के अनुसार, जनसंख्या का लगभग 50%) महसूस करते हैं कि सफेद पर काले पाठ की तुलना में काले पर सफेद पाठ का अनुभव करना अधिक कठिन है। यह आंशिक रूप से रोशनी के स्तर के कारण है। एक उज्ज्वल प्रदर्शन (एक सफेद पृष्ठभूमि पर) के साथ, एपर्चर थोड़ा और बंद हो जाता है, जिससे "विकृत" लेंस का प्रभाव कम हो जाता है। एक अंधेरे प्रदर्शन (काली पृष्ठभूमि) के साथ, आईरिस अधिक प्रकाश प्राप्त करने के लिए खुलता है, और लेंस का विरूपण आंख के लिए बहुत अधिक फजी फोकस बनाता है। इसलिए, इस अध्ययन के आधार पर, यदि इंटरफ़ेस बहुत अधिक पाठ का प्रतिनिधित्व करता है और लंबे पढ़ने की आवश्यकता होती है, तो एक प्रकाश पृष्ठभूमि उपयोगकर्ता के लिए अधिक सुविधाजनक है।

उपलब्धता

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

स्पष्टता

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

कोमलता

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

पर्यावरण

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

रंग योजना चुनने के लिए चेकलिस्ट।

उपरोक्त सभी कारकों को देखते हुए, हम मोबाइल इंटरफ़ेस की रंग योजना चुनने के लिए एक छोटी चेकलिस्ट की पेशकश कर सकते हैं।

1. इंटरफ़ेस के उद्देश्य को परिभाषित करें । इंटरफ़ेस का उपयोग करने के मुख्य बिंदुओं और उपयोगकर्ता की समस्याओं को हल करने की संभावनाओं की पहचान करने के बाद, आप रंग योजना के विकल्प को अधिक उचित बना देंगे। यदि उपयोगकर्ता इंटरफ़ेस पाठात्मक (ब्लॉग, समाचार प्लेटफ़ॉर्म, इलेक्ट्रॉनिक रीडर, आदि) है, तो एक हल्की पृष्ठभूमि अधिक प्रभावी विकल्प होगी। प्रकाश स्क्रीन को विशाल बनाता है और केवल सामग्री पर ध्यान केंद्रित करना आसान बनाता है। दूसरी ओर, यदि इंटरफ़ेस छवियों के चारों ओर घूमता है, पाठ नहीं, तो एक अंधेरे या उज्ज्वल पृष्ठभूमि के साथ एक रंग योजना एक अच्छा समाधान हो सकती है, क्योंकि छवियों के रंग गहरा महसूस करेंगे।
2. अपने लक्षित दर्शकों का विश्लेषण करें । लक्षित दर्शकों की पहचान और विश्लेषण मुख्य चीज है जो एक डिजाइनर को करनी चाहिए। यह समझना कि आपका संभावित उपयोगकर्ता कौन है और वह साइट या एप्लिकेशन से क्या प्राप्त करना चाहता है, सुविधाजनक, उपयोगी और आकर्षक इंटरफ़ेस के लिए एक ठोस आधार है। मध्यम आयु वर्ग और पुराने लोग हल्के रंग योजना के साथ इंटरफेस पसंद करते हैं, क्योंकि वे इसे अधिक सहज और प्रबंधनीय पाते हैं। युवा लोग अक्सर एक अंधेरे पृष्ठभूमि के साथ इंटरफेस को अधिक मूल और स्टाइलिश पाते हैं, जो लक्षित उपयोगकर्ताओं को आकर्षित करने का एक तरीका हो सकता है। किशोर और बच्चे ऐसे इंटरफेस पसंद करते हैं जो जीवंत पृष्ठभूमि और मजेदार विवरण का उपयोग करते हैं। रंग की पसंद, जाहिर है, इंटरफ़ेस और सामग्री के कामकाज की प्रकृति पर निर्भर करती है। लेकिन लक्षित दर्शकों की प्राथमिकताएं हमेशा उपयोगकर्ता-केंद्रित समाधानों की एक महत्वपूर्ण कुंजी होती हैं।
3. प्रतियोगियों का अन्वेषण करें । ध्यान रखने का एक और पहलू यह है कि आपका उत्पाद नीले सागर में नहीं तैरता है। इसके विपरीत, वह मजबूत और गतिशील रूप से बदलती प्रतिस्पर्धा की स्थितियों में उपयोगकर्ता के ध्यान के लिए संघर्ष करेगा। एक रंग योजना का चयन आवेदन या वेबसाइट को अलग बनाने और इस तरह के एक मूल्यवान पहले उपयोगकर्ता संपर्क का नेतृत्व करने का एक तरीका बन जाता है। खंड में मौजूदा उत्पादों पर शोध करने में लगने वाला समय आपके समय और प्रयास को बचाएगा और अन्यथा आप अप्रभावी समाधानों को फिर से डिज़ाइन करने पर खर्च करेंगे।
4. परीक्षण, परीक्षण, परीक्षण ऊपर वर्णित बिंदु आपको एक प्रमुख बात से अवगत कराते हैं: चूंकि रंग उन कारकों को संदर्भित करता है जो सीधे इंटरफ़ेस की उपयोगिता और आकर्षण को प्रभावित करते हैं, प्रत्येक डिजाइन निर्णय का तदनुसार परीक्षण किया जाना चाहिए - विभिन्न प्रस्तावों में, विभिन्न स्क्रीन पर और विभिन्न स्थितियों में। परीक्षण रंग योजना की ताकत और कमजोरियों को प्रकट करेगा, इससे पहले कि उत्पाद बाजार में प्रवेश करता है, ध्यान प्राप्त करता है और पहली छाप बनाने का मौका खो देता है।

समाधान का समझौता करें

सख्त रंग योजनाओं का पालन नहीं करने के लिए, उपयोगकर्ता इंटरफ़ेस डिजाइनर कभी-कभी समझौता करते हैं, उदाहरण के लिए, जैसे।

डार्क इंटरफ़ेस, सामग्री के लिए सफेद टैब

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

उपयोगकर्ता को रंग योजना का विकल्प प्रदान करना

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

उपयोगी पढ़ना:

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