Hardik Dewra
2 min read
क्या above the fold अब भी मायने रखता है?
हाँ, पर इसका काम उतना बड़ा नहीं जितना ज़्यादातर hero sections मान लेते हैं। visitor को दिखाएँ कि वह सही जगह है, फिर अगला scroll क़ीमती बनाएँ।
fold अपनी जगह से हिल गया, सवाल वही रहा
अब कोई एक fold बचा ही नहीं। 1440 by 900 वाला laptop, browser का अपना हिस्सा काटने के बाद, आपके page के करीब 750 pixels दिखाता है। Safari में iPhone करीब 650 दिखाता है, और address bar नीचे हो तो उससे भी कम। यानी above the fold का अलग-अलग हिस्सा हर visitor को दिखता है। उस हिस्से से उन्हें जो चाहिए, वह नहीं बदला है। क्या मैं सही जगह पर हूँ, और क्या यह एक और scroll के लायक़ है?
अब लोग scroll करते हैं, और फ़ैसला जल्दी लेते हैं
2010 से जिसने भी phone चलाया है, वह बिना सोचे scroll करता है। दिमाग़ का वाक्य पूरा होने से पहले अंगूठा चल पड़ता है। तो यह पुराना डर कि fold के नीचे कोई नहीं पढ़ता, अब बासी हो चुका है। हाँ, लोग अब भी जल्दी निकल जाते हैं। कोई आपका ad click करता है, headline पढ़ता है, ad में जो वादा था वह नहीं मिलता, और कुछ ही सेकंड में चला जाता है। scroll करने में पढ़ने वाले का कुछ नहीं लगता। कमी उसके ध्यान की है।
design करने से पहले अपना fold नाप लें
अपना page उन तीन devices पर खोलें जो आपके analytics में सच में दिखते हैं। मेरे ज़्यादातर clients के लिए इसका मतलब है एक iPhone, 13 inch वाला MacBook और एक 1080p external monitor। हर एक पर, बिना scroll किए, page के ऊपरी हिस्से का screenshot लें। phone पर आमतौर पर एक headline और आधा button दिखता है। बड़े monitor पर आमतौर पर headline 400 pixels की खाली जगह में तैरता दिखता है। दोनों के लिए अलग-अलग design करें।
जगह आमतौर पर किन चीज़ों में बर्बाद होती है
तीन चीज़ें पहली screen खा जाती हैं और बदले में कुछ नहीं देतीं। घूमते हुए carousels पहली ही slide पर लोगों को खो देते हैं, तो दूसरी और तीसरी slide कोई देखता ही नहीं। “Growth, reimagined” जैसे हवाई headlines किसी भी category की किसी भी site पर आराम से बैठ जाएँगे। हद से बड़ी hero images phone की screen से button को नीचे धकेल देती हैं। आख़िरी वाली बात असली handset पर जाँचें, क्योंकि Framer का canvas जितना उदार है, phone उतने नहीं होते।
above the fold जगह किन चीज़ों को मिलनी चाहिए
पाँच चीज़ें, मोटे तौर पर इसी क्रम में। product का नाम और वह किस category में आता है। buyer को क्या नतीजा मिलेगा, उसी की भाषा में लिखा हुआ। एक सबूत, जैसे logos की एक कतार या एक ऐसा नंबर जिसे आप साबित कर सकें। एक primary button जिस पर कोई क्रिया लिखी हो। और असली product या असली काम की तस्वीर, मुस्कुराती हुई team वाली stock photo की जगह।
scroll को आगे जाने की वजह दें
पहली screen का निचला किनारा जान-बूझकर कटा हुआ लगना चाहिए। fold की लाइन से थोड़ा ऊपर ही कोई section शुरू कर दें। logos की आधी कतार दिखा दें। नीचे से किसी heading को झाँकने दें। ठीक उसी लाइन पर सख़्त border और चौड़ी खाली जगह आँख को यही बताती है कि page यहीं ख़त्म है। लंबे pages पर मैं hero को viewport की करीब 80 प्रतिशत ऊँचाई तक रखता हूँ, ताकि अगले section की एक पतली झलक हमेशा दिखती रहे।
दस मिनट में अपना fold कैसे जाँचें
अपने page का ऊपरी हिस्सा कंपनी से बाहर के किसी इंसान को पाँच सेकंड दिखाएँ। फिर छिपा दें और पूछें कि कंपनी बेचती क्या है और किसके लिए है। जवाब न आए तो fold फेल है, और कोई भी animation उसे नहीं बचा सकती। launch के बाद scroll map देखें। अगर sessions का बड़ा हिस्सा दूसरे section तक पहुँचता ही नहीं, तो दिक़्क़त उन्हीं पहले 650 pixels में है।
WeDesignLandingPages.com
A sub-brand of WeDesignBrands.Agency