مجله خبری هاست ایران » طراحی و توسعه » 10 نکته که باید در طراحی لندینگ پیج رعایت کنید
  • mag-telegram.jpg
  • landing96-300-420.jpg
UI/UX طراحی و توسعه طراحی وب

10 نکته که باید در طراحی لندینگ پیج رعایت کنید

10 نکته که باید در طراحی لندینگ پیج رعایت کنید

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

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

هدف اصلی یک کسب‌وکار از صفحه فرود سایت خود بالا بردن میزان تبادل (CRO) است. روش‌های مختلفی وجود دارد که طراحان می‌توانند از آن‌ها استفاده کنند تا میزان تبادل کاربران را افزایش دهند (مثلاً کاری کنند که کاربر به روی سایت عضو شود، دانلود کند یا خریدی انجام دهد) در این مقاله، ما به شما ۱۰ نکته طراحی UX را ارائه می‌دهیم که به کمک آن‌ها بتوانید صفحات فرود سایت خود را طوری طراحی کنید که تبادل بیشتری با کاربر برقرار کند.

۱- هدف اصلی کسب‌وکار خود را در CTA بیان کنید

هدف اصلی کسب‌وکار خود را به CTA تبدیل کنید

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


مقاله مرتبط: ٥ تکنیک برای طراحی بهتر دکمه CTA


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

۲- مزیت اصلی را در سرتیتر صفحه مشخص کنید

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

به‌عنوان مثال، صفحه فرود اوبر یک سرتیتر بسیار عالی دارد. این تیتر شامل دو کلمه می‌شود که هر دو خدمات اوبر را به‌خوبی مشخص می‌کنند. شعار Get there با یک فعل عملیاتی قوی یعنی «Get» آغاز شده است که در واقع از کاربر می‌خواهد کاری انجام دهد. زیر این سرتیتر نیز یک نوشته دیگر دیده می‌شود که بازدیدکننده را ترغیب می‌کند اوبر را امتحان کند.

 مزیت اصلی را در سرتیتر صفحه مشخص کنید

۳- نحوه عملکرد محصول را نشان دهید

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

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

نحوه عملکرد محصول را نشان دهید

۴- از طراحی‌های غیرعادی استفاده کنید

برای اینکه یک صفحه فرود موفق داشته باشید، باید بتوانید خودتان را در بین شلوغی و جمعیت نشان دهید. روش‌های مختلفی برای رسیدن به این هدف وجود دارد که در میان آن‌ها استفاده از طراحی‌های متفاوت و غیرعادی بهترین روش است. با ظهور فریم ورک‌های front-end همانند بوت استرپ (Bootstrap)، طرح‌بندی‌های جعبه‌ای یا Box-style در همه جای وب دیده می‌شود. بنابراین، ارائه اطلاعات به شکل غیرعادی‌تر می‌تواند موجب شود بازدیدکننده علاقه بیشتری به محصول شما نشان دهد.

صفحه فرود سایت Ascend Indiana از این روش به‌خوبی استفاده کرده است. آن‌ها در این طراحی، محتوای متنی را در اطراف نسخه بزرگی از لوگوی خود قرار داده‌اند و در همین میان از دو تصویر برای معرفی فعالیت آژانس خود استفاده کرده‌اند- یک جوینده کار خوشحال و تصویری از شهر ایندیانا. احتمالاً، آن‌ها نتوانسته‌اند راه بهتری برای جلب نظر مخاطب مورد هدفشان به‌محض وارد شدن به صفحه فرود بیابند.

از طراحی‌های غیرعادی استفاده کنید

۵- لوگوی برندهای معتبر را در صفحه جای دهید

لوگوی برندهای معتبر خیلی سریع نظر بازدیدکننده یک وب‌سایت را به خود جذب می‌کند. اغلب افراد صفحه را سرسری نگاه می‌کنند و در آن به دنبال تصویر یا نامی معتبر و شناخته شده می‌گردند که بتوانند به آن اعتماد کنند. فقط به استفاده از لوگوی مشتریان یا همکاران فکر نکنید. اگر محصول یا شرکت شما در یک انتشار معتبر برجسته شده است، از این ویژگی برای بخش «برجسته شده در» استفاده کنید. یا اگر محصول شما یک برند خاص را تکمیل کرده یا ارتقا می‌دهد، حتماً لوگوی آن برند را در صفحه فرود بیاورید.

صفحه فرود سایت Platform Web Wireframe kit به‌خوبی از لوگوی شرکت‌های دیگر برای به دست آوردن اعتماد بازدیدکنندگانش استفاده می‌کند. تمامی برندها برای مخاطب شناخته شده هستند، همانند Sketch، Photoshop، یا Adobe Illustrator. آن‌ها به‌خوبی از این لوگوها در پایین صفحه استفاده کرده‌اند و احتمالاً بخشی به‌عنوان «استفاده شده توسط» نیز دارند که از این برندها نام برده باشند.

لوگوی برندهای معتبر را در صفحه جای دهید

۶- از تصاویر گرافیکی خاص و منحصربه‌فرد استفاده کنید

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


مقاله مرتبط: ١٠ قانون که برای طراحی Landing Page باید مدنظر داشته باشید


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

از تصاویر گرافیکی خاص و منحصربه‌فرد استفاده کنید

۷- آمار و اطلاعات کافی ارائه دهید

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

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

۸- چت کردن و ارتباط برقرار کردن را ساده‌تر کنید

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

در صفحه فرود سایت GoDaddy’s SEO services، شما می‌توانید اجرای ظریف و کاربردی این روش را ببینید. دکمه تماس در هدر وجود دارد، بنابراین حتی اگر کاربر به پایین صفحه نیز اسکرول کند آن را خواهد دید. علاوه بر این‌ها، در گوشه راست و پایین صفحه، یک آیکون چت آنلاین وجود دارد که با رنگی چشمگیر (بنفش) به‌خوبی قابل مشاهده است. این آیکون چت نیز تمام مدت نمایان است. این که به کاربر این گزینه را بدهید که یا تماس بگیرد یا چت کند یک روش و تکنیک عالی برای بازاریابی است و مشخص می‌کند به احتیاجات کاربر و بازدیدکننده سایت به‌خوبی اهمیت داده شده است.

چت کردن و ارتباط برقرار کردن را ساده‌تر کنید

۹- CTA را در پایین صفحه تکرار کنید

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

سایت Crazy Egg از این تکنیک در صفحه فرود خود استفاده کرده است. در تصویر زیر می‌توانید پایین صفحه این سایت را ببینید. در حالی که متن نوشته شده در فیلد ورودی ثابت باقی‌مانده «Your website URL»، برچسب دکمه تغییر کرده است. در بالای صفحه از فعل فراخوان «Analyze» استفاده شده در حالی که در پایین صفحه به «Get Started» تغییر پیدا کرده است.

CTA را در پایین صفحه تکرار کنید

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

۱۰- دکمه CTA برجسته و جذاب طراحی کنید

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

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

دکمه CTA برجسته و جذاب طراحی کنید

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

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

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه