صفحات فرود یا لندینگ پیج ها، به طور خاص، نوعی صفحه وب مستقل است که به منظور جذب شما برای لینک دادن، کلیک کردن و استفاده از محتوا ایجاد می شود. در حقیقت، وقتی بازدید کننده ای بر روی تبلیغات اینستاگرام یا گوگل کلیک می کند و در یکی از این صفحات “فرود می آید”، غالباً در صورت درست بودن هدف علاقه مند شده و از محصولات یا خدمات شما خریداری می کند. با ما همراه باشید با اصول طراحی لندینگ پیج ها یا صفحات فرود.
لندینگ پیج چیست؟
مسلماً ادعا می کنیم که ساختن تنها لندینگ پیج برای افزایش 638 درصدی آگهی کمی غیر منطقی به نظر می رسد. واقعیت این است که فراتر از یک طراحی موثر لندینگ پیج، شما همچنین نیاز به یک استراتژی بازاریابی و تست A / B دارید تا لندینگ پیج خود را بیش از پیش بهبود دهید. اما در هسته اصلی، یک لندینگ پیج مؤثر قبل از شروع کار یا هر چیز دیگری لازم است. سوال این است: صفحه فرود دقیقاً چیست؟
نگاهی به این لندینگ پیج Shopify بیندازید. آیا تفاوت بزرگی نسبت به یک وب سایت معمولی مشاهده می کنید؟ برای اولین بار، لندینگ پیج ها اغلب نوار های نویگیشن ندارند و نیازی به آن ها ندارند. نکته مهم در یک لندینگ پیج این است که توجه شما را جلب کند. شما نمی خواهید با فشار دادن دکمه های زیاد یا لینک های زیاد، افراد را از مسیری که می خواهید طی کنند، منحرف کنید.
در همین راستا، لندینگ پیج Shopify برای آزمایشات رایگان فقط با دو دکمه تماس برای عمل (CTA) ارائه می شود. در واقع، کل دو دکمه در کل صفحه وجود دارد. یکی در بالا وجود دارد، همانطور که در تصویر دیده می شود و دیگری در پایین صفحه. هر دو یک چیز را می گویند: “شروع آزمایشی رایگان”.
این کار مخاطبان شما را در این صفحه بسیار محدود می کند، آن ها می توانند آدرس ایمیل خود را برای یک دوره آزمایشی رایگان وارد کنند یا وارد کنند. همراه با نوشتن مطالب متقاعد کننده، دشوار نیست که کسی کلیک کند، به خصوص اگر او قبلاً به خدمتی مانند Shopify علاقه داشته باشد.
در واقع، یک صفحه فرود فقط به چند عنصر ساده احتیاج دارد: عنوان و دکمه یا لینک CTA.
5 اصل طراحی لندینگ پیج
سادگی همیشه عالی است
بیایید نگاهی به لندینگ پیج Chase بیندازیم.
آیا می توانید در این صفحه بگویید که Chase می خواهد شما چه کاری انجام دهید؟ آیا می خواهد محصولات آن را ببینید یا وارد سیستم شوید؟ آیا می خواهد در مورد کارت های اعتباری آن بیشتر بدانید؟ در نگاه اول، تشخیص آن اساساً غیرممکن است.
این خوب نیست، زیرا یک نگاه معمولاً تمام آن چیزی است که برای انجام یا شکستن یک معامله لازم است. حتی پس از جالب ترین و جذاب ترین تبلیغات فیس بوک، یک سرنخ پیچیده منجر به رفتن بازدید کننده ها از این صفحه خواهد شد، زیرا آن ها هیچ ایده ای ندارند که چیس در تلاش است چه چیزی را بفروشد. در واقع، این صفحه بیشتر شبیه یک صفحه اصلی است تا یک لندینگ پیج و این یک خصوصیت منفی بزرگ است.
یک قاعده کلی خوب این است که به “نسبت توجه” در لندینگ پیج خود توجه کنید؛ به عبارت دیگر، نسبت موارد غیر قابل کلیک به مواردی که می توانند و باید کلیک شوند. پلتفرم لندینگ پیج Unbounce در واقع توصیه می کند که در “نسبت توجه” به 1: 1 پایبند باشید. برای هر مورد، اعم از متن یا تصویر یا مجموعه ای از موارد، فقط باید یک دکمه وجود داشته باشد. البته این فقط یک قانون کلی است.
یک مثال خوب در مورد اهمیت ساده نگه داشتن لندینگ پیج صفحه قدیمی Trulia است. اولین چیزی که در این صفحه مشاهده می کنید نام شرکت است و سپس یک سوال: “خانه شما چقدر ارزش دارد؟” این شما را در مورد اینکه Trulia چیست مطلع می کند: وب سایتی برای خرید، اجاره و فروش خانه.
پس یک قسمت و یک دکمه تنها چیزی است که لازم است.
CTA های خود را محدود کنید
اگر صفحه فرود Chase را به یاد بیاورید، متوجه کار دیگری می شوید که شرکت به اشتباه انجام داده است: صفحه فرود چندین CTA دارد.
آیا قصد ثبت نام یا کسب اطلاعات بیشتر در مورد Chase را دارید؟ دشوار نیست که تشخیص دهید بیش از یک دکمه در این لندینگ پیج وجود دارد. هر دو دکمه کاملاً یکسان هستند اما کار های کاملاً متفاوتی انجام می دهند. این فقط بر روی تبدیل شما تأثیر منفی می گذارد.
پس هر دکمه باید دقیقاً همان کاری را انجام دهد که می گوید.
البته، این یک قانون سخت نیست. در حقیقت، دیدن چندین دکمه بسیار معمول تر است، شاید به این دلیل که یک شرکت می خواهد دو سرویس مشابه ارائه دهد، یا ممکن است برای بازار های مختلف مانند لندینگ پیج “آکادمی خان” جذاب باشد.
لندینگ پیج آکادمی خان در مورد اینکه چه کسی باید روی کدام دکمه کلیک کند صریح است و در گوشی، این دکمه ها به طور هوشمندانه به یک دکمه تبدیل می شوند که می گوید: “از اینجا شروع کنید”.
با کلیک بر روی دکمه به پایین صفحه هدایت می شوید، جایی که دکمه هایی وجود دارد که نشان دهنده همان سه گروه افراد است: یاد گیرندگان، معلمان و والدین و حتی یک دکمه برای بازگشت شما به بالای صفحه وجود دارد. (این توجه به جزئیات از نظر روشی که این CTA ها در تلفن همراه و دسک تاپ تغییر می کند بسیار حیاتی است تا بتوانید مخاطبان خود را بدون توجه به اینکه از کجا می آیند حفظ کنید).
با پیمایش در صفحه، چندین CTA وجود دارد. تفاوت بین نحوه استفاده CTA از صفحه Khan Academy در مقایسه با دیگران در این است که آن ها اساساً به همان دکمه های بالای صفحه لینک دارند. یک دکمه وجود دارد که مربوط به سه گروه نیست، اما مستقیماً به متن بالای آن لینک دارد.
در پایان، لندینگ پیج آکادمی خان، علی رغم داشتن چندین دکمه با چندین CTA، واضح، پاسخگو و ساده است. آن ها CTA ها را با استفاده از متن و تصاویر شکسته و مطمئن می شوند که حداکثر سه دکمه به طور هم زمان روی صفحه شما قرار دارد و این روش خوبی برای درج چندین CTA در صورت لزوم است.
البته در پایان روز داشتن یک CTA یا نوع CTA منفرد همچنان صفحه فرود شما را موثرتر می کند.
سلسله مراتب بصری
وقتی به “لندینگ پیج Unbounce” برای دوره لندینگ پیج آن نگاه می کنید، اولین چیزی که شما را به خود جلب می کند چیست؟ بیشتر مردم قبل از هر چیز دیگری این عنوان را می دیدند و دلیل خوبی برای آن وجود دارد. بسیاری از ما خواننده های تنبلی هستیم- صفحه ای را اسکن می کنیم و به دنبال هر چیزی می رویم که بیرون می آید. اگر هیچ کاری نکرد، صفحه جالبی نیست و احتمالاً بلافاصله آن را می بندیم.
به همین دلیل سلسله مراتب بصری مهم است. شما باید صفحه فرود خود را به گونه ای مهندسی کنید که بالاترین مورد در سلسله مراتب بصری شما را به جالب ترین تبدیل کند. قبل از اینکه اطلاعات اضافی را روی آن ها قرار دهید، توجه مخاطب را جلب کنید. این همان چیزی است که صفحه فرود Unbounce را در اینجا بسیار کارآمد می کند.
آن ها دقیقاً می دانند که چگونه آیتم های صفحه خود را به گونه ای قرار دهند که تعداد زیادی مخاطب ایجاد کند. با وجود شکستن قانون نسبت توجه 1: 1، تا حدودی مینیمالیسم است. آن ها با بررسی دقیق نحوه مطالعه یا اسکن وب سایت توسط افراد و استفاده کامل از آن به این مهم دست می یابند. در واقع، این صفحه به طور خاص از الگوی F-scan استفاده می کند که مردم اغلب از آن برای دیدن وب سایت های متن دار استفاده می کنند.
محققان گروه نیلزن نورمن با استفاده از ردیابی نگاه، نشان دادند که وقتی صحبت از وب سایت های دارای متن زیاد می شود، خوانندگان اغلب از بالا به پایین می روند، موارد بزرگتر و مهمتر را به نوعی با الگوی F با بسیاری از شاخه ها اسکن می کنند.
مشاهده جالب دیگر این است که الگو های اسکن اغلب دو یا سه کلمه را در خط رها می کنند. به طور کلی، این بدان معنی است که خوانندگان شما واقعاً علاقه مند به چند کلمه از چند جمله اول صفحه اصلی شما هستند. در نظر گرفتن اینکه چگونه کاربر معمولی اینترنت از طریق صفحه وب شما به نظر می رسد، روش خوبی برای کنترل نحوه واکنش آن ها به CTA شماست.
یک نکته خاص برای کنترل سلسله مراتب بصری نیز استفاده از gaze است.
در این تحقیق، واضح است که وقتی تصویری از این دست را می بینیم، در حالی که شخصی به جهتی خاص نگاه می کند، چشمان ما به دنبال نگاه او هستند. این کمک می کند تا توجه به عناصر خاص، در این مورد شامپو جلب شود.
روش خوب دیگر برای کنترل توجه خواننده شما پوشاندن عناصر مهم است. این کار معمولاً با فرم ها انجام می شود. آن ها را در جلو و مرکز طراحی لندینگ پیج قرار دهید.
Freshsales این کار را به ویژه با ایجاد تضاد در رنگ زمینه های جذب سرب با پس زمینه، انجام می دهد. فرم را پاپ می کند و روشن می کند که CTA چیست. علاوه بر این، مسدود کردن این عناصر در کنار هم به ساختار دهی صفحه کمک می کند و منجر به بررسی این نسخه آزمایشی رایگان می شود.
کاربر را در اولویت قرار دهید
با توجه به نکات قبلی، توجه کاربران هنگام طراحی لندینگ پیج از اهمیت بالایی برخوردار است. یک لندینگ پیج زیبا با عناصر متحرک و تصاویری جالب ممکن است سرنوشت شما را عوض کند، اما وقتی نوبت به تبدیل می رسد، نکات و ترفند های امتحان شده و درست وجود دارد که باید از آن ها آگاه باشید.
اول از همه، اطمینان حاصل کنید که وب سایت شما ریسپانسیو است. این بدان معناست که مهم نیست کاربر شما از چه دستگاهی به لندینگ پیج شما دسترسی دارد، عالی به نظر می رسد و عناصری که برای جلب توجه آن ها و تبدیل آن ها استفاده می کنید به خوبی قرار گرفته اند.
در چند سال گذشته، گوشی های همراه با جهشی پیشرفت کرده اند و اکنون اکثر کاربران اینترنت صرفاً از طریق گوشی های خود به اینترنت دسترسی پیدا می کنند. این باعث می شود لندینگ پیج ریسپانسیو از اولویت بیشتری برخوردار شوند.
هر چند فقط این نیست. شکستن قالب و ارائه تجربه لندینگ پیج برخلاف آنچه که کسی تاکنون دیده است، وسوسه انگیز خواهد بود، خواه این کار با بازاندیشی در نحوه پیمایش یک صفحه یا طراحی مجدد ساختار صفحه اصلی باشد.
در اینجا مثالی از یک لندینگ پیج کاملاً ابتکاری وجود دارد.
این لندینگ پیج که برای Landbot.io، سرویس چت بات ساخته شده است، در واقع یک چت بات است! این یک ایده واقعاً خلاقانه است و بلافاصله توجه شما را به خود جلب می کند. اما بگذارید حقیقت را بپذیریم، اگر این بانک شما بود یا یک فروشگاه خرده فروشی محلی، احتمالاً چندان منطقی و جالب نبود.
خلاقیت و نوآوری جای خود را دارد. اما خلاقیت به خاطر خلاقیت ممکن است منجر به هدایت لندینگ پیج شما در مسیر اشتباه شود. این می تواند خوانندگان شما را در مورد آنچه لندینگ پیج شما در واقع به فروش می رساند گیج کند و بدتر از همه اینکه خوانندگان حتی ممکن است متوجه نشوند که در یک لندینگ پیج هستند!
نکته مهم دیگری که باید در وهله اول قرار دادن کاربر خود به آن فکر کنید، خوانایی است.
مورد زیر مشکل طراحی وب ناخوانا را نشان می دهد. عنوان “The Perfect Touch” روی زمینه خاکستری، سیاه است و خواندن آن را دشوار می کند. این تاثیری که عنوان خوب می تواند بگذارد را کاملا به تأثیر منفی تبدیل می کند.
در حقیقت، در اینجا تقریباً به نظر می رسد که زیرنویس سفید مهمترین بیت صفحه است در حالی که نباید باشد. ناخوانا بودن می تواند سلسله مراتب بصری را در یک لندینگ پیج عالی از بین ببرد. این یک مشکل رو به رشد است، به خصوص اینکه لایه برداری از کپی خود را روی یک تصویر خوب زیبا، یک تاکتیک معمول طراحی وب، به طور فزاینده ای وسوسه انگیز است.
لندینگ پیج چشم نواز بسازید
این ممکن است با توجه به نکته ای که ما در حال حاضر بحث کردیم، کمی بر خلاف اصول به نظر برسد، اما ایجاد یک لندینگ پیج که برجسته باشد بسیار مهم است. امروزه از لندینگ پیج ها در کلیه صنایع و مشاغل استفاده می شود. برای رقابت، یک صفحه فرود باید واقعاً از بین برود، چه از نظر زیبایی چه کپی قوی.
در مورد کسپر، کپی واضح و روشن با ویژگی های مورد علاقه توصیفات مشتری به ایجاد یک لندینگ پیج مؤثر کمک می کند. حتی بدون طراحی پیشگامانه، یک تصویر ساده که به خوبی مفهوم اصلی Casper و همچنین طراحی واضح را اجرا می کند که می تواند لندینگ پیج را به راحتی به سطح بالاتری برساند.
مینیمالیسم ساده نیز در حال افزایش است، و دلیل خوبی هم دارد، همانطور که در لندینگ پیج Quip مشاهده می شود. واضح، ساده و تمیز است که خواندن و درک آن را آسان می کند. بر خلاف لندینگ پیج های معمولی با متن سنگین، داشتن یک صفحه فرود تقریباً برهنه مانند این می تواند به برجستگی شما کمک کند.
در طرف مقابل، ظاهری خوش رنگ و جوان مانند ظاهری که اسنپ چت در اینجا به دنبال آن است نیز می تواند نگاه ها را به خود جلب کند. البته، اطمینان از اینکه طراحی صفحه اصلی واقعاً متناسب با مخاطب است، ضروری است. سایتی که چیزی را برای مخاطبان مسن تر بفروشد ممکن است با چنین مضمونی موافق نباشد.
بسیاری از تاکتیک های دیگر که یک طراح می تواند برای ایجاد یک لندینگ پیج منحصر به فرد و مؤثر استفاده کند، خواه ایجاد انیمیشن های جالب باشد و یا انجام کاری غیر منتظره. اصلی ترین چیزی که باید به آن فکر کنید این است که مخاطبان شما می خواهند چه چیز هایی را ببینند و چه اطلاعاتی را می خواهید به دست آورید.
