Disabled Buttons UX: User Experience Best Practices for Disabled Buttons
Overview
When designing a button or other interactive element on your website or app, it’s essential to keep in mind its various states. The five most common ones for buttons are enabled, hover, active, focus, and disabled. Each state is a visual representation of the button’s status and a different way in which the user can interact with them.
One of the trickiest of these states, at least from a design and usability point of view, is the disabled button. In this article, we will review the best user experience practices for implementing disabled buttons into your digital design.
Source image: Material DesignUsage
A disabled state indicates that the user can’t interact with the button. Most design guidelines say that it’s best to avoid disabled buttons altogether since users can find them confusing. If you do decide to use disabled buttons to show that they can be potentially used at some point, they must appear disabled to the user, especially if you have multiple disabled elements on a page. This goal can be achieved by following the color and styling techniques in the next section.
Also, if a button is disabled temporarily, it should always remain visible to the user. Disappearing buttons may give a cleaner look, but having new buttons appear all of a sudden could be confusing and intimidating to new users.
Key takeaways for using disabled buttons include:
Use disabled buttons sparingly and as needed.
Avoid having disabled buttons appear and disappear during a user experience.
Color and Styling
Color plays a key role in button design, especially when the goal is to showcase that a button is disabled. The most common way to signify a button can’t be pressed is by graying it out. A grey button feels muted, but sometimes it can lead to confusion. Some users may mistake greyed-out buttons for secondary buttons instead. That’s why it must be obvious that they appear disabled. Consider these tips when choosing colors and styling disabled buttons:
Make a disabled button feel inert, dull, and muted. To deemphasize user interface components, such as buttons, try displaying them at approximately 40 percent opacity of their enabled state, similar to Material Design.
Create contrast between a primary button and a disabled button by using saturated colors in your primary buttons. By doing so, nearby disabled buttons will appear de-saturated and muted.
According to the Web Content Accessibility Guidelines (WCAG), user interface components that are disabled or purely decorative in nature have no contrast requirement.
A disabled button can differentiate itself from other buttons through elevation change. It should be flat and cast no shadows to demonstrate that it’s inactive and that you can’t interact with it.
Behavior
A button’s functionality should be communicated with more than just color. Using color can be a part of it, but the way a user interacts with the button also needs to show that it’s disabled at the moment. Use these best practices to communicate that a button is disabled:
Source video: Material DesignWhen a user hovers their cursor over a disabled button, the cursor itself should indicate that the button can’t be used. That’s best done by turning on the “cursor disabled” state, which essentially prevents the cursor from turning into a hand.
Consider displaying a tooltip with disabled buttons to give the user an explanation for its current state. Use a tooltip to combat confusion and make the design more understandable to the end-user. A tooltip is text that appears on the screen when the user hovers the pointer over a button. It usually explains how the tool is used and its purpose. In the case of a disabled button, it’s especially useful because it explains how and when the button can be used.
Accessibility
Disabled elements should be designed in a way to support screen readers. According to Mozilla, one way to support accessibility is by using aria-disabled rather than HTML’s disabled Boolean attribute. For example, you might use aria-disabled in menu widgets that may be temporarily inactive and would otherwise be skipped over using standard keyboard navigation. Aria-disabled lets users know that there is an element present. Users can navigate through the page with the tab key, and a screen reader will tell the user that it's dimmed (VoiceOver) or disabled (ChromeVox). However, if you decide to use aria-disabled, you’ll need to work with your developers to ensure that the element’s functionality is fully disabled and also appears that way to sighted users.
Final Thoughts
Wrapping up, disabled buttons play a vital role in user interface design, enhancing the overall user experience by giving clear feedback and preventing mistakes. By carefully implementing disabled buttons, designers can ensure users have a seamless and frustration-free experience with digital products and websites. These buttons serve as visual cues, signaling users about the availability or inaccessibility of certain actions, which, in turn, fosters a sense of control and confidence in navigating the interface.
However, it is crucial to strike a balance in their use. Over-utilizing disabled buttons can lead to confusion and frustration while underutilizing them can result in unintentional user errors. Therefore, designers should always consider the context and user needs when deciding whether to disable a button or provide an alternative action.
In the ever-evolving landscape of user experience design, disabled buttons remain a valuable tool for promoting usability, accessibility, and user satisfaction. By leveraging their potential effectively, designers can create digital environments that are not only aesthetically pleasing but also functional and user-friendly, ultimately leading to a more positive and enjoyable user experience.
Reference Articles
https://medium.com/@sean_1138/a11y-tips-disabled-buttons-and-colour-contrast-f8824d5e9610
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled
https://m2.material.io/design/interaction/states.html#disabled
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
https://www.carbondesignsystem.com/patterns/disabled-states/