मंगलवार को देर शाम आप अपना होमपेज रिफ़्रेश करते हैं। हेडलाइन ठीक है, फ़ोटो भी ठीक हैं, फिर भी विज़िटर कुछ ही सेकंड में लौट जाते हैं। आप सोचने लगते हैं कि कहीं विज़ुअल हायरार्की ही वह हिस्सा तो नहीं जिसे आप अनदेखा करते आए हैं। अक्सर यही होता है। छोटे-छोटे विज़ुअल फ़ैसले पहली छाप को उससे कहीं जल्दी बना देते हैं जितना ज़्यादातर बिज़नेस मालिक सोचते हैं।
विज़ुअल हायरार्की एलिमेंट को ऐसे क्रम में रखती है कि देखने वाले को सबसे ज़रूरी जानकारी सबसे पहले दिखे। यह चैप्टर आसान भाषा में बताता है कि इसका मतलब क्या है, यह आपकी वेबसाइट और मार्केटिंग पर क्यों असर डालता है और भारी-भरकम शब्दों में उलझे बिना इसे कैसे अपनाएँ। आप यह भी देखेंगे कि गेस्टाल्ट सिद्धांत का इसी तस्वीर से क्या रिश्ता है। चलिए, एक-एक कदम करके समझते हैं।
डिज़ाइन में विज़ुअल हायरार्की क्या है
विज़ुअल हायरार्की एलिमेंट को ऐसे क्रम में रखती है कि देखने वाले को सबसे ज़रूरी जानकारी सबसे पहले दिखे।
व्यवहार में आपकी वेबसाइट के हेडर, सर्विस पेज, सोशल ग्राफ़िक और प्रिंट सामग्री में विज़ुअल हायरार्की की झलक मिलती है। जब आप इसे सही नाम से पहचानते हैं, तो डिज़ाइनर को जल्दी ब्रीफ़ कर पाते हैं और ड्राफ़्ट को भरोसे के साथ जाँच पाते हैं।
गेस्टाल्ट सिद्धांत जैसे जुड़े हुए विचार सीधे इससे जुड़ते हैं। इस मॉड्यूल का बाकी हिस्सा पढ़ते समय इन्हें ध्यान में रखें।
मज़बूत हायरार्की नज़र को हेडलाइन से प्रूफ़ तक और फिर एक्शन तक ले जाती है।
आपके बिज़नेस के लिए डिज़ाइन में विज़ुअल हायरार्की क्यों ज़रूरी है?
ग्राहक हर शब्द पढ़ने से पहले ही लेआउट देखकर भरोसे का अंदाज़ा लगा लेते हैं। साफ़ विज़ुअल ढाँचा रुकावट घटाता है और ऑफ़र को समझना आसान बनाता है।
गेस्टाल्ट सिद्धांत बताते हैं कि लोग विज़ुअल जानकारी को अपने-आप समूहों में कैसे बाँट लेते हैं।
अपने मुख्य कॉल टू एक्शन को फ़ोल्ड के ऊपर सबसे ज़्यादा उभरा हुआ एलिमेंट बनाएँ।
यह आसपास के विषयों से कैसे जुड़ता है, यह देखना चाहें तो अगला नेगेटिव स्पेस क्या है और व्हाइट स्पेस पढ़ें।
आज ही इस्तेमाल करने लायक प्रैक्टिकल चेकलिस्ट
अपने मुख्य कॉल टू एक्शन को फ़ोल्ड के ऊपर सबसे ज़्यादा उभरा हुआ एलिमेंट बनाएँ।
किसी भी पेज को जाँचते समय देखें कि मोबाइल पर पहले स्क्रोल में ही विज़ुअल हायरार्की से जुड़ी चीज़ें साफ़ दिख रही हैं या नहीं। अगर नहीं, तो छोटे-छोटे डिटेल चमकाने से पहले सेक्शन का क्रम बदलें।
बदलाव से पहले और बाद के स्क्रीनशॉट सेव करें, ताकि आप समझ सकें कि आपकी साइट पर विज़ुअल हायरार्की के लिए क्या असरदार रहा।
यह चेकलिस्ट उन सभी को दें जो आपकी साइट अपडेट करते हैं, ताकि नए पेजों पर भी गेस्टाल्ट सिद्धांत एक जैसा रहे।
इस महीने नज़र रखने के लिए एक मेट्रिक चुनें, जैसे पेज पर बिताया समय या फ़ॉर्म भरना शुरू करने वाले लोग, ताकि डिज़ाइन के बदलाव सिर्फ़ पसंद पर नहीं, बिज़नेस के नतीजों से जुड़े रहें।
यह विषय आपके पूरे ब्रांड से कैसे जुड़ता है
विज़ुअल फ़ैसले शायद ही कभी सिर्फ़ एक पेज तक सीमित रहते हैं। गेस्टाल्ट सिद्धांत बताते हैं कि लोग विज़ुअल जानकारी को अपने-आप समूहों में कैसे बाँट लेते हैं।
आपके सोशल पोस्ट, ईमेल और प्रिंट की चीज़ें भी वही हायरार्की, रंग और टाइप के नियम दोहराएँ जो आप वेब पर इस्तेमाल करते हैं।
जब ब्रांड के विज़ुअल इधर-उधर भटकने लगते हैं, तो ग्राहकों को हल्की-सी बेमेलता महसूस होती है, भले ही वे उसे समझा न पाएँ।
इस मॉड्यूल के किसी जुड़े हुए चैप्टर से तुलना करने के लिए डिज़ाइन में व्हाइट स्पेस देखें।
मज़बूत हायरार्की नज़र को हेडलाइन से प्रूफ़ तक और फिर एक्शन तक ले जाती है।
वे सवाल जिन्हें लोग अक्सर नज़रअंदाज़ कर देते हैं
गेस्टाल्ट सिद्धांत, लेआउट डिज़ाइन जैसे दूसरे शब्द गहराई वाले उदाहरण खोजने और अपने काम को आम मानकों से मिलाने में मदद करते हैं।
गेस्टाल्ट सिद्धांत बताते हैं कि लोग विज़ुअल जानकारी को अपने-आप समूहों में कैसे बाँट लेते हैं।
एक ऐसा बदलाव लिखें, जिसे आप इस हफ़्ते किसी लाइव पेज पर टेस्ट करेंगे, पहले और बाद की तुलना के साथ। नपे-तुले छोटे बदलाव धुंधली योजनाओं से बेहतर होते हैं।
अपनी टीम को विज़ुअल हायरार्की के आसपास एक साझा शब्दावली सिखाने से डिज़ाइनर और एजेंसियों के साथ बार-बार सुधार कराने का चक्कर कम हो जाता है।
विज़ुअल अपडेट को आसान बनाने वाले टूल
लेआउट और स्टाइलिंग की कई दिक्कतें ठीक करने के लिए आपको कस्टम कोड की ज़रूरत नहीं है। विज़ुअल एडिटर में आप मोबाइल और डेस्कटॉप व्यू देखते हुए स्पेसिंग, रंग और टाइपोग्राफ़ी बदल सकते हैं।
WEMASY में विज़ुअल एडिटिंग वाला वेबसाइट बिल्डर शामिल है, ताकि हर छोटे बदलाव के लिए डेवलपर का इंतज़ार किए बिना आप बदलाव पब्लिश कर सकें। जो सीखा है उसे लागू करने के लिए तैयार हों, तो वेबसाइट बिल्डर खोलें।
अपडेट पब्लिश करने के बाद नेगेटिव स्पेस क्या है और व्हाइट स्पेस को दोबारा देखें, ताकि यह मॉड्यूल आपके दिमाग में जुड़ा रहे।
अब विज़ुअल हायरार्की को देखने का एक काम का नज़रिया आपके पास है। इसे तब इस्तेमाल करें जब आप अपनी साइट जाँचें, मार्केटिंग की चीज़ें मंज़ूर करें या डिज़ाइनर को ब्रीफ़ दें। इस मॉड्यूल में रफ़्तार बनाए रखने के लिए व्हाइट स्पेस और डिज़ाइन में व्हाइट स्पेस से आगे बढ़ें।
अक्सर पूछे जाने वाले सवाल
विज़ुअल हायरार्की में सुधार लाने में कितना समय लगता है?
इस चैप्टर की बुनियादी बातें अपनाने के बाद ज़्यादातर छोटे बिज़नेस को कुछ ध्यान से किए गए सेशन में ही पेज पहले से साफ़ दिखने लगते हैं। अपने होमपेज से शुरू करें, फिर वही नियम सर्विस और संपर्क पेजों पर लागू करें।
क्या विज़ुअल हायरार्की पर काम करने के लिए आपको डिज़ाइनर चाहिए?
जटिल रीब्रांडिंग में डिज़ाइनर मदद करता है, लेकिन विज़ुअल हायरार्की से जुड़े कई सुधार आप खुद कर सकते हैं, बस आपको पता होना चाहिए कि क्या देखना है। इससे जुड़ी जानकारी के लिए इस चैप्टर के साथ नेगेटिव स्पेस क्या है भी देखें।
क्या WEMASY आपकी वेबसाइट पर विज़ुअल हायरार्की अपनाने में मदद कर सकता है?
WEMASY के वेबसाइट बिल्डर में विज़ुअल एडिटर शामिल है, ताकि आप बिना कोड के लेआउट, रंग और टाइपोग्राफ़ी बदल सकें। टेम्पलेट अपडेट करने और बदलाव को मोबाइल पर देखने के लिए वेबसाइट बिल्डर खोलें।
विज़ुअल हायरार्की में सबसे आम गलती क्या होती है?
लोग एक बार में एक पेज ठीक करने की बजाय सब कुछ एक साथ ठीक करने की कोशिश करते हैं। कोई एक प्राथमिकता चुनें, जैसे पढ़ने की आसानी या कॉन्ट्रास्ट, फिर अगले सुधार के लिए व्हाइट स्पेस देखें।
विज़ुअल हायरार्की का SEO से क्या संबंध है?
साफ़ विज़ुअल हायरार्की और पढ़ने में आसान टाइप विज़िटर को पेज पर ज़्यादा देर रोकते हैं, जिससे वे एंगेजमेंट सिग्नल मज़बूत होते हैं जिन पर सर्च इंजन नज़र रखते हैं। बेहतर नतीजों के लिए डिज़ाइन के सुधारों के साथ कंटेंट का मज़बूत ढाँचा भी रखें।
विज़ुअल हायरार्की के बाद आगे कहाँ से सीखें?
अपने ब्रांड के लिए ऑनलाइन पूरा विज़ुअल सिस्टम बनाने के लिए इस किताब में नेगेटिव स्पेस क्या है और व्हाइट स्पेस पढ़ना जारी रखें।