سیستمی که به درستی ساخته شده باشد، کاربران را گمراه نخواهد کرد. عناصر تعاملی موجود در رابط باید به راحتی از جنبه‌های ثابت محیط وبسایت جدا شوند. دکمه‌هایی که به خوبی طراحی شده باشند، توجه کاربر را به خودشان جلب خواهند کرد و باعث می‌شوند تا کاربر دکمه را با سایر عناصر اشتباه نگیرد. افوردنس‌ها (affordance) در طراحی کنترل‌ها نیز بسیار کمک خواهند کرد. آن‌ها به کاربران می‌فهمانند که چه چیزهایی قابلیت کلیک شدن دارند. به همین دلیل استفاده‌ی درست از تگ‌هایی مانند شکل، اندازه یا رنگ بسیار اهمیت دارد. همین ویژگی‌ها باعث تبدیل شدن یک عنصر به دکمه خواهند شد.
1. شکل مهم است
کاربران به اشکال خاصی از دکمهها عادت کرده‌اند، بنابراین بهتر است از الگوهای معروف و محبوب استفاده کنید. رایج‌ترین دکمهها عبارتند از:
- دکمه‌های مربعی
- دکمه‌هایی با گوشه‌ی گرد
- دکمه‌های سایه‌دار
- دکمه‌های روحی
برخی از مطالعات نشان داده که گوشه‌های گرد باعث بهبود در پردازش اطلاعات می‌شود و توجه چشم را به مرکز عنصر جلب می‌کند. با این حال، دکمه‌های مستطیلیِ سایه‌دار را می‌توان جزو رایج‌ترین نوع دکمهها دانست. دکمه‌های گرد با آیکون، بیشتر در اپلیکیشن‌های موبایل محبوبیت دارند. اشکال ستاره‌ای یا مثلثی خیلی باب نیست، پس از بکار بردن اشکال غیرمعمول اجتناب کنید.
2. رنگ ناهماهنگ است
دکمه‌های CTA مسئول حساس‌ترین و بالاترین اقدامات موجود در صفحه هستند، بنابراین بهتر است از رنگ‌هایی با کنتراست بالا در عناصر اطراف و پس‌زمینه استفاده کنید. تمام CTAهای سیستم باید به یک رنگ باشند، زیرا با این کار کاربران اقدامات کلیدی را سریع‌تر تشخیص خواهند داد.
برای الهام گرفتن می‌توانید به سراغ اینترنت و وبسایت‌های مخصوص پالت‌های رنگی مانند Material Design Colors بروید.
رنگ‌ها برای اقدامات ثانویه باید کمتر اشباع شده باشند. بنابراین برای چنین کارهایی می‌توانید از دکمه‌های روحی استفاده کنید.
رنگ خاکستری هم برای دکمه‌های غیرفعال و رنگ متن مناسب است. اضافه کردن حالت فعال یک متد خوب در طراحی دکمه‌هاست. در این حالت رنگ دکمه با قرار گرفتن نشانگر ماوس بر روی آن تغییر خواهد کرد. در چنین شرایطی بهتر است از رنگ‌های روشن‌تر یا تیره‌تر همان پالت استفاده کرد. طراحان UX باید از الگوهای تاریک اجتناب کنند. گاهی اوقات تغییرات رنگ در دکمهها منجر به اقدامات ناخواسته از سوی کاربر می‌شود، بنابراین باید در انتخاب رنگ دکمهها بیشترین دقت را داشت. آخرین المان هم فضای سفید (Whitespace) نام دارد. اصطلاح فضای سفید در مورد رنگ سفید نیست. وجود فضای خالیِ مناسب در اطراف دکمه باعث می‌شود که کاربر دکمه را در بین متن و تصاویر گم نکند.
3. احساس درونی کاربران را دنبال کنید
دکمهها باید در مکانی مشخص قرار بگیرند. بنابراین آن‌ها را در محلی قرار دهید که کاربران انتظارش را دارند. مثلاً فرض کنید می‌خواهیم از دکمه‌های «بعدی» و «قبلی» استفاده کنیم. ما معمولاً دکمه «بعدی» را در سمت راست و دکمه «قبلی» را در سمت چپ قرار می‌دهیم. اگر دکمه «قبلی» را در سمت راست قرار دهیم، ممکن است کاربر به طور اتفاقی روی آن کلیک کند. دستورالعمل‌های طراحی رابط در اینترنت موجود است و به شما مکان درست دکمهها را نشان خواهد داد.
4. محتوای خوب ضروری است
برچسب دکمهها علاوه بر گمراه کردن کاربران، می‌توانند باعث سردرگمی نیز شوند. دکمه‌هایی که به خوبی طراحی شده باشند، به کاربران می‌فهمانند که پس از کلیک شدن چه اتفاقی رخ خواهد داد.
5. وزن دکمه با اندازه آن مشخص می‌شود
اندازه دکمه باید بیانگر وزن آن باشد. دکمه‌های بزرگ‌تر معمولاً نشان‌دهنده اقدامات مهم‌تری هستند. اگر مجبوریم از دو دکمه در صفحه استفاده کنیم، دکمه‌هایی با اولویت کمتر باید رنگ‌های روشن‌تری داشته باشند. نوع دستگاه نیز در اندازه دکمهها تاثیرگذار خواهد بود. از آنجایی که نشانگر ماوس خیلی کوچک‌تر از انگشت دست است، دکمهها در دسکتاپ می‌تواند خیلی کوچک‌تر باشند.
6. افراط درست نیست
از بکار بردن دکمه‌های اضافی خودداری کنید. اگر گزینه‌های زیادی را در اختیار کاربران قرار دهیم، آن‌ها سردرگم شده و سیستم را ترک خواهند کرد. قانون Hick می‌گوید:« زمان لازم برای تصمیم‌گیری، مستقیما با تعداد انتخاب‌ها افزایش می‌یاید.»
هنگام طراحی وبسایت باید به مهم‌ترین اقدامات کاربران فکر کنید. شاید پیش خودتان بگویید که دکمهها عناصری بسیار کوچک در صفحه هستند اما قواعد و راهکارهای زیادی برای طراحی آن‌ها وجود دارد. در حین طراحی دکمهها باید به هدف اصلی آن‌ها فکر کنید. دکمهها باید کاربر را به یک اقدام سازنده تشویق کنند. هر رابط، شبیه به یک گفتگو با کاربر است. در اینجا دکمهها عناصر حیاتی آن گفتگو هستند.
دکمهها می‌توانند تاثیرات مثبت و منفی در سیستم ما داشته باشند. آن‌ها تجربه استفاده از وبسایت، ارگونومی برنامه و بسیاری از موارد دیگر را تحت تاثیر قرار خواهند داد.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید