« کلیک کنم یا نکنم؟»، این سوالی است که در ذهن کاربران، در زمانی که با دکمههای CTA روبرو می شوند به‌وجود می‌آید. هر چه تعداد دکمههای موجود، بیشتر باشد، کاربران زمان بیشتری برای تصمیم‌گیری نیاز دارند. آن‌ها باید هر یک از دکمهها را امتحان کنند تا بالاخره دریابند که کدام‌یک از آن‌ها، بیشتر با هدفشان مطابقت دارد. هرگونه «شک» و «نداشتن اطمینان»، باعث می‌شود که کاربر، هیچ کاری نکند یا کار اشتباهی انجام دهد. شما با آسان‌تر کرد فهم عملکرد دکمههای CTA خود، می‌توانید از سردرگمی کاربران جلوگیری کنید. وقتی کاربران درک کنند که کدام دکمه برای عملکرد موردنظر آن‌ها مهم است، قادرندکه انتخاب درستی انجام دهند. تعدادی تکنیک مربوط به تجربه کاربری وجود دارند که شما برای قابل‌فهم کردن عملکرد دکمههای خود، می‌توانید از آن‌ها استفاده کنید.
با توجه به ترتیب دیده‌شدن، دکمههای خود را بچینید!
یکی از ایرادات رایج طراحان، این است که دکمههای CTA اصلی خود را بالا صفحه قرار می‌دهند؛ چرا که می‌خواهند کاربران زودتر متوجه آن‌ها شوند. این کار، غیرضروری است؛ چرا که وزن بصری دکمههای CTA اصلی، موجب دیده شدن آن‌ها می‌شود. علاوه بر این، قرار دادن دکمه CTA اصلی در بالا صفحه، روال طبیعی بررسی ظاهری توسط کاربر را مختل می‌کند. کاربران باید تمام دکمهها را ببینند و سپس جهت دید خود را معکوس کرده و کل دکمهها را دوباره ببینند تا به دکمه CTA اصلی برسند. به‌جای مجبور کردن کاربران به بررسی مجدد دکمهها، دکمههای CTA اصلی را در آخر قرار دهید تا کاربران با یک بار دیدن دکمهها (از بالا به پایین)، بتوانند به دکمه CTA اصلی برسند. این کار، آزمودن هر دکمه را قبل از انتخاب، برای کاربر ممکن می‌کند. همچنین قسمت پایین صفحه برای دسترسی انگشت نیز آسان‌ترین حالت است که این موضوع نیز کارایی طراحی را بیشتر می‌کند.
به‌جای مجبور کردن کاربران به بررسی مجدد دکمهها، دکمههای CTA اصلی را در آخر قرار دهید تا کاربران با یک بار دیدن دکمهها (از بالا به پایین)، بتوانند به دکمه CTA اصلی برسند. این کار، آزمودن هر دکمه را قبل از انتخاب، برای کاربر ممکن می‌کند. همچنین قسمت پایین صفحه برای دسترسی انگشت نیز آسان‌ترین حالت است که این موضوع نیز کارایی طراحی را بیشتر می‌کند.
دکمهها را با استفاده از قاب از متن جدا کنید!
اشتباه دیگر این است که برای دکمههای کم‌اهمیت، صرفا از متن استفاده شود.. این ایده، انتخابی ضعیف برای یک دکمه CTA است؛ چرا که یک «نوشته»، شبیه به یک «دکمه» نیست. این کار باعث می‌شود دکمه، شبیه به یک متن ساده شود و کاربر آن را اصلا در نظر نگیرد.
نه‌تنها تشخیص دکمه‌هایی که از جنس متن هستند سخت‌تر است، بلکه آن‌ها بخش‌های کوچک‌تری هستند که لمسشان با دست نیز سخت‌تر است. برای این که دکمه‌هایی که اولویت کم‌تری دارند را قابل‌تشخیص‌تر و انتخابشان را آسان‌تر کنید، متن دکمه را درون یک قاب قرار دهید و از رنگ مشخصی استفاده کنید. حالا، دکمهها به‌شکل یک دکمه قابل‌کلیک ظاهر می‌شوند و دیگر با متن اشتباه گرفته نمی‌شوند و با دکمههای CTA اصلی هم رقابتی ندارند.
دکمههای مهم‌تر را «رنگی» کنید!
دکمه‌هایی که مهم‌تر هستند و اولویت بالاتری برایتان دارند، شناساییشان آسان‌تر است. دکمه CTA، دکمه‌ای ست که کاربر را مستقیما به هدفش می‌رساند. اگر از اولویت‌بندی دکمه‌هایتان مطمئن نیستید، در نظر بگیرید که کدام عمل کاربر را به سمت هدفش می‌برد و کدام‌یک از دکمهها، کاربر را از رسیدن به هدفش باز می‌دارد.
در مثال مذکور، دکمه «پرداخت» بیشترین اولویت را دارد؛ چرا که کاربران را با بیشترین سرعت به هدفشان می‌رساند. پس باید بیشترین وزن بصری و بالاترین کنتراست رنگ را داشته باشد؛ اما مشخص نیست کدام عمل اولویت «متوسط» دارد؛ «مشاهده سبد خرید» یا «ادامه خرید». عمل «مشاهده سبد خرید»، کاربران را به صفحه‌ای که سبد خریدشان را به آن‌ها نشان می‌دهد می‌برد که پس از آن، به بخش «پرداخت» هدایت می‌شود و در مقابل، دکمه «ادامه خرید»، کاربران را به صفحه‌های سایر محصولات باز می‌گرداند و از بخش پرداخت دور می‌کند!
بنابر تجزیه و تحلیل‌ها، «مشاهده سبد خرید» دارای اولویت متوسط و «ادامه خرید» دارای اولویت کم است. دکمه «مشاهده سبد خرید»، لایق وزن بصری و کنتراست بیشتری در مقایسه با دکمه «ادامه خرید» است. با فهمیدن هدف کاربر و آزمودن این که هر دکمه، تا چه حد کاربر را به هدفش نزدیک‌تر می‌کند، قادر به تشخیص اولویت دکمهها CTA خواهید بود. حالا، شما آماده‌اید که وزن بصری لازم و کافی را به هر دکمه اختصاص دهید.
رنگ، راهی تأثیرگذار برای مشخص کردن دکمههای اولویت-بالا است؛ چرا که بالاتر و متفاوت از متن سیاه‌رنگ قرار می‌گیرد و توجه کاربر را به خود جلب می‌کند. رنگی که در متن خود استفاده می‌کنید را در دکمهها مورد استفاده قرار ندهید. این کار باعث می‌شود که حخاصیت جدا بودن دکمه، از باقی اجزای صفحه، تضعیف شود و توجه به دکمه، کاهش یابد.
آبی، رنگی ایده‌آل برای دکمههای CTA است. تحقیقات نشان می‌دهد که رنگ آبی، توسط تمامی گروه‌های سنی و تمام جنسیت‌ها ترجیح داده می‌شود. همچنین این رنگ، رایج‌ترین رنگ برای لینک صفحات است که موجب شناخته‌شده‌تر بودن آن برای کاربران است. به‌علاوه، تحقیقات نشان داده‌اند که رنگ آبی، نوعی احساس امنیت، اعتماد و قابلتکیه بودن برای کاربران ایجاد می‌کند. کاربران بیشتر مایل‌اند که دکمه‌هایی که این جنس احساسات را در آن‌ها ایجاد می‌کنند را انتخاب و لمس کنند.
همچنین، یک رنگ تکراری را برای دو دکمه متفاوت انتخاب نکنید؛ چرا که کاربر متوجه نمی‌شود که کدام دکمه دارای اولویت بیشتری است و همچنین رنگ‌های مختلفی را هم برای چند دکمه استفاده نکنید؛ زیرا باعث می‌شوید که کاربر دچار سردرگمی شده و دنبال معنی هر رنگ بگردد. استفاده از چند رنگ، سبب می‌شود که همه دکمهها در نظر کاربر با وزن بصری یکسانی جلوه کنند. به‌جای استفاده از چند رنگ، از یک رنگ متمایز استفاده کنید، اما برای دکمه‌هایی که اولویت متوسطی دارند، مقدار روشنایی و شفافیت آن را تغییر دهید. این کار سبب می‌شود دکمه‌هایی که اولوت متوس دارند، وزن بصری سبک‌تری در مقایسه با دکمههای اولویت-بالاداشته باشند.. در این شرایط، دیگر این دو دکمه با یک‌دیگر رقابتی ندارند و برنده مشخص است.
برای بهبود کنتراست رنگ، می توانید تقارن صفحه را معکوس کنید؛ برای دکمههای CTA اصلی از متن‌هایی با رنگ روشن در پس‌زمینه‌های تیره استفاده کنید و برای دکمههای فرعی، از متن‌هایی با رنگ تیره، در پس‌زمینه روشن استفاده کنید. این کار، به دکمه‌هایی که عملکردی با اولویت بالاتر دارند، متنی درخشان‌تر می‌دهند و همچنین بیشترین اختلاف رنگ را برای آن‌ها به ارمغان می‌آورد.
اندازه قلم خود را متنوع کنید!
استفاده از ضخامت یکسان در تمامی برچسب‌های متن، سبب می‌شود که کاربران، مقدار تاکید یکسانی برای هرکدام از برچسب‌ها قائل شوند. بهتر است که اندازه قلم متن نوشته‌شده روی هر دکمه، متفاوت با دیگری باشد تا زمانی که کاربر به هر یک از آن‌ها نگاه می‌کند، اولویت آن‌ها برایش روشن باشد.
اندازه فونت‌نوشته‌های روی دکمهها را طوری تعیین کنید که دکمه‌هایی که بیشترین اولویت را دارند، بیشترین ضخامت را دارا باشند. سپس دکمه‌هایی که اولویت متوسطی دارند را کمتر ضخیم کنید و در نهیات، نوشته روی دکمههای کم-اولویت را با کم‌ترین ضخامت بنویسید. فراموش نکنید که باید از فونتی اتفاده کنید که اندازه‌های مختلف قلم را ارائه دهد. در مثال مذکور، برچسب «پرداخت»، ضخیم‌تر و روشن‌تر از سایر برچسب‌ها است. برچسب «مشاهده سبد خرید»، نیمه-ضخیم و «ادامه خرید» به صورت کم-ضخامت نوشته شده است. در نتیجه، برچسب‌های متن، بار ظاهری هر عمل را نشان می‌دهند.
در کمه‌های اولویت-بالا، از آیکون‌ها استفاده کنید!
آخرین تکنیک شما، چیزیست که دکمه های شما را برای کاربرانی که کوررنگی دارند، قابل‌دسترسی می کند. کاربرانی که کوررنگی دارند، قادر نخواهند بود که تفاوت میان وزن بصری دکمهها را متوجه شوند. آن‌ها به چیزی فراتر از رنگ نیاز دارند تا به‌عنوان نشانه‌های بصری برایشان عمل کند.
قرار دادن یک نماد در دکمههای CTA با اولوبت بالا، تاکیدی مضاعف برای جدا کردن آن از سایر دکمهها خواهد بود. با این کار، اگر برچسب و رنگ دکمه را حذف کنید هم، کاربران مبتلا به کور رنگی هنوز می‌توانند دکمه پرداخت را تشخیص دهند. آیکون‌ها، قابلیت جلب توجه دکمه را تقویت می‌کنند و تضمین می‌کنند که دکمه، بیشترین توجه را به خود جلب می‌کند. تحقیقات درباره ردیابی چشمی، نشان می‌دهد که المان‌های ظاهری، توجه چشم را بیشتر از متن به‌خود جلب می‌کنند.
آیا فهم عملکرد دکمههای CTA شما آسان است؟
اگر کاربران مدت زیادی را در صفحه انجام عملیات می‌گذرانند یا نرخ کلیک پایینی دارید، بدین معناست که فهم عملکرد دکمههای شما، آسان و مطلوب نیست. اگر مشکل این بود، از این تکنیک‌ها برای واضح‌تر کردنتجربه کاربری دکمههای فراخوان خود استفاده کنید. شما، تغییرات را در نسخه‌های پیشین و پسین خواهید دید و این موضوع، شما را بسیار متعجب خواهد کرد!
نکات کاربردی خیلی خوبی بود. بدون حاشیه و داستان.