همه چیز درباره بهینه سازی دکمه  CTA

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

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

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

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

حالا باید به این موضوع بپردازیم که دکمه CTA باید چگونه باشد. اول از شکل آن شروع می‌کنیم.

شکل واحد و اصلی دکمه اقدام به عمل

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

چند CTA در یک صفحه

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

یک نمونه CTA خلاق

اما تقریبا شکل اصلی CTA به صورتی بین المللی به این صورت است

CTA

رنگ دکمه CTA

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

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

رنگ متضاد روبه‌روی رنگ اصلی قرار گرفته است

به نظر شما دیجی کالا رنگ مناسبی را برای CTA انتخاب کرده است؟

رنگ CTA دیجیکالا

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

CTA آمازون

حال به این موضوع بپردازیم که CTA کجای صفحه قرار بگیرد.

اقدام به عمل را کجای صفحه قرار دهیم

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

مانند این الگو:

جای قرارگیری CTA

اما این در نسخه‌های دسکتاپ است، برای نسخه‌های موبایل کار خیلی جالب‌تر است.

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

مانند این تصویر

CTA شناور

در CTA چه بنویسیم

در تمام دکمه‌های CTA چیزی نوشته شده است. این کلام هم چیز جادوگری است. شما خیلی نمی‌توانید هر چیزی را در این کادر رنگی خاص جای دهید.

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

• کار شما خدماتی است بگویید: تماس بگیرید
• فروش کالا دارید: خرید / اضافه کردن به سبد خرید/
• چیزی را می‌خواهید از روی سایت شما برای جایزه دانلود کنند. بنویسید: دانلود کنید
• برای ثبت نام هم، ساده‌تر از هر زمانی بگویید: ثبت نام کنید.

البته در کنار این درخواست‌های ساده یک سری قید‌ها هم وجود دارد که بسیار کارایی دارند.

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

باز هم تأکید می‌کنم، این موارد در بیشتر اوقات جواب می‌دهد. اما شما باید به کسب و کار خود نگاه کنید و مورد مناسب را انتخاب کنید.

استفاده از قید‌ها در CTA

هدایت به سوی CTA

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

مانند این تصویر

CTA

قسمتی که در بالا آمده عملا یادآوری ارزش کلیک کردن برروی CTA است.

دیگر چه می‌خواهد

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

CTA

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

CTA

تجربیات خود را با ما به اشتراک بگذارید.