این که شما محتوا سایت رو کجای صفحه قرار میدین، در ایجاد یک تجربه کاربری خوب یا بد تاثیر مستقیم داره. تو این مقاله ما به این چیزا میپردازیم: این که Above The Fold یا ATF چی هست؟ چه نکاتی برای طراحی ATF باید در نظر گرفته بشه؟ و در آخر هم طراحی محتوای بالای صفحه برخی از سایت ها رو بررسی می کنیم.
تعریف ATF در طراحی وب
به اون بخش از صفحه وب که بدون اسکرول کردن قابل مشاهده است ATF یا Above The Fold میگیم.
ریشه اصطلاح ATF یا Above The Fold
این ایده به روزهای قبل از دنیای دیجیتال بر میگرده و از صنعت روزنامه نشات گرفته. این اصطلاح در صنعت روزنامه به کلیه مطالبی گفته میشه که در قسمت بالای یک روزنامه تاشو قابل مشاهده است. در گذشته بیشتر روزنامه ها از طریق دکه های روزنامه فروشی که تو پیاده رو ها بود به فروش میرسید، همینطور که هنوزم کم و بیش این اتفاق داره می افته. این روزنامه ها رو معمولا از وسط تا میزدند که رهگذرها بتونن نیمه بالایی از صفحه اول رو ببیند. اگه اون چیزی که میدیدند اونها رو جذب نمی کرد اون رو نمی خریدند و فروش کاهش پیدا میکرد.
اهمیت ATF
چیدمان و قرار دادن محتوا از اهمیت زیادی برخوردار است. محتوای بالای صفحه ATF مهمترین محتوای وبسایت شماست، چون بازدید کنندگان وقتی برای اولین بار از سایت شما بازدید میکنند، با این قسمت مواجه میشن.
این قسمت برداشت اولیه بازدید کننده ها رو از سایت شما میسازه. ( دیدن یه موقع هایی یه جای مهمی مثل خواستگاری یا مصاحبه شغلی میخواین برین سعی میکنید تو بهترین حالت خودتون ظاهر بشین؟ اینم همونه. شما هرچه قدر هم که کار درست باشین این تصویر اولیه همیشه تو ذهن طرف مقابلتون میمونه و اکثر مواقع همین باعث قبول شدن یا رد شدن تون میشه!)
به دلیل اهمیت بسیار بالای این قسمت ، محتوایی که در ATF قرار میدید باید محتوایی باشه که برای دستیابی به اهداف کسب و کار شما از همه مهمتره. محتوا باید بلافاصله توجه کاربر را به خود جلب کنه.
بیشتر بازدید کننده ها اصلا به صفحه های دیگه وب یا حتی قسمت پایین صفحه اصلی شما توجه نمی کنن. پس ATF اون چیزیه که بر بقیه پیمایش در سایت شما تاثیر میگذاره. پس ازش عاقلانه استفاده کنید.
معمولاً صاحبان وبسایت ها، مهمترین لینک ها ناوبری مثل لوگو، چند کلمه کوتاه که بیزینس شون رو به بهترین نحو معرفی کنه، شاید یک شعار و قطعاً یک دکمه CTA یا Call to Action قوی در Above the fold قرار میدن.
شما میخواین از بهترین و جذاب ترین ویژگی هاتون در قسمت بالایی استفاده کنید تا یک برداشت مطلوب برای بازدید کننده ها ایجاد کنید و اونا رو ترغیب کنید تا پیمایش کنند و محتوای پایین صفحه شماررو هم ببینن. اگه یه محتوای بی اهمیت و بی ارزش در ATF قرار بدین، بدون اسکرول کردن سایت شما رو ترک میکنند به جای این که وقت بذارن و ببینن تو صفحه های دیگه چه پیشنهادی واسشون دارین.
پس اگر مخواین کاربرها به شما تو دستیابی به اهدافتون کمک کنند باید در همون ثانیه های اول اونا رو جذب کنید.
تاثیر ATF بر سئو
وقتی صحبت از تبلیغات میشه، میبینیم که قرار دادن تبلیغات در ATF، دید کاربر رو بهبود می بخشه و نرخ تبدیل یا Conversion Rate بیشتری رو نسبت به تبلیغاتی که در ATF قرار نمیگیرند به ارمغان میاره.
اگر چه معمولاً فکر خوبی به نظر میرسه که بیایم برای به حداکثر رسوندن بازدید تبلیغ اون رو در Above the ّold قرار بدیم، این کار میتونه عواقب منفی هم داشته باشه.
گوگل طی سال های متمادی چندین الگوریتم که همینطور هم دارن به روز رسانی میشن پیاده کرده مبنی بر این که سایت هایی که بیش از حد از تبلیغات در ATF استفاده میکنند رو مجازات کنه، تا اونا مجبور بشن محتوای اصلی رو در ATF قرار بدن.
سایت های که تبلیغات بیش از حد در ATF قرار میدن، چیزی جز تجربه کاربر بد نصیبشون نمیشه و انجام این کار منجر به کاهش ترافیک اورگانیک Organic Traffic سایت شما میشه.
بهینه سازی برای مشاهده آگهی نیاز به تعادل داره، به طوری که هم تجربه کاربر و هم مشاهده کاربر به حداکثر برسه.
نکات اساسی در طراحی ATF
طرح ساده
اگر محتوای بالای صفحه شلوغ باشه ممکنه کاربر رو خسته کنه و اگر نتونه تو زمان نسبتاً کوتاهی (قانون هشت ثانیه) جواب سوالش رو بگیره به سایت دیگه ای میره. پس سعی کنید از یک تصویر با کیفیت و با معنی یا چند رسانه ای دیگه مثل گیف یا ویدئو، یک عنوان که صفحه سایت رو توضیح بده و چند جمله برای توضیح جزئیات ضروری استفاده کنید.
محتوای جذاب
در عین سادگی میتونین محتوای جذابی داشته باشید. و این به این معنی نیست که باید تغییر بزرگی توی طراحی بدین. مثالاً اگر دکمه CTA یا Call to Action دارین، به جای استفاده از “بیشتر بدانید” از “آماده ای شروع کنیم؟” استفاده کنید.
مطالب کاربردی
مهمتر از همه اینه که استفاده از محتوای شما آسون باشه. تا به یک تجربه کاربری یا UX خوب منجر بشه. شما فکر میکنین این که محتوا صفحه سایتتون جذاب و مفید باشه مهمتره یا این که استفاده ازش راحتتر باشه؟ معلومه که قابلیت استفاده تو اولویته. بزارین با یک مثال روشنش کنیم.
در طراحی ATF روی چه چیزی تمرکز کنیم؟
شما باید در Above the Fold سناریویی رو طرح کنید که گویای مطالبی باشه که در ادامه قراره بیاد و در عین حال توجه بازدید کننده رو به خودش جلب کنه.
این که بخواین تمام لینک های مهمتون رو در ATF قرار بدین، افزایش نرخ تبدیل و ترافیک تون رو تضمین نمیکنه؛ حتی باعث گیج شدن کاربر میشه طوری که اصلاً نمیدونه باید به چی نگاه کنه!
به جای این که بیاید یه ATF شلوغ طراحی کنید، سعی کنید روی یه سری از آیتم ها تمرکز کنید.
1. قرار دادن اطلاعات مناسب در ATF
درسته که بهتره CTA یعنی دکمه های Call to Atcion در Above The Fold قرار بگیرن ولی در کل نرخ تبدیل در یک صفحه به این بستگی نداره که CTA های شما بالای صفحه باشه یا پایین صفحه.
بلکه نکته مهم اینه که CTA های شما در جایی قرار بگیره که احساس می کنید اونجا مردم آماده برای یه اقدام هستن (اطمینان حاصل کنید که محتوای موجود به اندازه کافی ترغیب کننده باشه.)
اگه کسی میدونه چی قراره بهش عرضه کنین و میخواد باهاتون همکاری کنه یک دکمه CTA چه پایین و چه بالای صفحه باشه، شما رو به هدفتون میرسونه. چون کاربر اینقدر میگردن تا پیداش کنند.
2. طراحی مناسب پایین صفحه BTF
طراحی شما باید به نحوی باشه که در بازدیدکننده ها این حس کاذب رو ایجاد نکنه که به انتهای صفحه رسیدن و دیگه اطلاعاتی وجود نداره. بلکه میتونین با یک پیکان اونا رو به ادامه صفحه راهنمایی کنید.
اگه هر کسی صفحه بالا رو ببینه فکر نمیکنه که این صفحه ادامه ای هم داره.
نمونه هایی خوب از طراحی ATF
1. سایت HubSpot
سایت HubSpot تو زمینه رشد و پشرفت فعالیت میکنه. عنوان این سایت در واقع بیان کننده این ضرب المثل است که می‌گوید «همه چیز محیا است». به این معنی که خواننده برای پیشرفت به پیش رانده میشود، و این دقیقاً همون چیزی که در ATF مشاهده میکنید. این تصویر یادگیری (نوت بوک) و فناوری پیشرفته (کلاه ایمنی) را نشون میده.
2. سایت Jeff Bullas
سایت Jeff Bullas دو مجموعه ATF داره. وقتی برای اولین بار تو این سایت قرار میگیرید یک دروازه خوش آمد گویی داره و یک پیشنهاد قانع کننده برای دریافت راهنمایی در مورد دوبرابر شدن ترافیک. تصویر زمینه بلافاصله توجه بازدیدکننده رو به خودش جلب میکنه.
اگه روی اون علامت پیکان که پایین صفحه خوش آمدگویی قرار گرفته کلیک کنید تازه به صفحه اصلی هدایت میشید. برای رسیدن به محتوا به یک حرکت اضافی نیاز هست ولی احتمالا دیگه واسه موندن تو صفحه قانع شدین.
3. سایت SnackNation
در سایت SnackNation محتوای ATF دقیقاً اون چیزی رو که بیزینس ارائه میده نشون میده. اونا محصولشون که جعبه غذای میان وعده است رو به عنوان پس زمینه قرار دادن. محتوای این صفحه به بازدیدکننده ها این امکان رو میده که سریعاً برای دریافت جعبه میان وعده خودشون ثبت نام کنند. در حقیقت سایت SnackNation با این طرح ATF هر هفته حدود 1200 مشتری بالقوه جدید دریافت میکنه.
4. سایت Missinglettr
صفحه اصلی سایت Missinglettr به خوبی طراحی شده، چون عنوان سایت دقیقاً جایی قرار گرفته که بازدیدکننده ها دنبالشن. توضیحات دو جمله ای زیر عنوان، جزئیات بیشتری رو در مورد محصول به شما میگه. سپس یک دکمه CTA یا Call to Action قابل مشاهده است.
این صفحه دو تا CTA دیگه هم داره، که به درد کسایی میخوره که هنوز آماده ثبت نام نیستند و تصمیمشون قطعی نیست. یکیش “تماشای ویدئو” و اون یکی “شرکت در وبینار”.(ممکنه فکر کنید وجود سه تا CTA باعث میشه که تاثیر گذاری کاهش پیدا کنه ولی من حاضرم شرط ببندم که اونا بدون انجام تست و آزمایش این کار رو نکردنن و مطمئنم این روش جواب میده.)
5. سایت OptimizeMyAirBnB
سایت OptimizeMyAirBnB از یک رویکرد شخصی تر در ATF خودش استفاده کرده. یک تصویر بزرگ از صاحب سایت وجود داره که به نظر میرسه داره بازدید کننده رو نگاه میکنه. و همین تصویر باعث میشه خواننده جذب صفحه بشه. در سمت راست صفحه جمله ای وجود داره که منافع اصلی سایت رو مشخص میکنه.
6. سایت MonsterInsights
سایت MonsterInsights از یک پس زمینه سفید ساده استفاده کرده ولی در عوض عنوان اصلی سایت به خوبی داره خودش رو نشون میده و توضیحات فرعی هم که شامل دو مزیت اساسی میشه با فونت ریزتر، زیر عنوان اصلی قرار گرفتن. همچنین یه دکمه CTA مشخص و واضح داریم. زیر دکمه CTA یک پیکان کمرنگ و ظریف مشاهده میکنید که بازدید کننده هایی که به اطلاعات بیشتری نیاز دارند راهنمایی میکنه.
این نمونه یک ATF مینیمالیستی یا ساده بود که باهم دیدم و انصافاً بد هم نبود!
7. سایت The Guardian
همونطور که از یک روزنامه آنلاین انتظار میره، در سایت روزنامه گاردین محتوای اصلی در قسمت بالایی صفحه قرار گرفته. تو این عکس دو تا داستان برجسته شده و به چشم میخوره، که سمت چپی با عنوان و تصویر بزرگتر، همه رو جذب خودش میکنه.
چون انتشار آنلاین یه خبر ممکنه شانس چندانی نداشته باشه، ما اینجا در ATF دو تا عنوان و دو تا داستان داریم؛ که اگر خواننده از یکی از عنوان ها خوشش نیومد، جذب اون یکی بشه. به تضاد رنگی بین عنوان و زیر عنوان توجه کنید ببینید که چه جذابیت بصری پیداکرده!
8. سایت Search Engine Journal
سایت Search Engine Journal یک سایت محتواست، بنابراین طراحی فوق العادش اومده محتوا رو در کانون توجه قرار داده. طراحیشون به نحوی هست که تونستن سه تا داستان در ATF به نمایش در بیارن. طرح هوشمندانه دیگه شون اینه که اومدن این سه تا داستان رو در سمت راست تصویر قرار دادن و اگه موس تون روی هر کدوم قرار بگیره براتون به شکل سبز برجسته در میاد و در سمت چپ یک تصویر و عنوان جذاب ظاهر میشه.
9. سایت Animalz
سایت Animalz یک آژانس بازاریابی محتوا است روی استراتژی های بازاریابی محتوا تمرکز کرده. در Above the Fold این سایت کاربرها رو با توضیح در مورد خدماتشون بمبارون نمیکنه. درعوض از کاربرهابا تیتر «بهترین بازاریابی جهان اینجا اتفاق می افتد» استقبال میکنن. و این باعث میشه بازاریابی مثل من دلش بخواد بیشتر یاد بگیره.
دکمه CTA رو نگاه کنید. روش نوشته «بیاید حرف بزنیم» تا بخواد از عبارت کلیشه ای مثل : «اینجارا کلیک کنید تا اطلاعات بیشتری کسب کنید» استفاده کنه. و این حس رو به بازدید کننده منتقل میکنه که با کلیک روی CTA داره به یک شخص واقعی ارجاع داده میشه تا در مورد خدمات بهش توضیح بیشتری بده.
این وبسایت همچنین از صفحه سفید و تصاویر ساده و خطی استفاده کرده تا خواننده رو به سمت محتوای Bellow Fhe Fold هدایت کنه. این همون جذابیت در عین سادگی محسوب میشه.
کلام آخر
برگردیم به همون سوال اصلی. آیا ATF واقعا مهمه؟ بدون شک جواب مثبته.
Above the Fold مقدمه ای برای محتوایی است که کاربر در ادامه باهاشون روبرو میشه. آیا این خدمات یا محصولات جالب به نظر میرسن؟ آیا مطالب یبیشتری وجود داره که باید گفته بشن؟
ATF انتظارات کیفیت رو تعیین میکنه. آیا محتوای اون صفحه سایت ارزش خوندن داره؟ آیا این محتوایی که سایت داره اراده میده به درد کاربر میخوره؟؟
خب شما به من بگید که اصلا از Above the Fold چیزی میدونستین؟ اگه آره … میشه بگید از کدوم نکات که ذکر شد تو طراحی تون استفاده کردین؟ و چقدر جواب گرفتین؟
