डिज़ाइन में विज़ुअल हायरार्की
लोग कहाँ देखें इसे कैसे नियंत्रित करें। पाँच लीवर और स्क्विंट टेस्ट।
आपके डिजाइन के पास किसी को यह बताने के लिए तीन सेकंड हैं कि कहां देखना है। यदि सब कुछ समान रूप से ध्यान के लिए चिल्लाता है, तो कुछ भी नहीं पढ़ा जाता है, कुछ भी क्लिक नहीं होता है, और उपयोगकर्ता चला जाता है। यह कोई डिजाइन राय नहीं है। यह दृष्टि कैसे काम करती है।
दृश्य पदानुक्रम वह प्रणाली है जो उस तीन सेकंड की खिड़की को नियंत्रित करती है। यहां बताया गया है कि कैसे एक बनाया जाए जो वास्तव में लोगों को निर्देशित करता है।
दृश्य पदानुक्रम वास्तव में क्या है
दृश्य पदानुक्रम तत्वों की व्यवस्था है ताकि आंख उन्हें एक इरादतन क्रम में संसाधित करे। यादृच्छिक रूप से नहीं, सभी एक बार में नहीं, बल्कि अनुक्रम में: यह पहले, फिर यह, फिर यह।
मस्तिष्क एक पुस्तक की तरह ऊपर से नीचे तक पृष्ठ नहीं पढ़ता है। यह संकेतों के लिए स्कैन करता है। आकार, विपरीतता, रंग, रिक्ति और स्थिति सभी आंख को बताते हैं कि क्या सबसे महत्वपूर्ण है। एक अच्छी तरह से निर्मित पदानुक्रम सबसे महत्वपूर्ण तत्व को मिस करना असंभव बनाता है और सबसे कम महत्वपूर्ण तत्व को अनदेखा करना आसान बनाता है।
पाँच नियंत्रण
प्रत्येक दृश्य पदानुक्रम पाँच लीवर से बनाया जाता है। आपको एक बार में सभी पाँच की आवश्यकता नहीं है। आपको अपने विशिष्ट लेआउट के लिए सही संयोजन की आवश्यकता है।
1. आकार
बड़े तत्व पहले देखे जाते हैं। यह सबसे स्पष्ट लीवर और सबसे विश्वसनीय है। 48px हेडलाइन हमेशा 14px पैराग्राफ से पहले ध्यान आकर्षित करेगी। आकार के बीच का अनुपात पदानुक्रम बनाता है, पूर्ण संख्या नहीं।
गलती: सब कुछ बड़ा बनाना। जब हेडलाइन, सबहेडिंग, बॉडी और CTA सभी ओवरसाइज़्ड हों, तो पदानुक्रम चपटा हो जाता है और कुछ भी नेतृत्व नहीं करता।
2. विपरीतता
उच्च विपरीतता आंख को आकर्षित करती है। हल्के पृष्ठ पर गहरा तत्व, म्यूट बैकग्राउंड पर चमकीला बटन, ग्रेस्केल लेआउट पर रंगीन बैज। विपरीतता एक तत्व को अपने आकार को बदले बिना पॉप बनाने का सबसे तेज़ तरीका है।
यह विपरीत दिशा में भी काम करता है। कम विपरीतता तत्वों को पीछे धकेलती है। मेटाडेटा, टाइमस्टैम्प और माध्यमिक लेबल में कम विपरीतता होनी चाहिए ताकि वे प्राथमिक सामग्री के साथ प्रतिस्पर्धा न करें।
3. रंग
रंग भावनात्मक वजन बनाता है। ग्रे के सागर में एक एकल लाल बैज हमेशा ध्यान आकर्षित करेगा, लाल विशेष होने के कारण नहीं बल्कि क्योंकि यह इसके संदर्भ में रंगीन ऊर्जा वाला एकमात्र तत्व है। रंग पैलेट पदानुक्रम की सेवा करता है जब प्रत्येक रंग की परिभाषित भूमिका हो: CTA के लिए प्राथमिक, बॉडी के लिए तटस्थ, मेटाडेटा के लिए मंद।
4. रिक्ति
व्हाइट स्पेस खाली स्पेस नहीं है। यह एक संकेत है। उदार स्पेस से घिरा हुआ तत्व महत्वपूर्ण के रूप में पढ़ता है क्योंकि स्पेस इसे अलग करता है और इसे सांस लेने के लिए कमरा देता है। एक साथ दबाए गए तत्व माध्यमिक के रूप में पढ़ते हैं क्योंकि कुछ भी खड़ा नहीं होता।
वेब डिजाइन में सबसे आम पदानुक्रम विफलता अनुभागों के बीच पर्याप्त स्पेसिंग नहीं है। जब प्रत्येक अनुभाग अगले में बहता है, तो आंख यह नहीं बता सकती कि एक विचार कहां समाप्त होता है और दूसरा कहां शुरू होता है।
5. स्थिति
आंख स्वाभाविक रूप से LTR भाषाओं में ऊपरी-बाएं से शुरू होती है और वहां से पूर्वानुमानित पैटर्न का पालन करती है। सबसे महत्वपूर्ण तत्व को प्राकृतिक प्रारंभिक स्थिति में रखना किसी भी अन्य लीवर के लागू होने से पहले इसे लाभ देता है।
अकेले स्थिति कमजोर है। ऊपरी-बाएं में एक छोटा, कम विपरीतता तत्व अभी भी केंद्र में एक बड़े, उच्च विपरीतता तत्व को हार देगा। जब यह अन्य चार नियंत्रणों को मजबूत करता है तो स्थिति सबसे अच्छी तरह काम करती है।
स्क्विंट टेस्ट
यह जांचने का सबसे तेज़ तरीका है कि क्या आपका पदानुक्रम काम करता है। अपने डिजाइन पर स्क्विंट करें जब तक सब कुछ धुंधला न हो जाए। जो तत्व दृश्यमान रहते हैं वे हैं जिन्हें आपका पदानुक्रम प्राथमिकता दे रहा है।
यदि स्क्विंट करते समय पहली चीज़ जो आप देखते हैं वह CTA, हेडलाइन या हीरो इमेज है, तो आपका पदानुक्रम काम कर रहा है। यदि पहली चीज़ जो आप देखते हैं वह सजावटी साइडबार या नेविगेशन बार है, तो यह नहीं है।
यह पाँच सेकंड लगता है और किसी भी उपयोगकर्ता परीक्षण से पहले 80% पदानुक्रम समस्याओं को पकड़ता है।
सामान्य पदानुक्रम विफलताएँ
सब कुछ बोल्ड है। यदि प्रत्येक पैराग्राफ बोल्ड टेक्स्ट से शुरू होता है, तो कुछ भी जोर नहीं दिया जाता है। बोल्ड तब काम करता है जब यह दुर्लभ हो।
बहुत सारे फोकल बिंदु। समान आकार, समान रंग के तीन तत्वों वाले पृष्ठ का कोई पदानुक्रम नहीं है। इसमें तीन प्रतिद्वंद्वी हैं। प्रति व्यूपोर्ट एक विजेता चुनें।
मोबाइल को अनदेखा करना। 1440px स्क्रीन के लिए डिजाइन किया गया पदानुक्रम अक्सर 375px फोन पर ढह जाता है। पाँचों नियंत्रणों को प्रत्येक ब्रेकपॉइंट के लिए पुनर्मूल्यांकन किया जाना चाहिए क्योंकि स्थानिक संबंध पूरी तरह से बदल जाते हैं।
विपरीतता के बिना रंग। रंगीन पृष्ठभूमि पर रंगीन बटन गायब हो जाता है। पदानुक्रम तभी काम करता है जब फोकल तत्व और इसके आस-पास के बीच रंग विपरीतता अनुपात पृथक्करण बनाने के लिए पर्याप्त हो।
व्यवहार में पदानुक्रम बनाना
यहाँ किसी भी पृष्ठ लेआउट के लिए एक ठोस ढांचा है:
- एक बात तय करें। इस पृष्ठ पर सबसे महत्वपूर्ण एकल कार्य या संदेश क्या है? वह तत्व सबसे बड़ा आकार, सबसे अधिक विपरीतता और सर्वोत्तम स्थिति प्राप्त करता है।
- बाकी सब कुछ रैंक करें। पृष्ठ पर प्रत्येक तत्व की एक संख्यायुक्त सूची बनाएँ, महत्व के अनुसार क्रमबद्ध। रैंकिंग निर्धारित करती है कि प्रत्येक तत्व को कौन सा लीवर मिलता है।
- प्रति स्तर कम से कम दो नियंत्रण लागू करें। शीर्ष-स्तर का तत्व बड़ा आकार + उच्च विपरीतता प्राप्त करता है। दूसरे स्तर के तत्व मध्यम आकार + रंग प्राप्त करते हैं। तीसरे स्तर के तत्व छोटा आकार + कम विपरीतता प्राप्त करते हैं।
- जब तक टूट न जाए तब तक हटाएं। तत्वों को तब तक हटाएं जब तक पदानुक्रम प्रभावित न हो। टूटने से पहले जो अंतिम तत्व आपने हटाया था वह शायद अनावश्यक था।
यह ढांचा लैंडिंग पृष्ठों, डैशबोर्ड, लेख, ईमेल और किसी भी लेआउट के लिए काम करता है जहाँ उपयोगकर्ता को पता चलना चाहिए कि पहले कहाँ देखना है।
अक्सर पूछे जाने वाले प्रश्न
डिजाइन में दृश्य पदानुक्रम क्या है?
दृश्य पदानुक्रम महत्व के क्रम में डिजाइन तत्वों की व्यवस्था है। यह आकार, विपरीतता, रंग, रिक्ति और स्थिति का उपयोग करके नियंत्रित करता है कि आंख पृष्ठ पर जानकारी को कैसे संसाधित करती है।
दृश्य पदानुक्रम महत्वपूर्ण क्यों है?
क्योंकि उपयोगकर्ता नहीं पढ़ते, वे स्कैन करते हैं। स्पष्ट पदानुक्रम के बिना, प्रत्येक तत्व समान रूप से ध्यान के लिए प्रतिस्पर्धा करता है, उपयोगकर्ता अभिभूत हो जाता है और चला जाता है। पदानुक्रम तत्वों के संग्रह को निर्देशित अनुभव में बदल देता है।
मैं दृश्य पदानुक्रम का परीक्षण कैसे करूँ?
सबसे तेज़ विधि स्क्विंट परीक्षण है। अपने डिजाइन को धुंधला करें या स्क्विंट करें और जांचें कि कौन से तत्व दृश्यमान रहते हैं। वे तत्व हैं जिन्हें आपका पदानुक्रम प्राथमिकता दे रहा है। यदि गलत तत्व हावी हैं, तो आकार, विपरीतता या रिक्ति को समायोजित करें जब तक सही लोग नेतृत्व न करें।
Need layouts that guide the eye? Brainy builds interfaces with hierarchy baked in.
Get Started
