تعریف لندینگ پیج + اصول طراحی و قالب
- طراحی UI/UX
مهدی شهبازی
- ۱۴ بهمن ۱۴۰۰
- 0
- 178
-

در این مقاله قصد دارم شما را با اصول صفحات فرود یا همان لندینگ پیج آشنا کنم.
شامل:
- آنها چه هستند؟
- چرا آنها مهم هستند؟
- و اینکه چگونه یک صفحه فرود می تواند نرخ تبدیل (عضویت و فروش) در سایت شما را افزایش دهد؟
قبل از اینکه درباره لندینگ پیج صحبت کنیم باید با مفهومی به نام نرخ تبدیل آشنا شوید.
صفحه فرود یا لندینگ پیج چیست؟
صفحه فرود (لندینگ پیج) صفحه ای است که برای تسهیل یک اقدام دلخواه، مانند خرید، پر کردن فرم، ثبت نام برای آزمایش رایگان یا وارد کردن آدرس ایمیل طراحی شده است.
این صفحه فرود نامیده می شود زیرا صفحه ای است که کاربران پس از کلیک بر روی پیوندی در یک پست فیس بوک، تبلیغات گوگل، خبرنامه ایمیل یا هر منبع ترافیکی دیگر، در آن فرود می آیند.
اما برای اینکه لندینگ پیج را بیشتر مورد بررسی قرار دهیم، ابتدا باید با دو مفهوم دیگر آشنا شوید: نرخ تبدیل و CTA
نرخ تبدیل چیست؟
نرخ تبدیل در واقع نسبت کاربران جذب شده به کل بازدیدکنندگان میباشد. منظور از جذب هرچیزی میتواند باشد. فروش، عضویت، تکمیل پرسشنامه…
دعوت به اقدام (CTA) چیست؟
فراخوان به اقدام (Call To Action) یا همان کال تو اکشن هر جایی در فضای وب است که از شما دعوت به انجام عمل خاصی میشود. روی دکمه کلیک کنید یا فرم را پر کنید و مثلا ثبت نام و یا خرید کنید.
تفاوت یک لندینگ پیج با یک صفحه وب “عادی” چیست؟
یک صفحه وب معمولی تمایل دارد چندین عمل دلخواه متفاوت داشته باشد.
به عنوان مثال، صفحه اصلی خود را در نظر بگیرید.
اکثر صفحات اصلی دارای چندین هدف و چندین فراخوان برای اقدام (CTA) هستند. برای مثال، ممکن است بخواهید بازدیدکنندگان صفحه اصلی فرم تماس را پر کنند. یا یک پرسشنامه را پر کنند. یا برای یک دوره آزمایشی رایگان ثبت نام کنید. اما تمامی صفحات شما از جمله صفحه اصلی، پستها، برگه و …. CTAهای رقابتی زیادی در کنار هدف اصلی خواهند داشت.
به همین دلیل است که شما نباید ترافیک تبلیغات گوگل را به این نوع صفحات ارسال کنید.
اما با یک صفحه فرود (لندینگ پیج)، معمولا یک هدف و یک CTA ثابت وجود دارد.
چرا صفحات فرود نرخ تبدیل خیلی خوبی دارند؟
دو دلیل اصلی وجود دارد که طراحی صفحات فرود برای افزایش تبدیل عالی هستند:
- آنها یک CTA متمرکز دارند.
- آنها برای یک گروه خاص هدف قرار می گیرند.
همانطور که قبلاً اشاره کردم، صفحات فرود از حجم محتوای صفحات معمولی میکاهند، زیرا ۱۰۰٪ روی یک CTA متمرکز هستند.
اما این تنها دلیلی نیست که صفحات فرود به خوبی تبدیل می شوند.
دلیل دیگر این است که آنها در اختیار یک گروه خاص و مشتریانی با هدف مشخص قرار میگیرد.
در واقع سایت هاب اسپات متوجه شد که صفحات فرود بیشتر = تعداد کل تبدیلهای سایت بیشتر است.
اکنون که اصول اولیه را در اختیار داریم، زمان آن رسیده است که به انواع دقیق صفحات فرود که بهترین عملکرد را دارند عمیق تر بپردازیم.
اصول و ویژگی طراحی لندینگ پیج
- یک لندینگ پیج میتواند شامل: عنوان، یک پاراگراف توضیح، تصویر شاخص، CTA، لیست ویژگی، نظرات دیگر کاربران باشد
- لندینگ پیج باید ساده و واضح و مشخص باشد، و از هرگونه پیچیدگی بپرهیزید.
- صفحه فرود باید عاری از لینکهای متفرقه و گمراه کننده باشد و روی هدف متمرکز شود.
- صفحه فرود دارای یک پیشنهاد جذاب است.
- قالب سادهای دارد و از فضای خالی در مکان مناسب بهره میبرد.
- در طراحی لندینگ پیج فونت و رنگهای خیره کنندهای استفاده میشود.
برای درک بیشتر ویژگی قسمت های مختلف یک صفحه فرود انواع آن را بررسی میکنیم.
انواع لندینگ پیج
حال وقت آن است که به شما نشان دهم چگونه یک صفحه فرود با تبدیل بالا ایجاد کنید. در این جا شما انواع الگوها و قالبهای لندینگ پیج موفق را خواهید دید، که بیشتر در وب فارسی و ایرانی مورد استفاده قرار میگیرد.
انواع مختلف صفحه فرود عبارت است از:
- نمونه صفحه فرود خبرنامه (ثبت ایمیل)
- قالب صفحه فرود فروش
- قالب صفحه فرود ثبت نام نسخه آزمایشی رایگان
بیایید الگوها را بررسی کنیم.
نمونه صفحه فرود خبرنامه (ثبت ایمیل)
صفحه فرود (لندینگ پیج) ثبت نام ایمیل و یا ثبت نام خبرنامه صفحه ای است که برای جمع آوری ایمیل ها در ازای یک هدیه مانند کتاب الکترونیکی، گزارش یا یک خبرنامه ارزشمند طراحی شده است.
عنوان = آنچه به دست می آورند
امروزه بسیاری تمایل به ارائه آدرس ایمیل خود ندارند و نمی توانیم آنها را سرزنش کنم.
وقتی ایمیل خود را به کسی میدهید، نمیدانید چه اتفاقی در آینده خواهد افتاد. آنها می توانند شروع به ارسال یک سری مطالب بیارزش و مزخرف برای شما کنند، شما را با یک میلیون پیام بمباران کنند، لیست ایمیل ها را به بالاترین قیمت پیشنهادی بفروشند.
پس شما باید آنچه را که قرار است بدست بیاورند را کاملا روشن کنید.
به نمونه مثال لندینگ پیج زیر توجه کنید:
در عنوان کاملا واضح است چه چیزی بدست خواهند آورد. همچنین به گونهایست که مخاطب را ترغیب میکند.
توضیحات و یا زیرعنوان
توضیحات و یا عنوان فرعی شما برای اضافه کردن جزئیات بیشتر به پیشنهاد شما طراحی شده است، از جمله اینکه چیست و چرا ارزشمند است.
در مثال بالا نشان میدهد که چون هر ماه ارسال میشود بدان معنی است که حتی اگر الان قصد خرید ندارید در ماههای آتی به درد شما خواهد خورد.
تصویر شاخص
صفحه ثبت نام ایمیل شما باید دارای یک “تصویر شاخص” مرتبط باشد که نشان میدهد چه چیزی قرار است دریافت کنند.
به یاد داشته باشید، اولین چیزی که مفهوم را به مخاطب میرساند، تصویر است. تصویر شاخص شما پیشنهاد شما را ملموستر و واقعیتر می کند.
اولین کال تو اکشن
اگر صفحه فرود شما طولانی است بهتر است از دو یا چند فرم برای دریافت ایمیل در لندینگ پیج کمک بگیرید. اما اگر عنوان و زیرعنوان قوی باشد، اکثر تبدیلها (Conversion) در همین فرم اولی انجام خواهد شد.
در مثال بالا، از متنی بر روی دکمه استفاده کردهایم که توجه مخاطب را جلب میکند.
لیست ویژگی ها
اگر شخصی از اولین فرم شما عبور کند به این معنی است که قبل از ثبت نام به اطلاعات بیشتری نیاز دارد.
اینجا جایی است که شما بیشتر به این موضوع می پردازید که چرا پیشنهاد شما ارزش ثبت آدرس ایمیل شخصی را دارد.
لیست دقیق ویژگی ها بستگی به چیزی دارد که می دهید.
اگر صفحه فرود برای یک وبینار است، ممکن است فهرستی از بهترین چیزهایی که شرکت کنندگان یاد میگیرند باشد.
اگر این یک گزارش است، باید استراتژیها و دادههایی را که پوشش می دهید مشخص کنید.
اگر این یک خبرنامه ایمیلی است، دقیقاً آنچه را که قرار است برای آنها ارسال کنید را فهرست کنید.
تعداد اعتمادکنندگان
در هر لندینگ پیجی، تعداد اعتمادکنندگان می تواند به افزایش نرخ تبدیل صفحه فرود شما کمک کند.
این می تواند مثلا تعداد افرادی باشد که قبلا در خبرنامه شما ثبت نام کرده اند.
همچنین میتواند نظرات تعدادی از مشتریان شاخص شما باشد. اگر این نظران در شبکههای اجتماعی آنها منتشر شده باشد تاثیر بیشتری خواهد داشت.
CTA دوم
همانطور که در تصویر کلی مشاهده کردید، توصیه می کنم یک CTA دوم را در پایین صفحه خود اضافه کنید.
به این ترتیب، بازدیدکننده شما بعد از پیمایش صفحه تا پایین مستقیماً در آنجا ثبت نام میکنند.
قالب صفحه فرود فروشگاهی
در اینجا قالبی وجود دارد که می توانید از آن برای لندینگ پیج فروشگاهی در موارد مختلف همانند: دوره های آنلاین، آموزش های خصوصی، بلیط رویدادهای زنده، رویداد تخفیف فروشگاهی و موارد دیگر استفاده کنید.
عنوان
هدف اصلی تیتر صفحه فروش شما جلب توجه کسی با یک مزیت رقابتی برجسته است.
مثال:
“وبینار ترفندهای جذب ترافیک از یوتیوب و آپارات بر روی سایت”
“تخفیف در لیاسهای زنانه به مناسبت روز زن”
…
اولین پاراگراف توضیحات
در ادامه عنوان خود توضیحات تکمیلی را ادامه دهید به گونهای که ارزش محصول شما را نشان میدهد.
مثال:
“در این دوره، استراتژیهای مدیا مارکتینگ را باتوجه به سه سال تجربه خودم در آپارات و یوتیوب، دریافت خواهید کرد. این وبینار شما را یک سال در کسب و کار جلو خواهد انداخت.”
“به عنوان یک بانوی ایرانی چه لباسی نیاز دارید؟ ما برای همه آنها تخفیف باور نکردنی گذاشتهایم. امروز هدف ما فقط خوشحالی شماست.”
با خواندن این عناوین و توضیحات حتی خودم هم علاقهمند به خرید شدم!
داستان پس زمینه
انسانها عاشق داستان هستند. در این قسمت داستان محصول خود را بیان کنید: مشکلی که به آن برخوردید، چگونه آن را حل کردید و چرا تصمیم گرفتید این محصول را به عموم مردم ارائه دهید. داستان کسب و کار خود را بگویید. درباره سیر پیشرفت خود صحبت کنید. داستان شما هم مثل شنگول و منگول باید در ذهن مشتری ثبت شود!
فهرست معرفی
در اینجا جایی است که شما محصول خود را معرفی می کنید … یک فهرست از مواردی که آن را شامل می شود بیان کنید.
لیست بعد از عنوان و تصویر المان بعدی در صفحه خواهد بود، که چشم مشتری به آن میافتد. پس اهمیت بالایی برای شما خواهد داشت.
مثال:
فهرست معرفی وبینار:
- چرا مدیا مارکتینگ؟
- آمار و اطلاعات کاربران جذب شده از مدیاهایی مانند آپارات و یوتیوب
- از کجا شروع کنیم؟
- چگونه محتوای مناسب مدیا مارکتینگ تولید کنیم؟
- ….
نظرات مشتریان
نظرات مشتریان قبلی شما منبع اعتماد کاربران بیشتر بعدی خواهد بود. اگر این نظرات در شبکههای اجتماعی آنها قرار گرفته باشید اعتماد به آن افزایش خواهد یافت. همچنین میتواند به شکل یک ویدیو یا پادکست قرار گیرد.
CTA : حالا بخرید
شما می خواهید حداقل دو CTA واضح “حالا بخرید” را در صفحه فروش خود داشته باشید.
گارانتی محکم
از این بخش غافل نشوید. این یکی از مهمترین بخش های صفحه فروش شما است. بنابراین من توصیه می کنم یک طرح کلی و مفصل از ضمانت نامه خود بنویسید. میتواند شامل عکس لوگوهای ضمانت بازگشت وجه، تعداد سال یا ماه گارانتی محصول، شرایط گارانتی و… باشد.
قالب لندینگ پیج اپلیکیشن و نرم افزار نسخه آزمایشی رایگان (Free Trial)
هدف اصلی صفحه فرود اپلیکیشن SaaS نسخه تریال و رایگان شما این است که شخصی را وارد جریان ثبت نام اپلیکیشن و سایت یا نرمافزار آنلاین خود کنید.
این کمی متفاوت از Squeeze Page (دو نوع بالا که لندینگ فشرده نام دارد) است. با Squeeze Page یا صفحه فرود فشرده، تبدیل در واقع همانجا در صفحه اتفاق می افتد. اما در الگوهای لندینگ اپلیکیشنهای SaaS، شما معمولاً آنها را به سمت صفحه دیگری هدایت می کنید که در آنجا ثبت نام کنند.
عنوان ساده
این چیزی است که بسیاری از شرکت های B2B SaaS با آن دست و پنجه نرم می کنند. به جای تیتر ساده، اینجوری عناوین گنگ و مبهم مینویسند.
در عوض ما تیترهای ساده توصیه میکنیم، که مطلب را در کوتاهترین حالت ممکن میرساند.
مانند: “یک راه بهتر برای ارتباط با مشتریان”
در این تیتر از آوردن کلمات نامفهوم برای مشتری همچون نام برند و… خودداری کنید.
چه کاری انجام میدهد؟
در اینجا فقط بصورت روشن سود و کاربردی که دارد را بیان کنید. باید یک نمای کلی از اینکه نرم افزار شما چگونه افراد به هدف میرساند، ارائه دهید.
تصویر شاخص
معمولا، شرکتهای SaaS از اسکرین شات نرمافزار خود برای تصویر شاخص استفاده میکنند. و این هنوز هم کار میکند.
مشکل این رویکرد این است که درک آنچه که نرم افزار بر اساس یک اسکرین شات انجام می دهد دشوار است .
به همین دلیل است که بسیاری از شرکتهای SaaS تصاویری را انتخاب میکنند که نشان میدهد نرمافزار واقعاً چه کاری برای مردم انجام میدهد.
برای مثال، تصویر شاخص سایت شاپی فای، یک لپ تاپ را شبیه فروشگاه نشان میدهد.
اگر نمونه های زیادی از این نوع free trial اپلیکیشنها نیاز دارید در گوگل به این صورت سرچ کنید:
online + inurl:free-trial
CTA را شروع کنید
یک دکمه واضح و متمایز که مخاطب را دعوت به کاری مشخص میکند. به مثال زیر از شرکت ادوبی برای نرمافزار فتوشاپ نگاه کنید.
لیست ویژگی ها و امکانات
اینجا هیچ چیز جالبی نیست فقط فهرستی از ۴ تا ۵ مورد از بهترین ویژگی ها (و مزایا) نرم افزار شما.
نظرات کاربران
این می تواند گواهی مشتری بصورت ویدیو یا توییت، تعداد مشتریان و یا کسب و کارهای بزرگی که از محصول شما استفاده می کنند یا هر سه مورد باشد.
CTA نهایی
اضافه کردن یک CTA به پایین صفحه فرود شما هرگز ضرری ندارد.
نمونه لندینگ پیچ
تا به اینجای کار نمونه های بسیاری در موارد مختلف استفاده لندینگ پیج مثال زدیم اما اگر نیاز به طرح های شگفت انگیز صفحه فرود دارید. شما را دعوت میکنم تا گالری تصاویر صفحات مختلف زیر را تماشا کنید. به احتمال زیاد از بین آنها ایدههای بسیاری برای شما ایجاد خواهد شد: