بهترین روش ها برای طراحی دکمه های رابط کاربری

وقتی داریم یه محصول دیجیتال طراحی می‌کنیم که از کاربرا می‌خوایم یه کاری انجام بدن، دکمه‌ها خیلی به دردمون می‌خورن. چه بخوایم از دکمه‌ها برای تشویق کاربر به انجام یه کار (مثل خرید یا ثبت‌نام) استفاده کنیم، چه برای رفتن به صفحات دیگه، باید یه سری اصول رو رعایت کنیم تا بهترین نتیجه رو بگیریم.

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

به دکمه‌ها فضای کافی بدید:

خیلی مهمه که دور نوشته‌ی داخل دکمه، فضای خالی کافی باشه. انقدر فضا بدید که نوشته‌ها توش مثل ماهی ساردین، چپونده به نظر نیان.

یه قانون خوب اینه که فضایی که از چپ و راست نوشته تا لبه‌ی دکمه هست، دو برابر فضایی باشه که از بالا و پایین نوشته تا لبه‌ی دکمه هست. حداقلش اینه که یه حرف بزرگ “W” باید بین نوشته و لبه‌ی دکمه جا بشه. تو وب، معمولاً عرض دکمه، خودش رو با طول نوشته‌ی داخلش تنظیم می‌کنه.

نکته‌ی حرفه‌ای: برای دکمه‌ها، پیشنهاد می‌کنیم حداقل ۱۶ پیکسل فضای خالی از چپ و راست در نظر بگیرید.

از رنگ برای جلب توجه کاربر استفاده کنید:

رنگ، یه ابزار خیلی قوی تو طراحی هست که سریع یه معنی رو منتقل می‌کنه. استفاده از رنگ می‌تونه توجه کاربر رو به چیزای مهم مثل دکمه‌ها جلب کنه. مثلاً رنگ قرمز معمولاً با هشدار یا کارهای خطرناک (مثل حذف کردن) مرتبط هست. این رنگ، یه علامت واضح برای چیزایی مثل پیغام خطا یا دکمه‌ی حذف هست.

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

یه مدل ثابت برای دکمه‌ها داشته باشید:

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

اهمیت دکمه‌ها رو مشخص کنید:

اینکه کدوم دکمه مهم‌تره، خیلی تو مشخص کردن روند کار کاربر مهمه. همیشه بین دکمه‌ی اصلی، دکمه‌ی فرعی و حتی دکمه‌ی درجه سوم، فرق قائل بشید.

دکمه‌ی اصلی که معمولاً برای کارایی مثل “ثبت” یا “بعدی” استفاده می‌شه، باید از همه بیشتر تو چشم باشه. دکمه‌های فرعی و درجه سوم، مثل “لغو” یا “قبلی”، باید کمتر تو چشم باشن ولی همچنان راحت قابل تشخیص باشن.

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

از فونت خوانا استفاده کنید:

خلاقیت چیز خوبیه، ولی وقتی می‌خوایم دکمه طراحی کنیم، باید حواسمون باشه. مهم اینه که تعادل رو رعایت کنیم. می‌خوایم دکمه‌ها هم تو چشم باشن و هم کارشون رو درست انجام بدن.

۳ تا قانون طلایی رو یادتون باشه:

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

می‌تونید خلاقیت به خرج بدید، ولی همیشه تجربه‌ی کاربری و راحتی کاربر رو به امتحان کردن چیزای خیلی عجیب و غریب، ترجیح بدید.

نکته‌ی حرفه‌ای: برای اینکه بفهمید کدوم مدل دکمه بهتر جواب می‌ده، می‌تونید مدل‌های جدید رو با مدل‌های قدیمی‌تر مقایسه کنید و از کاربرا بازخورد بگیرید.

مطمئن بشید دکمه‌ها کنتراست کافی دارن:

اینکه دکمه‌هاتون راحت دیده بشن، فقط یه طراحی خوب نیست، یه ضرورت برای دسترسی‌پذیری هم هست. از نظر دسترسی‌پذیری، کنتراست بین دکمه و پس‌زمینه‌اش باید با استانداردهای WCAG (دستورالعمل‌های دسترسی به محتوای وب) مطابقت داشته باشه. این باعث می‌شه همه، حتی کسایی که مشکل بینایی دارن، بتونن با رابط کاربری شما کار کنن.

چند تا نکته:

• سعی کنید نسبت کنتراست حداقل ۴.۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ باشه.
• از ابزارها برای بررسی نسبت کنتراست استفاده کنید؛ فقط به چشمتون اعتماد نکنید.
• اگه دکمه‌تون روی یه پس‌زمینه‌ی پیچیده مثل یه عکس قرار داره، یه پس‌زمینه‌ی نیمه‌شفاف بهش اضافه کنید تا کنتراستش بیشتر بشه.
• یادتون باشه، کنتراست بالا فقط برای خوانایی نیست؛ برای اینه که طراحی شما برای همه‌ی کاربرا قابل استفاده باشه.

مراقب سایه‌های دکمه باشید:

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

حداقل عرض برای دکمه تعیین کنید:

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

یه محدوده‌ی لمس کافی در نظر بگیرید:

اندازه، یکی از مهم‌ترین جنبه‌های طراحی دکمه هست. خیلی با نرخ تبدیل (اینکه چند نفر کاری که می‌خوایم رو انجام می‌دن)، تعداد اشتباهاتی که کاربرا می‌کنن و کلاً راحتی استفاده، مرتبطه. وقتی برای دستگاه‌های موبایل طراحی می‌کنید، باید اندازه‌ی انگشت کاربر رو موقع تعیین ارتفاع دکمه در نظر بگیرید.

طبق مطالعات MIT Touch Lab، حداقل اندازه‌ی لمس ۱۶ تا ۲۰ میلی‌متر (حدود ۴۵ تا ۵۷ پیکسل) هست که تقریباً اندازه‌ی نوک انگشت یه آدم بزرگساله. مخصوصاً، محدوده‌ی لمس انگشت شست یه آدم بزرگ حتی بزرگتره — ۲۵ در ۲۵ میلی‌متر (۷۲ پیکسل).

تو رابط‌های کاربری دسکتاپ، باید فضای خالی کافی بالا و پایین دکمه در نظر بگیرید تا نوشته‌ی داخلش خوانا باشه و فضای کافی برای کلیک کاربر فراهم بشه تا دسترسی‌پذیری بیشتر بشه.

اندازه‌ی فونت نوشته‌ی دکمه خوانا باشه:

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

دکمه بارعرض فیکس برای موبایل

خیلی وقتا دکمه‌ها تو سایت و اپلیکیشن‌ها اندازه‌شون با توجه به متن داخلشون تغییر می‌کنه. اما یه وقتایی هم لازمه که عرض ثابتی داشته باشن. این روش مخصوصاً تو گوشی‌های موبایل خیلی خوب جواب می‌ده، جایی که معمولاً دکمه‌های اصلی و فرعی رو زیر هم می‌چینیم. وقتی برای هر دوتاشون عرض ثابت در نظر بگیریم، یه فضای مرتب و خوشگل درست می‌شه که کار کردن باهاش هم خیلی راحته. اندازه یکسان دکمه‌ها نه تنها ظاهر سایت یا اپلیکیشن رو بهتر می‌کنه، بلکه باعث می‌شه کاربر هم راحت‌تر بتونه ازشون استفاده کنه و دیگه لازم نیست حدس بزنه کدوم دکمه رو باید بزنه.

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