विषयसूची
यूएक्स और इंटरेक्शन डिजाइन के क्षेत्र में सबसे प्रभावशाली मनोवैज्ञानिक सिद्धांतों में से एक गेस्टाल्ट सिद्धांत है। सिद्धांत जर्मन मनोवैज्ञानिकों द्वारा स्थापित किया गया था और "गेस्टाल्ट" शब्द का अर्थ फ़ॉर्म या आकार जर्मन में है। जैसा कि नाम से पता चलता है, गेस्टाल्ट सिद्धांतों के पीछे का विचार यह है कि मनुष्य वस्तुओं के समूहों को अलग-अलग वस्तुओं के बजाय पैटर्न के रूप में देखते हैं।
गेस्टाल्ट सिद्धांतों के बारे में कई लेख हैं, लेकिन उनमें से बहुत से लेख आपको यह समझने में मदद नहीं करते हैं कि कैसे उन्हें UX/UI डिज़ाइनर के रूप में अपने काम में लागू करें। यह लेख आपको बेहतर यूएक्स और यूआई डिज़ाइन बनाने के लिए गेस्टाल्ट सिद्धांतों का उपयोग करने के बारे में कुछ विचार देगा जो लोगों को कम प्रयास के साथ अपने लक्ष्यों को प्राप्त करने में मदद करेगा।
समानता का नियम <1
समानता का सिद्धांत बताता है कि जब वस्तुएं भौतिक रूप से समान होती हैं तो हम उन्हें एक साथ समूहित करते हैं और मानते हैं कि उनके पास समान कार्यक्षमता । उदाहरण के लिए, नीचे दी गई छवि में बरगंडी लाल वृत्त वाली रेखा को उसके अलग रंग के कारण बाकी छवि से अलग करना बहुत आसान है।
यह सभी देखें: सिंपल डिजाइन क्या है?
समानता के सिद्धांत का एक उदाहरण। लेखक द्वारा फोटो।
यूएक्स और यूआई डिज़ाइन में समानता का उपयोग करना
आइए कल्पना करें कि आपकी कंपनी ने एक "Il Mio Chef'' नामक ऐप जिसका उपयोग पूरे अमेरिका और कनाडा में इतालवी भोजन के शौकीनों द्वारा किया जाता है (हम इसका उपयोग इसके लिए करेंगे)इस लेख का बाकी हिस्सा)। आपके UX शोधकर्ता द्वारा आपको सौंपी गई एक हालिया रिपोर्ट में कहा गया है कि जब इतालवी भोजन का ऑर्डर देने की बात आती है, तो उपयोगकर्ता ज्यादातर इस बात पर ध्यान देते हैं कि कौन से रेस्तरां उनके सबसे करीब हैं। आखिरकार, हम सभी चाहते हैं कि हमारा लसग्ना या पिज़्ज़ा तब तक डिलीवर हो, जब तक वह ताजा और गर्म हो, है ना?
यह सभी देखें: फ्लिपबुक कैसे बनाएंहमारे ऐप के उपयोगकर्ताओं को यह देखने में मदद करना आसान बनाने के लिए कि कौन से रेस्तरां उनके सबसे करीब हैं इन रेस्तरां को UI में हाइलाइट करके समानता के सिद्धांत का उपयोग कर सकते हैं। नीचे दी गई छवि में आप देख सकते हैं कि कैसे इन विकल्पों को पीले रंग में हाइलाइट करने से (दाईं ओर) नज़दीकी रेस्तरां और दूर स्थित रेस्तरां के बीच अंतर पर दृष्टिगत रूप से ज़ोर देकर एक बड़ा अंतर आता है। इस तरह से आप समानता के सिद्धांत का उपयोग करके अपने उपयोगकर्ताओं को शीघ्रता से वह ढूंढने में मदद कर सकते हैं जो वे ढूंढ रहे हैं।
समानता के गेस्टाल्ट सिद्धांत का उपयोग करना। लेखक द्वारा चित्र।
निकटता का नियम
निकटता का सिद्धांत बताता है कि जो वस्तुएँ एक दूसरे के निकट स्थित हैं अधिक दिखाई देती हैं संबंधित उन वस्तुओं की तुलना में जो अधिक दूरी पर हैं। उदाहरण के लिए, पहली छवि और दूसरी छवि में समान मात्रा में वृत्त हैं। हालांकि, दूसरी छवि में कुछ कॉलम एक-दूसरे के करीब हैं और एक बड़े समूह के बजाय तीन अलग-अलग समूह होने का आभास देते हैं।
निकटता - उदाहरण 1 - एक बड़ा समूह। लेखक द्वारा छवि।
निकटता - उदाहरण 2 - तीन भिन्न समूह। लेखक द्वारा छवि।
यूएक्स और यूआई डिज़ाइन में निकटता का उपयोग करना
आइए क्षेत्र से एक उदाहरण लेते हैं जानकारी विज़ुअलाइज़ेशन।
इस बार, आइए कल्पना करें कि आप एक कार्यकारी हैं जो यह देखना चाहते हैं कि आपका ऐप "इल मियो शेफ" कैसा प्रदर्शन करता है। आप KPI देखना चाहते हैं जो वित्तीय प्रदर्शन, उपयोगकर्ता जुड़ाव और संतुष्टि को मापता है। सबसे पहले, आपका सूचना विज़ुअलाइज़ेशन विशेषज्ञ नीचे डैशबोर्ड बनाता है जिससे आप और अन्य सभी अधिकारी संख्याओं में खो जाते हैं और और भी अधिक प्रश्न पूछते हैं। एक महीने के बाद आप में से कई लोग इस डैशबोर्ड का उपयोग पूरी तरह से बंद कर देंगे।
केपीआई डैशबोर्ड - इल मियो शेफ। लेखक द्वारा छवि।
इस बिंदु पर आप अपने सूचना विज़ुअलाइज़ेशन विशेषज्ञ के पास वापस जाते हैं और डैशबोर्ड को फिर से डिज़ाइन करके लोगों के लिए बड़ी तस्वीर को समझना आसान बनाने के लिए कहते हैं। निकटता का सिद्धांत इस मामले में काम आता है, और आप नीचे नया डिज़ाइन देख सकते हैं। इसमें KPI के प्रकार से विभाजित तीन समूह शामिल हैं और यह सभी को यह समझने में मदद करता है कि ऐप वित्तीय प्रदर्शन, जुड़ाव और संतुष्टि के मामले में कैसा प्रदर्शन कर रहा है। वस्तुओं को एक साथ समूहित करना और समूहों के बीच अधिक सफेद स्थान का उपयोग करने से आपके उपयोगकर्ताओं को जानकारी को तेज़ी से पचाने में मदद मिल सकती है।
डैशबोर्ड डिज़ाइन में निकटता के गेस्टाल्ट सिद्धांत का उपयोग करना। लेखक द्वारा चित्र।
का कानूननिरंतरता
निरंतरता का सिद्धांत बताता है कि एक बार जब आंख किसी वस्तु का पीछा करना शुरू कर देती है, तो वह उस दिशा में "आंदोलन" का तब तक पीछा करती रहेगी जब तक कि वह किसी अन्य वस्तु का सामना नहीं करती। यह आंदोलन हमें वस्तु को उसी पथ के हिस्से के रूप में समझने में सहायता करता है जिससे हमें जानकारी प्राप्त करने के लिए जाना पड़ता है। नीचे दी गई छवि दिखाती है कि कैसे हम निरंतरता के सिद्धांत का उपयोग ऐसे दृश्य पैटर्न बनाने के लिए कर सकते हैं जो आंखों को एक विशेष दिशा में निर्देशित करते हैं।
निरंतरता के सिद्धांत का एक उदाहरण। लेखक द्वारा छवि।
यूएक्स और यूआई डिज़ाइन में निरंतरता का उपयोग करना
आपके यूएक्स शोधकर्ता ने एक नई रिपोर्ट प्रस्तुत की जो दिखाती है उपयोगकर्ताओं के लिए "Il Mio Chef" ऐप का उपयोग करने के लिए मुख्य प्रेरणा भोजन की खोज है, क्योंकि यह उन्हें हर हफ्ते नए इतालवी खाद्य रेस्तरां तक पहुंचने की अनुमति देता है। आप उस मीट्रिक को देखते हैं जो दिखाती है कि नीचे की छवि (बाईं ओर) में लोग वर्तमान UI डिज़ाइन के साथ अपने विकल्पों के माध्यम से कितनी बार स्वाइप करते हैं और देखते हैं कि वे यह देखने के लिए औसतन दो बार से अधिक स्वाइप नहीं करते हैं कि उनके लिए कौन से विकल्प उपलब्ध हैं।<4
निरंतरता के सिद्धांत का उपयोग करते हुए (नीचे की छवि पर दाईं ओर) आपके UX डिज़ाइनर ने उस संख्या को औसतन लगभग 10 स्वाइप तक बढ़ाने में मदद की। वह कैसे हुआ? छवि का हिस्सा छिपाकर और इस तथ्य को उजागर करके कि आपको यह देखने के लिए बाएं या दाएं स्वाइप करने की आवश्यकता है कि आपके उपयोगकर्ताओं की आंखों को वास्तव में "स्वाइप" आंदोलन बनाने के लिए निर्देशित किया गया था और अधिक थेअधिक रेस्तरां और वे क्या प्रदान करते हैं, इसका पता लगाने के लिए प्रेरित हुए। यह कुछ ऐसा है पहले के डिज़ाइन ने आपको ऐसा करने के लिए बिल्कुल भी प्रेरित नहीं किया था, भले ही आप पहले से ही ऐसा करने के लिए प्रेरित हों।
यूएक्स/यूआई डिज़ाइन में निरंतरता के गेस्टाल्ट सिद्धांत का उपयोग करना। लेखक द्वारा चित्र।
संक्षेप में , अपने UX और UI डिज़ाइन में इस लेख में प्रस्तुत गेस्टाल्ट सिद्धांतों का उपयोग करने से आपके उपयोगकर्ताओं को जानकारी को तेज़ी से खोजने और बेहतर ढंग से पचाने में मदद मिल सकती है। यह। इसके अलावा, यह आपके उत्पाद के साथ उनकी संतुष्टि को बढ़ा सकता है, उन्हें उन कार्यों को करने के लिए प्रेरित कर सकता है जो उन्हें सबसे ज्यादा पसंद हैं।
कवर में वेक्टरनेटर में संपादित मिक्लोस फिलिप्स द्वारा कलाकृति शामिल है।
