رابط کاربری معمولا از عناصر مختلفی تشکیل می شود که هر یک از آن ها نقش مهمی در کارآیی تجربه کاربری و همچنین نرخ تبدیل وب سایت ها دارند. حتی اجزای کوچک مانند دکمه ها نیز به توجه بسیار زیادی نیاز دارند تا بتوانند اهدافی را که انتظار می رود، برآورده کنند. در این مقاله قصد داریم تا انواع طراحی CTA را با یکدیگر بررسی کنیم و نکات کاربردی هر کدام را بدست آوریم. در ادامه با من همراه باشید.
دکمه CTA چیست؟
دکمه دعوت به اقدام یک عنصر UI تعاملی است که هم در دنیای وب وجود دارد و هم در دنیای تلفن های همراه. هدف اصلی آن ترغیب مردم به انجام اقدام خاصی است که صفحه به همان دلیل ایجاد شده است. به عنوان مثال در سایت های فروش کفش می توان دکمه را افزودن به سبد خرید دانست.
ارسال شماره، ایمیل و افزایش خرید می توانند اهداف اصلی این دکمه ها و در نهایت کسب و کار اینترنتی باشند. هنگامی که یک دکمه به اندازه کافی جذاب باشد تا بتواند بلافاصله توجه مشتریان را به خود جلب کند می تواند آنها را فریب دهد تا کلیک کنند و به مرحله بعدی مانند پر کردن فرم تماس یا سفارش محصول بروند. وقتی همه خصوصیات به طور مناسب کار شود ، دکمه CTA شانس بیشتری برای انجام وظایف خود دارد.
اما چگونه می توان این جنبه ها را قدرتمند کرد؟ در اینجا چند نکته عملی در زمینه ایجاد طراحی کافی دکمه CTA آورده شده است.
1. دکمه ها را کلیک کنید
وظیفه اول هر CTA این است که کاربران روی آن کلیک کنند ، بنابراین طراحی آنها باید با هدف مطابقت داشته باشد. به همین دلیل مهم است که اطمینان حاصل کنید که همه عناصر تعاملی مانند همین دکمه های CTA قابل کلیک هستند.
چه چیزی می تواند یک دکمه را کلیک کند؟ اول از همه ، وقتی طراحان جلوه ای سه بعدی به آن اضافه می کنند ، ممکن است یک دکمه بیشتر کلیک شود. به عنوان مثال ، CTA با کمی شیب یا سایه کوچک معمولاً تمایل به فشار دادن یک دکمه را به شما نشان می دهد زیرا برجسته تر به نظر می رسد.
2. اندازه مناسب را انتخاب کنید
اندازه یکی از رایج ترین ابزارهایی است که به ترتیب مولفه های UI با توجه به اهمیت آنها کمک می کند. هرچه یک عنصر بزرگتر باشد ، بیشتر مورد توجه قرار می گیرد. از آنجا که هدف قبلی CTA جلب توجه کاربران است ، طراحان معمولاً سعی می کنند تا آنها را در میان سایر دکمه های صفحه به ویژه از طریق اندازه قابل توجه برجسته کنند.
دکمه های بزرگ شانس زیادی برای توجه و کلیک دارند ، باید محدودیت هایی را حفظ کنید. یک دکمه جذاب برای عمل معمولاً به اندازه کافی بزرگ است که به سرعت پیدا می شود اما خیلی بزرگ نیست تا ترکیب بصری و سلسله مراتب طرح خراب نشود. طراحان شرکت های بزرگ همواره توصیه هایی در مورد اندازه موثر دکمه ها ارائه می دهند. به عنوان مثال ، اپل می گوید CTA ها در رابط کاربری تلفن همراه باید حداقل 44*44 پیکسل باشد ، در حالی که مایکروسافت 34*26 پیکسل را توصیه می کند.
3. رنگ های متضاد را اعمال کنید
انتخاب رنگ به جنبه های مختلفی بستگی دارد که روند کار را پیچیده تر می کند. طراحان باید فاکتورهایی مانند رنگ اصلی، ترکیب رنگ اصلی و همچنین ویژگیهای روانشناختی مخاطب را در نظر بگیرند.
یک شرط وجود دارد که باید به خاطر داشته باشید هنگام انتخاب رنگ برای CTA بسیار مهم است: دکمه ها و رنگ پس زمینه باید به اندازه کافی متضاد باشند تا CTA از سایر اجزای UI متمایز باشد. به عنوان مثال ، اگر یک طراح از پالت رنگ آبی برای چیدمان استفاده می کند ، بهتر است از رنگ قرمز یا زرد برای دکمه های CTA استفاده شود. بهترین نمونه های که از رنک متضاد استفاده کرده اند را می توان در صفحه طراحی وب سایت ویستا مشاهده کرد
4. کلمات کمتر، دعوت به اقدام قوی تر
متن دعوت به اقدام در واقع تماسی است که به کاربران می گوید در صورت کلیک بر روی دکمه ، چه اتفاقی رخ می دهد. متن CTA باید توجه کاربران را به سرعت جلب کرده و آنها را به سمت عمل سوق دهد.
برای برقراری یک فراخوان موثر، باید تعداد کلمات را به حداقل برسانید. چند کلمه مناسب انتخاب شده بسیار سریعتر از یک عبارت توصیفی طولانی عمل می کنند. علاوه بر این ، با استفاده از موارد ضروری در CTA ، شما دستورالعمل های قوی و مستقیمی را در مورد آنچه که کاربران می توانند در مرحله بعدی انجام دهند ارائه می دهید.
5. مسیر کاربر را در ذهن نگه دارید
اندازه بزرگ و رنگ های روشن ابزاری موثر برای جلب توجه کاربران است اما قرارگیری هوشمند می تواند شانس توجه بیشتر CTA ها را افزایش دهد. مسیر کاربر ، همچنین به عنوان سفر کاربر شناخته می شود. مسیری است که کاربران در یک محصول دیجیتالی برای انجام یک کار خاص ، به عنوان مثال یک خرید آنلاین ، دنبال می کنند. جریان کاربران به ایجاد UX از این طریق کمک می کند تا افراد بتوانند گام به گام به هدف خود برسند و داده ها را به تدریج دریافت کنند.
با در نظر گرفتن سفر کاربر ، می توانید جایگاه کارآمد را برای دکمه های CTA انتخاب کنید. به عنوان مثال ، برای ایجاد یک طرح صفحه فرود باید مطمئن شوید که کاربران دکمه CTA "ثبت نام" را پس از خواندن اطلاعات مربوط به پیشنهاد یا خدمات پیدا می کنند. به این ترتیب کاربران درک می کنند که در چه چیزی ثبت نام می کنند. درصورتی که افراد قبل از خواندن اطلاعات چنین دکمه CTA را ببینند ، احتمال اینکه آنها را نادیده بگیرند زیاد است.
6. از فضای سفید به عنوان یک ابزار استفاده کنید
فضای سفید که به آن فضای منفی نیز می گویند ، ناحیه ای بین عناصر در ترکیب طراحی است. مردم معمولاً از نقش بزرگ فضا اطلاع ندارند ، اما طراحان باید توجه زیادی به آن داشته باشند.
فضای سفید فقط پس زمینه یک ترکیب تصویری نیست. این برنامه اغلب به عنوان ابزاری قدرتمند برای تأکید بر عناصر UI استفاده می شود. اگر رابط کاربری شامل بسیاری از اجزای بصری باشد ، یک دکمه CTA می تواند در یک صفحه یا بخش گم شود. فضای سفید مناسب در اطراف یک دکمه با توجه به بیشتر شدن توجه کاربران باعث جلب توجه آنها می شود.
علاوه بر این ، فضای سفید ارتباط بین عناصر UI را تنظیم می کند. هرچه فضای سفید کمتری بین اجزا وجود داشته باشد ، بهم پیوسته تر می شوند. بنابراین ، اگر عناصری وجود دارند که می توانند از فراخوان برای اقدام پشتیبانی کنند ، به عنوان مثال ، توضیحات یا عکس ، سعی کنید فضای بین آنها و دکمه را کاهش دهید تا تأثیر مضاعفی بر عملکردهای کاربران بگذارد. برای نمونه میتوانید از صفحه ای که در ادامه به آن اشاره شده استفاده کنید.
https://vistaapp.ir/شرکت-طراحی-سایت/
7. برخی اطلاعات اضافی را اضافه کنید
همانطور که در بالا گفتیم ، کوتاه نگه داشتن متن CTA بسیار مهم است تا بتواند به سرعت مورد توجه قرار گیرد. اما وقتی مخاطب متوجه فراخوان می شود ، تهیه برخی داده های اضافی نیز ممکن است مفید باشد. این موضوع می تواند اطلاعات کوچکی باشد که در مورد مراحل بعدی توضیحاتی می دهد. به عنوان مثال ، می توانید توضیح دهید که مراحل ثبت نام 15 ثانیه بیشتر طول نمی کشد یا یادآوری کنید که ثبت نام رایگان است. یک اظهار نظر کوچک می تواند علاقه کاربران را افزایش دهد و آنها را ترغیب به اقدام کند.
8. تست A/B را اجرا کنید
اگر می خواهید مطمئن شوید که چیزی به خوبی کار می کند ، باید آن را آزمایش کنید. این قانون طلایی در حوزه های مختلف از جمله طراحی UI یک امر ضروری است. تحقیق و تجزیه و تحلیل کاربر به طراحان کمک می کند تا مشخصات مخاطب را مشخص کنند اما دقیقاً می توان فهمید که آیا تصمیمات طراحی بهترین هستند به همین دلیل آزمون ها می توانند به یک راه حل کافی برای رفع شک و تردید تبدیل شوند.
یکی از کارآمدترین روش های آزمایش CTA ، تست A / B است. این تست دو نسخه از یک محصول دیجیتال را با هم مقایسه می کند تا بداند کدام یک عملکرد بهتری دارد. یک تیم خلاق کاربران را به دو گروه تقسیم می کند و انواع مختلفی به هر یک از آنها نشان داده می شود. یک نیمه نسخه را می بیند ، دیگری نسخه دوم را. چنین رویکردی به تعیین یک راه حل سودآورتر کمک می کند.
تفاوت بین گزینه های A و B از کوچکترین به گزینه مهم متفاوت است. به عنوان مثال ، در مورد دکمه های CTA ، طراحان می توانند مکان ، اندازه ، رنگ یا میکروکپی خود را تغییر دهند. برای دریافت نتایج دقیق تر ، توصیه می شود هر بار یک جنبه را آزمایش کنید ، به عنوان مثال فقط رنگ یک دکمه. به این ترتیب می توانید تشخیص دهید که کدام عامل تفاوت ایجاد می کند.
اثربخشی را می توان با معیارهای مختلفی مانند کلیک ، تعداد اشتراک ، یا میزان فروش اندازه گیری کرد. انتخاب معیارها به اهدافی که یک شرکت یا یک تیم خلاق تعیین کرده اند بستگی دارد. در بعضی موارد ، برای دستیابی به بینش عمیق تر در هر جنبه ، ممکن است خوب باشد که چند معیار را در حین آزمایش ترکیب کنید. به عنوان مثال ، می توانید رنگ دکمه اندازه گیری تعداد کلیک و اشتراک را آزمایش کنید.
برای ایجاد یک دکمه قدرتمند فراخوان به عمل ، طراحان باید روی اهدافی که در پشت آن قرار دارد تمرکز کنند. CTA با اندازه ، رنگ و جای مناسب ، به سرعت علاقه کاربران را به خود جلب می کند و میکروکپی کافی آنها را ترغیب می کند تا اقدامات دلخواه خود را انجام دهند.