क्यों सरल वेबसाइट डिजाइन वैज्ञानिक रूप से बेहतर है

Google के एक अध्ययन में दो महत्वपूर्ण निष्कर्ष थे:

• साइट सुंदर है या नहीं, इसका मूल्यांकन करने के लिए उपयोगकर्ता को सेकंड के 1/50 से 1/20 तक की आवश्यकता होती है।
• "नेत्रहीन रूप से जटिल" साइटों को उनके सरल समकक्षों की तुलना में कम सुंदर माना जाता है।

दूसरे शब्दों में, अनुसंधान से पता चला है कि डिजाइन जितना सरल होगा, उतना ही बेहतर होगा।

लेकिन क्यों?

इस लेख में, हम संज्ञानात्मक प्रवाह और दृश्य सूचना प्रसंस्करण सिद्धांत की भूमिका के उदाहरणों को देखेंगे, जो आपके वेब डिज़ाइन को सरल बनाने में महत्वपूर्ण भूमिका निभाते हैं और रूपांतरण को बढ़ाने में मदद करेंगे।

चलो शुरू हो जाओ!

साइट का "प्रोटोटाइप" क्या है?

अगर मैं कहता हूं "फर्नीचर", तो आपके सिर में क्या छवि दिखाई देगी?
यदि आप 95% लोगों की तरह हैं, तो आप एक कुर्सी के बारे में सोचेंगे।
अगर मैं पूछता हूं कि "लड़का" किस रंग से जुड़ा है, तो आप सोचते हैं कि "नीला" (और लड़की "गुलाबी" है, आदि)

एक प्रोटोटाइप मूल मानसिक छवि है जिसे आपका मस्तिष्क उन सभी चीजों को वर्गीकृत करने के लिए बनाता है जिन्हें आप बातचीत करते हैं। फर्नीचर से लेकर साइटों तक, आपके मस्तिष्क का एक पैटर्न है कि सब कुछ कैसे दिखना और महसूस करना चाहिए।

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

अगर मैंने कहा "महिलाओं की फैशन वेबसाइट", तो आप कुछ इस तरह की कल्पना कर सकते हैं:



अब "ऑनलाइन कपड़े की दुकान" के प्रोटोटाइप साइटों को देखते हैं, ध्यान दें कि वे सभी बहुत समान हैं और एक समान साइट संरचना है? (भले ही यह साइट दूसरे देश की हो)।



समानता का मतलब यह बिल्कुल नहीं है कि साइटों में मौलिकता की कमी है या कि वे एक दूसरे से "चुरा लेते हैं"। इस तरह की संरचना के साथ, वे आपकी उम्मीदों पर खरा उतरते हैं कि ई-कॉमर्स साइट को कैसे देखना चाहिए।

संज्ञानात्मक प्रवाह क्या है?

संज्ञानात्मक प्रवाह के पीछे मूल विचार यह है कि मस्तिष्क उन चीजों के बारे में सोचना पसंद करता है जिनके बारे में सोचना आसान है। इसीलिए आप उन साइट्स पर जाना पसंद करते हैं जिनकी डिज़ाइन और संरचना आपको सहज रूप से समझ में आती है।

" सरल प्रभाव प्रभाव " के रूप में जाना जाने वाले व्यवहार के एक अन्य क्षेत्र से संज्ञानात्मक प्रवाह स्प्रिंग्स , जो बताता है कि लोग उन चीजों को पसंद करते हैं जिन्हें वे जानते हैं।

यह नियम ऑनलाइन भी लागू होता है। हम इस तथ्य के लिए उपयोग किए जाते हैं कि साइट पर सदस्यता साइट के दाएं कोने में स्थित है, और ऊपरी बाएं कोने में कंपनी का लोगो।

यदि आपके विज़िटर आपकी श्रेणी की साइटों के विशिष्ट डिज़ाइन द्वारा निर्धारित किए जाते हैं, तो उनसे विचलित करना आपको अवचेतन रूप से "कम सुंदर" श्रेणी में डाल सकता है।

इसका मतलब यह नहीं है कि आपको बस "वही करना चाहिए जो हर कोई करता है।" आपको यह जानना होगा कि आपकी श्रेणी के लिए कौन से वेबसाइट डिज़ाइन विकल्प प्रोटोटाइप हैं। यह सुनिश्चित करना सुनिश्चित करें कि आपकी श्रेणी में यह विशेष डिज़ाइन प्रोटोटाइप है या नहीं।

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

जब आप उम्मीदों पर खरा उतरते हैं तो क्या होता है?

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

हालांकि, जब प्रवाह कम होता है, तो आप तुरंत इसे महसूस करेंगे। स्किनी टाई ऑनलाइन टाई शॉप लें, जो रीडिज़ाइन से पहले ई-कॉमर्स साइट की तरह नहीं दिखेगी:

करने के लिए:



के बाद:



कई महत्वपूर्ण परिवर्तनों के कारण जबरदस्त परिणाम मिले हैं:

• सरल और समझने योग्य वेबसाइट डिजाइन और संरचना;
• रिक्त स्थान के सक्षम उपयोग के साथ एक बहुत अधिक "खुला" डिजाइन;
• छवियों में विषम रंगों के साथ एक उच्च-रिज़ॉल्यूशन उत्पाद होता है।

आइए इस रीडिज़ाइन के आँकड़ों से परिचित हों।

केवल ढाई सप्ताह में, परिणाम आश्चर्यजनक थे:



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

सूचना और साइट की जटिलता का दृश्य प्रसंस्करण

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

उदाहरण के लिए, डॉक्टरेट छात्रों को बहुत रंगीन वेबसाइट पसंद नहीं थी।

अध्ययन के परिणामस्वरूप, कोई विशिष्ट सार्वभौमिक डिजाइन सिद्धांत विकसित नहीं किए गए थे। केवल एक चीज जो सार्वभौमिक थी, वह यह थी कि एक नेत्रहीन जटिल वेबसाइट में दृश्य अपील कम थी।

क्यों सरल डिजाइन वैज्ञानिक रूप से संभालना आसान है

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

इस संक्षिप्त वीडियो को देखें कि आंख मस्तिष्क को कैसे सूचना भेजती है यह समझने के लिए कि मेरा क्या मतलब है:



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

पृष्ठ पर अधिक रंग और प्रकाश भिन्नताएं (यानी, दृश्य जटिलता जितनी अधिक होती है), उतना ही काम मस्तिष्क को सूचना प्रसारित करने के लिए करना पड़ता है।

प्रत्येक तत्व सूक्ष्म जानकारी देता है।

किसी साइट को विकसित करते समय, अवगत रहें कि प्रत्येक तत्व - पाठ, लोगो और रंग पसंद - सूक्ष्म ब्रांड जानकारी देता है।

जब ये तत्व अपना काम नहीं करते हैं, तो वेबमास्टर अक्सर इसके लिए अनावश्यक तत्वों या छवियों को जोड़कर क्षतिपूर्ति करते हैं, जिससे वेबसाइट की दृश्य जटिलता बढ़ जाती है और समग्र सौंदर्यशास्त्र टूट जाता है।

दृश्य जानकारी को संसाधित करने के लिए एक पृष्ठ का अनुकूलन करना, विशेष रूप से, आंख से मस्तिष्क तक जानकारी के प्रवाह को सरल बनाना, तत्वों की न्यूनतम संख्या के साथ अधिक से अधिक जानकारी का हस्तांतरण है।

एक उदाहरण के रूप में MailChimp लोगो के नए स्वरूप पर विचार करें।

जब वे ब्रांड को "विकसित" करना चाहते थे, तो उन्होंने सामान्य रूप से नहीं जोड़ा "हम 2001 से ईमेल के साथ काम कर रहे हैं! तीन मिलियन लोग हम पर भरोसा करते हैं! इसलिए हम शांत हैं! ब्ला ब्ला ब्ला ... "

यह था:



यह बन गया:



इसके बजाय, उन्होंने वर्तनी को सरल बनाया, वेबसाइट को सरल बनाया (शीर्ष शीर्षक सिर्फ "बेहतर ईमेल भेजें") और मुख्य उत्पाद के लिए एक भी सरल एनीमेशन जोड़ा।

2018 में एक और लोगो रिडिजाइन के माध्यम से मेलचिम्प गया:



दूसरे प्रमुख रीडिजाइन के लिए दिशानिर्देश क्या थे?
सादगी सर्वोपरि थी :

फ्रेडी बैज लंबे समय से हमारे ब्रांड का मुख्य ब्रांड रहा है।
हमने इसे थोड़ा सरल किया, इसके आकार में बदलाव किया और किसी भी आकार में इसे शानदार बनाने के लिए छोटे विवरणों पर काम किया।

पुनरावृत्ति और शोधन प्रक्रिया में, हमने एक फ़ॉन्ट विकसित किया जो फ्रेडी आइकन के साथ सामंजस्य स्थापित करता है।

"वर्किंग मेमोरी" और रूपांतरण के पवित्र कंघी बनानेवाले की रेती

प्रिंसटन के मनोवैज्ञानिक जॉर्ज ए। मिलर के एक अध्ययन के अनुसार, एक वयस्क का मस्तिष्क अपनी अल्पकालिक या "कामकाजी" स्मृति में पांच से नौ "टुकड़ों" को जानकारी में संग्रहीत करने में सक्षम है।

वर्किंग मेमोरी आपके मस्तिष्क का हिस्सा है जो अस्थायी रूप से कई सेकंड के लिए जानकारी संग्रहीत और संसाधित करता है। यह वह है जो आपको ध्यान केंद्रित करने, विचलित करने का विरोध करने और सबसे महत्वपूर्ण रूप से निर्णय लेने की प्रक्रिया को निर्देशित करने की अनुमति देता है।



एक "कम जटिलता और प्रोटोटाइप वेबसाइट" पर, काम करने वाली मेमोरी के पांच से नौ "बिट्स", जहां क्लिक करने के समय का पता लगाने के बजाय वारंटी, उत्पाद विवरण, मूल्य या ऑफ़र जैसी चीज़ों को संभाल सकते हैं।

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



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

यही कारण है कि यदि आप डिज़ाइन का उपयोग करके अपनी कार्यशील मेमोरी को "हैक" करना चाहते हैं, तो अपने आगंतुकों को जानना बहुत महत्वपूर्ण है।

वे जो ब्लॉग पढ़ते हैं, जिन साइटों पर वे खरीदारी करते हैं, उनका ब्राउज़र, आयु, लिंग और भौतिक स्थान - यह सब आपको डिज़ाइन को "परिचित" बनाने और सही प्रथम प्रभाव बनाने में मदद करेगा।

एक सरल वेबसाइट बनाने के 7 तरीके

1. अपने दर्शकों और उन साइटों को देखें, जिनमें वे सबसे ज्यादा आते हैं।
   अपनी श्रेणी में डिज़ाइन परिवर्तनों के बारे में केस स्टडी देखें।
2. आपके द्वारा खोजे गए सभी "काम करने वाले" घटकों के साथ अपनी साइट के लिए एक कोलाज बनाएं।
3. संज्ञानात्मक प्रवाह के नियमों का पालन करें।
   उन वस्तुओं को रखें जहाँ आगंतुक उनसे मिलने की उम्मीद करते हैं।
4. यदि वे आपके आगंतुक को उत्साहित नहीं करते हैं तो अनावश्यक वस्तुओं को न जोड़ें।
5. कम ज्यादा है। एक बड़ी छवि आमतौर पर कई छोटे लोगों की तुलना में बेहतर होती है; तीन के बजाय एक कॉलम; अधिक "तत्वों" के बजाय अधिक रिक्त स्थान।
6. सुनिश्चित करें कि आपकी साइट मूल्य निर्धारण, सौंदर्यशास्त्र, गति, आदि की अपेक्षाओं को पूरा करती है।
7. मौलिकता रखें। किसी साइट के "प्रोटोटाइप" का मतलब यह नहीं है कि आपकी साइट के प्रत्येक पहलू को इस फॉर्म के अनुरूप होना चाहिए।

अपनी साइट को कला का एक अनूठा काम न समझें।
उपयोगकर्ताओं के लिए इसे सरल और परिचित बनाएं।

निष्कर्ष

यदि कोई आगंतुक, जब आपकी साइट के साथ बातचीत करता है, तो वह अपने पिछले अनुभव पर भरोसा नहीं कर सकता है, वह इस बारे में नहीं सोचता है कि आपकी साइट कितनी अभिनव है। वह बस सोचता है कि चीजें ऐसी क्यों नहीं हैं जहां उन्हें "होना चाहिए"।

संज्ञानात्मक प्रवाह के साथ एक डिज़ाइन बनाकर, आप आगंतुकों को उनकी कामकाजी स्मृति के साथ अधिक महत्वपूर्ण चीजों को संसाधित करने की अनुमति देते हैं ताकि उनके लिए "हां" कहना आसान हो।

इस तरह के और लेख मेरे टेलीग्राम चैनल (प्रोरो) पर पढ़े जा सकते हैं। मैं मार्केटिंग और वेब एनालिटिक्स के बारे में लिखता हूं।

आपका उच्च रूपांतरण!