![qt creator design greyed out qt creator design greyed out](https://i.ytimg.com/vi/g49GH-PM9ok/maxresdefault.jpg)
– “Users are less likely to confuse a transparent button with other buttons” – I’m presuming you have data to prove or disprove this hypothesis? And that you ran a proper experimental research process and can publish this? Or at least provide some solid user research data, qual/quant, whatever. Specifically here are my questions around some of the statements made in this article: Hi Anthony, I appreciate it takes a lot of effort to write an article but you’ve made some pretty bold statements here that I think it would be useful for you to expound on to the HCI community Instead, they’ll get a seamless and predictable experience as interface contexts change. It’s important to make the opacity level low enough, or users may perceive the button as active.īy making your disabled buttons transparent, you’ll indicate an inactive state without confusing users. A rule of thumb to aim for is an opacity of less than 40%, or until the text label is unreadable. The optimal opacity level will vary based on your background color. When making your button transparent, adjust the opacity, not the color. This uncertainty and unpredictability is not an optimal user experience.
![qt creator design greyed out qt creator design greyed out](https://bugreports.qt.io/secure/attachment/73694/73694_Screenshot_20180605_224638.png)
When they see a gray button, they won’t know for sure if it’s disabled unless they click it. Gray is often used to communicate a low priority button (e.g., cancel buttons ). When they do, they’ll wonder why it’s not doing anything.Īnother issue with gray buttons is that it’s easy for users to mistake them for secondary actions. Foreground elements are more noticeable, which means users are more likely to click a gray disabled button. As the disabled button transitions to an enabled state, its new appearance is what they expect.Ī transparent button also blends into the background more, while a gray one stands out in the foreground (unless the background is gray). Although the button is faded out, some color still bleeds through for recognition. When the disabled button is transparent, users can see some semblance of the button in its enabled state. Instead, you should decrease the opacity to make it transparent. Going from gray to fully colored is an unpredictable change that can affect user expectations.įor a smooth and seamless experience, it’s best to avoid graying out your disabled buttons. However, this approach often catches users off-guard because the button’s enabled state looks nothing like the disabled one. How should disabled buttons appear when they’re inactive? The way most designers indicate an inactive state is by graying out the button.