قرمز، سبز یا آبی؟!

چه رنگی برای دکمه کال تو اکشن (CTA) بهتر است؟

سینا یوسفی
سینا یوسفی
10:02، 1401/02/07
چه رنگی برای دکمه کال تو اکشن (CTA) بهتر است؟
3 رای    میانگین 5.0/5
لطفا شما هم امتیاز بدهید!
قرمز، سبز یا آبی؟!

چه رنگی برای دکمه کال تو اکشن (CTA) بهتر است؟


«چه رنگی برای دکمه CTA بهتره؟» این سوالی است که به کرات از طراحان سایت و پرفورمنس مارکترها پرسیده می‌شود و جوابش تقریبا در تمامی دنیای دیجیتال مارکتینگ یکی است: رنگی که متمایز نسبت به سایر بخش‌های صفحه باشد. اما اگر باز هم سوال‌کننده قانع نشد، چطور؟ جواب بعدی برای رنگ کال تو اکشن (Call To Action) چیست؟ در این مطلب به شما می‌گوییم که برای طراحی دکمه فراخوان به عمل یا CTA از چه رنگی استفاده کنید بهتر است؟!
 
«گشته‌ام در جهان و آخر کار، دکمه‌ای برگزیده‌ام که مپرس»
(حافظ اگر طراح CTA بود!)
 
حقیقت این است که رنگ‌ها، تجربه‌ی ما را نسبت به جهان تغییر می‌دهند. چه شعرها که درباره یار سیه مو، دلبر سفید خال، رویِ زردِ تب‌دار، برگ‌های نارنجی رنگ درختان پاییزی، آبی نیلگون دریا و… گفته نشده است. رنگ، نه تنها روح ما را تحت تاثیر قرار می‌دهد، بلکه می‌تواند جسم ما را در کنترل خود داشته باشد.
برخلاف چیزی که تصور می‌کنید حتی روی زیبای سایت هم به آب و رنگ و خال و خط نیاز دارد. به همین دلیل است که هر طراح سایتی نمی‌تواند کار گرافیک سایت را به خوبی انجام دهد. طراح سایت وظیفه کدنویسی و برنامه نویسی درست صفحه را برعهده دارد. اما رابطه کاربر (Front-End) با سایت (Back-End)، تنها در کلیک کردن روی دکمه‌ها، باز کردن صفحات داخلی و پول پرداخت کردن برای محصولات و خدمات نیست. رنگ‌های داخل سایت تاثیر مستقیمی روی بهبود نرخ تبدیل (Conversion Optimization Rate) یا CRO می‌گذارند. ممکن است این سوال برایتان به وجود بیاید که هر رنگی برای CTA، تا چه حد به تعداد کلیک‌های روی آن تاثیر می‌گذارد؟

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

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

روانشناسی رنگ‌ها در دیجیتال مارکتینگ

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

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

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

قرمز؛ رنگی که می‌تواند شما را برنده کند!

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

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

پس اگر این بار قرار بود در مسابقه‌ای شرکت کنید و برنده شوید، رنگ قرمز را از یاد نبرید!

برای شیرین‌تر کردن شکلات، شکر لازم نیست!

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

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

حتی جنسیت کاربر هم می‌تواند در انتخاب رنگ دکمه CTA موثر باشد

حتی جنسیت کاربر هم می‌تواند در انتخاب رنگ دکمه CTA موثر باشد

رنگ قرمز ممکن است شما را در مسابقات ورزشی برنده کند. می‌توانید با فنجان کرم و نارنجی، نوشیدنی‌های خوشمزه‌تر سرو کنید. اما برای دکمه CTA چه رنگی استفاده کنیم؟ برای بیشتر کردن شانس دریافت کلیک، کدام رنگ بهتر است؟ کدام رنگ به بهبود نرخ تبدیل کمک بیشتری می‌کند؟

قرمز یا سبز؟ یک جنگ تمام عیار برای چند کلیک بیشتر

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

بهترین کار برای فهمیدن اعتبار این فرضیه‌ها، انجام تست A/B است. در ظاهر، سبز به معنای حرکت و احساسات مثبت است؛ رویندگی و زندگی دوباره را نشان می‌دهد؛ با سبز شدن چراغ راهنمایی می‌توانید، حرکت کنید؛ «سبز شدن دامن» کنایه‌ای برای بچه دار شدن است؛ حتی لباس سبز، فرد را خوب و بی‌گناه نشان می‌دهد. در مقابل، قرمز رنگ به عنوان رنگ شر هم شناخته می‌شود. در تعزیه‌خوانی‌ها، سبز در مقابل «رنگ قرمز» قرار دارد. به چراغ راهنمایی قرمز به معنای توقف است. قرمز به معنی خطر، هشدار و ممنوعیت است. اما این رنگ هیجان و انرژی زیادی هم دارد. بنابراین شما فکر می‌کنید کدام رنگ پیروز شود؟ سبز یا قرمز؟

آزمایش اول

بررسی سایت Dmix، نشان داد که نرخ کانورژن با دکمه قرمز رنگ، 34% افزایش پیدا می‌کند. در این تحقیق، 600 مورد بررسی شد و عملاً رنگ قرمز، برنده آزمایش بود.

در آزمایش سایت Dmix، نرخ تبدیل با دکمه قرمز 34% افزایش پیدا کرد

در آزمایش سایت Dmix، نرخ تبدیل با دکمه قرمز 34% افزایش پیدا کرد

آزمایش دوم

دومین آزمایش توسط HubSpot اجرا شد. فرضیه یکسان بود اما در نهایت قرمز برنده شد و نه سبز. پس از چند روز و بررسی بیش از 2000 بازدید، تعداد کلیک دکمه قرمز 21% از دکمه سبز بیشتر بود.

در آزمایش سایت HubSpot، نرخ تبدیل با دکمه قرمز 21% افزایش پیدا کرد

در آزمایش سایت HubSpot، نرخ تبدیل با دکمه قرمز 21% افزایش پیدا کرد

آزمایش سوم

در آزمایش سوم که از طرف سایت VWO برای یک سایت فروش آنلاین موبایل انجام شد، از لینک ساده، دکمه سبز و دکمه قرمز استفاده شد. باز هم دکمه قرمز رنگ، برنده آزمایش بود.

در آزمایش سایت VWO، نرخ تبدیل با دکمه قرمز بهتر از دکمه سبز و لینک ساده بود

در آزمایش سایت VWO، نرخ تبدیل با دکمه قرمز بهتر از دکمه سبز و لینک ساده بود

دکمه CTA به خودی خود، می‌تواند تفاوت ایجاد کند

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

سایت‌های ایرانی از کدام رنگ بیشتر استفاده می‌کنند؟

قبل از هر چیز این عکس را ببینید:

صفحه اول سایت دیجی کالا (سال 1386 - 2007) که هیچ شباهتی به سایت امروزی ندارد

صفحه اول سایت دیجی کالا (سال 1386 - 2007) که هیچ شباهتی به سایت امروزی ندارد

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

در صفحه خرید محصول، با دکمه CTA صورتی رنگ روبرو می‌شویم

در صفحه خرید محصول، با دکمه CTA صورتی رنگ روبرو می‌شویم

اگر همین صفحه را با دکمه سبزرنگ در نظر بگیریم چه؟ آیا به همان اندازه قبلی جذاب و فریبنده است؟

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

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

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

اگرچه دیگر ثابت شده که ترک عادت موجب مرض نیست، اما گاهی پیروی کردن از الگوی یکنواخت و همیشگی و عادت دادن کاربران به دیدن یک یا چند چیز، می‌تواند تاثیری بیشتری نسبت به تغییرات داشته باشد.

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

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

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

حالا اگر همین ترکیب را با دکمه‌های رنگ اسکار در نظر بگیریم، چه پیش می‌آید؟ نتیجه بهتر است یا بدتر؟

دکمه CTA صورتی رنگ در صفحه داخلی منتوریکس گم می‌شود و یقیناً تعداد کلیک آن افت خواهد کرد

دکمه CTA صورتی رنگ در صفحه داخلی منتوریکس گم می‌شود و یقیناً تعداد کلیک آن افت خواهد کرد

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

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

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

جمع بندی حرف‌هایمان چه شد؟

استفاده از CTA بهتر از استفاده نکردن از دکمه‌های CTA است. چشم کاربر در صفحه، به دنبال عناصر متمایز، بزرگ و جذاب می‌گردد. بنابراین استفاده از رنگ اهمیت زیادی دارد. اما اینکه کدام رنگ بهتر است، به ساختار صفحه و هویت بصری سایت شما برمی‌گردد. آن رنگی که در یک سایت معروف استفاده می‌شود، لزوماً نمی‌تواند باعث بیشتر شدن تعداد کلیک شما شود. سبز و قرمز تنها دو رنگ از رنگ‌هایی است که می‌توانید استفاده کنید. آبی، نارنجی، زرد و بنفش هم می‌تواند برای طراحی دکمه CTA مناسب باشد. اما انتخاب آن‌ها تنها به آزمایشات و نتایج شما وابسته است. به جای استفاده از الگوهای موفق سایت‌های دیگر، خودتان دست به کار شده و تست کنید. تغییرات رنگ دکمه CTA را با تست A/B، آزمایش کنید. تنها با این روش است که می‌توانید به دریافت کلیک واقعی و بهبود نرخ تبدیل (Conversion rate) امیدوار باشید.

سینا یوسفی
سینا یوسفی

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

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

ما نظرات و سوالات شما را با دقت می‌خوانیم و پاسخ می‌دهیم
بهناز
1401/02/20
ممنونم از متن بسیار خوب و کاملتون. یک ایراد کوچیک در متن دیدم اگر اشتباه نکنم: "دومین آزمایش توسط HubSpot اجرا شد. فرضیه یکسان بود؛ قرمز برنده است سبز"
پاسخ...
سینا یوسفی
1401/02/20
سلام و درود بهناز عزیز؛
خیلی خوشحالم که مطالب بلاگ رو با این دقت، ریزبینی و نکته‌سنجی می‌خونی.
حرفت کاملاً درسته و مطلب به درستی نوشته نشده بود. از اینکه به اصلاح و بهتر شدن مطلب ما کمک کردی، ازت ممنونم.
نظرات تعداد کاراکترهای باقی مانده: 300
انصراف