دکمه‌ها اجزای ضروری در هر محصول دیجیتالی هستند. در حالی که راه‌های زیادی برای طراحی یک دکمه وجود دارد، طراحان باید از اصول و بهترین شیوه‌ها برای ایجاد تجربیات کاربری آشنا و بصری پیروی کنند.
طراحی دکمه فراتر از انتخاب شکل و رنگ است. طراحان باید وضعیت، محل قرارگیری، اندازه، سازگاری، استفاده از نماد، متن/برچسب‌های مناسب و موارد دیگر را در نظر بگیرند.
یک دکمه در طراحی UI و UX یک عنصر گرافیکی است که معمولاً به عنوان یک ناحیه قابل کلیک در یک رابط دیجیتال ظاهر می‌شود. هدف اصلی آن انتقال یک فراخوان ویژه (CTA) است که در نتیجه تعامل کاربر را در داخل سیستم هدایت می‌کند.
دکمه‌ها نشانه‌های تعاملی هستند که به کاربران اطلاع می‌دهند که یک عمل پس از فعال‌سازی انجام می‌شود. دکمه‌ها از طریق نشانه‌های بصری مختلف مانند رنگ، متن و حالت‌ها، از جمله حالت‌های غیرفعال در صورت لزوم، به طور مؤثر با کاربران ارتباط برقرار می‌کنند، آنها را از طریق رابط هدایت می‌کنند و تعاملات مورد نظر را تسهیل می‌کنند.
بسیاری از محصولات دیجیتال و وب سایت‌ها از دکمه‌ها و لینک‌ها به اشتباه استفاده می‌کنند. هنگام تصمیم گیری بین دکمه یا پیوند یک قانون ساده وجود دارد که باید از آن پیروی کنید: پیوندها برای پیمایش هستند و دکمه ها برای انجام اقدامات هستند.
چهار نوع دکمه وجود دارد و هر دکمه پیام متفاوتی را به کاربران منتقل می کند:
برنامه‌های موبایل مدرن همچنین از یک دکمه عمل شناور (FAB) برای اقدامات مهم استفاده می‌کنند. طراحان اغلب FAB ها را در پایین صفحه قرار می‌دهند تا به اندازه انگشت شست کاربر باشد.
طراحان و مهندسان می‌توانند چندین ویژگی دکمه را تغییر دهند:
طراحان از حالت‌ها برای ارائه محتوا و ارتباط با کاربران استفاده می‌کنند. شش نوع حالت دکمه وجود دارد:
طراحان باید اصول خاصی را برای طراحی دکمه‌ها و رابط‌های کاربری رعایت کنند.
طراحان باید سلسله مراتب و محل قرارگیری دکمه‌ها را در نظر بگیرند تا وضوح را به کاربران ارائه دهند و مهمترین اقدام را برجسته کنند. متریال دیزاین گوگل توصیه می‌کند که طراحان باید از طریق رنگ تاکید کنند:
با اعمال اصول سلسله مراتب دکمه‌ها، کاربران می‌توانند اقدامات مهم را بدون فکر زیاد انجام دهند. اگر برای هر عمل از یک دکمه استفاده کنید، کاربران باید هر کدام را بررسی کنند تا مشخص کنند کدام یک را باید فشار دهند.
قرار دادن صحیح دکمه‌ها نیز برای راهنمایی کاربران از طریق یک محصول دیجیتال ضروری است. اگر دو دکمه را در کنار هم قرار می‌دهید، همیشه از یک دکمه Contained به عنوان عملکرد اصلی و دکمه Outlined یا متنی برای عملکرد ثانویه استفاده کنید.
به عنوان مثال، اگر «ذخیره» و «لغو» را در پایین یک فرم داشته باشید، «ذخیره» اقدام اصلی با تاکید بیشتر خواهد بود.
طراحان باید از دکمه‌ها به طور مداوم در سراسر یک محصول دیجیتال استفاده کنند. اگر از یک دکمه Contained برای یک عملکرد اصلی در یک صفحه استفاده می‌کنید، این انتخاب را در تمام مدت تکرار کنید.
طراحی‌ها همچنین باید با اندازه دکمه‌ها، فونت‌ها، نمادها، رنگ‌ها، شعاع لبه، فضای سفید و سایر ویژگی‌ها سازگار باشند تا تجربه‌ای آشنا برای کاربر ایجاد کنند که به راحتی قابل پیمایش باشد.
اندازه در مورد دکمه ها مهم است، به خصوص در برنامه‌های تلفن همراه که کاربران از انگشتان خود استفاده می‌کنند. طراحان باید از اندازه و فاصله دکمه مناسب استفاده کنند تا اطمینان حاصل شود که کاربران به طور تصادفی عنصر دیگری را لمس نکنند.
برچسب‌ها باید تا حد امکان کوتاه و معنی دار باشند. طراحان همچنین باید برچسب‌ها را برای خوانایی در یک خط نگهدارند.
زبان متن دکمه نیز برای انتقال پیام و اقدام صحیح به کاربران حیاتی است. برای مثال، اگر آهنگی را از فهرست پخش حذف می‌کنید، عبارت صحیح «Remove» به جای «Delete» خواهد بود. Delete ممکن است کاربر را گیج کند و فکر کند که آهنگ را از دستگاه یا برنامه خود حذف می کند.
استفاده از حروف بزرگ نیز عاملی حیاتی است که طراحان باید در نظر بگیرند. استدلال برای بزرگ نویسی برای کاربران دارای ناتوانی در خواندن مانند نارساخوانی بهتر است. بهترین گزینه این است که محصول خود را با کاربران تست کنید. رنگ، کنتراست، اندازه، چیدمان UI، و بسیاری از عوامل بر خوانایی تأثیر می‌گذارند.
دسترسی یک عامل حیاتی در طراحی UX مدرن و توسعه محصول است. طراحان باید رابط‌های کاربری را با استفاده از ابزارها و شرکت‌کنندگان متنوع آزمایش کنند تا اطمینان حاصل کنند که دکمه‌ها و سایر عناصر رابط کاربری استانداردهای دسترسی را دارند.
تضاد رنگ بین برچسب و پس زمینه یکی از بزرگترین ملاحظات برای دسترسی به دکمه است. اندازه برچسب، فاصله، و padding نیز می‌تواند بر قابلیت دسترسی تأثیر بگذارد.
تشخیص اینکه دکمه‌ها در دستگاه‌ها و اندازه‌های مختلف صفحه نمایش چگونه به نظر می رسند برای طراحان بسیار مهم است. به عنوان مثال، dialog boxe در دستگاه‌های اپل در مقایسه با اندروید کاملاً متفاوت به نظر می‌رسند. دکمه FAB نیز در iOS در مقابل اندروید متفاوت به نظر می‌رسد.
طراحان همچنین باید در نظر بگیرند که چگونه دکمه‌ها در عرض چند صفحه نمایش ظاهر می‌شوند. برای مثال، دکمه‌ای با برچسب بلند ممکن است در تلفن همراه و دسکتاپ یکسان به نظر نرسد.
