button CTA

دکمه‌ CTA یا Call To Action چیست؟

بدون ديدگاه

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

دکمه‌ CTA چیست؟

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

چند نمونه دکمه‌ CTA

دکمه ثبت فرم

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

دکمه ثبت فرم

دکمه معرفی محصول و یا خدمات

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

 

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

دکمه ترغیب خرید

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

دکمه ترغیب خرید

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

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

دکمه هدایت کاربر
دکمه‌ی CTA که در سایت دریبلبه کار رفته است. تا کاربر را ترغیب کند که در این سایت عضو شوید.

اگر بخواهیم به چند نمونه از دکمه‌های CTA دیگری که در یک وبسایت استفاده می‌شود اشاره کنیم می‌توانیم به دکمه‌های اشتراک گذاری و دکمه‌های مربوط به یک رخداد (مانند: دکمه تخفیف بهاره) اشاره کنیم.

رنگ بندی دکمه‌های CTA

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

قرمز

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

زرد

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

نارنجی

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

آبی

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

سبز

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

نکات کلیدی

در ادامه به چند نکته کلیدی اشاره می‌کنیم که تاثیر زیادی بر دکمه‌ CTA دارد:

  • از متن‌های مناسب در دکمه‌ها استفاده کنید. استفاده از واژه‌های جذابی مانند “این دوره آموزشی رو امتحان کنید” یا “دانلود کنید” به جای کلمات کسل کننده‌ای مانند “این دوره آموزشی را نگاه کنید” یا “دانلود”، در طراحی دکمه شما تاثیر بهتری خواهد داشت. البته این نکات برای یک سایت رسمی مانند یک سایت خبر می‌باشد و اگر سایت شما یک فضای صمیمانه‌تر و دوستانه‌تری دارد می‌توانید از کلماتی مانند: “خیلی وقته منتظرتیم” و “بزن بریم” استفاده کنید
  • استفاده از فونت‌های شناخته شده و عالی برای دکمه‌ CTA تاثیر خوبی دارد
  • استفاده از  آیکن‌هایی که مربوط به متن دکمه است مانند آیکن سبد خرید در دکمه سبد خرید(عملا شما با گذاشتن آیکن سبد خرید داخل یک دکمه، نیازی به نوشتن متن “سبد خرید” درون آن ندارید)
  • از متن‌های کوتاه و مختصر استفاده کنید ولی سعی کنید مطلب را به طور کامل به مخاطب برسانید.
  • کاربر را وادار کنید که مهلت کمی برای انتخاب کردن دارد. این کار با استفاده از جملاتی مانند “۱۵ روز دیگه وقت داری” و از این قبیل جملات، قابل انجام است
  • محل قرار گرفتن دکمه در نقاطی باشد که کاربر راحت بتواند آن را پیدا کند
  • کنتراست رنگ دکمه با رنگ متن هماهنگ باشد. مثلا اگر می‌خواهید از رنگ‌های سفید برای طراحی دکمه استفاده کنید، رنگ متن داخل آن باید تیره باشد. اگر می‌خواهید از رنگ‌های تیره برای دکمه استفاده کنید، رنگ متن داخل آن را سفید انتخاب کنید.

 

 

 

نوشتن دیدگاه

نشانی ایمیل شما منتشر نخواهد شد.