ایده ای برای طراحی دکمه ای که کاربر روی آن کلیک کند

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

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

خب حالا باید چه جوری یک دکمه call-to-action خوب طراحی کنیم که کاربر را به کلیک کردن تشویق کند؟ با این مطلب همراه باشید تا تعدادی ترفند طراحی را بررسی کنیم و مثال‌های واقعی از سایت‌های مختلف را ببینیم.

اندازه دکمهcall to action چقدرباشد؟

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

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

دکمه CTA باید چه رنگی باشد؟

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

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

ظاهر دکمه CTA را قابل کلیک کردن کنید

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

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

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

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

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

برای مثال در تصویر زیر می‌بینید که آبی تیره با زرد در پس زمینه بسیار جور در آمده و دکمه دوم با رنگ طلایی، انگار اهمیت کمتری پیدا کرده است.

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

به محل قرار گیری دکمه CTA دقت کنید

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

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

متن  دکمه CTA

با متن دکمه CTA کاربر را هدایت کنید

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

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

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

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

با متن دکمه CTA با کاربر تعامل ایجاد کنید

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

متن دکمه CTA را کوتاه و خلاصه انتخاب کنید

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

اضافه کردن علائم و نشانه‌ها روی دکمه CTA

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

از تست A/B استفاده کنید

حالا که تمام نکات درباره طراحی دکمه‌های CTA را بررسی کردیم بهتر است رفتار کاربران را هم مطالعه کنیم و بینیم کدام یک از طراحی ‌های ما، بازدهی بیشتری دارد.
می‌توانید با استفاده از تست ببینید که چه رنگ و چه متنی برای دکمه مناسب تر هستند. در ادامه در تصاویر زیر می‌توانید تست A/B دکمه‌های CTA را مشاهده کنید.

جمع بندی

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