سایت Unbounce چه کار می‌کند؟

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

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

مشکل one form چیست؟

مانند هر سیستم دیگری که سعی می‌کند فرآیند‌های پیچیده‌ای را طی کرده و هنگام پیاده‌سازی آن‌ها را ساده کند بخشی از ظرافت و انعطاف‌پذیری نیز باید در اینجا قربانی شود. یکی از محدودیت‌ها این است که هر صفحه فرود در Unbounce فقط می‌تواند یک فرم را پیاده‌سازی کند (چند مقاله وجود دارد که در مورد این موضوع صحبت کرده است، برای مثال ۱ ، ۲ ، ۳). اگر بازدیدکنندگان خود را با فرم‌ها بمباران کنید این ریسک وجود دارد که از Call To Action ( CTA – دعوت به اقدام) خسته شوند، فراهم کردن دسترسی آسان به فرم در بیش از یک نقطه نیازی معقول است.

برای مثال می‌توانید با یک Call To Action قوی و فرمی در بالای صفحه شروع کنید، سپس در پایین صفحه نیز آن را به کار ببرید، جایی که کاربران فرصت داشته باشند تا اطلاعات بیشتری در مورد پیشنهاد شما به دست آورند. نمونه‌ای ساده از این نوع صفحه فرود، سایت Teambit است که در تصویر زیر مشاهده می‌کنید که جزء ۱۶ طراحی برتر صفحه فرود در سایت Hubspot در سال ۲۰۱۷ ذکر شده است.

در بالای صفحه یک فرم ثبت ایمیل ساده کار گذاشته شده است.

در بالای صفحه یک فرم ثبت ایمیل ساده کار گذاشته شده است.

 

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

راه حل‌های بالقوه برای مشکل one-form

حالا که طرح مشکل کردیم باید راه حل‌هایی نیز ارائه کنیم.

خوشبختانه چندین راه ممکن برای حل این مشکل وجود دارد، استفاده از ابزار Unbounce یا اضافه کردن کد به ورودی‌های HTML، CSS و JavaScript.

در ذهن داشته باشید که یکی از راه حل‌ها این است که اصلاً از این فرم‌ها در صفحه خود استفاده نکنید و buttonهای Call To Action را به صفحات دیگری که دارای فرم هستند لینک بدهید. این نگرشی است که سایت Unbounce در نمونه زیر استفاده کرده است. در حالی که این رویکردی کاملاً معتبر است، اما نمی‌توانم آن را راه حلی برای این مشکل در نظر بگیرم، پس آن را در لیست زیر نیاورده‌ام.

در اینجا Unbounce از دو CTA استفاده کرده است (button نارنجی رنگ) اما به داشتن فرم بر روی صفحه تکیه نکنید.

۱- اسکرول کردن دکمه (button) لنگر

این کار به طور بالقوه ساده‌ترین راه حل است زیرا اساساً توسط Unbounce پشتیبانی می‌شود.

۱- یک دکمه را در پایین صفحه و جایی که فرم دوم خود را استفاده خواهید کرد، قرار دهید.

۲- آن دکمه را در قسمت Click Action در سمت راست پنل تنظیمات ویرایش کنید، یعنی جایی که معمولاً URL را که به آن لینک می‌دهید نیز می‌گذارید.

۳- کد ID منحصر به فرد خود را در box که فرم‌تان را نگاه می‌دارد اضافه کنید (این قسمت را می‌توانید در ویرایش box و پایین پنل سمت راست با نام ” Element Metadata ” پیدا کنید.)

Button ثبت‌نام

Button ثبت‌نام

بخش " Click Action " از پنل تنظیمات button واقع در سمت راست

بخش ” Click Action ” از پنل تنظیمات button واقع در سمت راست

 

بخش " Element Metadata " واقع در پایین پنل تنظیمات element در سمت راست

بخش ” Element Metadata ” واقع در پایین پنل تنظیمات element در سمت راست

مزایا
پیاده‌سازی آن سریع و آسان است، فقط کمی دستکاری مستقیم در JavaScript و HTML نیاز است.

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

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

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

فرق قرار دادن (و قرار ندادن) box یک پیکسلی برای headroom

۲- آیفریم‌ها (iFrames)

Unbounce به شما اجازه می‌دهد تا از بلوک‌های <<HTML استفاده کنید که با استفاده از آن‌ها می‌توانید فرمی را از یک سرویس دیگر یا حتی یک صفحه دیگر از Unbounce که فقط شامل یک فرم است، جاسازی کنید. همچنین نیاز دارید تا بلوک ” Custom HTML ” را از نوار سمت چپ drag کرده و در جایی که می‌خواهید فرم آنجا باشد انداخته و در کد iFrame خود paste کنید.
بلوک " Custom HTML " در نوار سمت چپ

بلوک ” Custom HTML ” در نوار سمت چپ

جعبه HTML خالی که بالا می‌آید

جعبه HTML خالی که بالا می‌آید

شکل بلوک‌های HTML در ویرایشگر

شکل بلوک‌های HTML در ویرایشگر

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

این راه حل همچنین به شما اجازه می‌دهد تا بخش زیادی از عملکرد سرویس‌های دیگر مانندWufoo  را بسازید (سایت Unbounce این فرایند را در اینجا مستندسازی کرده است).

مشکلات

انتخاب Unbounce به عنوان ایستگاهی برای ساخت صفحات فرود باعث می‌شود که استفاده از فرم‌های بیرونی به عنوان یک قدم دورتر شدن از هدف اصلی تلقی شوند. همچنین استفاده از آن دارای عوارضی جانبی است زیرا در حالت ویرایش (editing mode) نمی‌توانید ببینید که فرم در صفحه چگونه به نظر می‌رسد. بنابراین گردش‌کارتان هنگام تغییرات این‌گونه است :

۱- تغییر فرم بیرونی

۲- بررسی صفحه و پیدا کردن مشکلات طراحی

۳- تغییر لایه (layout) در ویرایشگر Unbounce

۴- بررسی صفحه برای دیدن اینکه آیا فرم ناخواناست یا خیر

۵- تغییر فرم بیرونی

و …

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

اگر از یک صفحه Unbounce یکسان استفاده می‌کنید تا بتوانید از یک فرم مشابه نیز دو بار استفاده کنید، تکمیل فرم‌ها را متفاوت از هم تگ کنید تا بتوانید بفهمید که آیا کاربران دوست دارند تا در ابتدای صفحه تبدیل صورت بگیرد یا در انتهای آن.

۳- فرم چسبنده

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

این کد CSS ساده فرمی را در سمت راست صفحه و با عرض ۸۰۰ پیکسل ایجاد می‌کند (هنگامی که در Unbounce از نسخه دسکتاپ به نسخه موبایل می‌رویم بدان معناست که جایگیری و موقعیت‌ها نیز تغییر خواهد کرد).

هر ID Element در زیر مطابق با یک box متفاوت است که می‌خواهم همه را با هم انتقال دهم. باید ” lp-pom-box-xxx ” را در زیر تغییر دهید تا بتوانید IDهایی که می‌خواهید را همراه با کاربر به پایین صفحه منتقل کنید (همچنین می‌توانید IDهای موجود در قسمت ” Element Metadata ” را همانطور که در راه حل ” اسکرول کردن دکمه لنگر ” در بالا گفته شده، پیدا کنید).

<style>
@media (min-width: 800px) {
#lp-pom-box-56{ position:fixed; left:50%; margin-left: 123px; top:25%; margin-top:-70px}
#lp-pom-form-59{ position:fixed; left:50%; margin-left: 141px; top:25%; margin-top:60px}
#lp-pom-box-54{ position:fixed; left:50%; margin-left: 123px; top:25%; margin-top:50px}}
</style>

 

مزایا

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

مشکلات

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

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

۴- فرم چسبنده (ظاهر شونده و ناپدید شونده)

ساده‌ترین راه برای دسترسی به این موضوع استفاده از z-index است. z-index به طور خلاصه راهی برای ایجاد ارتباط میان لایه‌ها در HTML است. تصویری که دارای مقدار z-index ( 2 ) باشد از یک box با مقدار z-index ( 1 ) به کاربر نزدیک‌تر نشان داده می‌شود، بنابراین زمانی که از صفحه بازدید می‌کنید گویا تصویر در جلوی box قرار گرفته است.

در این روش به نوعی box مات در هر بخش از صفحه خود نیاز خواهید داشت. می‌توانید box را با رنگ، تصویر یا گرادینت پر کنید، تا زمانی که دارای حالت transparent (شفاف) باشد مهم نیست. هنگامی که boxها را در جای خود قرار دادید، یادداشتی را از طریق قسمت ” Meta Data ” در نوار تنظیمات در سمت راست در z-index آن‌ها قرار دهید، همان مکانی که Element ID نیز نشان داده می‌شود.

این box دارای z-index ( 31 ) می‌باشد، پس چیزی با index ( 30 ) را پوشش می‌دهد

این box دارای z-index ( 31 ) می‌باشد، پس چیزی با index ( 30 ) را پوشش می‌دهد

سپس از CSS برای انتخاب عناصری که می‌خواهید آن‌ها را به پایین صفحه انتقال دهید استفاده کرده و z-index آن‌ها را عدد کمتری قرار دهید. در خط‌های پایین دو عنصر را انتخاب کرده و z-index آن‌ها را ( ۳۰ ) قرار دادم، که بدین معناست که در پشت box بالا که دارای z-index ( 31 ) است مخفی می‌مانند. دوباره در اینجا باید IDهایی که lp-pom-box-xxxx# را شروع می‌کنند با IDهای یکسانی که در فرم چسبنده (راه حلی که در قسمت قبل آورده شد) از آن‌ها استفاده کرده‌اید جایگزین کنید.

<style>       #lp-pom-box-133{z-index: 30; }      #lp-pom-box-135{z-index: 30; }</style>

 

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

 

مزایا

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

مشکلات

بر خلاف روش iFrame این روش به شما اجازه نمی‌دهد که بیش از یک نوع قالب برای فرم خود استفاده کنید. همچنین در این روش به دانش بیشتری در زمینه CSS نیاز دارید (و نکاتی که در پایین ذکر شده است نیازمند کمی آزمون و خطا در JavaScript است).

نکات دیگر

بر اساس موقعیتی که در صفحه مد نظر دارید از جاوا اسکریپت برای حذف و اضافه کلاس‌های CSS استفاده نمایید. برای مثال می‌توانید کلاس‌های CSS را مانند نمونه زیر بسازید که باعث می‌شود هنگام مشاهده عناصر fade in و fade out شوند.

CSS:

<style>
@media (min-width: 800px) {
/* make the opacity of an element 0 where it has this class */
.hide {
opacity: 0;
}
/* instead of applying an effect immediately, apply it gradually over 0.2 seconds */ .transition {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}}
</style>

سپس هنگامی که کاربر می‌خواهد به نقاط معینی اسکرول کند می‌توانید از این جاوا اسکریپت برای اعمال کلاس hide. استفاده کرده و هنگامی که به نقاطی می‌رود که می‌خواهید در آنجا فرم را مشاهده کند، جاوا اسکریپت را حذف کنید. این روش برای کنترل دقیق‌تر مکان ظاهر شدن فرم انجام می‌شود. همچنان باید مانند قبل lp-pom-box-xxx# را برای تطبیق با IDهای موجود در حساب خود آپدیت کنید.

JavaScript:

<script>
// This script applies the “hide” class, which makes opacity zero, to certain elements when we scroll more than 100 pixels away from the top of the page. Effectively, if we scroll down the page these items will fade away.
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$(‘#lp-pom-box-54’).addClass(‘hide’);
$(‘#lp-pom-box-228’).addClass(‘hide’);
}
// This section removes the hide class if we’re less than 500 pixels from the bottom of the page or scroll back up to be less than 100 from the top. This means that those elements will fade back into view when we’re near the bottom of the page or go back to the top.
if ($(document).height() – ($(window).height() + $(window).scrollTop()) < 500 ||
$(window).scrollTop() < 100 ){
$(‘#lp-pom-box-54’).removeClass(‘hide’);
$(‘#lp-pom-box-228’).removeClass(‘hide’);
}}
</script>

 

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

برای این کار باید تابع جاوا اسکریپت scroll. را اضافه کنید :

  if ($(document).height() – ($(window).height() + $(window).scrollTop()) < 75){
// This part hides the “full name” part of the form, moves the submit button up and reduces the size of the box when we scroll down to less than 75 pixels away from the bottom of the page
$(‘#container_full_name’).addClass(‘hide’);
$(‘#lp-pom-box-54’).stop().animate({height: “200px”},200);
$(‘.lp-pom-button-60-unmoved’).animate({top: ‘-=75’}, 200);
$(‘#lp-pom-button-60’).removeClass(‘lp-pom-button-60-unmoved’);
$(‘#lp-pom-button-60’).addClass(‘lp-pom-button-60-moved’);}
else{
// This part adds the “full name” part back in to the form, moves the submit button back down and increases the size of the box if we scroll back up.
$(‘#container_full_name’).removeClass(‘hide’);
$(‘#lp-pom-box-54’).stop().animate({height: “300px”},200);
$(‘.lp-pom-button-60-moved’).animate({top: ‘+=75’}, 200);
$(‘#lp-pom-button-60’).removeClass(‘lp-pom-button-60-moved’);
$(‘#lp-pom-button-60’).addClass(‘lp-pom-button-60-unmoved’);

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

نتیجه‌گیری

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

نقاط قوت نقاط ضعف راه حل‌ها
پیاده‌سازی آسان، کدنویسی کم ناخوشایند کردن تجربه کاربری اسکرول کردن دکمه لنگر
به کار گرفتن فرم‌های متفاوت نیازمند ساخت فرم در قسمت‌های مختلف است و استایلینگ و تحلیل پیچیده‌ای را به گردش کار اضافه می‌کند. iFrame
نگاه داشتن و طراحی پیگیری (tracking) در یک پروژه Unbounce ایجاد خستگی از CTA  ، گرفتن فضای زیادی از صفحه فرم چسبنده (ثابت)
دارای مزایای فرم چسبنده است، به علاوه از ایجاد خستگی توسط CTAها اجتناب کرده و فضای زیادی را نیز اشغال نمی‌کند. نیازمند دانش کافی از CSS است، فقط می‌توان از یک فرم در آن استفاده کرد فرم چسبنده
(ظاهر شونده و ناپدید شونده)

 

روش مورد علاقه من فرم چسبنده (ظاهر شونده و ناپدید شونده) است زیرا نیاز به ابزارهای بیرونی را کاهش می‌دهد اما اگر مجبور بودم تا از فرم‌های مختلف استفاده کنم حتماً iFrame را انتخاب می‌کردم.

روش مورد علاقه شما چیست؟ آیا روش‌هایی هست که از قلم انداخته باشم؟ لطفاً ما را از نظرات خود بهره‌مند سازید.