How should disabled buttons appear when they’re inactive? The way most designers indicate an inactive state is by graying out the button. However, this approach often catches users off-guard because the button’s enabled state looks nothing like the disabled one. Going from gray to fully colored is an unpredictable change that can affect user expectations.
For a smooth and seamless experience, it’s best to avoid graying out your disabled buttons. Instead, you should decrease the opacity to make it transparent.
When the disabled button is transparent, users can see some semblance of the button in its enabled state. Although the button is faded out, some color still bleeds through for recognition. As the disabled button transitions to an enabled state, its new appearance is what they expect.
A transparent button also blends into the background more, while a gray one stands out in the foreground (unless the background is gray). Foreground elements are more noticeable, which means users are more likely to click a gray disabled button. When they do, they’ll wonder why it’s not doing anything.
Another issue with gray buttons is that it’s easy for users to mistake them for secondary actions. Gray is often used to communicate a low priority button (e.g., cancel buttons). When they see a gray button, they won’t know for sure if it’s disabled unless they click it. This uncertainty and unpredictability is not an optimal user experience.
When making your button transparent, adjust the opacity, not the color. The optimal opacity level will vary based on your background color. A rule of thumb to aim for is an opacity of less than 40%, or until the text label is unreadable. It’s important to make the opacity level low enough, or users may perceive the button as active.
By making your disabled buttons transparent, you’ll indicate an inactive state without confusing users. Instead, they’ll get a seamless and predictable experience as interface contexts change.