چگونه یک دکمه‌ی Call To Action عالی طراحی کنیم؟

4 رای

در کمپین‌های تبلیغی آنلاین، ایمیل مارکتینگ، لندینگ‌پیج، صفحه‌ی دانلود نرم‌افزار و … ما از کاربر می‌خواهیم که کاری را انجام دهد. مثلا ایمیل خود را وارد کند، محصولی را دانلود کند و … معمولا این کار با کلیک روی یک دکمه اتفاق می‌افتد، به بخشی( دکمه‌ای) که این کار را انجام می‌دهد. Call To Action می‌گوییم […]

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

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

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

به ایمیل‌های تبلیغی، وبسایت‌هایی که چک می‌کنید یا اپلیکیشن‌های نصب شده در گوشی‌تان توجه کنید تا دکمه‌های CTA را ببینید.

دکمه Call To Action استفاده شده در صفحه‌ی اول سایت همیار آکادمی

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

هرچقدر این دکمه را بهتر طراحی کنیم، نرخ کلیک روی آن بیشتر خواهد بود. در ادامه به شما خواهیم گفت چگونه یک دکمه‌ی Call To Action عالی طراحی کنیم. راستی یکی از مزیت‌های دوره آموزش طراحی سایت همیارآکادمی توجه به همین اصول (ui/ux) برای بهبود تجربه‌ی کاربری است.

چگونه یک دکمه‌ی Call To Action عالی طراحی کنیم؟

اندازه‌ی دکمه

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

پیشنهاد اپل برای اندازه‌ی دکمه‌های CTA در موبایل 44×44 پیکسل است اما پیشنهاد ما این است که از دکمه‌های کشیده استفاده کرده و نسبت به صفحه و اندازه‌ی متن، انداره‌ی دکمه را انتخاب کنید.

رنگ و شکل دکمه

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

معانی رنگ‌های پرکاربرد در طراحی دکمه‌ی CTA:

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

معانی شکل‌های پر کاربرد:

  • مربع و مستطیل: نظم، قدرت، شجاعت، امنیت، اطمینان‌بخش
  • مثلث: هیجان، خطر، تعادل، ثبات
  • دایره و بیضی: ابدیت، زن، جهان، سحر و جادو، رمز و راز

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

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

شما روی کدام دکمه کلیک می‌کنید؟

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

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

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

  • الگوی F برعکس: در این الگو کاربر ابتدا نگاهی به سطر اول می‌اندازد، بعد صفحه را اسکرول می‌کند و دوباره یک سطر کوتاه را نگاه می‌کند و در نهایت اسکرول را تا پایین صفحه می‌کشد.
  • الگوی Z  برعکس: این الگو معمولا برای متن‌های کوتاه است. در این الگو کاربر ابتدا سطر اول را نگاه می‌کند بعد نگاهش را به اول بخش‌های انتهایی متن می‌برد و یکی از آخرین سطرها را نگاه می‌کند.

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

بخش‌های دیگر دکمه‌ی CTA

معمولا یک دکمه‌ی CTA شامل دو متن می‌شود، یک متن کوتاه توضیح در کنار دکمه و متنی که درون دکمه نوشته می‌شود.

  • متن توضیح باید کوتاه و واضح باشد. این متن باید بگوید با کلیک روی دکمه چه چیزی نصیب کاربر می‌شود. این متن باید کاملا مثبت باشد.
  • متن درون دکمه باید امری باشد. مثلا عبارت ثبت‌نام کنید خیلی بهتر از کلمه‌ی ثبت‌نام یا عضویت است.

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

افکت‌ hover، می‌تواند به افزایش نرخ کلیک کمک کند

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

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

علاقه‌مند به دنیای open source، وب و وردپرس

پاسخی بگذارید