नेटिव ऐड्स के लिए मोबाइल लैंडिंग पेज: कन्वर्ज़न बढ़ाने वाले डिज़ाइन नियम

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

डेस्कटॉप-फ़र्स्ट-फिर-एडाप्ट का तरीका इतनी बार क्यों फेल होता है#

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

माउस के लिए नहीं, अंगूठे के लिए डिज़ाइन करें#

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

पेज वेट एक तकनीकी चिंता नहीं, बल्कि एक कन्वर्ज़न लीवर है#

मोबाइल कनेक्शन पर लोड टाइम का हर एक्स्ट्रा सेकंड उस व्यक्ति को खोने का मौका है जिसने कंटेंट फ़ीड से इंपल्स पर क्लिक किया है और धीमे पेज के लिए उसके पास ज़ीरो पेशेंस है। हीरो इमेजेज़ को एग्रेसिवली कंप्रेस करें, ऑटोप्ले वीडियो से बचें (जो कई नेटवर्क्स पर कंप्लायंस स्क्रूटिनी भी आकर्षित करता है और पाठक के उस डेटा को जला देता है जिस पर खर्च करने के लिए उसने सहमति नहीं दी), फ़ोल्ड के नीचे की किसी भी चीज़ को लेज़ी-लोड करें, और DOM को सरल रखें। यह डोमेन और होस्टिंग चॉइस के साथ मिलकर काम करता है; एक धीमे, ओवरसब्सक्राइब्ड शेयर्ड सर्वर के पीछे होस्ट किया गया पेज, या वह जो एक अनावश्यक एक्स्ट्रा रीडायरेक्ट हॉप से होकर गुज़रता है, एक भी पिक्सल रेंडर होने से पहले अच्छे डिज़ाइन काम को बर्बाद कर देता है। अच्छी होस्टिंग अच्छे मोबाइल डिज़ाइन की पूर्वापेक्षा है, न कि एक अलग चिंता जिसे आप बाद में ठीक कर सकते हैं।

लेआउट: सिंगल कॉलम, वर्टिकल फ़्लो, साइडवेज़ सरप्राइज़ नहीं#

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

किन चीज़ों से बचना चाहिए क्योंकि नेटवर्क उन्हें फ़्लैग करेंगे#

• फ़ोर्स्ड इंटरस्टीशियल या पॉप-अप जो वास्तविक यूज़र एक्शन से पहले कंटेंट को ब्लॉक करते हैं। अधिकांश नेटिव नेटवर्क्स की एडिटोरियल पॉलिसीज़ इन्हें ख़राब यूज़र एक्सपीरियंस और क्रिएटिव रिजेक्शन का एक सामान्य स्रोत मानती हैं; किसी भी इंटरस्टीशियल पैटर्न पर भरोसा करने से पहले विशिष्ट नेटवर्क की वर्तमान डॉक्यूमेंटेशन जाँचें।
• ऑटोप्ले ऑडियो या वीडियो। वही तर्क: यह पाठक को आश्चर्यचकित करता है, उसका डेटा जलाता है, और रिव्यू ध्यान आकर्षित करता है।
• नकली सिस्टम UI एलिमेंट्स (नकली "बैटरी लो" वार्निंग, नकली नोटिफ़िकेशन बैनर, नकली क्लोज़ बटन जो कुछ भी बंद नहीं करते)। ये क्लोकिंग के क्षेत्र के करीब बैठते हैं जिस तरह कंप्लायंस टीमें उन्हें पढ़ती हैं, भले ही कोई तकनीकी क्लोकिंग न हो रही हो, क्योंकि ये पाठक को यह समझने में धोखा देते हैं कि वे क्या देख रहे हैं।
• डिस्क्लोज़र दबा हुआ या टैप के पीछे छिपा हुआ। स्पॉन्सरशिप और एडवरटाइज़िंग डिस्क्लोज़र को पाठक की ओर से अतिरिक्त इंटरैक्शन के बिना दिखाई देने की आवश्यकता होती है; देखें एडवर्टोरियल और नेटिव ऐड्स के लिए FTC डिस्क्लोज़र नियम यह जानने के लिए कि वर्तमान मार्गदर्शन के तहत "दिखाई देने" का वास्तव में क्या अर्थ है।

छोटी स्क्रीन पर टाइपोग्राफ़ी और पढ़ने की लय#

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

सिर्फ़ CTA से परे टच टार्गेट्स#

प्राइमरी CTA को डिज़ाइन ध्यान मिलता है, लेकिन सेकेंडरी टैप करने योग्य एलिमेंट्स (एक "learn more" लिंक, किसी भी डिसमिसिबल एलिमेंट पर क्लोज़ बटन, नेविगेशन अगर पेज में है) को भी वही अंगूठे के अनुकूल साइज़िंग और स्पेसिंग की ज़रूरत होती है। एक क्लोज़ बटन जो तकनीकी रूप से मौजूद है लेकिन विश्वसनीय रूप से हिट करने के लिए बहुत छोटा है, व्यवहार में, बिल्कुल भी क्लोज़ बटन के रूप में काम नहीं करता, और किसी चीज़ को डिसमिस करने की कोशिश कर रहे पाठक के लिए निराशाजनक या जोड़-तोड़ वाला पढ़ा जाता है। Apple और Google के अपने मोबाइल डिज़ाइन गाइडलाइंस दोनों इसी कारण से न्यूनतम टच टार्गेट साइज़ निर्दिष्ट करते हैं, और उनका पालन करना नेटिव प्लेटफ़ॉर्म ऐप्स के बाहर भी एक उचित बेसलाइन है।

फ़ॉर्म: कम फ़ील्ड्स, नेटिव इनपुट टाइप्स#

अगर प्री-लैंडर या उसके पीछे का ऑफ़र स्टेप कोई जानकारी एकत्र करता है, तो हर अतिरिक्त फ़ील्ड मोबाइल पर एक ड्रॉप-ऑफ़ पॉइंट है, जहाँ टाइपिंग डेस्कटॉप की तुलना में धीमी और अधिक ग़लती-प्रवण है। प्रत्येक फ़ील्ड के लिए सही इनपुट टाइप का उपयोग करें (फ़ोन नंबर के लिए न्यूमेरिक कीपैड, ईमेल फ़ील्ड के लिए ईमेल कीबोर्ड) ताकि फ़ोन का अपना कीबोर्ड विज़िटर की मदद करे न कि उसे जनरल कीबोर्ड पर करैक्टर्स ढूंढने के लिए मजबूर करे। अगर आप किसी फ़ील्ड को प्री-लैंडर पर ही पूछने के बजाय फ़नल के बाद के स्टेप तक टाल सकते हैं, तो वह करें।

जियो और भाषा विवरण जो विशेष रूप से मोबाइल पेजों में समस्या पैदा करते हैं#

करेंसी सिंबल्स, डेट फ़ॉर्मेट्स और फ़ोन नंबर फ़ॉर्मेट्स जियो के अनुसार अलग-अलग होते हैं, और उन्हें ग़लत करना छोटी स्क्रीन पर बड़ी स्क्रीन की तुलना में तेज़ी से अविश्वसनीय पढ़ा जाता है, जहाँ विज़िटर के पास ऑफ़र पढ़ने के साथ-साथ एक अपरिचित फ़ॉर्मेट को पार्स करने का कम धैर्य होता है। अगर आप एक ही प्री-लैंडर टेम्पलेट को कई जियो टियर्स में चला रहे हैं, तो इन विवरणों को हर जगह एक जियो के कन्वेंशन्स पर डिफ़ॉल्ट करने के बजाय ठीक से लोकलाइज़ करें।

आपके पेज के ऊपर नेटवर्क-इंजेक्टेड UI को हैंडल करना#

कई नेटिव नेटवर्क आपके कंटेंट के आसपास या ऊपर अपने स्वयं के एलिमेंट्स रेंडर करते हैं, एक स्पॉन्सर्ड लेबल, एक क्लोज़ या बैक कंट्रोल, कभी-कभी एक नेटिव-स्टाइल्ड कमेंट या एंगेजमेंट विजेट जिसे नेटवर्क स्वयं कंट्रोल करता है। अपने पेज को यह मानकर डिज़ाइन करें कि वह ओवरले मौजूद है, न कि सिर्फ़ एक क्लीन प्रिव्यू एनवायरनमेंट में टेस्ट करके, क्योंकि एक CTA या हेडलाइन जो वास्तविक डिवाइस पर नेटवर्क के अपने UI एलिमेंट के रेंडर होने की सटीक जगह पर पोज़िशन है, वह पाठक के लिए प्रभावी रूप से अदृश्य है। पेज के ऊपरी हिस्से के पास सटीक वर्टिकल पोज़िशनिंग पर निर्भर लेआउट निर्णयों को फ़ाइनलाइज़ करने से पहले, नेटवर्क के वास्तविक इन-फ़ीड रेंडरिंग के अंदर आपका पेज वास्तव में कैसा दिखता है, इसे जाँचें, न कि सिर्फ़ एक स्टैंडअलोन URL के रूप में।

मोबाइल-हैवी नेटवर्क्स पर पहले से क्या काम कर रहा है, इसे जाँचना#

कुछ नेटवर्क्स व्यवहार में दूसरों की तुलना में अधिक मोबाइल-स्क्यू होते हैं, और जीतने वाले प्री-लैंडर पैटर्न तदनुसार भिन्न होते हैं। OpenAdLibrary के नेटिव ऐड स्पाई टूल पर लाइव, वर्तमान में चल रहे क्रिएटिव्स और उनके ट्रेस्ड लैंडर्स की समीक्षा करने से आपको दिखता है कि किसी दिए गए नेटवर्क पर अभी वास्तव में कौन से फ़ॉर्मेट और लेआउट चॉइस बचे हुए हैं, न कि जेनेरिक मोबाइल UX सलाह लागू करना जो किसी विशिष्ट नेटवर्क की ऑडियंस के व्यवहार को ध्यान में नहीं रखती। MSN Native Ads: The Advertiser's Guide और How Taboola Ads Work दोनों नेटवर्क-स्पेसिफ़िक प्लेसमेंट और ऑडियंस बिहेवियर को कवर किया है जो इन लेआउट निर्णयों में योगदान देता है।

एक्सेसिबिलिटी कन्वर्ज़न के साथ लोगों की अपेक्षा से अधिक ओवरलैप करती है#

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

वह टेस्ट जो वास्तव में मायने रखता है#

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