فهرست محتوا
فضای پایین صفحه (Below the Fold) و فضای بالای صفحه (Above the Fold) به عنوان بنرهای تبلیغاتی، یا لینک بخشی از بالای صفحه یا پایین صفحه وب هستند. عامل تعیین کننده برای تاثیرگذاری، دید آنی بخش مهم المان سایت است. بسته به اینکه کاربر برای دیدن محتوا باید اسکرول کند، این قسمت‌های صفحه به‌صورت Above the Fold یا Below the Fold در نظر گرفته می‌شوند.
موتور جستجو و کاربران می توانند بفهمند که کدام قسمت از صفحه وب مهم تر است و تمرکز و هدف اصلی صفحه وب چیست که با محتوای بالای صفحه یا محتوای پایین صفحه مشخص می شود.
اصطلاحات Above the Fold و Below the Fold از کجا آمده اند؟
در طراحی وب، عبارت Above the Fold بخشی از صفحه است که کاربر بدون اسکرول به پایین می بیند. هر چیزی که زیر این خط فرضی باشد فضای پایین صفحه (Below the Fold) در نظر گرفته می شود و کاربر فقط با اسکرول آن را مشاهده می‌کند.
اصطلاح “فولد” در اصل از صنعت چاپ می آید و نمادی از خط چین است که هنگام تا شدن روزنامه ایجاد می شود و اکنون در طرلحی وب سایت ها اعمال می شود.
منظور از فضای پایین صفحه Below the Fold چیست؟
Below the Fold به دلایل مختلف جالب است: وب‌سایت‌های فروشگاهی یا تجاری می‌توانند محصولات، پست‌ها یا فعالیت های اجتماعی را در اینجا نمایش دهند. همین امر در مورد صفحات سرمقاله صدق می کند. در Below the Fold می توانید به مقالات مشابه یا اطلاعات بیشتر لینک داخلی دهید. این منطقه برای تأثیر مثبت بر رفتار کاربر ایده آل است. چه تاثیراتی دارد:
- زمان ماندگاری بالا
- نرخ کلیک بیشتر
- وفاداریی بیشتر مشتری
- نرخ تبدیل بیشتر (معرفی محصولات مرتبط)
- محتوای اطلاعاتی در یک سایت فروشگاهی قدرت برندینگ شما را ارتقا می دهد.
نکته: اگر محتوای بیش از حدی را در قسمت Below the Fold قرار دهید ممکن است موتور جستجو آن را محتوای اصلی در نظر بگیرید و رتبه شما آسیب ببیند.
چرا Above the Fold مهم است؟
کاربران بیشتر از طریق تلفن هوشمند یا تبلت از اینترنت استفاده می کنند. استفاده از موبایل در حال تغییر نحوه عملکرد کاربران در اینترنت است.
صفحه نمایش های کوچکتر به پیمایش فشرده تری در وب سایت ها نیاز دارند. کاربر با کشیدن انگشت روی صفحه شروع به تغییر صفحه می کند و نمایش محتوا تغییر یافته است.
این رفتارهای تغییر یافته کاربران اینترنت در مسیر فناوری های تلفن همراه، طراحی وب سایت ها را تغییر می دهد.
یک صفحه و عناصر آن اصولاً روی نمایشگرها در اندازه های مختلف مشاهده می شوند. این طراحی فولد ها را در موقعیت های بسیار متفاوت در وب سایت قرار می دهد. عوامل تعیین کننده، مانند وضوح صفحه یا بزرگ شدن صفحه، در بین کاربران متفاوت است. این تغییرات باید در هنگام طراحی Above the Folds در نظر گرفته شود.
عبارت Critical Rendering Path و Initial Page Loading به Above the Fold مربوط می شود. یک صفحه وب با ساختار CSS و HTML بهتر می تواند برای انجام هدف اصلی خود سریعتر با کاربر درگیر شود. می توان گفت Above the Fold نگاه اول کاربر و موتور جستجو به صفحه است. این بخش از نظر سرعت، از نظر جلب توجه و از نظر معنایی اهمیت زیادی دارد.
کدام محتوا باید در قسمت بالای صفحه (Above the Fold) باشد؟
هیچ قانون قطعی در مورد قرار دادن عناصر در یک صفحه وجود ندارد. با توجه به رفتار متفاوت کاربر، ابعاد مختلف گوشی های هوشمند، وضوح صفحه نمایش و اندازه صفحه نمایش، این توصیه ها به طور دقیق تنظیم نشده اند.
به طور کلی مهمترین مطالب در ابتدای وب سایت قرار داده می شود. بخش بلافاصله قابل مشاهده از یک صفحه نباید دارای اطلاعات بیش از حد باشد.
با Puppeteer، می‌توان چندین اسکرین شات از دستگاه‌ها و مرورگرهای مختلف گرفت تا بررسی کرد چگونه قسمت بالای صفحه وب مشاهده می‌شود تا عملکرد آن را درک کنیم. همچنین، تست A/B برای طراحی قسمت تاشو در بالا بسیار مهم است.
چگونه می توان رفتار کاربر را فضای بالای صفحه کنترل کرد؟
توصیه می شود نظر بازدید کننده را در Above the Fold جلب کنید. نکات و مشوق هایی وجود دارد که کاربر را به حرکت و توجه به بقیه صفحه، یعنی قسمت زیر، تحریک می کند.
قسمت ناوبری برای ستون‌های Above the Fold ایده‌آل هستند. ستون های افست به کاربر سیگنال می دهند که اطلاعات بیشتری وجود دارد. بخش متن به عمد توسط تاشو قطع می شود. ناوبری ساده را می توان از طریق مسیرهای از پیش ترسیم شده که با خط تاشو تقسیم می شوند نیز به دست آورد.
با توجه به هدف صفحه وب و هدف جستجو اولیه کاربران، قسمت بالای تاشو را می توان طراحی کرد. اگر هدف کاربر جستجوی دوچرخه دویدن است، می توانید تصاویر و قیمت محصولات پرفروش را همراه با دکمه “افزودن به سبد خرید” ارائه دهید.
اگر عبارت «محاسبه سود اعتبار» است، باید یک ماشین حساب با متنی صاف برای راهنمایی کاربر ارائه دهید، همچنین ممکن است برخی از کاربران تعجب کنند که «بهره اعتباری چگونه محاسبه می‌شود». همچنین ممکن است نیاز باشد محتوای اطلاعاتی در صفحه وب با اجزای ناوبری آسان باشد.
چگونه می توان وب سایت ها را به روشی مدرن طراحی کرد؟
ابزارهای مختلف از توسعه یک طرح ملموس پشتیبانی می کنند. تست های بصری وب سایت در هر صورت ضروری است. طراحی جذابی که به ابعاد مختلف استفاده ارزش می دهد برای تجربه کاربری خوب در سایت مهم است.
طراحی های مینیمالیستی و ظریف تجربه کاربر را بهینه می کند، همچنین در زمینه استفاده از اینترنت تلفن همراه که اهمیت آن در حال افزایش است. با کمک طراحی موثر ناحیه بالای تاشو، کاربر این قدرت را پیدا می کند که خودش محتوا و عناصر یک وب سایت را کشف کند. این آزادی انتخاب به اعصاب رفتار استفاده مدرن ضربه می زند: زیرا محتوای زیادی قابل دسترسی است.
Above the Fold چگونه بر سئو تاثیر می گذارد؟
گوگل با به‌روزرسانی الگوریتم طرح‌بندی صفحه (تبلیغات در بالای صفحه Ads Above The Fold) از 19 ژانویه 2012، وب‌سایت‌هایی را که به طور گسترده از تبلیغات در قسمت بالای صفحه استفاده می‌کنند جریمه می‌کند. از دیدگاه کاربر، چنین وب سایت هایی تجربه کاربری پایینی دارند. زیرا کاربر ابتدا باید از طریق تبلیغات مبارزه کند تا بتواند محتوا را مشاهده کند.
در طول این به روز رسانی، ایجاد تعادل بین محتوا و بنرهای تبلیغاتی ایجاد شده است. محتوای صفحه نباید از هدف گذاری تبلیغاتی بیش از حد رنج ببرد. در این حالت، بهینه سازی درون صفحه نه تنها بر جنبه فنی یک وب سایت بلکه بر فاکتور طراحی و کاربر پسند بودن آن نیز تأثیر می گذارد.
تجربه نشان داده است قسمت بالایی یک وب سایت اولین و قوی ترین توجه را از یک کاربر دریافت می کند. بنابراین این منطقه مکانی محبوب برای بنرهای تبلیغاتی است. تبلیغات بیش از حد منجر به رتبه بندی و ترافیک ضعیف تر می شود.
وب سایت هایی با تبلیغات گسترده Above the Fold برای دستگاه های تلفن همراه مشکل ساز هستند. زیرا بدون استفاده از راه حل ها، به عنوان مثال، طراحی واکنش گرا، تشخیص محتوای صفحه برای کاربر دشوار است.
قسمت های Above the Fold در CSS چیست؟
CSS (Cascading Style Sheets) برگه هایی به شکل زبان طراحی و قالب بندی هستند. این زبان ظاهر اسناد HTML را تعیین می کند و نه محتوای آنها را.
CSS طرحی را که در Above the Fold بارگذاری شده است، تنظیم می کند. به عنوان مثال، هدر و لوگو، پیمایش اولیه، ساختار طرح، مشخصات بدنه در CSS، عنوان H1، و ناوبری از طریق محتوا.
این مناطق از صفحات هر کدام دارای اطلاعات CSS هستند که برای بارگذاری صفحه ضروری است. CSS بحرانی را می توان با استفاده از ابزارها شناسایی و بهینه کرد.
طراحی یک وب سایت بر سرعت بارگذاری آن تأثیر می گذارد. سرعت بارگذاری نیز یکی از فاکتورهای رتبه بندی گوگل است. بنابراین، طراحی صفحه نباید به سرعت بارگذاری آسیب وارد کند.
همچنین، برای بخش Above the Fold صفحه وب، استفاده از CSS داخلی یا درون خطی برای تماس اولیه سریعتر با کاربر توصیه می شود.
آیا call-to-action می تواند بخشی از Above the Fold باشد.
قرار دادن بهینه Call-to-Action (CTA) بحث برانگیز است. افسانه ای وجود دارد که CTA باید بلافاصله در وب سایت قابل مشاهده باشد.
CTA اصولاً باید زمانی ظاهر شود که کاربر از محصول متقاعد شده باشد و بخواهد تعامل داشته باشد.
فاکتورهایی وجود دارد که بر محصول تبلیغ شده و نگرش کاربر نسبت به محصول تأثیر می‌گذارند:
1. آیا بازدیدکنندگان از طریق یک کمپین referral به سایت شما می آیند:
بازدیدکنندگانی که محکوم به مشاهده تبلیغات هستند احتمالاً به CTA واکنش نشان می دهند. شما قبل از بازدید از وب سایت تصمیم خود را گرفته اید. بنابراین قرار دادن تعیین کننده نیست.
اما اگر نرخ تبدیل برای شما در این کمپین مهم است، ممکن است لازم باشد مطمئن شوید که کاربران به راحتی می توانند CTA شما را ببینند و می توانند به قیف تبدیل شما هدایت شوند.
از آنجایی که هر گروه کاربری شخصیت (پرسونا) متفاوتی دارد، طراحی صفحات فرود مختلف برای منابع ترافیکی مختلف کمک کننده است. اگر صفحات وب جایگزین متفاوت هستند، باید فقط نسخه کنونیکال همان صفحه را به موتور جستجو نشان دهید.
2. آیا کاربران سایت از محصول مطمئن نیستند و آیا محصول را می شناسند؟
اگر کاربران نا مطمعن اطلاعات قبلی درباره محصول داشته باشند، منطقی است که CTA را در بالای صفحه قرار دهید.
3. آیا بازدیدکنندگان مطمئن نیستند و آیا محصول بسیار پیچیده است؟
اگر یک سرویس یا محصول برای کاربرانی که قبلاً تصمیم نگرفته‌اند سودمند نباشد، برای دستیابی به یک عقیده بجز CTA نیاز به متقاعد سازی است. آنچه مورد نیاز است توضیح عمیق تر در مورد اینکه چرا کاربر باید از CTA پیروی کند است.
برای افزایش نرخ تبدیل، باید هر شخصیت کاربر را از طریق Google Analytics و Market Analysis از یکدیگر متمایز کنید.
چرا بخش های Above the Fold و Below the Fold برای SEO و UX بسیار مهم هستند؟
- فضای بالای می تواند رتبه را تغییر دهد. زیرا طور مستقیم با تجربه کاربر و نرخ تبدیل مرتبط است. همچنین تحت تأثیر سرعت صفحه و سئو تکنیکال قرار دارد. در بالای Fold و Page Layout هویت صفحه را نشان می دهد.
- اگر طرح‌بندی یک صفحه فقط بر اساس کوئری های اطلاعاتی طراحی شده باشد، نمی‌تواند کاربرانی را که از طریق «کوئری های معاملاتی» می‌آیند راضی کند. ارضای بیش از یک نیاز در یک صفحه وب می تواند داده های تاریخی معتبرتری را در چشم موتور جستجو ایجاد کند زیرا ظرفیت بیشتری دارد.
- فضای بالای صفحه به موتورهای جستجو کمک می کند تا صفحات کمتری را با هزینه کمتر بخزند. ببنابراین ویژگی های SERP مانند Fraggles یا Jumping Links را ایجاد می کنند تا کاربر را با توجه به کوئری های مربوطه هدایت کنند.
- آخرین نمونه از این بهبودهای SERP برای قطعه‌های ویژه ساخته شده است که می‌تواند کاربر را پس از کلیک بر روی نتیجه به بخش مربوطه متن هدایت کند.
- از اهمیت های طراحی صحیح صفحه Layout و Above the Fold ایجاد صفحات معتبر و در مقیاس کامل دشوارتر است. بنابراین، تنها ناشران معتبر و با استعداد می توانند اعتماد کافی به SERP ایجاد کنند.
- صفحات وب طراحی شده برای پروفایل های مختلف کاربران مهم هستند که هم تجربه کاربر را افزایش می دهند و هم هزینه موتور جستجو را کاهش می دهند و اهداف جستجوی متعدد را برآورده می کنند.
