هنگامی که در یک طراحی، تمام اجزای آن به خوبی طراحی شود، دکمه ها نه تنها باعث حرکت موثر کاربر در صفحه محصول شما می شود بلکه کمک بسیار زیادی به تبدیل شدن کاربر به مشتری شما می کند.
اینک بخواهید توجه کسی را جلب کنید هرگز آسان نخواهد بود، به خصوص در این دوره که کاربران را با انواع کارها و ترفند ها بمباران می کنند. که این کار به طور کلی مقدار توجه افراد را تا حدود ۸.۲۵ ثانیه کاهش می دهد. به همین دلیل است که اکثر استارت آپ های برتر با یک سبک رابط کاربری حداقلی به منظور کاهش تعداد عناصر منحرف کننده در صفحه طراحی شده اند.
تمرکز کردن روی عناصر کلیدی خاص در یک طراحی، باعث افزایش اهمیت و کارایی آن می شود، در نتیجه تبدیل نرخ بهتر می شود. یکی از عناصر کلیدی اصلی “دکمه CTA” است که برای اکثر وب سایت ها و محصولات ضروری می باشد.این دکمه به گونه ای باید طراحی شود که به کاربری امکان انجام اقدامات خاص و آسان را بدهد، مانند ایجاد یک حساب کاربری، افزودن به سبد خرید، خرید یک محصول و مواردی دیگر.
هنگامی که این موارد به خوبی طراحی شوند باعث می شود تا کاربر با یک ارتباط موثر در جریان کار قرار گیرد و راحتتر و با احساس بهتر کار خود را انجام دهد. هدف از نوشتن این پست برجسته کردن و گفتن برخی از دستورالعمل های کلیدی است که من در هنگام طراحی بهتر دکمه های CTA به همراه مثال هایی از وب سایت های مختلف برایتان خواهم گفت تا به شما در درک بهتر چگونگی ترکیب این خصوصیات کمک کند.
۱- مختصر باشید
یکی از اصلی ترین اصول برجسته که توسط آلیسون رونگ در گوگل بود، UX Writer می باشد. کمتر یا بیشتر است، اما مختصر فقط به معنای کوتاه بودن نیست، این یک تعادل بین تعداد کلمات استفاده شده می باشد و پیامی است که این کلمات با هم دارند. هنگامی که هر کلمه دارای یک هدف است پیام را مختصر می گوییم. UX Writer، یک صفحه فرود با نسخه استفاده شده در دکمه CTA ، کاملا متفاوت است. یکی برای انتقال و بیان یک پیام طولانی و مفصل از مزایا و کاربرد محصول شما برای کاربر مورد استفاده قرار می گیرد و مورد دیگر شروع کار مربوط به دکمه با استفاده از کمترین کلمه ممکن است.
۲- واضح و روشن باشید
زبان اصلی طراحی CTA شما به گونه ایست که فقط با ۲ یا ۴ کلمه کار خواهید کرد. پس باید دقت کنید کلماتی که انتخاب می کنید بر نحوه درک کاربر از عملکرد مورد نظر دکمه تاثیر می گذارد. استفاده از کلمات اشتباه نتایج و تجربه منفی را در بر دارد که باعث می شود تا کاربر ناراضی، تمایلی به پیشروی و انتخاب محصول نشود. برای مثال من دوست دارم در Airbnb از کلمه “رزرو” در صفحه خود بجای کلمه دیگری استفاده کنم . زیرا این کلمه مهلت ۲۴ساعته کاربر پس از ورود به سیستم برای گرفتن و شارژ کردن را به او اعلام می کند و هیچ ارتباط دیگر با پرداخت سریع ندارد.
۳- متمرکز شوید
همانطور که قبلاً ذکر شد، از دکمه ها می توان برای هدایت کاربر از طریق های مختلف استفاده کرد، اما علائم بیش از حد ممکن است به جای آگاهی دادن به کاربر باعث سردرگمی او شوند. مهم نیست که از دکمه های خود در یک رابط کاربری واحد استفاده کنید تا اطلاعات بیشتری به کاربر بدهید، زیرا هرچه انتخاب کاربر کمتر باشد، تصمیم گیری آسانتر خواهد بود. به همین دلیل است که فروشگاه های زنجیره ای محبوب مواد غذایی انتخاب های محدودی در فهرست های خود دارند. با ارائه تعداد محدودی از گزینه ها ، دکمه ها ، شما زندگی کاربر را آسان تر می کنید که در نهایت نرخ تبدیل شما را افزایش می دهد.
صفحه فرود Slite ، مانند همه صفحه های راه اندازی جدید، فقط یک دکمه تماس اصلی برای کاربر دارد. به راحتی می توانید تمام محصولات جدید موجود در بازار را مرور کرده و دریابید که بیشتر صفحات فرود آنها فقط شامل یک تماس اصلی برای انتخاب است. و یا اینکه برای دریافت محصول از کاربری بخواهید ثبت نام کند و مشترک شما شود و یا برخی اقدامات دیگری که میتوانید برای نرخ تبدیل انجام دهید. به عنوان یک طراح UX ، شما باید با کلیه کاربران و مشتری هایتان ارتباط برقرار کنید تا قبل از تصمیم گیری در مورد طراحی و ساخت دکمه و عملکرد، هدف اصلی تجارت را درک کنید.
۴- از رنگ های متضاد استفاده کنید
رنگی که برای دکمه های خود استفاده می کنید به عوامل مختلفی بستگی دارد. مانند رنگ پس زمینه، رنگ نام تجاری شما یا حتی ماهیت عمل مورد نظر شما که می خواهید انجام دهید. اگرچه رنگ مناسبی برای استفاده وجود ندارد، اما مهم است رنگی را که انتخاب می کنید متناقض با پیشینه و طرح قبلی باشد. اگر پس زمینه به رنگ آبی باشد، بهتر است از رنگ های زرد یا قرمز استفاده کنید تا ضربه ای را به کاربر ایجاد کنید. شما می توانید با یک کنتراست خوب، دکمه را در بین سایر عناصر برجسته نشان دهید و توجه کاربر را جلب کنید.
۵- از مکان های هوشمند استفاده کنید
اولین چیزی که چشم شما را جلب می کند چیست؟
در بالا اشاره کردم که رنگ های متضاد در جلب توجه کاربر موثر است ، اما استفاده از مکان های هوشمند می تواند این شانس را بیشتر کند. دو نوع مکان هوشمند وجود دارد. یکی با درک مدل ذهنی کاربر و دوم با جستجوی کاربر. مدل های ذهنی از طریق استفاده مکرر از یک سیستم و درک نحوه عملکرد آن شکل می گیرد. اگر از شما خواستم بدون اینکه به صفحه نگاه کنید، به جایی که دکمه ثبت نام در آن واقع شده است، اشاره کنید؟ احتمالاً می توانم ذهن شما را بخوانم و حدس بزنم که شما به گوشه بالا سمت راست فکر کرده اید. با درک نحوه استفاده کاربران از سیستم های خاص، می توانید CTA های خود را در مکان های مناسب قرار دهید.
برای حالت دوم، با درک جستجوی کاربر، می توانید حرکت چشمی آنها را پیش بینی کرده و با طراحی صفحه، آنها را به سمت CTA سوق دهید. به عنوان مثال، برای اکثر صفحات فرود، بنر آن دارای یک هدر، عنوان و در آخر دکمه CTA می باشد. کاربر بعد از خواندن اطلاعات صفحه، شانس بالاتری برای کلیک کردن روی CTA دارد.
۶- سلسله مراتب بصری را پیاده سازی کنید
بیشتر اوقات، دکمه های CTA به یک شکل ساخته می شوند. مانند “ورود به سیستم و ثبت نام” ، “تأیید و لغو” و غیره به همین دلیل مهم است که CTA اولیه خود را مشخص کنید و یک سلسله مراتب بصری ایجاد کنید تا این موضوع مورد توجه قرار گیرد. این کار می تواند با طراحی دکمه اولیه به صورت جسورانه تر (با استفاده از یک رنگ متضاد) و قرار دادن آن در سمت راست انجام شود. در حالی که کار دیگری می تواند با استفاده از یک دکمه با ظاهر فریبنده یا فقط یک لینک متنی ساده ارائه شود.
اجرای یک سلسله مراتب تصویری واضح، کاربر را به سمت کار مورد نظر خود راهنمایی می کند که از راه های زیادی برای رسیدن به اهداف کمک می کند.
۷- تست، تست و تست
در حالی که نکات فوق به طور قطع برای بهبود طراحی دکمه شما کمک زیادی می کند، اما تنها راه برای کامل کردن دکمه CTA شما، انجام چندین آزمایش A / B است تا بدانید چه چیزی برای کاربران شما بهتر است. کپی، رنگ ها، اندازه، محل قرارگیری، شکل و سبک آن بر اساس طراحی رابط شما و شخصیت کاربر متفاوت خواهد بود.
برای طراحی کامل دکمه CTA، طراحان باید بر روی اهداف اصلی مورد نظر متمرکز شوند و اثربخشی آن را از بسیاری از تست های A / B بسیار زیاد ارزیابی کنند. یک دکمه با اندازه، رنگ، کپی و محل مناسب، به طور موثر توجه کاربران را به خود جلب می کند و آنها را ترغیب به انجام کار و هدف مورد نظر می کند.
در صورتی که تمایل به همکاری با ما دارید یا می خواهید در مورد UI / UX صحبت کنیم، می توانید در قسمت نظرات برای ما بنویسد.
طراحی مبارک!
