विज़ुअल हायरार्की क्या है

जब कोई विज़िटर आपकी वेबसाइट पर आता है, तो उसकी आँखें पेज को ऊपर से नीचे क्रम में नहीं पढ़तीं। वे सरसरी नज़र डालती हैं, और जो एलिमेंट अलग दिखते हैं उन पर कूदती हैं। विज़ुअल हायरार्की वह डिज़ाइन सिद्धांत है जो तय करता है कि वे पहले, दूसरे और तीसरे नंबर पर क्या देखें। इसके बिना, अच्छा लिखा कंटेंट भी खो जाता है क्योंकि कुछ भी नज़र को सबसे ज़रूरी चीज़ की ओर नहीं ले जाता।

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

विज़ुअल हायरार्की क्यों मायने रखती है?

विज़िटर औसतन कुछ सेकंड में तय करते हैं कि पेज पर रुकना है या नहीं। उस समय वे पैराग्राफ़ नहीं पढ़ रहे होते। वे हेडिंग, इमेज और बटन पर नज़र डालकर तय करते हैं कि यह काम का है या नहीं। मज़बूत विज़ुअल हायरार्की वाला पेज अपना मकसद तुरंत बता देता है। इसके बिना वाला पेज विज़िटर से ज़्यादा मेहनत करवाता है, और ज़्यादातर इसकी ज़हमत नहीं उठाएँगे।

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

विज़ुअल हायरार्की कौन से टूल बनाते हैं?

डिज़ाइनर प्राथमिकता तय करने के लिए विज़ुअल गुणों का एक तय सेट इस्तेमाल करते हैं। हर एक को अलग से एडजस्ट किया जा सकता है या ज़्यादा असर के लिए मिलाया जा सकता है।

साइज़

बड़े एलिमेंट पहले ध्यान खींचते हैं। 36 पिक्सल की मुख्य हेडिंग 16 पिक्सल के बॉडी टेक्स्ट से पहले आँख को खींचती है। हेडिंग के स्तरों के बीच साइज़ का फ़र्क़ पढ़ने का साफ़ क्रम बनाता है। जब पेज पर हर चीज़ लगभग एक ही साइज़ की हो, तो कुछ भी अलग नहीं दिखता और विज़िटर के पास शुरू करने की कोई जगह नहीं होती।

रंग और कंट्रास्ट

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

स्पेसिंग और व्हाइट स्पेस

व्हाइट स्पेस से घिरे एलिमेंट कसकर ठूँसे गए एलिमेंट से ज़्यादा ज़रूरी लगते हैं। कॉल टू एक्शन बटन के आसपास खुली जगह संकेत देती है कि वह ध्यान का हक़दार है। तंग लेआउट हर चीज़ को बराबर ज़रूरी बना देते हैं, यानी कुछ भी ज़रूरी नहीं लगता। अपनी वेबसाइट पर व्हाइट स्पेस का इस्तेमाल कैसे करें वाला लेख इस सिद्धांत को व्यावहारिक ब्योरे में बताता है।

जगह

विज़िटर वेब पेज को अनुमानित पैटर्न में देखते हैं, आमतौर पर ऊपर बाएँ से शुरू करके नीचे की ओर। सबसे ज़रूरी कंटेंट पेज के ऊपर और मोबाइल पर फ़ोल्ड के ऊपर होना चाहिए।

बिज़नेस वेबसाइट पर विज़ुअल हायरार्की कैसे लागू करें

मज़बूत हायरार्की हर पेज के प्रकार में एक जैसे पैटर्न पर चलती है। ब्योरे बदलते हैं, पर ढाँचा वही रहता है।

होमपेज की हायरार्की

होमपेज को पूरी साइट पर सबसे साफ़ हायरार्की चाहिए क्योंकि वह सबसे बड़े दर्शक वर्ग की सेवा करता है। मुख्य हेडिंग बताती है कि बिज़नेस क्या करता है। एक मुख्य कॉल टू एक्शन बटन उसके नीचे साफ़ दिखता है। अपनी वेबसाइट को प्रोफ़ेशनल कैसे दिखाएँ वाला लेख बताता है कि हायरार्की निखरे हुए रूप के बड़े लक्ष्य में कैसे बैठती है। UX डिज़ाइन क्या है वाला लेख समझाता है कि हायरार्की विज़िटर के पूरे अनुभव से कैसे जुड़ती है।

WEMASY विज़ुअल हायरार्की कैसे संभालता है

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

क्या-क्या शामिल है यह WEMASY वेबसाइट बिल्डर पर देखें, या प्राइसिंग पेज पर प्लान देखें।

अक्सर पूछे जाने वाले सवाल