نحوه طراحی صفحه فرود: راهنمای نهایی

نحوه طراحی صفحه فرود: راهنمای نهایی

طراحی موفقیت آمیز صفحه فرود در مورد تحول است و ناظران کنجکاو را به خریداران تایید شده تبدیل می کند. اما نحوه کار یک صفحه فرود هیچ ترفند جادویی نیست: استراتژی دیجیتال و طراحی بصری با هم ترکیب می شوند تا یک ارائه محصول قانع کننده ایجاد کنند. هنگامی که به خوبی انجام شود، یک خریدار یکباره ممکن است دوباره تغییر کند – به یک مشتری مکرر.

اگرچه صفحات فرود با طراحی خوب بسیار بیشتر احتمال دارد که خرید داشته باشند، اما به شدت مورد ارزیابی قرار نگرفته اند – به طوری که ۴۴ درصد از شرکت ها ترافیک را به جای صفحه فرود هدفمند به صفحه اصلی خود هدایت می کنند. برای ایجاد علاقه برای یک محصول به تبلیغات، سئو و منابع کلی بازاریابی نیاز است که کسب و کارها نمی توانند در آخرین مرحله شکست بخورند. اما به همان اندازه که صفحات فرود دارای پتانسیل درآمد هستند، فقط به اندازه طراحی آنها موثر هستند.

برای اطمینان از اینکه طراحی شما به لندینگ پایبند است، ما قصد داریم نحوه کار صفحات فرود، اجزای یک صفحه فرود و نکاتی در مورد طراحی یک صفحه فرود عالی را پوشش دهیم. اگرچه ممکن است هنگام ورود به طراحی صفحه فرود احساس ناپایداری کنید، ما به شما کمک می کنیم تا جایگاه خود را پیدا کنید.

web-design-contact

طراحی صفحه فرود چگونه کار می کند و چرا اهمیت دارد

یک صفحه فرود، که گاهی اوقات صفحه محصول نامیده می شود، برای بازاریابی یک محصول/خدمت خاص یا وادار کردن بیننده به انجام یک عمل خاص طراحی شده است. زمانی که کاربران روی یک پیوند تبلیغاتی کلیک می کنند یا زمانی که محصولات را در Google جستجو می کنند، اغلب به آنجا هدایت می شوند.

وب سایت یک کسب و کار علاوه بر اطلاعات عمومی شرکت، به عنوان یک مرکز برای تمام محصولات و خدمات آن عمل می کند. در حالی که صفحات فرود بخشی از وب سایت شرکت هستند، هدف آنها متقاعدسازی و فروش فوری است و آنها این کار را از طریق خاص بودن انجام می دهند. یک صفحه فرود بر روی یک محصول متمرکز است، کپی بر روی توصیف و فروش آن محصول متمرکز است و طراحی بر روی قابل خواندن آن نسخه، محصول قابل ارائه و جذب بیننده متمرکز است. به این ترتیب، صفحات فرود (مخصوصاً چندین صفحه فرود) در ایجاد سرنخ بسیار مؤثرتر از صفحه اصلی وب سایت کسب و کار هستند.

از آنجایی که صفحات فرود ابزار بازاریابی هستند، موفقیت طراحی آنها اغلب با اعداد اندازه گیری می شود: تبدیل و ترافیک. تبدیل تعداد بازدیدکنندگان صفحه است که محصول را خریداری می کنند (آنها از غیر خریدار به خریدار تبدیل می شوند). همانطور که یک صفحه فرود ممکن است از نظر بصری خیره کننده باشد، اگر نرخ تبدیل پایین باشد (حدود ۲٪ متوسط در نظر گرفته می شود)، طراحی شما در رسیدن به هدف نهایی خود ناکام است.

ترافیک شامل اطلاعاتی درباره افرادی است که از صفحه شما بازدید می کنند، از جمله تعداد کل بازدیدکنندگان و مدت اقامت آنها. وقتی بازدیدکنندگان یک صفحه را بدون خرید ترک می‌کنند، گفته می‌شود که از آن “بازگشت” کرده‌اند. اگرچه معیارهای ترافیک ممکن است به اندازه تبدیل مهم نباشند (یک صفحه فرود با ترافیک بالا با نرخ پرش پایین اگر کسی خرید نمی‌کند کاربرد زیادی ندارد)، تعداد افرادی که از کل صفحه فرود شما عبور می‌کنند می‌تواند به شما بینشی در مورد آن بدهد. طراحی شما چقدر جذاب است خبر خوب این است که بینندگانی که بیش از ده ثانیه در یک صفحه می‌مانند، احتمالاً کل صفحه را مطالعه می‌کنند. طراحی عالی همراه با اطلاعات واضح و قانع کننده بهترین دارایی شما برای جلب توجه آنها از طریق این پنجره حیاتی است.

به دنبال الهام از صفحه فرود هستید؟ به این مقاله پر از ایده های خیره کننده طراحی صفحه فرود نگاهی بیندازید.

 

آناتومی طراحی صفحه فرود

هیچ راهی برای طراحی صفحه فرود وجود ندارد. پس از همه، آنچه که بسیار مهم است این است که صفحه فرود شما به طور موثر بینندگان را آگاه و متقاعد کند. با این اوصاف، سال‌ها طراحی صفحه فرود، قراردادهایی را ایجاد کرده است که کاربران به آن عادت کرده‌اند، و اینها می‌توانند به عنوان پایه‌هایی عمل کنند که بر اساس آن‌ها بنا شود. در زیر به تفکیک رایج‌ترین عناصر طراحی صفحه فرود می‌پردازیم.

 

سرتیتر

هدر اولین بخش از یک صفحه فرود است – یک فضای مستطیل شکل معمولاً بیشتر صفحه اولیه صفحه را اشغال می کند. اگرچه اندازه آن می تواند متفاوت باشد، اما معمولاً شامل این اجزا است:

نام تجاری: لوگوی شرکت و لوگوی محصول (در صورت وجود).

تصویر قهرمان: اصلی ترین و جذاب ترین تصویر مرتبط با محصول، معمولاً به شکل یک بنر. این می تواند مربوط به خود محصول باشد یا صحنه ای مصور یا عکس گرفته شده که تجربه استفاده از محصول را به تصویر می کشد.

عنوان: نسخه ای که تصویر قهرمان را همراهی می کند و یک زیر و بم مختصر ایجاد می کند.

عنوان فرعی: این محصول را شناسایی می‌کند و خلاصه‌ای دقیق‌تر از مزایای آن ارائه می‌کند (به عنوان یک پیشنهاد ارزش نامیده می‌شود)

Call-to-Action: در غیر این صورت به عنوان CTA شناخته می شود، این دکمه (و کپی درج شده، «اکنون بخرید!») است که کاربران کلیک می کنند تا وارد جریان خرید شوند. CTA ها مهم هستند، اما مراقب استفاده بیش از حد از آنها باشید – این می تواند صفحه را شلوغ کند و پرفروش شود. در عوض یک نوار ثابت را در نظر بگیرید که CTA را در بالای صفحه نگه می دارد و کاربران اسکرول می کنند. (توجه: CTAها ممکن است اهداف دیگری مانند به دست آوردن مشترکین یا دانلود داشته باشند، اما برای سادگی، ما تا حد زیادی در سراسر این مقاله به خرید اشاره خواهیم کرد.)

یکی از عناصر رایج طراحی هدر که می‌خواهید در صورت امکان آن را به حداقل برسانید، ناوبری است. اگرچه اکثر صفحات وب دارای منوی ناوبری هستند، یک صفحه فرود یک صفحه وب “عادی” نیست. این طراحی شده است تا بینندگان را در صفحه نگه دارد تا زمانی که برای خرید آماده شوند، در حالی که یک نوار ناوبری با گزینه‌های زیادی آنها را تشویق می‌کند به جاهای دیگر سفر کنند.

 

محتوا

بخش محتوا بدنه اصلی صفحه فرود شما است. در حالی که هدر برای معرفی محصول و جلب توجه کاربر است، بدن باید روی جزئیات ارزش پیشنهادی و ایجاد یک استدلال قانع کننده برای تبدیل متمرکز شود. محتوای یک صفحه فرود اغلب شامل موارد زیر است:

گرافیک پشتیبانی: تصاویر محصول ثانویه (از زوایای دیگر یا مشتریانی که از محصول استفاده می کنند)، نمادهایی که نقاط و رنگ ها یا اشکال انتزاعی را ساده می کنند که چشم بیننده را به سمت پایین صفحه هدایت می کند.

مشخصات محصول: نسخه‌ای که نحوه عملکرد محصول را در مراحل واضح توضیح می‌دهد. پیوندهایی که در هر یک از این مراحل گسترش می‌یابند (یعنی «بیشتر بیاموزید») می‌توانند برای رفع شک و تردید مفید باشند، اما باز هم مراقب انتقال کاربران از صفحه فرود باشید.

مقایسه مزایا: این امر نشان می‌دهد که چگونه محصول زندگی مشتریان را بهبود می‌بخشد، گاهی اوقات با مقایسه آن با رقبا یا با شناسایی و رفع نقاط درد مصرف‌کننده.

اعتبارسنجی همتا: رتبه‌بندی‌ها، بررسی‌ها و/یا گواهی‌های قبلی مشتریان، که همگی اعتماد بیننده را به محصول از طریق مراجع اجتماعی مثبت ایجاد می‌کنند.

پاورقی

پاورقی انتهای مسیر برای صفحه فرود شماست، جایی که بینندگان باید تصمیم نهایی خود را بگیرند. معمولاً شامل موارد زیر است:

پیوند به صفحات دیگر: ممکن است بخواهید به سایر صفحات مرتبط در سایت خود مانند صفحه پرسش و پاسخ خود پیوند دهید.

پیوندهای رسانه های اجتماعی: این می تواند یک گنجاندن بحث برانگیز باشد (همانطور که قبلاً ذکر شد، شما نباید کاربران را تشویق به انجام اقداماتی کنید که شامل CTA نیستند) اما می تواند ترافیک را بهبود بخشد تا لینک هایی برای کاربران فراهم کند تا صفحه فرود را با دنبال کنندگان خود به اشتراک بگذارند. در رسانه های اجتماعی

اطلاعات تماس: یک شماره تلفن یا آدرس ایمیل به مشتریان این امکان را می دهد که در صورت داشتن سؤالات بیشتر به آنها مراجعه کنند.

اطلاعات حقوقی: حق چاپ وب سایت و محصول به همراه سایر حقوقی ها. این به طور کلی در یک نوار تاریک در پایین صفحه قرار دارد تا آن را از بقیه محتوا جدا کند.

۶ نکته برای طراحی صفحه فرود

دانستن اجزا و اهداف مشترک یک صفحه فرود یک چیز است، اما چگونه این موارد به اصول طراحی بصری ترجمه می شوند؟ اگرچه ظاهر صفحه فرود بر اساس طراح و برند متفاوت است، در زیر دستورالعمل ها و نکات کلی برای طراحی موثر صفحه فرود ارائه شده است.

 

  1. به مینیمالیسم پایبند باشید

مینیمالیسم به محدود کردن عناصر طراحی صفحه شما (رنگ، تایپوگرافی، تصاویر و غیره) به موارد ضروری اشاره دارد. همانطور که طراحی می کنید، هر تصمیم خود را مورد بازجویی قرار دهید. اگر یک عنصر طراحی به درک کاربر از محصول یا استدلال برای خرید اضافه نمی کند، از شر آن خلاص شوید.

دو دلیل عمده برای اهمیت این موضوع وجود دارد. اولاً، این تمرین خوب است که فرض کنیم، حتی با وجود اینکه کاربران صفحه را انتخاب کرده‌اند، فقط در مورد محصول کنجکاو هستند و هر حواس‌پرتی باعث از دست دادن توجه تزلزل‌شده‌شان می‌شود. از طرف دیگر، دادن فضای کپی برای تنفس با فضای خالی زیاد، بر اطلاعات تأکید می کند و متن را کمتر ترسناک می کند.

دوم، عناصر گرافیکی بیشتر اغلب به معنای زمان بارگذاری بیشتر است. با توجه به اینکه نرخ پرش با هر ثانیه بارگذاری یک صفحه به طور تصاعدی افزایش می یابد و موتورهای جستجو حتی صفحات کند را جریمه می کنند، صفحه فرود شما باید بارگذاری سریع را به گرافیک های پر زرق و برق اولویت دهد.

 

  1. از “چند لایه” استفاده کنید

اگرچه رویکرد کمتر بیشتر ممکن است شما را وسوسه کند که صفحات کوتاه بدون پیمایش بهتر هستند، صفحات فرود طولانی تر در حفظ بینندگان موثرتر هستند. یک صفحه طولانی‌تر فرصتی را برای افزایش فاصله بین عناصر ایجاد می‌کند، در حالی که یک صفحه کوتاه می‌تواند باعث شود که همان طراحی فشرده و درهم‌آمیز باشد. و پیمایش یک لمس کوچک است که باعث می‌شود صفحات تعاملی‌تر از مثلاً یک بیلبورد در چهره شما احساس کنند.

بهترین راه برای استفاده از پیمایش، طراحی حول چیزی است که به عنوان “تا” شناخته می شود. این خطی است که در آن یک صفحه وب به دلیل وضوح صفحه قطع می شود و کاربر را مجبور می کند تا به پایین اسکرول کند تا آنچه در زیر آن نهفته است را آشکار کند. اگرچه اندازه‌های فیزیکی صفحه نمایش متفاوت است، بیشتر رزولوشن‌های بالاتر از تاشو ۱۰۰۰ x 600 پیکسل هستند. با داشتن گرافیک های جذاب و نیمه پنهان یا نگاه کردن به کپی درست در بالای صفحه، می توانید کاربر را وسوسه کنید که به پایین اسکرول کند و با صفحه شما تعامل بیشتری داشته باشد.

 

  1. برای الگوهای خواندن بهینه سازی کنید

الگوهای خواندن روش‌های رایجی را که کاربران صفحات وب را اسکن می‌کنند (بر اساس تحقیقات ردیابی چشم) توصیف می‌کنند، و طراحان می‌توانند از تراز و فاصله برای سازمان‌دهی متن برای تسهیل این امر استفاده کنند. از آنجایی که اکثر کاربران صفحات وب را قبل از متعهد به خواندن آنها اسکن می کنند (با ۷۹٪ آنها هرگز از مرحله اسکن فراتر نمی روند)، به نفع شماست که طراحی خود را برای اسکن بهینه کنید. کپی و گرافیک را به گونه‌ای تقسیم کنید که خواندن خطوط متن را از راه دور آسان کند، اما همچنین به‌طور نامحسوس خوانندگان را به پایین صفحه و به سمت CTA هدایت می‌کند.

این دو رایج ترین الگوهای خواندنی هستند که طراحی صفحه فرود شما باید در نظر بگیرد:

 

الگوی Z: کاربران هنگام اسکن از چپ به راست، یک “Z” نامرئی را با چشمان خود ردیابی می کنند. این برای طراحی های سنگین مفید است و می تواند با پراکندگی عناصر به صورت زیگزاگ و وادار کردن کاربران به سرعت چشمان خود از یک طرف به سمت دیگر، طرح بندی صفحه را پویاتر کند.

الگوی F: کاربران هنگام اسکن از چپ به راست، یک “F” نامرئی را با چشمان خود ردیابی می کنند. این معمولا برای صفحات متن سنگین مفیدتر است زیرا شکل برای خواندن خط به خط مساعدتر است.

  1. طراحی برای تعامل

عناصر تعاملی یکی از بزرگترین دارایی هایی است که وب به طراحان نسبت به محصولات چاپی ارائه می دهد. طراحان صفحه فرود می توانند از تعامل برای دعوت از کاربران به مشارکت استفاده کنند تا اینکه به طور منفعلانه مطالب بازاریابی را بخوانند، که می تواند باعث شود تجربه بیشتر شبیه یک بازی باشد تا یک تبلیغ.

اسکرول استاندارد یکی از اشکال آشکار تعامل است، و اگرچه به خودی خود نمی توان آن را تخفیف داد، طراحان می توانند با انیمیشن هایی مانند انتقال عمودی یا افقی تند کشیدن، این کار را افزایش دهند. انیمیشن‌های شناور می‌توانند صفحه را در زیر نشانگر ماوس کاربر زنده کنند، با گرافیکی که در حال حرکت، محو شدن/خارج شدن یا تغییر رنگ است. اگر یک محصول فیزیکی را می فروشید، به کاربران اجازه می دهید رندر سه بعدی آن را بچرخانند، می تواند آنها را به آزمایش مجازی دعوت کند.

دکمه CTA مهم‌ترین شکل تعامل شماست، بنابراین کلیک کردن روی آن باید احساس مثبت و رضایت‌بخشی داشته باشد. این را می توان با ایجاد یک فیزیکی متحرک در حالی که کاربر روی آن کلیک می کند به دست آورد. اگرچه این انیمیشن‌ها برای جلوگیری از حواس‌پرتی و بارگذاری طولانی باید ظریف باشند، اما تا حد زیادی باعث سرگرمی و درگیر کردن کاربران می‌شوند.

 

  1. طرح های صفحه فرود مشترک را طراحی کنید

اگر کسب و کار شما تعدادی محصول یا خدمات مختلف تولید می کند، صفحات فرود جداگانه ای ایجاد کنید تا تبدیل برای هر کدام به حداکثر برسد. اما هرچه صفحات فرود بیشتری ایجاد کنید، مقیاس‌پذیری فرآیند طراحی سخت‌تر می‌شود. راه کاهش این؟ از همان چیدمان ها استفاده کنید.

اسکرول استاندارد یکی از اشکال آشکار تعامل است، و اگرچه به خودی خود نمی توان آن را تخفیف داد، طراحان می توانند با انیمیشن هایی مانند انتقال عمودی یا افقی تند کشیدن، این کار را افزایش دهند. انیمیشن‌های شناور می‌توانند صفحه را در زیر نشانگر ماوس کاربر زنده کنند، با گرافیکی که در حال حرکت، محو شدن/خارج شدن یا تغییر رنگ است. اگر یک محصول فیزیکی را می فروشید، به کاربران اجازه می دهید رندر سه بعدی آن را بچرخانند، می تواند آنها را به آزمایش مجازی دعوت کند.

دکمه CTA مهم‌ترین شکل تعامل شماست، بنابراین کلیک کردن روی آن باید احساس مثبت و رضایت‌بخشی داشته باشد. این را می توان با ایجاد یک فیزیکی متحرک در حالی که کاربر روی آن کلیک می کند به دست آورد. اگرچه این انیمیشن‌ها برای جلوگیری از حواس‌پرتی و بارگذاری طولانی باید ظریف باشند، اما تا حد زیادی باعث سرگرمی و درگیر کردن کاربران می‌شوند.

 

  1. طرح های صفحه فرود مشترک را طراحی کنید

اگر کسب و کار شما تعدادی محصول یا خدمات مختلف تولید می کند، صفحات فرود جداگانه ای ایجاد کنید تا تبدیل برای هر کدام به حداکثر برسد. اما هرچه صفحات فرود بیشتری ایجاد کنید، مقیاس‌پذیری فرآیند طراحی سخت‌تر می‌شود. راه کاهش این؟ از همان چیدمان ها استفاده کنید.

تست‌های تقسیم، که گاهی به آن‌ها تست‌های A/B نیز گفته می‌شود، که در آن دو نسخه مختلف از یک طرح بر روی دو گروه مشتری مجزا آزمایش می‌شوند، روشی رایج است که طراحان و بازاریابان برای بهترین نتیجه تصمیم می‌گیرند. از این روش برای آزمایش هر عنصر صفحه وب خود، از هدر گرفته تا نسخه تبلیغاتی گرفته تا تصاویر و شکل دکمه ها استفاده کنید. به این ترتیب، می توانید مطمئن باشید که طراحی صفحه فرود شما نه تنها خوب به نظر می رسد، بلکه کاربران شما نیز موافق هستند.

 

زمان طراحی صفحه فرود فرا رسیده است

همانطور که طراحی صفحه فرود خود را شروع می کنید، باید فرض کنید که بینندگان شما به دنبال هر دلیلی برای جهش هستند، و این به طراحی شما بستگی دارد که آنها را ثابت نگه دارید.

اگرچه عوامل زیادی وجود دارند که می توانند به نرخ پرش بالا کمک کنند – توضیحات نامشخص، قیمت بیش از حد یا حتی فقط یک محصول غیرقابل تحمل – طراحی خوب یکی از بهترین عوامل در کاهش آن است. در حالی که این راهنما برای شروع طراحی صفحه فرود در نظر گرفته شده است، مطمئن ترین راه برای دستیابی به یک طراحی صفحه فرود عالی، کار با یک طراح حرفه ای است.

آیا می خواهید در مورد طراحی وب سایت بیشتر بدانید؟ در اینجا یک مقاله گام به گام در مورد نحوه ایجاد یک وب سایت از ابتدا تا انتها آورده شده است.

 

منبع