ब्लॉग / Affiliate marketing
लैंडिंग पेज कैसे बनाएं? भाग II - डिज़ाइन ट्रिक्स
इस लेख में, हम लैंडिंग पेज बनाने के विभिन्न ट्रिक्स और नियम प्रस्तुत करेंगे, जो आपके उपयोगकर्ताओं के लिए इसे अधिक सुलभ बना देंगे। आखिरकार, जैसे एक बिजनेसमैन को सही सूट की जरूरत होती है, एक महिला को परफेक्ट ड्रेस की जरूरत होती है, वैसे ही लैंडिंग पेज को सही डिजाइन और अच्छी तरह से रखा गया कंटेंट चाहिए।
अगर आप नहीं जानते कि लैंडिंग पेज को शुरू से कैसे बनाएं, तो हमारे “लैंडिंग पेज कैसे बनाएं? भाग I” लेख पर जाएं, जिसमें हमने पूरी प्रक्रिया विस्तार से बताई है।
ध्यान रखें कि इस लेख को पढ़ने के विपरीत, अपनी खुद की वेबसाइट डिजाइन करना समय लेने वाली प्रक्रिया है। हालांकि, निराश न हों। वेबसाइट खुद डिजाइन करके, आप $5,000 तक बचा सकते हैं। तो, क्या हम शुरू करें?
ट्रिक 1 - शक्ति के चार आयाम
शायद आपने फोटो लेते समय स्क्रीन पर "ग्रिड" देखा होगा? यह "थर्ड्स के नियम" से जुड़ा है और यह वेब डिजाइन में भी इस्तेमाल होता है। इस नियम के अनुसार, पेज को दृश्य रूप से तीन हिस्सों में बांटा जाता है और इसमें 9 एक जैसे वर्ग होते हैं।
लाइनों के चार इंटरसेक्शन के केंद्र में बिंदु ही "शक्ति के आयाम" हैं। इन सीमाओं के भीतर जो भी होगा, सबसे पहले मानव आंख द्वारा देखा जाएगा। जब आप लैंडिंग पेज बना रहे हों, तो सबसे महत्वपूर्ण एलिमेंट्स को इन्हीं इंटरसेक्शन पर रखें।
ट्रिक 2 - हिक्स का नियम
एक और ट्रिक जो आपके लिए उपयोगी हो सकती है, वह ब्रिटिश मनोवैज्ञानिक विलियम एडमंड हिक से आती है। उन्होंने कहा कि निर्णय लेने में लगने वाला समय संभावित विकल्पों की संख्या बढ़ने के साथ बढ़ता है। इसका मतलब है कि जितने ज्यादा विकल्प होंगे, निर्णय लेने में उतना ही ज्यादा समय लगेगा।
अनुसंधान के दौरान, मार्क लेपर और शीन इयेंगर ने पाया कि 24 तरह के जैम वाली मेज 6 तरह के जैम वाली मेज की तुलना में कम आकर्षक थी। जब किसी व्यक्ति को बहुत ज्यादा विकल्प दिए गए, तो कुछ खरीदने की संभावना 10 गुना कम हो गई। लैंडिंग पेज बनाते समय इसका उपयोग कैसे करें? CTA और बटन की संख्या सीमित करें और एक लक्ष्य पर ध्यान केंद्रित करें। पेज पर उपयोगकर्ता के सभी संभावित निर्णयों पर विचार करें और उन्हें जितना संभव हो कम करें।
ट्रिक 3 - “F” मॉडल
कई अध्ययन दिखाते हैं कि टेक्स्ट देखते समय मानव दृष्टि अनजाने में एक निश्चित पैटर्न में चलती है। पहले हम बाएं से दाएं देखते हैं, फिर नीचे की ओर बढ़ते हैं, और सबसे कम ध्यान नीचे दाएं कोने में देते हैं - हम बस उसे स्कैन कर लेते हैं।
अगर आप अपने उपयोगकर्ता के लिए जानकारी को आत्मसात करना आसान बनाना चाहते हैं और कन्वर्जन बढ़ाना चाहते हैं, तो सबसे महत्वपूर्ण एलिमेंट्स को F अक्षर के साथ रखें और कम महत्वपूर्ण चीजों को उससे बाहर रखें। संपर्क के सुविधाजनक साधन प्रमुख स्थान पर होने चाहिए: सोशल नेटवर्क, टेलीफोन आदि।
ट्रिक 4 - 8 सेकंड नियम
आपके पास उपयोगकर्ता को आकर्षित करने के लिए केवल 8 सेकंड हैं (और हालिया शोध के अनुसार इससे भी कम)। हमें यह कहते हुए खेद है, लेकिन यही किसी व्यक्ति की एक चीज़ पर ध्यान केंद्रित करने की क्षमता है। तो 8 सेकंड में उपयोगकर्ता का ध्यान कैसे आकर्षित करें?
- शीर्षक को आकर्षक और रोचक बनाएं, और यह भी जरूरी है कि यह उत्पाद/पेज के फायदों के बारे में जल्दी और संक्षिप्त रूप से जानकारी दे और उन समस्याओं को छुए जिनसे ग्राहक जूझ रहा है।
- अपने संदेश को आकर्षक छवियों के साथ पूरा करें जो उत्पाद के मुख्य उद्देश्य को दर्शाएं।
- CTA बटन को स्पष्ट और छोटा बनाएं।
ट्रिक 5 - समानता का नियम
मानव संपूर्ण संरचना को उसके व्यक्तिगत तत्वों से अलग तरीके से देखता है। हमें पास-पास वे चीजें पसंद आती हैं जो एक जैसी हों लेकिन अलग-अलग समूहों में हों।
इस नियम का उपयोग करें। मान लीजिए कि आपके उत्पाद की समीक्षाएं बहुत अच्छी हैं। इसका लाभ उठाएं और आवेदन या फॉर्म को रेफरेंस के पास रखें।
ट्रिक 6 - सामाजिक प्रमाण
सामाजिक प्रमाण विभिन्न प्रकार के प्रमाणपत्र और डिप्लोमा होते हैं। Data Insight और AliExpress के एक अध्ययन में पाया गया कि 10 में से 9 खरीदारी ग्राहक द्वारा समीक्षाएं पढ़ने के बाद पूरी होती हैं। वेबसाइट बनाते समय इसका उपयोग कैसे करें? अपनी वेबसाइट पर ग्राहक समीक्षाएं जोड़ें।
ट्रिक 7 - अबव द फोल्ड
क्या आपने कभी इसके बारे में सुना है? अगर नहीं, तो हम समझाते हैं। अबव द फोल्ड वेबसाइट का वह हिस्सा है जो बाकी पेज को स्क्रॉल किए बिना दिखाई देता है।
शायद आपको यह जानकर आश्चर्य नहीं होगा कि लोग हर साल कम पढ़ते हैं। आमतौर पर हम केवल लेख को अपनी आंखों से स्कैन करते हैं। The Nielsen Norman Group Research ने साबित किया है कि फोल्ड के ऊपर रखा गया कंटेंट उपयोगकर्ताओं द्वारा 84% बेहतर तरीके से ग्रहण किया जाता है।
क्यों? जवाब सरल है - नीचे के कंटेंट को देखने के लिए अतिरिक्त प्रयास (पेज स्क्रॉलिंग) की आवश्यकता होती है। इसका मतलब है कि जितना लंबा आपका कंटेंट होगा, उपयोगकर्ताओं के आपके टेक्स्ट में डूबने की संभावना उतनी ही कम होगी।
लैंडिंग पेज - डिजाइन और UX
अपनी वेबसाइट के डिजाइन का चयन करने का पहला कदम है यह विचार करना कि आपकी टारगेट ग्रुप में कौन है। महिलाएं या पुरुष? वे क्या करते हैं? वे अपने खाली समय में क्या करते हैं? उनका उद्देश्य क्या है और वे क्या उम्मीद करते हैं? इन सवालों के जवाब देकर, आप अपना काम आसान बना लेते हैं। आपको पता चल जाता है कि आपको पेस्टल और आरामदायक रंगों का उपयोग करना है या शायद गहरे और रहस्यमय रंगों का। एक बार जब आप अपनी वेबसाइट के मूल बातें जान लें और आपकी प्रारंभिक दृष्टि हो, तो नीचे दिए गए नियमों का पालन करें।
नियम #1 - उच्च गुणवत्ता वाली छवियां
One Bright Local के एक अध्ययन में पाया गया कि 60% लोग उन सर्च परिणामों को पसंद करते हैं जिनमें छवियां होती हैं। वहीं, Skyword के शोध के अनुसार, दिलचस्प छवियों को औसतन 94% अधिक इंप्रेशन मिलते हैं। इसलिए छवियों का चयन करते समय, बोरिंग और स्टीरियोटाइपिकल छवियों से बचें, कुछ ओरिजिनल और रोचक खोजें। आमतौर पर ऐसी छवियों के लिए भुगतान करना पड़ता है, लेकिन कई साइट्स हैं जो मुफ्त में ढेर सारी उच्च गुणवत्ता वाली छवियां देती हैं। यहां कुछ उदाहरण दिए गए हैं:
- Pexels,
- Unsplash,
- StockSnap,
- Negative Space,
- Superfamous Studios,
- Little Visuals,
- Gratisography,
- Kaboompics,
- Picjumbo.
छवि का आकार
एक और महत्वपूर्ण कारक जो पूरे उपयोगकर्ता अनुभव को प्रभावित करता है, वह है वेबसाइट की स्पीड, और इसलिए छवियों और वीडियो का आकार। इन्हें जितना हल्का हो सके उतना रखें, बिना गुणवत्ता खोए।
अगर आप Windows उपयोगकर्ता हैं तो छवियों को कंप्रेस करने के लिए हम अनुशंसा करते हैं:
अगर आप MacOS उपयोगकर्ता हैं तो छवियों को कंप्रेस करने के लिए हम अनुशंसा करते हैं:
ऑनलाइन इमेज कंप्रेशन सॉफ्टवेयर:
वीडियो का आकार
जहां तक वीडियो फाइल्स के आकार की बात है, मामला छवियों जैसा ही है। हालांकि, यह थोड़ा और जटिल है। फोटो कुछ MB की हो सकती हैं, जबकि वीडियो का आकार आमतौर पर सौ MB से ज्यादा होता है, जिससे आपकी वेबसाइट काफी धीमी हो सकती है।
सबसे अच्छे वीडियो कंप्रेसर:
- Any Video Converter Free,
- Leawo Prof. Media,
- Freemake Video Converter,
- WinX Video converter,
- MediaCoder (Windows only),
- AVS Video converter (Windows only),
- Total Video Converter,
- HandBrake.
नियम #2 - रंग
मार्केटिंग में रंग बहुत महत्वपूर्ण भूमिका निभाते हैं और इनका चयन सोच-समझकर करना चाहिए। वे मुख्य रूप से प्रभावित करते हैं कि उपयोगकर्ता आपकी कंपनी को कैसे देखता है। अगर आप एफिलिएट मार्केटिंग में रंगों की मनोविज्ञान के बारे में अधिक जानना चाहते हैं, तो हमारा लेख देखें: “एफिलिएट मार्केटिंग में रंगों का मनोवैज्ञानिक असर। कैसे डिटेल्स आपकी कमाई बदल देंगे?”।
याद रखें कि ब्रांड के रंग उसकी मिशन के अनुरूप होने चाहिए, और सबसे महत्वपूर्ण बात, वे आपकी टारगेट ग्रुप को पसंद आने चाहिए। हालांकि, सबसे महत्वपूर्ण है आपका ऑफर और सेवाओं की गुणवत्ता।
इसके अलावा, रंगों का उपयोग विकलांग लोगों की पहुंच के लिए भी महत्वपूर्ण है, जिसके बारे में हम चौथे नियम में बात कर रहे हैं। याद रखें कि दो अलग-अलग चमकीले रंगों को एक साथ न रखें, खासकर नीला और हरा, क्योंकि यह रंग-अंधता वाले लोगों के लिए समस्या हो सकती है। सबसे पढ़ने योग्य रंग संयोजन काला सफेद पर है।
नियम #3 - उज्ज्वल और स्पष्ट हेडलाइन
उपयोगकर्ता को आपका पेज याद रखना चाहिए और वह उसमें वापस आना चाहेगा। एक उज्ज्वल (अनौपचारिक) और स्पष्ट हेडलाइन लगाकर, आप उनकी बहुत मदद करते हैं। विकलांग या डिजिटल रूप से वंचित लोगों पर ध्यान देना चाहिए और उन्हें हमारी वेबसाइट का उपयोग करना आसान बनाना चाहिए। यह ऐसा दिखना चाहिए:
नियम #4 - विकलांग लोगों के लिए पहुंच
विकलांग लोगों के लिए नेविगेशन को आसान बनाने के लिए, हमने उन बिंदुओं की सूची तैयार की है जिन्हें वेबसाइट डिजाइन करते समय ध्यान में रखना चाहिए। इसके अलावा, ऐसी अनुकूलित सामग्री का SEO पर सकारात्मक प्रभाव पड़ेगा, जिससे Google या अन्य ब्राउज़रों में बेहतर पोजिशनिंग मिलेगी।
ALT डिस्क्रिप्शन
ALT डिस्क्रिप्शन आपकी वेबसाइट पर पोस्ट की गई तस्वीरों के वैकल्पिक विवरण हैं। इससे पेज रीडिंग सॉफ्टवेयर उपयोगकर्ता को बता सकता है कि वहां क्या है। और अगर इंटरनेट कमजोर है, तो आप देख सकते हैं कि इमेज में क्या है, इसलिए यह सॉल्यूशन सिर्फ सॉफ्टवेयर-रीडेबल नहीं है।
वीडियो के लिए सबटाइटल
अगर आपकी वेबसाइट पर बहुत सारे वीडियो हैं, तो उनमें सबटाइटल जोड़ना अच्छा है ताकि बहरे लोगों की मदद हो सके। लंबी ऑडियो रिकॉर्डिंग के लिए, उन्हें ट्रांसक्राइब करना अच्छा है। एक ऑनलाइन प्रोग्राम जो आपको सबटाइटल ऑटोमेटिकली जोड़ने में मदद कर सकता है, वह है veed.io।
सही तरीके से संपादित और चिह्नित लिंक
"यहां क्लिक करें" शब्दों में लिंक देने के बजाय, "अधिक जानकारी के लिए [वेबसाइट पता] देखें" का उपयोग करें, इससे अंधे लोगों को बहुत मदद मिलेगी। इसके अलावा, हाइपरलिंक को सामान्य टेक्स्ट से अलग रंग में हाइलाइट करें। इससे उपयोगकर्ताओं को उन्हें माउस से ढूंढना नहीं पड़ेगा।
बटन का आकार
अगर आपकी वेबसाइट के अगले सबपेज पर रीडायरेक्ट करने वाले बटन बहुत छोटे हैं, तो वे उन लोगों के लिए समस्या बन सकते हैं जिन्हें साइट नेविगेट करने में कठिनाई होती है। सुनिश्चित करें कि "क्लिक करने योग्य" बटन क्षेत्र हमेशा पर्याप्त बड़ा हो।
कीबोर्ड नेविगेशन
आपकी वेबसाइट को इस तरह से संरचित होना चाहिए कि "TAB" बटन दबाने पर उपयोगकर्ता एड्रेस बार से मेनू और वेबसाइट के अन्य क्षेत्रों में लॉजिकल और सहजता से जा सके। इससे विकलांग उपयोगकर्ता भी आपकी वेबसाइट पर आसानी से नेविगेट कर पाएंगे।
नियम #5 - स्पेस
एक और बात है आपकी वेबसाइट पर स्पेस, उपयोगकर्ता को जल्दी और बिना किसी अतिरिक्त प्रयास के पता चल जाना चाहिए कि आपकी वेबसाइट किस बारे में है और उस पर क्या उम्मीद की जा सकती है। आप निश्चित रूप से नहीं चाहेंगे कि आपका लैंडिंग पेज 2010 के पेज जैसा दिखे, जहां हर जगह टेक्स्ट और विज्ञापन हैं और उपयोगकर्ता नहीं जानता कि क्या करना है। आज ऐसे हालात बहुत कम होते हैं। हालांकि, नीचे दिए गए पेज के उदाहरण को देखें जिसे और बेहतर डिजाइन किया जा सकता था।
शुरुआत इतनी बुरी नहीं है, कंपनी क्या करती है और उससे क्या उम्मीद की जा सकती है, इसकी सरल जानकारी। अब ध्यान दें कि नीचे क्या है। उपयोगकर्ता पर विभिन्न लिंक और वाक्य बमबारी की जाती है, जिससे स्पैम जैसा महसूस होता है। आपको इससे बचना चाहिए।
नियम #6 - पारदर्शी मेनू और समरूपता
जैसे हेडर सरल होना चाहिए, वैसे ही मेनू भी होना चाहिए। आजकल मानक है एक मुख्य मेनू बार ऊपर की ओर, स्पष्ट और नेविगेट करने में आसान। सुनिश्चित करें कि आपका लैंडिंग पेज सममित हो, मानव आंख को यह बहुत पसंद आता है।
नियम #7 - फूटर
आखिर में लेकिन कम महत्वपूर्ण नहीं - फूटर। यह कैसा दिखना चाहिए और इसमें क्या होना चाहिए? फूटर मुख्य रूप से सोच-समझकर, सरल और रोचक होना चाहिए। आपको सोचना पड़ेगा कि आप उन उपयोगकर्ताओं से क्या उम्मीद करते हैं जो पेज के नीचे तक पहुंचेंगे? अगर आपको इस सवाल का जवाब पता है, तो आपके लिए अच्छा फूटर डिजाइन करना बहुत आसान हो जाएगा। आमतौर पर, विज़िटर वेबसाइट को स्क्रॉल करते हैं ताकि संपर्क जानकारी मिल सके।
इसका मतलब यह नहीं है कि आप वहां वे चीजें नहीं रख सकते जो आपके लिए बहुत महत्वपूर्ण हैं। याद रखें कि फूटर को उपयोगकर्ताओं की जरूरतों को पूरा करना चाहिए और साथ ही आपको अपने लक्ष्यों को प्राप्त करने की अनुमति देनी चाहिए। यहां कुछ उदाहरण हैं कि फूटर में कौन सी जानकारी हो सकती है:
- प्राइवेसी पॉलिसी और उपयोग की शर्तें,
- संपर्क विवरण,
- नेविगेशन,
- सोशल मीडिया के लिंक,
- न्यूज़लेटर के लिए सब्सक्रिप्शन।
लैंडिंग पेज - टेक्स्ट कंटेंट
उपयुक्त हेडर और बटन बनाने के बाद, अगला कदम है पेज पर कंटेंट बनाना। यह तार्किक है कि सब कुछ उस ऑफर से संबंधित होना चाहिए जिसे आप प्रमोट कर रहे हैं और इस उत्पाद की खरीद के लिए प्रोत्साहित करना चाहिए।
स्पष्ट कंटेंट बनाने के मुख्य सिद्धांत हैं पदानुक्रम और सिस्टम: प्रत्येक ब्लॉक को अपनी जगह पर होना चाहिए। आप PowerPoint या कागज पर एक स्केच बना सकते हैं ताकि संरचना को फिर से बनाने की कोशिश कर सकें। एक स्पष्ट इंटरफेस केवल तभी प्राप्त किया जा सकता है जब आप मुख्य सवालों का जवाब दें: क्या, कहां, कहां और क्यों। जानकारी क्रमिक होनी चाहिए: कौन सा उत्पाद, उपयोगकर्ता को इसकी क्यों जरूरत है। आप भरोसा बढ़ाने के लिए क्रेडेंशियल्स बता सकते हैं। LeadGeneration साइट्स को कंटेंट को जितना संभव हो उतना छोटा और सरल रखना चाहिए। स्टेप्स को कम करने से आपकी कन्वर्जन रेट बढ़ेगी।
बाजार में, आप आकर्षक समाधान पा सकते हैं जो आपको अपनी वेबसाइट बनाने और कस्टमाइज़ करने में मदद करते हैं, जो किसी भी डिवाइस पर शानदार दिखती है। उदाहरण के तौर पर Kubio है - साइट बिल्डर प्लगइन जो Gutenberg को बढ़ाता है ताकि पूरी डिजाइन स्वतंत्रता और स्मूद साइट निर्माण का अनुभव मिल सके। यह पूरे पेज को एक ही, सहज इंटरफेस में एडिट करता है, बिना वर्डप्रेस टेम्प्लेट संरचना को समझे।
यह वेबसाइट आपके नए वेबसाइट के लिए त्वरित शुरुआत के लिए विशाल टेम्प्लेट गैलरी देती है। इसमें एक व्यापक ब्लॉक लाइब्रेरी भी है जिसमें प्राइसिंग टेबल, इमेज गैलरी, स्लाइडर और एकॉर्डियन जैसे एलिमेंट्स हैं, जिससे आप जल्दी से एडवांस्ड पेज बना सकते हैं। उल्लेखनीय है कि वेबसाइट हर पेज क्षेत्र, जैसे हेडर, फूटर और पेज कंटेंट, को सही टेम्प्लेट्स में ऑटोमेटिकली सेव करती है।
Kubio Builder की मुख्य विशेषताएं:
- पूरे पेज को एक ही, सहज इंटरफेस में बनाएं,
- एडवांस्ड डिजाइन और रिस्पॉन्सिव विकल्प,
- पूर्व-परिभाषित सेक्शनों को मिलाकर पेज बनाएं,
- विशाल टेम्प्लेट गैलरी,
- विस्तृत ब्लॉक लाइब्रेरी।
क्या आप पहले से यहां हैं?
हमें उम्मीद है कि जब आप इस बिंदु पर पहुंचेंगे, तो आप पहले से ही जान चुके होंगे कि अपनी वेबसाइट को प्रोफेशनल की तरह कैसे डिजाइन करना है। अब बस आपको शुभकामनाएं देना बाकी है!