آموزش نکات طراحی لندینگ پیج خوب – 8 نکته تخصصی

مقدمه

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

 

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

 

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

 

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

 

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

 

 

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

آناتومی لندینگ پیج

هیرو سکشن (hero section)

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

در عکس زیر مشاهده میکنید که کاربر بدون نیاز به اسکرول هدف کسب و کار و موضوعی که میخواهد بیان کند را درک میکند.

سایت میرو در زمینه ی مدیریت تسک ها فعالیت میکند. در ادارات یا شرکت های خصوصی معمولا یک وایت بورد روی دیوار هست که تسک های هفته را روی آن یادداشت میکنند.در تیتری که برای بخش Above the Fold هم انتخاب کرده به همین موضوع اشاره کرده است که میرو یک وایت بورد آنلاین برای همکاری آسان است و کل کسب و کار خودش را معرفی کرده است. پس کاربر بدون نیاز به اسکرول یا هر چیزی میتواند بفهمد که این صفحه چه موضوعی را برای اون ارائه میدهد.

هیرو سکشن معمولا یک بنر یا تصویر بزرگ در بالای صفحه است. البته میتوانید از اسلایدر یا انیمیشن هم در این بخش استفاده کنید.

به مثال دیگری از سایت معروف Airbnb دقت بفرمایید.

 

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

محتوا

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

میتوانید توضیحاتی در مورد ویژگی و مزایای محصول یا خدمت خود ارائه دهید.همچنین میتوانید قیمت محصول یا خدمت را اضافه کنید و به کاربر بگویید که با خرید این محصول چقدر میتواند در هزینه خودش صرفه جویی کند.

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

 

 

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

یکی دیگر از تکنیک هایی که میتوان استفاده کرد استفاده از تاثیر ” تایید اجتماعی ” (Social proof) هست. در کتاب هنر شفاف اندیشیدن راجع به این خطای ذهنی کامل بحث شده است که پیشنهاد وبینیو به شما است که این کتاب رو حتما مطالعه بفرمایید.

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

ممکن است در ابتدای راه مطلبی برای این بخش نداشته باشید ولی حتما از خریداران محصول خود بخواهید که نظراتشان را برای شما بفرستند و بعدا این بخش را کامل کنید.

عناصر تبدیل بازدیدکننده به مشتری (Conversion Elements)

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

بعنوان مثال اگر شما قصد جمع آوری لیست ایمیل دارید، کال تو اکشن شما میتواند یک دکمه باشد با عبارت “همین الان ثبت نام کن!”.

برای جذاب تر کردن این دکمه میتوانید از کلمات اغوا کننده هم استفاده کنید. مثلا “ثبت نام رایگان همین الان!”

در تصویر زیر مشاهده میکنید که سایت اسلک از یک دکمه با عنوان “رایگان تست کن” استفاده کرده است.

شاید به ظاهر کار ساده ای باشه ولی بهینه کردن CTA به همین سادگی نیست و علاوه بر اینکه نکات کپی رایتینگ میبایست رعایت شود، محل قرار گیری دکمه و رنگ آن هم اهمیت زیادی دارد. برای تمرین میتوانید سایت های برتر در رتبه بندی گوگل را مشاهده کنید و از آنها ایده بگیرید.

فوتر

بیشتر افراد فوتر را کم ارزش میدانند، ولی نقش مهمی در تبدیل وبسایت دارد. شما میتوانید اطلاعات بیشتر راجع به کسب و کارتان یا فرم عضویت در خبرنامه و لینک شبکه های اجتماعی را در این بخش قرار دهید. به مثال زیر دقت کنید :

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

طراحی لندینگ پیج خوب و موثر با 8 روش حرفه ای

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

در ادامه 8 روش حرفه ای و تست شده را برای شما توضیح خواهیم داد.

1- زیبایی در سادگی است.

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

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

ابتدا سعی کنید فضای سفید زیادی در نظر بگیرید. این کار می تواند کاربران را تشویق کند تا بر روی بخش های مهم صفحه شما تمرکز کنند، بدون اینکه در ورودی های زیاد غرق شوند.

البته برای اینکه صفحه ما بی روح نشود میتوان از سایه ها برای برجسته تر کردن دکمه های تعاملی استفاده کرد.

2- حس اعتماد را به مشتری القا کنید.

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

اگر امکان بازگشت پول در سایت شما فعال هست این گزینه را بولد کنید و در دید کاربر باشد چون خیلی موضوع مهمی است.

اختصاص بخشی برای نشان دادن نظرات مشتریان بسیار کمک کننده است. میتوانید از افزونه آلتیمیت ادآن کمک بگیرید تا نظرات مشتریان را از روی نقشه گوگل بردارد و در سایت شما نمایش دهد.

3- تیترهای مختصر بنویسید.

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

4- بهینه سازی کال تو اکشن ها

کال تو اکشن ها یا همان دعوت به اقدام ها بخش مهمی از روند فروش ما هستند. چون از کاربر میخواهند که با ما تعامل داشته باشند.

دکمه ای که برای کال تو اکشن قرار میدهید خلاصه و واضح باشد که قرار است چه اتفاقی بعد از کلیک کردن بیافتد.

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

5- صفحه فرو جذاب و میخکوب کننده باشد.

اگر لندینگ شما متن زیادی دارد احتمال اینکه حواس کاربر پرت بشود و نتواند متن را دنبال کند زیاد است. پس بهتر است با استفاده از راهکارهای زیر آن را بهبود دهید :

استفاده از انیمیشن – میتوانید لا به لای متون خود از انیمیشن ها استفاده کنید تا کاربر احساس تعامل بیشتری داشته باشد. استفاده از ویژگی پارالکس در المنتور برای همین مورد ایجاد شده است.

لینک دادن به ادرس هایی که در راستای هدف ما نیست باعث حواس پرتی کاربر میشود. بهتر است از هدر و فوتر دیفالت تمام صفحات استفاده نشود و تا حدالامکان از لینک های حاشیه ای پرهیز شود.

6- ایجاد فرم با تکیه بر UX

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

فرم ها تا حد امکان ساده باشد و فقط اطلاعاتی که برای شروع لازم دارید را از کاربر بگیرید. مثلا سایت وبینیو برای طراحی سایت فقط ایمیل و نام کاربر را دریافت میکند.

7- رعایت تضاد رنگی

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

بعنوان مثال وقتی از عکسی استفاده میکنید که بک گراند مشکی دارد، رنگ متن آن را سفید انتخاب کنید.

8- فونت خوانا استفاده کنید.

تایپوگرافی یکی از بخش های مهم در طراحی وب به شمار میرود. در کنار کنتراست ضعیف که بالا بهش اشاره کردیم اندازه نامناسب فونت دومین دلیل شایع شکایت کاربران وب می باشد. فونت هم باید زیبا باشد و هم اندازه درستی داشته باشد.

از تعدد فونت در یک صفحه پرهیز کنید.

آموزش پروژه محور طراحی لندینگ پیج

در ویدئو زیر یک لندینگ پیج کامل را از صفر تا صد طراحی کرده ایم.

برای مشاهده وبینار این آموزش هم میتوانید از لینک زیر اقدام بفرمایید.

لندینگ پیجی که در ویدئو فوق طراحی شده است را در لینک زیر میتوانید دریافت کنید.