بیشتر ماهایی که توی ویرگول و فضای اینترنت در حال خوندن و نوشتن هستیم، سایت گرد های ماهری به حساب میایم. از اونجایی که توی سایت ها همیشه یک تعداد دکمه برای کلیک میبینیم، من خیلی دوس دارم قبل از خوندن این متن یه لحظه مکس کنید و از خودتون بپرسید:
چی میشه که روی یه دکمه در سایتی کلیک میکنید؟
قبل و بعد اون دکمه چی بوده که ترغیبتون کرده؟
رنگ و شکل و فونتش چجوری بوده؟
آیا لحن امری داشته یا صرفا یه کلمه بوده؟ (مثلا: شروع کنید / بیشتر بدانید)
اگر دوست داشتید خوشحال میشم در کامنت افکارتون رو برای من هم بنویسید. اما بریم سرغ اصل مطلب. در ادامه میخوام اصول، استاندارد، توصیههای علمی، قاعده و راهکارهایی که باعث میشه شما یا هر فرد دیگه ای، روی دکمه های وبسایت کلیک کنه رو بیان کنم. کیس استادیم هم وبسایت داده هات (وبسایتی که در حوزه خدمات ابری، paas، iaas و ... فعالیت میکنه) هست.
از ابتداییترین قسمت شروع کنیم و دقیقا بدونیم این مخفف سه حرفی چی هست؟!
CTA مخفف Call To Action (به فارسی: «فراخوان به اقدام» یا «دعوت به اقدام»)، به هر عنصری در صفحه گفته میشه که کاربر رو به انجام یک کار مشخص دعوت میکنه مثل دکمهای که بیان کننده «ثبتنام کن» یا لینکی که بیان کننده «دانلود رایگان» هست.
CTA مهمترین عنصر تبدیل (Conversion) در یک صفحه است. حتی بهترین محتوا، بدون CTA مناسب، قادر نیست کاربر را به اقدام برسونه.
یک سری اصطلاحات هست که در متن و توضیحاتم ازشون استفاده کردم. خوبه اول بخونید و باهاشون آشنا بشید. اینجوری یک دیدگاهی هم نسبت به کل ماجرا پیدا میکنید. برای تعریف این اصطلاحات از هوش مصنوعی کمک گرفتم برای همین لحنهاشون کاملا رسمی و کتابی هست:
تعریف: مهمترین CTA در هر صفحه که هدف اصلی صفحه را نشان میدهد.
مثال: در صفحه اصلی دادههات، Primary CTA دکمه «دیپلوی کن» است.
قانون: در هر بخش از صفحه، فقط یک Primary CTA وجود داشته باشد. چون اگر دو دکمه پررنگ کنار هم باشن، کاربر سرگردان میشود.
تعریف: گزینه دوم برای کاربری که هنوز آماده اقدام اصلی نیست.
مثال: کنار «دیپلوی کن« میتوان «مستندات رو ببین» را گذاشت.
ظاهر: معمولاً بدون پر رنگ (Outline button) تا کمتر از Primary جلب توجه کند.
تعریف: گزینه سوم با کمترین اولویت بصری.
مثال: لینک ساده «سوال داری؟ بپرس» در پایین.
تعریف: تست همزمان دو نسخه از یک عنصر برای کشف اینکه کدام بهتر کار میکند.
مثال در CTA: نیمی از کاربران دکمه «دیپلوی کن» میبینند، نیم دیگر «شروع کن». بعد از یک هفته، دکمهای که نرخ کلیک (CTR) بالاتری دارد، انتخاب میشود.
ابزارهای A/B Test: VWO، Optimizely، Hotjar.
تعریف: نرخ کلیک — درصد افرادی که CTA را دیدند و روی آن کلیک کردند.
فرمول: CTR = (تعداد کلیک ÷ تعداد نمایش) × ۱۰۰
مثال: اگر ۱,۰۰۰ نفر دکمه را دیدند و ۵۰ نفر کلیک کردند، CTR = ۵٪.
تعریف: درصد کاربرانی که نهتنها کلیک کردند، بلکه اقدام اصلی (مثل ثبتنام) را هم تکمیل کردند.
مثال: اگر ۱۰۰ نفر کلیک کردند و ۵ نفر ثبتنام کردند، Conversion Rate = ۵٪.
تعریف: متن کوچک و توضیحی کنار CTA که اطلاعات اضافی میدهد.
مثال: زیر دکمه «دیپلوی کن» نوشته شده: «در ۶۰ ثانیه، بدون نیاز به کارت اعتباری».
کارکرد: کاهش اضطراب کاربر — میفهمد چه چیزی منتظرش است.
تعریف: بخشی از صفحه که بدون اسکرول دیده میشود.
قانون CTA: Primary CTA همیشه باید Above the Fold باشد.
تعریف: اختلاف رنگ بین متن CTA و پسزمینه آن.
استاندارد رسمی WCAG: حداقل ۴.۵:۱ برای دسترسیپذیری.
مثال: متن سفید روی دکمه آبی نفتی = نسبت ۸:۱ (خوب). متن خاکستری روی دکمه سفید = نسبت ۲:۱ (بد).
تعریف: اندازه قابل کلیک یا لمس دکمه.
استاندارد رسمی WCAG 2.5.5: حداقل ۴۴×۴۴ پیکسل.
توصیه عملی: ۴۸×۴۸ پیکسل برای راحتی بیشتر.
تعریف: فضای خالی اطراف CTA که باعث جلب توجه میشود.
اصل: هرچه فضای خالی بیشتر، CTA پررنگتر دیده میشود.
در راستای تحقیقاتی که در خصوص CTA داشتم متوجه شدم که یک سری قوانین در برخی کشور ها تعبیه شده که در اون به نویسنده و دیزاینرهای وبسایتشون میگن چه مواردی رو در راستای طراحی کال تو اکشن ها باید رعایت کنند. اینها لیستی از قوانینی هستند که رعایتشون در بسیاری از کشورها الزامی است:
بر اساس استاندارد جهانی W3C برای دسترسیپذیری وب. این موارد در سطح AA الزامی هستند. جالبه بدونید که این قوانین بیشتر روی هویت بصری تمرکز کردند و یک حداقلی برای استاندارد در نظر گرفتن. میدونم که دیزاینرهای ماهر ایرانی هم از این قواعد استفاده میکنند تا همه کاربرها بتونن از وبسایت بهترین بهتره رو ببرند.
Contrast Ratio حداقل ۴.۵:۱ بین متن و پسزمینه CTA
اندازه Touch Target حداقل ۴۴×۴۴ پیکسل
Focus Visible — وقتی کاربر با Tab روی CTA رفت، باید واضح ببیند
متن معنادار — بدون نیاز به context بصری قابل فهم باشد (برای Screen Reader)
در آمریکا تحت ADA (Americans with Disabilities Act) و در اروپا تحت EAA (European Accessibility Act) الزامی است.
درباره CTA یک سری مقالات در دانشگاه های بنام نوشته شدند. خالی از لطف نیست بدونید از نظر علمی چه مواردی برای طراحی یک کال تو اکشن جذاب پیشنهاد شده:
چارچوب کلاسیک بازاریابی که از قرن ۱۹ شناخته شده:
Attention — جذب توجه
Interest — ایجاد علاقه
Desire — ایجاد میل
Action — دعوت به اقدام
به گفته این مدل، CTA نماینده مرحله Action است. رعایت این موارد، CTA کار نمیکند.
دکتر BJ Fogg از دانشگاه Stanford، فرمول رفتار را اینگونه تعریف کرده:
B = M × A × P
(رفتار = انگیزه × توانایی × Prompt)
CTA همان Prompt است. اگر انگیزه (Motivation) و توانایی (Ability) کاربر بالا باشد، فقط یک Prompt مناسب لازم است تا اقدام کند.
قانون روانشناسی شناختی: زمان تصمیمگیری با تعداد گزینهها افزایش لگاریتمی دارد.
نتیجه برای CTA: هرچه گزینههای CTA کمتر، تصمیمگیری سریعتر. بنابراین یک Primary CTA در هر صفحه بیشتر از دو CTA تاثیر گذار خواهد بود.
از نظر من این مهم ترین قانونی هست که باید جدی گرفته بشه!
Nielsen Norman Group: کاربر باید در ۵ ثانیه بفهمد:
CTA چه کاری میکند
چه نتیجهای از کلیک کردن میگیرد
اگر در ۵ ثانیه نفهمد، احتمالاً کلیک نمیکند.
قانون فیزیولوژیک: زمان رسیدن به یک هدف، با فاصله نسبت مستقیم و با اندازه نسبت معکوس دارد.
نتیجه برای CTA: هرچه CTA بزرگتر و نزدیکتر به جایی که چشم کاربر هست، احتمال کلیک بیشتر.
اینها قانون رسمی نیستند، ولی از تحقیقات A/B Test میلیونها کمپین جمعبندی شدهاند. سعی کردم با مثال های درست و غلط و دلیل بحث رو براتون ملموس تر کنم. یک چیزی شبیه به خوبها و بدهایی که در دوران دبستان تجربه کردیم.
درست: «دیپلوی کن»، «شروع کن»، «دانلود کن»
اشتباه: «اطلاعات بیشتر»، «صفحه ما»
چرا: فعل امری مستقیماً مغز را به سمت اقدام هل میدهد.
درست: «همین الان دیپلوی کن» (۳ کلمه)
اشتباه: «برای شروع استفاده از سرویس روی این دکمه کلیک کنید»
چرا: چون CTA باید در یک نگاه خوانده شود (۵ ثانیه).
درست: «۱۴ روز رایگان تست کن»
اشتباه: «همین حالا کلیک کنید»
چرا: کاربر باید بداند چه چیزی به دست میآورد.
درست: دکمه نارنجی روی پسزمینه آبی
اشتباه: دکمه آبی روی پسزمینه آبی روشن
چرا: کنتراست بصری، توجه را جلب میکند.
درست: دکمه با فاصله مناسب از عناصر دیگر
اشتباه: دکمه چسبیده به متن و تصاویر
چرا: White Space باعث «نفس کشیدن» بصری میشود.
درست: یک دکمه پر آبی + یک لینک ساده
اشتباه: سه دکمه پر، رنگارنگ، هماندازه
چرا: بر اساس قانون Hick's Law کاهش گزینهها = تصمیمگیری سریعتر
درست: تغییر سایه یا روشنتر شدن رنگ وقتی موس روی دکمه میرود
اشتباه: بدون تغییر در Hover
چرا: نشانه تعاملپذیری بوده و کاربر مطمئن میشود قابل کلیک است.
درست: زیر دکمه: «بدون نیاز به کارت اعتباری»
اشتباه: فقط دکمه بدون توضیح
چرا: کاهش اضطراب، رفع موانع تصمیم.
درست: «همین الان شروع کن»، «فقط ۲۴ ساعت»
اشتباه: بدون قید زمان
چرا: تأخیر در تصمیمگیری = فراموشی = کاربر از دست رفته.
اصل: هیچ CTAای بدون تست بهینه نیست.
عملی: هر هفته یک نسخه جدید تست کنید. حتی تغییر یک کلمه میتواند CTR را دو برابر کند.
مثال معروف: تغییر «Start your free trial» به «Start my free trial» باعث افزایش ۹۰٪ نرخ کلیک شد (تحقیق Unbounce).
بر خلاف بخش های قبلی که در همگی سعی شده بود بر اساس قانون و فکت های علمی پیش بره این مواردی که در ادامه خواهید خوند صرفا از روی تجربه بدست اومده و میتونه درست نباشه. اگر شما هم تجربه ای در خصوص CTA دارید حتما برام بنویسید.
درست: «حساب من را بساز»
نه: «حسابت را بساز»
چرا: حس مالکیت ، کاربر فکر میکند چیزی برای خودش است.
کلماتی که اضطراب ایجاد میکنند:
«خرید» (میگوید پول میخواهد)
«ثبتنام کنید» (میگوید کار سختی است)
«ارسال» (نامشخص است چی میفرستد)
جایگزینهای بهتر:
«دیپلوی کن» (میگوید کار محصول)
«امتحان رایگان» (میگوید بدون ریسک)
«دریافت» (میگوید چیزی به دست میآوری)
طبق گفته Daniel Kahneman، انسانها "از دست دادن" را دو برابر بیشتر از "به دست آوردن" حس میکنند. در نتیجه هشدار "از دست ندادن" رو تا میتونید در CTA هاتون استفاده کنید.
«این پیشنهاد را از دست نده»
«فقط ۲۴ ساعت فرصت داری»
Social Proof (اثبات اجتماعی)
نشان دادن اینکه دیگران هم استفاده میکنند:
«به ۵۰۰۰ توسعهدهنده ایرانی بپیوند»
«بیش از ۱۰۰ استارتاپ از ما استفاده میکنن»
تا به اینجا متوجه شدیم که CTA چی هست؟، چجور باید کال تو اکشنی بسازیم که بیشترین تاثیر رو داشته باشه، قوانین و اصطلاحات کلیدی، استاندارد های رسمی (یا همون قانونی)، نکات روانشناسانه و توصیه هایی رو در خصوص CTA براتون نوشتم. ولی اگر مطمئنا قرار نیست هر سری که سایتی رو دیزاین میکنید، این مقاله رو مطالعه کنید. برای همین هم چک لیست زیر رو براتون آماده کردم. کافی هست که شما این چک لیست رو کنار دستتون داشته باشید و بعد از هر طراحی سایت و قبل از انتشار، CTA هاتون رو با این لیست تطبیق بدید.
قبل از انتشار، این چکلیست را بررسی کنید:
آیا فعل امری در ابتدا دارد؟
آیا ۲-۵ کلمه است؟
آیا مزیت ملموس را میرساند؟
آیا کنتراست رنگ ۴.۵:۱ یا بالاتر دارد؟
آیا اندازه دکمه ۴۴×۴۴ پیکسل یا بیشتر است؟
آیا فضای سفید کافی اطرافش هست؟
آیا فقط یک Primary CTA در صفحه است؟
آیا Microcopy توضیحی دارد؟
آیا حالت Hover دارد؟
آیا حس فوریت یا انگیزه دارد؟
من هرچقدر هم که در این خصوص کار کرده باشم و طراحی سایت انجام داده باشم، باز هم در رابطه با موضوع CTA متخصص نیستم. حتما اشتباهاتی خواهم داشت. برای همین هم در صورتی که تصمیم دارید در این موضوع خاص (کال تو اکشن) به صورت ویژه تحقیق کنید، این مطالبی که در ادامه معرفی شدند، مراجع خوبی هستند.
• Don't Make Me Think — Steve Krug (کلاسیک UX)
• Call to Action — Bryan & Jeffrey Eisenberg
• Hooked — Nir Eyal (روانشناسی اعتیاد به محصول)
• Influence — Robert Cialdini (شش اصل اقناع)
• nngroup.com — Nielsen Norman Group (مرجع اصلی UX research)
• baymard.com — Baymard Institute (E-commerce UX)
• cxl.com — Conversion Optimization
• w3.org/WAI/WCAG21 — استاندارد رسمی دسترسیپذیری
• "Action Words for Call-to-Action Buttons" — Nielsen Norman Group
• "10 Tips for Effective CTAs" — HubSpot Research
• "The Psychology of CTA Buttons" — Crazy Egg
