خلاصه: تغییرات بصری جزئی به کاربران کمک می‌کند تا پنج وضعیت مختلف دکمه‌ها را شناسایی کنند: فعال (enabled)، غیرفعال (disabled)، هنگامی که موس بر روی دکمه، بدون کلیک قرار دارد (hovered)، متمرکز شده (focused) و فشرده شده (pressed).

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

وضعیت‌های مختلف یک دکمه (Button States)

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

رایج‌ترین وضعیت‌های دکمه عبارتند از:

• فعال (Enabled)

• غیرفعال (Disabled)

• حالت قرار گرفتن موس روی دکمه (Hover)

• حالت تمرکز (Focus)

• حالت فشرده شدن (Pressed)

وضعیت فعال (Enabled)

وضعیت فعال، که گاهی اوقات به آن وضعیت پیش‌فرض نیز گفته می‌شود، به این معناست که دکمه قابل فشرده شدن یا تعامل است. زمانی که دکمه در این وضعیت قرار دارد، می‌توان آن را کلیک یا لمس کرد و عمل مورد نظرش را انجام خواهد داد.

وقتی یک دکمه فعال و در دسترس است، معمولاً می‌خواهیم توجه کاربران را جلب کند؛ به‌ویژه اگر دکمه‌ای اصلی یا برای اقدام باشد.

ویژگی‌های بصری معمول دکمه‌های فعال به شرح زیر است:

• کنتراست بالا بین دکمه و سایر قسمت‌های طراحی

• برچسب خوانا

• سایه اسکئومورفیک اختیاری برای ایجاد احساس سه‌بعدی

وضعیت غیرفعال (Disabled)

وضعیت غیرفعال مقابل وضعیت فعال قرار دارد. این وضعیت نشان می‌دهد که عمل دکمه در حال حاضر در دسترس نیست؛ دکمه در حال حاضر قابل کلیک یا لمس نمی‌باشد. در وضعیت غیرفعال، ظاهر دکمه هنگام تلاش کاربران برای تعامل با آن تغییری نمی‌کند.

برای نمونه، اگر کاربر تمامی فیلدهای الزامی یک فرم را تکمیل نکرده باشد، دکمه ارسال فرم ممکن است غیرفعال باشد.

ویژگی‌های بصری معمول دکمه‌های غیرفعال به شرح زیر است:

• رنگ خاکی روشن یا نسخه‌ای کمرنگ‌تر از وضعیت فعال دکمه، که نشان می‌دهد دکمه قابل کلیک یا لمس نیست

• کنتراست پایین‌تر بین برچسب و پس‌زمینه (با حفظ خوانایی)

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

وضعیت‌های دکمه غیرفعال باید ویژگی ARIA-disabled: true را به کد خود اضافه کنند. این ویژگی به دکمه اجازه می‌دهد که تمرکز صفحه‌کلید را دریافت کند، اما به خوانندگان صفحه‌نمایش اعلام می‌کند که دکمه غیرفعال است، بنابراین وضعیت غیرفعال بودن دکمه را به کاربران اعلام می‌کند.

وضعیت هاور (Hover)

وضعیت هاور زمانی فعال می‌شود که کاربر نشانگر موس خود را روی دکمه یا سایر عناصر طراحی حرکت دهد و هدف آن این است که نشان دهد دکمه قابل کلیک است. (این وضعیت برای کاربرانی که از موس استفاده نمی‌کنند، مانند کاربران موبایل، قابل مشاهده نخواهد بود.) برای جلوگیری از تغییر رنگ ناخواسته زمانی که کاربران قصد ندارند موس خود را روی دکمه قرار دهند (به‌عنوان مثال، زمانی که موس را در حال حرکت در سطح صفحه هستند)، بهتر است یک تأخیر جزئی (حدود 150-200 میلی‌ثانیه) به این وضعیت اضافه شود.

ویژگی‌های بصری رایج برای وضعیت هاور به شرح زیر است:

• تیره‌تر شدن جزئی رنگ پس‌زمینه نسبت به وضعیت فعال

• تغییر نشانگر موس از پیکان به دست

وضعیت تمرکز (Focus)

وضعیت تمرکز (یا تمرکز صفحه‌کلید) به کاربران کمک می‌کند تا بفهمند کدام دکمه فعال تمرکز صفحه‌کلید را دارد. وقتی کاربر از کلید Tab برای جابجایی بین عناصر فعال صفحه استفاده می‌کند، وضعیت تمرکز نشان می‌دهد که کدام عنصر در حال حاضر انتخاب شده است و می‌تواند با فشردن کلید Enter فعال شود. وضعیت تمرکز باید سریعاً (حدود 100-150 میلی‌ثانیه) پس از استفاده از صفحه‌کلید نمایش داده شود. در غیر این صورت، ممکن است کاربر دوباره با استفاده از کلید Tab حرکت کند و دکمه مورد نظر را از دست بدهد.

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

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

وضعیت فشرده (Pressed)

وضعیت فشرده نشان‌دهنده این است که کاربر دکمه را لمس کرده یا کلیک کرده است. هدف از این وضعیت این است که به کاربر بازخورد دهد که عمل انجام شده توسط سیستم ثبت شده است و معمولاً به‌صورت تغییر رنگ بسیار جزئی یا انیمیشن کوتاه و مینیمالیستی ظاهر می‌شود. وضعیت فشرده باید در عرض 100–150 میلی‌ثانیه ظاهر شود تا کاربر بتواند متوجه شود که عمل فشردن دکمه آنی بوده است. اگر این بازخورد به‌موقع نباشد، کاربران ممکن است دکمه را چندین بار فشار دهند و مشکلاتی ایجاد کنند.

وضعیت‌های دیگر: در حال بارگذاری و انتخاب‌شده

علاوه بر پنج وضعیت اصلی دکمه (فعال، غیرفعال، هاور، تمرکز و فشرده)، چند وضعیت اساسی دیگر وجود دارد که باید در یک سیستم طراحی در نظر گرفته شوند.

وضعیت در حال بارگذاری (Loading)

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

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

وضعیت انتخاب‌شده (Selected)

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

وضعیت‌های دکمه در مقابل سبک‌های دکمه

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

اولیه (Primary)

دکمه‌های اولیه بیشترین تأکید بصری را دارند و برای جلب توجه کاربران به اقداماتی مهم یا رایج مانند نوشتن، ایجاد، ذخیره یا پرداخت طراحی شده‌اند. دکمه‌های اولیه معمولاً دکمه‌های پر شده و جامد هستند.

ثانویه (Secondary)

دکمه‌های ثانویه تأکید بصری متوسطی دارند و برای اقداماتی که کمتر مهم یا کمتر استفاده می‌شوند، طراحی شده‌اند. این اقدامات معمولاً شامل لغو یا پاسخ به پیام‌ها هستند. سبک‌های ثانویه معمولاً دکمه‌های دارای حاشیه هستند.

ثالثی (Tertiary)

دکمه‌های ثالثی کمترین تأکید بصری را دارند و به اقداماتی اختیاری یا تکمیلی اختصاص دارند (مانند مشاهده بیشتر).

فراموش نکنید که عنوان مناسبی برای دکمه قرار دهید

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

ترجمه شده از: https://www.nngroup.com/articles/button-states-communicate-interaction