नोट
इस पेज तक पहुँच के लिए प्रमाणन की आवश्यकता होती है. आप साइन इन करने या निर्देशिकाओं को बदलने का प्रयास कर सकते हैं.
इस पेज तक पहुँच के लिए प्रमाणन की आवश्यकता होती है. आप निर्देशिकाओं को बदलने का प्रयास कर सकते हैं.
इस Power Platform अच्छी तरह से निर्मित अनुभव अनुकूलन चेकलिस्ट अनुशंसा पर लागू होता है:
| एक्सओ:07 | रंग योजनाओं, टाइपोग्राफी और लेआउट जैसे दृश्य तत्वों पर क्लासिक डिज़ाइन सिद्धांतों को लागू करें। एक केंद्रित, संतुलित और सहज दृश्य पदानुक्रम के लिए प्रयास करें जो उपयोगकर्ताओं का ध्यान महत्वपूर्ण तत्वों और क्रियाओं की ओर आकर्षित करे। |
|---|
यह मार्गदर्शिका सार्वभौमिक दृश्य डिजाइन पैटर्न के लिए अनुशंसाओं का वर्णन करती है जो उपयोगकर्ता की धारणा को प्रभावित करते हैं, जो किसी एप्लिकेशन की संतुष्टि और अपनाने को महत्वपूर्ण रूप से प्रभावित कर सकते हैं। दृश्य तत्व अनुभवों के सृजन के लिए आधारभूत संरचना के रूप में काम करते हैं। दृश्य सिद्धांतों को लागू करना जो मनुष्यों द्वारा स्वाभाविक रूप से सूचना को समझने और संसाधित करने के तरीके के साथ संरेखित होते हैं, एक प्रभावी और आकर्षक अनुप्रयोग बनाने के लिए दृश्य तत्वों को चुनने और व्यवस्थित करने में मदद करने के लिए संरचित तरीके प्रदान करते हैं।
प्रमुख डिजाइन रणनीतियाँ
दृश्य डिजाइन के प्रति मानवीय धारणा पर व्यापक शोध से पता चलता है कि उपयोगकर्ता दृश्य तत्वों को अलग-थलग करके नहीं देखते हैं। इसके बजाय, वे उन्हें अन्य तत्वों और जिस संदर्भ में वे प्रकट होते हैं, उसके संबंध में देखते हैं। ये संबंध उपयोगकर्ता की धारणा को प्रभावित करते हैं, विशिष्ट क्षेत्रों पर ध्यान आकर्षित करते हैं, भावनाओं को उजागर करते हैं, समझ में सहायता करते हैं, सौंदर्यबोध को बढ़ाते हैं, और ब्रांड पहचान को मजबूत करते हैं। दृश्य तत्वों का सावधानीपूर्वक चयन और व्यवस्था आकर्षक, यादगार और प्रभावी उपयोगकर्ता अनुभव सृजित कर सकती है, जो लक्षित दर्शकों को पसंद आएगा।
सौंदर्य-प्रयोज्यता प्रभाव
सौन्दर्य-प्रयोज्यता प्रभाव आकर्षक उत्पादों को अधिक उपयोगी मानने की प्रवृत्ति को संदर्भित करता है। उपयोगकर्ता किसी एप्लीकेशन के बारे में प्रारंभिक राय लगभग 50 मिलीसेकंड के भीतर बना लेते हैं। यह प्रथम प्रभाव विभिन्न कारकों से प्रभावित होता है, जिनमें संरचना, रंग, रिक्त स्थान, समरूपता, पाठ की मात्रा और फ़ॉन्ट शामिल हैं। एक सकारात्मक प्रथम प्रभाव समग्र उपयोगकर्ता संतुष्टि को बढ़ा सकता है। शोध से पता चलता है कि जब उपयोगकर्ताओं को कोई इंटरफ़ेस देखने में आकर्षक लगता है तो वे छोटी-मोटी प्रयोज्य समस्याओं के प्रति अधिक क्षमाशील हो जाते हैं। इसके अतिरिक्त, डिज़ाइन की गुणवत्ता विश्वसनीयता के सूचक के रूप में भी काम कर सकती है।
संतुलन और वजन
दृश्य संतुलन दृश्य बोध में संतुलन और सामंजस्य की भावना का प्रतिनिधित्व करता है। यह संज्ञानात्मक तनाव को कम करके उपयोगकर्ताओं को दृश्य जानकारी को अधिक कुशलतापूर्वक संसाधित और व्यवस्थित करने में मदद करता है। संतुलित रचनाओं को आम तौर पर अधिक मनोरंजक और समझने में आसान माना जाता है, जिससे उपयोगकर्ता प्रभावी रूप से ध्यान केंद्रित कर सकते हैं और दृश्य उत्तेजनाओं को अधिक आसानी से समझ सकते हैं। दृश्य संतुलन का यह संज्ञानात्मक पहलू स्पष्ट संचार को सुगम बनाने और समग्र उपयोगकर्ता अनुभव को बढ़ाने में इसके महत्व को रेखांकित करता है।
एक रचना तब संतुलित होती है जब सभी तत्व प्रकाशीय संतुलन में होते हैं। अक्सर, गणितीय स्थिति में समायोजन की आवश्यकता होती है। दृश्य भार को प्रभावित करने वाले कुछ तत्व हैं आकार, रंग, घनत्व और सफेद स्थान।
आकार: बड़े तत्व छोटे तत्वों की तुलना में अधिक दृश्य भार रखते हैं। संतुलन प्राप्त करने के लिए, बड़े तत्वों को छोटे तत्वों के साथ समूहीकृत करके या लेआउट के भीतर उनके स्थान को समायोजित करके संतुलित किया जा सकता है।
रंग: चमकीले या तीव्र रंग अधिक ध्यान आकर्षित कर सकते हैं और मंद या तटस्थ रंगों की तुलना में भारी दिखाई देते हैं। रंगों को संतुलित करने में उन्हें पूरे इंटरफ़ेस में समान रूप से वितरित करना या दृश्य सामंजस्य बनाने के लिए पूरक रंगों का उपयोग करना शामिल है।
घनत्व: तत्वों का घनत्व यह दर्शाता है कि वे किसी दिए गए स्थान में कितने कसकर पैक हैं। घनत्व को संतुलित करने में यह सुनिश्चित करना शामिल है कि तत्वों को इंटरफ़ेस में समान रूप से वितरित किया जाए ताकि भीड़भाड़ या विरल क्षेत्रों से बचा जा सके।
श्वेत स्थान: इसे नकारात्मक स्थान के रूप में भी जाना जाता है, श्वेत स्थान तत्वों के बीच के खाली क्षेत्रों को संदर्भित करता है। स्थान दृश्यात्मक श्वास-स्थान बनाने में मदद करता है तथा कुछ तत्वों को उजागर करके और उन पर बल देकर रचना को संतुलित कर सकता है।
संतुलित रचना तत्वों के बीच दृश्य बलों का योग है।
लेआउट को संतुलित करना सबसे कठिन कार्यों में से एक है, क्योंकि इसे आसानी से मापा नहीं जा सकता।
रंग
रंग, आभा, शेड और टोन अर्थ व्यक्त कर सकते हैं, भावनाएं जगा सकते हैं और सौंदर्यात्मक अपील पैदा कर सकते हैं। रंग उपयोगकर्ता का ध्यान आकर्षित करने, पदानुक्रम स्थापित करने, सूचना संप्रेषित करने और प्रयोज्यता बढ़ाने में महत्वपूर्ण भूमिका निभाता है। कई कारण बताते हैं कि यूआई में विचारशील रंग डिजाइन उपयोगकर्ताओं को आपकी इच्छानुसार कैसे प्रभावित कर सकता है:
ध्यान और धारणा. कुछ रंग अन्य की तुलना में अधिक आकर्षक होते हैं, जिससे डिजाइनर दर्शकों का ध्यान विशिष्ट तत्वों की ओर आकर्षित कर सकते हैं। रंग कंट्रास्ट पठनीयता को बढ़ा सकता है और विभिन्न घटकों के बीच अंतर कर सकता है, जिससे सूचना का तेजी से प्रसंस्करण संभव हो सकता है।
भावनात्मक प्रतिक्रिया. रंगों का मनोवैज्ञानिक संबंध होता है जो भावनाओं और मनोदशाओं को जागृत करते हैं। लाल और नारंगी जैसे गर्म रंग ऊर्जा और उत्साह की भावना पैदा कर सकते हैं, जबकि नीला और हरा जैसे ठंडे रंग शांति और स्थिरता पैदा कर सकते हैं। आप उपयोगकर्ताओं को इच्छित अनुभव की ओर प्रभावित करने के लिए वांछित प्रतिक्रियाएं प्राप्त कर सकते हैं।
ब्रांड पहचान. ब्रांडिंग सामग्री में रंगों का सुसंगत उपयोग एक मजबूत दृश्य पहचान स्थापित करने और ब्रांड पहचान को बढ़ावा देने में मदद करता है। उपयोगकर्ता अक्सर विशिष्ट रंगों को विशेष ब्रांडों के साथ जोड़ते हैं और अपने अनुभव को ब्रांड निष्ठा और विश्वास के साथ जोड़ते हैं।
दृश्य पदानुक्रम. रंग का उपयोग दृश्य पदानुक्रम स्थापित करने और जानकारी को व्यवस्थित करने के लिए किया जा सकता है। तत्वों को उनके महत्व या श्रेणी के आधार पर अलग-अलग रंग प्रदान करें, ताकि एक स्पष्ट पदानुक्रम बनाया जा सके और नेविगेशन तथा समझ को आसान बनाया जा सके।
निकटता
जो वस्तुएं पास-पास रखी जाती हैं वे अधिक संबंधित प्रतीत होती हैं। तत्वों को व्यवस्थित करते समय, सुनिश्चित करें कि निकट रूप से संबंधित तत्वों और जो संबंधित नहीं हैं, उनके बीच अंतराल में स्पष्ट अंतर हो।
यह गेस्टाल्ट सिद्धांत बताता है कि दृश्य तत्वों के बीच स्थानिक दूरी इस बात को प्रभावित करती है कि उन्हें मानसिक रूप से कैसे देखा और व्यवस्थित किया जाता है, और दृश्य उत्तेजनाओं के कुशल प्रसंस्करण और समझ को सुविधाजनक बनाने में इसके महत्व को रेखांकित करता है।
उन संबंधित तत्वों को एक साथ समूहित करें जो कार्यात्मक रूप से समान हों या एक ही पदानुक्रमिक श्रेणी से संबंधित हों। उदाहरण के लिए, ड्रॉपडाउन मेनू में समान कार्य या विकल्प करने वाले बटनों को एक साथ समूहीकृत किया जाना चाहिए, ताकि उनका संबंध दर्शाया जा सके। नेविगेशन बार में, निकट अंतराल वाले मेनू आइटम, विकल्पों के संबंधित सेट का सुझाव देते हैं, जबकि मेनू श्रेणियों के बीच बड़ा अंतर उन्हें दृष्टिगत रूप से अलग करता है। संबंधित प्रपत्र आइटमों को एक साथ समूहीकृत किया जाना चाहिए, जैसे "पता" नामक अनुभाग में पता फ़ील्ड।
पैराग्राफ, वाक्यों और शब्दों के बीच अंतराल समायोजित करके पाठ-भारी इंटरफेस में पठनीयता बढ़ाएं। पैराग्राफ में कम स्पेसिंग तार्किक संबंध या विचार की निरंतरता को इंगित करती है, जबकि अधिक स्पेसिंग विषय-वस्तु में परिवर्तन या विराम को दर्शाती है। यह तकनीक पाठ्य सूचना की कुशल समझ को बढ़ावा देती है।
भ्रम की स्थिति से बचने के लिए सुनिश्चित करें कि संबंधित और असंबंधित तत्वों के बीच अंतर स्पष्ट हो। स्पेसिंग रैंप तत्व के आकार के आधार पर आवश्यक उचित स्पेसिंग को लगातार निर्धारित करने में मदद कर सकता है।
बायीं ओर का वृत्त दूसरे वृत्त की अपेक्षा त्रिभुज से अधिक संबंधित है।
पैराग्राफों के बीच का स्थान अनुभागों के बीच के स्थान से छोटा होता है।
निरंतरता
जो तत्व किसी रेखा या वक्र पर व्यवस्थित होते हैं, वे उन तत्वों की तुलना में अधिक संबंधित माने जाते हैं जो किसी रेखा या वक्र पर नहीं होते हैं।
अनुक्रम या प्रगति को दर्शाने के लिए इंटरफ़ेस तत्वों, जैसे नेविगेशन मेनू या प्रक्रिया के चरणों को एक रेखा या वक्र के साथ व्यवस्थित करें। यह लेआउट उपयोगकर्ताओं को तत्वों के बीच संबंध समझने और सूचना या क्रियाओं के तार्किक प्रवाह को समझने में मदद करता है।
संबंधित तत्वों, जैसे चेक बॉक्स या रेडियो विकल्प या बुलेटेड सूची में आइटम को एक पंक्ति में रखें ताकि उन्हें एक साथ समूहीकृत किया जा सके। यह व्यवस्था उपयोगकर्ताओं को यह सुझाव देती है कि इन तत्वों का उद्देश्य समान है या ये एक ही श्रेणी के हैं, जिससे नेविगेशन और समझ आसान हो जाती है। यदि समान दिखने वाली वस्तुओं को अंदर की ओर इंडेंट किया जाता है, तो वस्तु की स्थिति दृश्य पदानुक्रम में निचले स्थान के साथ सहसंबंधित होती है।
उपयोगकर्ताओं का ध्यान आकर्षित करने और इंटरफ़ेस के माध्यम से दृश्य पथ बनाने के लिए रेखाओं या वक्रों का उपयोग करें। उदाहरण के लिए, एक तीर उपयोगकर्ता की नज़र को सामग्री के एक भाग से दूसरे भाग की ओर एक निश्चित पथ पर निर्देशित कर सकता है, जो कनेक्शन या प्रगति का संकेत देता है। यह तकनीक उपयोगकर्ताओं को इंटरफ़ेस को अधिक सहजता से नेविगेट करने में मदद करती है और अन्वेषण को प्रोत्साहित करती है।
उपयोगकर्ताओं का ध्यान आकर्षित करने और केंद्र बिंदु बनाने के लिए प्रमुख इंटरफ़ेस तत्वों, जैसे कॉल टू एक्शन बटन या महत्वपूर्ण जानकारी को प्रमुख पंक्तियों के साथ व्यवस्थित करें। उदाहरण के लिए, फ़्लुएंट मैसेजबार पैटर्न को अक्सर सामग्री क्षेत्र में एक प्रमुख संतुलित संदेश के रूप में प्रदर्शित किया जाता है, जिसमें संदेश बाईं ओर होता है, तथा कॉल टू एक्शन बटन को दाईं ओर ले जाता है। यह लेआउट रणनीति इन तत्वों को उजागर करती है और उनके महत्व पर जोर देती है, जिससे बातचीत की संभावना बढ़ जाती है।
हमारी धारणा के लिए वक्र/रेखाएं रंग से अधिक प्रभावशाली होती हैं।
विज़ार्ड निरंतरता का उपयोग करके उपयोगकर्ताओं को यह दिखाते हैं कि चरण आपस में जुड़े हुए हैं, तथा उन्हें बहुत अधिक जानकारी से अभिभूत नहीं करते।
समापन
मानव मस्तिष्क सम्पूर्ण आकृतियों को देखने की प्रवृत्ति रखता है, तथा अलग-अलग वस्तुओं पर एक ही परिचित पैटर्न को पहचान लेता है, तब भी जब कुछ जानकारी गायब होती है।
आकार, रंग और माप जैसे डिज़ाइन तत्वों में दृश्यात्मक एकरूपता सुनिश्चित करें, ताकि उपयोगकर्ताओं को उन पैटर्नों को सीखने में मदद मिल सके जिनकी उन्हें अपेक्षा करनी चाहिए, भले ही उन्हें अलग-अलग संदर्भों में प्रस्तुत किया गया हो।
सरल और परिचित चिह्नों या प्रतीकों का उपयोग करें जो उपयोगकर्ताओं को उनके पिछले अनुभवों के आधार पर छूटी हुई जानकारी भरने की सुविधा प्रदान करें। उदाहरण के लिए, एक आवर्धक ग्लास आइकन सामान्यतः खोज कार्यक्षमता के साथ जुड़ा होता है, भले ही उसके साथ कोई पाठ न हो।
उपयोगकर्ताओं को धीरे-धीरे जानकारी प्रस्तुत करना, जिसे प्रगतिशील प्रकटीकरण भी कहा जाता है। उपयोगकर्ताओं को इंटरफ़ेस के साथ इंटरैक्ट करते समय छूटे हुए विवरण भरने की अनुमति दें, जिससे उन्हें बहुत अधिक जानकारी से अभिभूत होने से बचाया जा सके और अन्वेषण को प्रोत्साहित किया जा सके।
ऐसे सुसंगत दृश्य पैटर्न बनाएं जो उपयोगकर्ताओं को वस्तुओं को संपूर्ण इकाई के रूप में देखने के लिए प्रोत्साहित करें। उदाहरण के लिए, संबंधित तत्वों को एक साथ समूहीकृत करने से उपयोगकर्ताओं को उनके संबंध और उद्देश्य को समझने में मदद मिल सकती है। विभाजन को दर्शाने के लिए गेस्टाल्ट सिद्धांतों का उपयोग करते हुए तत्वों को दृश्यात्मक रूप से व्यवस्थित करें। इंटरफ़ेस तत्वों के चारों ओर बंद होने की भावना पैदा करने के लिए स्थान का प्रभावी ढंग से उपयोग करें।
उपयोगकर्ताओं का ध्यान आकर्षित करने और इंटरफ़ेस स्थितियों में परिवर्तन बताने के लिए एनीमेशन और संक्रमण का उपयोग करें। विभिन्न अवस्थाओं या स्क्रीनों के बीच सहज संक्रमण से उपयोगकर्ताओं को तत्वों के बीच संबंध समझने और छूटी हुई जानकारी भरने में मदद मिल सकती है। इसमें उपलब्ध कई आधुनिक नियंत्रण स्वाभाविक रूप से एनिमेशन प्रदर्शित करते हैं। Power Apps
चार अपूर्ण वृत्तों से पहले एक वर्ग की पहचान की जाती है।
कार्ड से मॉडल तक एनीमेशन दोनों के बीच के अंतर को कम करने और उन्हें एक दूसरे से जोड़ने में मदद करता है।
फोकल प्वाइंट
फोकल प्वाइंट एक डिज़ाइन तत्व है जो दर्शकों का ध्यान तुरंत आकर्षित करता है। आदर्श रूप से, एक डिज़ाइन में फोकल बिंदुओं का एक क्रम होना चाहिए, आमतौर पर एक से तीन के बीच, जो उपयोगकर्ता को सामग्री के माध्यम से जानबूझकर मार्गदर्शन करने के लिए व्यवस्थित किया जाता है।
इंटरफ़ेस को सूचना के स्पष्ट पदानुक्रम के साथ डिज़ाइन करें, जहां सबसे महत्वपूर्ण सामग्री या क्रियाओं को केंद्र बिंदु के रूप में महत्व दिया जाता है। इन तत्वों को अलग दिखाने के लिए आकार, रंग, कंट्रास्ट और स्थिति जैसे दृश्य संकेतों का उपयोग करें। सबसे महत्वपूर्ण फ़ोकल पॉइंट से शुरू करते हुए, धीरे-धीरे जानकारी प्रस्तुत करें। यह तकनीक उपयोगकर्ताओं को सबसे अधिक प्रासंगिक सामग्री या क्रियाओं को शीघ्रता से पहचानने में मदद करती है तथा उन्हें तार्किक अनुक्रम में इंटरफ़ेस के माध्यम से मार्गदर्शन प्रदान करती है।
प्राथमिक कॉल-टू-एक्शन बटनों को इंटरफ़ेस में प्रमुखता से रखें, जिससे वे सबसे मजबूत केंद्र बिंदु बन जाएं। ये बटन दृश्य रूप से अन्य तत्वों से अलग होने चाहिए तथा उपयोगकर्ताओं को वांछित कार्यों, जैसे खरीदारी करने या साइन अप करने, आदि के लिए मार्गदर्शन करने हेतु रणनीतिक रूप से स्थित होने चाहिए। धाराप्रवाह डिजाइन भाषा इन तत्वों के लिए ब्रांड थीम रंग का उपयोग करने की सिफारिश करती है।
फोकल पॉइंट बनाने के लिए कंट्रास्ट का प्रभावी ढंग से उपयोग करें। रंग, चमक, आकार या टाइपोग्राफी में अंतर के कारण उभरे हुए तत्व स्वाभाविक रूप से उपयोगकर्ता का ध्यान आकर्षित करते हैं। गहरे रंग के पाठ या ब्रांडेड तत्वों के साथ उज्जवल सतहों का विरोधाभास अधिक प्रमुख केंद्र बिंदु बनाता है।
आसपास के तत्वों से दृश्य पृथक्करण बनाकर फोकल बिंदुओं को उजागर करने के लिए सफेद स्थान का उपयोग करें। यह तकनीक विकर्षणों को रोकने में मदद करती है और उपयोगकर्ताओं को सबसे महत्वपूर्ण विषय-वस्तु या कार्यों पर ध्यान केंद्रित करने की अनुमति देती है। जिन UI तत्वों के चारों ओर अधिक स्थान होता है, वे अधिक ध्यान आकर्षित करते हैं तथा कम स्थान वाले तत्वों की तुलना में अधिक महत्वपूर्ण माने जाते हैं।
एक सुसंगत उपयोगकर्ता अनुभव प्रदान करने के लिए पूरे इंटरफ़ेस में फोकल बिंदुओं के उपयोग में स्थिरता बनाए रखें। फोकल पॉइंट्स का एक पैटर्न निर्धारित करके, आप उपयोगकर्ताओं की अपेक्षाओं को पदानुक्रम के बारे में निर्देशित करते हैं, जिसे उन्हें इंटरफ़ेस पर नेविगेट करने के लिए समझने की आवश्यकता होती है और उन्हें विभिन्न स्क्रीन या पृष्ठों पर महत्वपूर्ण जानकारी या क्रियाएं खोजने में मदद करते हैं।
ध्यान रखें कि संतुलन बनाए रखना महत्वपूर्ण है और उपयोगकर्ताओं को बहुत अधिक प्रतिस्पर्धी फोकल बिंदुओं से परेशान नहीं करना चाहिए।
सबसे पहले आंख नीले वर्ग की ओर आकर्षित होती है।
कार्रवाई के आह्वान जैसे तत्वों को केन्द्र बिन्दु बनाया जा सकता है ताकि यह सुनिश्चित किया जा सके कि उपयोगकर्ता उन पर ध्यान दें।
समानता
समान दिखने वाली वस्तुओं को अक्सर एक समूह या पैटर्न के रूप में देखा जाता है, जिससे उपयोगकर्ता यह अपेक्षा करते हैं कि उनकी कार्यक्षमता समान होगी।
सुनिश्चित करें कि समान कार्यों वाले इंटरफ़ेस तत्वों की दृश्य शैलियाँ सुसंगत हों। उदाहरण के लिए, समान या समान रूप से भारित क्रियाएं करने वाले बटनों का रंग, आकार और माप एक जैसा होना चाहिए, जिससे उपयोगकर्ताओं को उनकी साझा कार्यक्षमता का संकेत मिले। इसके विपरीत, यह सुनिश्चित करें कि कार्यक्षमता में महत्वपूर्ण रूप से भिन्न तत्व स्पष्ट रूप से पहचाने जा सकें। दोनों तकनीकें स्पष्ट दृश्य संकेत स्थापित करके भ्रम और हताशा को रोकती हैं।
संपूर्ण इंटरफ़ेस में समान क्रियाओं या विशेषताओं को दर्शाने के लिए सुसंगत आइकनोग्राफी और प्रतीकों का उपयोग करें। उपयोगकर्ता अपने पिछले अनुभवों के आधार पर परिचित आइकन को विशिष्ट कार्यों से जोड़ते हैं। इन अपेक्षाओं को पूरा करने के लिए, सार्वभौमिक रूप से मान्यता प्राप्त प्रतीक रूपकों का उपयोग करें। फ़्लुएंट यूआई आइकनोग्राफ़ी लाइब्रेरी जैसे एक ही सेट से आइकन का उपयोग करके आइकन स्टाइलिंग में एकरूपता सुनिश्चित करें।
तत्वों या श्रेणियों के बीच समानता दर्शाने के लिए रंग कोडिंग का उपयोग करें। उदाहरण के लिए, किसी सूची में संबंधित वस्तुओं को हाइलाइट करने के लिए एक ही रंग का उपयोग करना, या चार्ट पर समान डेटा बिंदुओं को समूहीकृत करना, दृश्य सुसंगति को बढ़ाता है और उपयोगकर्ताओं को पैटर्न को समझने में सहायता करता है।
समान उद्देश्यों की पूर्ति करने वाले तत्वों के लिए टाइपोग्राफी और पाठ शैली में एकरूपता बनाए रखें। सुसंगत फ़ॉन्ट शैलियाँ, आकार और स्वरूपण एक सुसंगत दृश्य भाषा में योगदान करते हैं, जिससे उपयोगकर्ताओं को संबंधित सामग्री या क्रियाओं को पहचानने में सुविधा होती है।
इंटरफ़ेस पर समान कार्यों के लिए सुसंगत इंटरैक्टिव फीडबैक प्रदान करें। चाहे वह किसी बटन पर माउस घुमाना हो या किसी लिंक पर क्लिक करना हो, उपयोगकर्ताओं को दृश्य समानता और कार्यात्मक तुल्यता के बीच संबंध को सुदृढ़ करने के लिए समान प्रतिक्रिया की अपेक्षा करनी चाहिए। जबकि प्लेटफ़ॉर्म स्वाभाविक रूप से होवर और प्रेस्ड स्टेट कलर वैल्यूज़ जैसे अधिकांश इंटरएक्टिविटी व्यवहार प्रदान करता है, स्क्रैच से घटक तत्वों को बनाते समय या फीडबैक स्टेट्स को मैन्युअल रूप से लागू करते समय इस डिज़ाइन सिद्धांत को ध्यान में रखें।
सुनिश्चित करें कि दृश्य समानताएं अन्य संकेतों, जैसे पाठ लेबल या ऑडियो फीडबैक द्वारा पूरित हों, ताकि विविध आवश्यकताओं और प्राथमिकताओं वाले उपयोगकर्ताओं को समायोजित किया जा सके। बहुविध संवेदी तौर-तरीकों के माध्यम से कार्यात्मकता का प्रभावी संचार प्रयोज्यता और समावेशिता को बढ़ाता है।
तत्वों को आकार और रंग के आधार पर समूहीकृत किया जाता है, न कि व्यवस्था (स्तंभ और पंक्ति) के आधार पर।
यदि डैशबोर्ड पर एक कार्ड साइड पैनल के रूप में खुलता है, तो उपयोगकर्ता यह अपेक्षा करते हैं कि सभी कार्ड उसी तरह खुलेंगे।
आकृति और भूमि
लोग सहज रूप से तत्वों को या तो एक "आकृति" (जो सामने दिखाई देती है) या एक "भूमि" (जो पृष्ठभूमि में चली जाती है) के रूप में देखते हैं। इसलिए, संदर्भ धारणा को प्रभावित करता है, और महत्वपूर्ण तत्वों को पृष्ठभूमि से अलग करने के लिए पर्याप्त चित्रण सुनिश्चित करना महत्वपूर्ण है। श्वेत स्थान (नकारात्मक स्थान) विषय-वस्तु की समझ को बढ़ाता है।
आकृति और पृष्ठभूमि के बीच स्पष्ट संबंध स्थापित करने के लिए रंग, आकार या दृश्य शैली में कंट्रास्ट का उपयोग करें। महत्वपूर्ण तत्वों को पृष्ठभूमि के विपरीत प्रमुखता से खड़ा होना चाहिए, जिससे उन्हें आसानी से पहचाना जा सके और उपयोगकर्ताओं का ध्यान प्रभावी ढंग से आकर्षित हो सके। हल्के रंगों वाली सतहों और पृष्ठभूमि के विपरीत अधिक विपरीत दृश्य तत्वों को अधिक प्रमुखता दी जाती है। यह दृष्टिकोण दृश्य अव्यवस्था को कम करता है और उपयोगकर्ताओं को महत्वपूर्ण जानकारी की पहचान करने में मदद करता है। दृष्टिबाधित उपयोगकर्ताओं के लिए पठनीयता में सुधार करने के लिए अग्रभूमि और पृष्ठभूमि तत्वों के बीच पर्याप्त कंट्रास्ट प्रदान करें, जिससे उनकी सामग्री तक पहुंचने और समझने की क्षमता में सुधार हो।
इंटरफ़ेस तत्वों के स्थान और शैली में स्थिरता बनाए रखने से आकृति-भूमि संबंध मजबूत होता है और उपयोगकर्ताओं को इंटरफ़ेस संरचना को समझने में सहायता मिलती है। डिज़ाइन पैटर्न और दृश्य संकेतों का सुसंगत उपयोग यह सुनिश्चित करता है कि उपयोगकर्ता विभिन्न स्क्रीन और संदर्भों में अग्रभूमि और पृष्ठभूमि तत्वों के बीच शीघ्रता से अंतर कर सकें। डिज़ाइन में असंगतताएं उपयोगकर्ताओं के मानसिक मॉडल को बाधित कर सकती हैं और इंटरफ़ेस को कुशलतापूर्वक नेविगेट करने की उनकी क्षमता में बाधा डाल सकती हैं।
कम कंट्रास्ट और न्यूनतम नकारात्मक स्थान सफेद आयतों को पृष्ठभूमि के भाग के रूप में देखने में योगदान देते हैं।
साइड इमेज को पृष्ठभूमि में चले जाने की आवश्यकता है ताकि उपयोगकर्ता महत्वपूर्ण विषय-वस्तु पर ध्यान केंद्रित कर सकें।
समूहन
यदि तत्व स्पष्ट रूप से परिभाषित सीमा के साथ एक क्षेत्र साझा करते हैं तो उन्हें समूह के रूप में माना जाता है।
दृश्य कंटेनरों, जैसे बक्से, कार्ड या बॉर्डर के भीतर संबंधित तत्वों को समूहीकृत करने से उपयोगकर्ताओं को उन्हें सुसंगत इकाइयों के रूप में समझने में मदद मिलती है। यह दृष्टिकोण दृश्यात्मक रूप से विषय-वस्तु और कार्यक्षमता को व्यवस्थित करता है, जिससे सूचना की पहचान करना और उसका प्रसंस्करण करना आसान हो जाता है। स्पष्ट समूहीकरण से अव्यवस्थित इंटरफ़ेस से बचने और भ्रम या अकुशलता को कम करने में मदद मिलती है। समूहीकरण तब भी प्रभावी होता है जब निकटता एक विकल्प नहीं होता है; उदाहरण के लिए, एक संदेश पट्टी जो स्क्रीन पर कई नियंत्रणों तक फैली होती है, उसे इसकी सीमाओं और पृष्ठभूमि के रंग के कारण एक संबंधित इकाई के रूप में माना जाता है।
समूहीकृत तत्वों के लिए एक सुसंगत दृश्य शैली बनाए रखने से उनका कनेक्शन मजबूत होता है और उपयोगिता में सुधार होता है। इन तत्वों के लिए समान रंग, फ़ॉन्ट या चिह्न का उपयोग करने से यह स्पष्ट होता है कि वे एक ही श्रेणी या कार्य से संबंधित हैं। दृश्य प्रस्तुति में असंगतता, कथित समूहीकरण को कमजोर कर सकती है और उपयोगकर्ताओं को तत्वों के बीच संबंधों को नजरअंदाज करने या उनके अर्थ या उद्देश्य की गलत व्याख्या करने का कारण बन सकती है।
किसी तत्व या तत्वों के समूह के चारों ओर बॉर्डर जोड़ने से आस-पास के तत्वों से अलगाव पैदा होता है।
विषय-वस्तु को खंडित करने से उपयोगकर्ताओं को यह समझने में मदद मिलती है कि विषय-वस्तु बदल रही है।
सिग्नल बनाम शोर
दृश्य संकेत जैसे रेखाएं, कंट्रास्ट और स्पेसिंग का उपयोग उपयोगकर्ताओं को यह बताने के लिए किया जाता है कि कोई चीज महत्वपूर्ण है। हालाँकि, बहुत अधिक संकेत, या अनावश्यक जानकारी को उजागर करने वाले संकेत, शीघ्र ही शोर बन जाते हैं।
उपयोगकर्ताओं को महत्वपूर्ण जानकारी या कार्यों का संकेत देने के लिए बोल्ड टेक्स्ट, विपरीत रंग या आइकन जैसे केंद्र बिंदु सिद्धांतों का उपयोग करें। उदाहरण के लिए, महत्वपूर्ण बटनों या शीर्षकों को अलग दिखाने के लिए चमकीले रंग का उपयोग करें।
उपयोगकर्ताओं को बहुत अधिक जानकारी से अभिभूत होने से बचाने के लिए आप जो कुछ भी हाइलाइट करते हैं, उसमें चयनात्मक रहें। केवल उन तत्वों का संकेत दें जो उपयोगकर्ता के कार्य या लक्ष्य के लिए वास्तव में महत्वपूर्ण हैं। बहुत अधिक सिग्नल भ्रम पैदा कर सकते हैं और उपयोगकर्ताओं के लिए प्राथमिकता तय करना कठिन बना सकते हैं। उपयोगकर्ता के लिए सबसे महत्वपूर्ण जानकारी की पहचान करें और उस पर उचित रूप से जोर दें। आमतौर पर, प्रति पृष्ठ केवल एक कॉल टू एक्शन बटन रखने की अनुशंसा की जाती है। प्रपत्रों में, उपयोगकर्ता का ध्यान आकर्षित करने के लिए आवश्यक फ़ील्ड को हाइलाइट करें. इससे उपयोगकर्ताओं को अनावश्यक विवरणों में खोने से बचाया जा सकता है तथा उन्हें आवश्यक बातों पर ध्यान केंद्रित करने में सहायता मिलती है।
सुनिश्चित करें कि सिग्नल पूरे इंटरफ़ेस में एक सुसंगत दृश्य भाषा का पालन करें, जो एक दिशानिर्देश के रूप में कार्य करता है, जो उपयोगकर्ताओं को पैटर्न को पहचानने और विभिन्न सिग्नलों के अर्थ को सहज रूप से समझने में मदद करता है।
विशिष्ट संदर्भ और उपयोगकर्ता की आवश्यकताओं के अनुसार संकेतों को तैयार करें। उदाहरण के लिए, यदि उपयोगकर्ता किसी ऐसे इंटरफ़ेस को स्कैन कर रहे हैं जो कुछ निश्चित कार्य प्रस्तुत करता है, तो उनका ध्यान आकर्षित करने के लिए महत्वपूर्ण स्थिति और कार्रवाई योग्य वस्तुओं को स्पष्ट रूप से इंगित करें। प्रासंगिक संकेत उपयोगकर्ताओं को असंबंधित विवरणों से विचलित हुए बिना शीघ्रता से प्रासंगिक जानकारी ढूंढने में मदद करते हैं।
सिग्नल उपयोगकर्ताओं को सामग्री के माध्यम से मार्गदर्शन करने और महत्वपूर्ण बातें बताने में सहायता करते हैं।
दृश्य शोर भ्रम पैदा करता है और संकेतों के विपरीत प्रभाव डालता है।
Power Platform सुविधा
कैनवास ऐप्स में, संबंधित तत्वों को समूहीकृत करने के लिए लेआउट कंटेनर का उपयोग करें. आदर्श रूप से आपको सभी पृष्ठ तत्वों को कंटेनरों में व्यवस्थित करना चाहिए, और लेआउट कंटेनर भी गैप गुण को समायोजित करके चाइल्ड कंटेनरों को कुशलतापूर्वक अलग कर सकते हैं।
मॉडल-चालित ऐप प्रपत्रों में, अनुभागों का उपयोग संबंधित फ़ील्ड या तत्वों को समूहीकृत करने के लिए किया जा सकता है.
पुन: प्रयोज्य कस्टम घटकों के साथ सामान्य दृश्य तत्वों में स्थिरता लागू करें।
कैनवास ऐप्स में, आधुनिक नियंत्रण उनके डिज़ाइन के भीतर एकीकृत सिग्नलिंग की सुविधा देते हैं। विशेष रूप से, बटन और बैज नियंत्रण अपनी शैली गुणों में विकल्प प्रदान करते हैं, जिससे वे प्रभावी संकेत बन जाते हैं। प्रत्येक घटक के लिए सर्वोत्तम प्रथाओं का पालन करें और इष्टतम संचार सुनिश्चित करने के लिए चुनिंदा रूप से संकेत लागू करें।
संबंधित जानकारी
- समूहीकरण के सिद्धांत
- समष्टि मनोविज्ञान
- सौंदर्यपरक प्रयोज्यता प्रभाव
- धाराप्रवाह यूआई डिजाइन सिस्टम स्पेसिंग रैंप