What is the best way to show that a button is Enabled or Disabled? (especially if it has grey color)
For example what do you feel about the following button? Is it enabled or disabled? How could it be improved?
asked Feb 22, 2013 at 10:49
-
I suddenly find myself quite like the "Windows Classic" style. Grayed text means disabled, which is simple enough.– Alvin WongFeb 22, 2013 at 14:16
-
@AlvinWong: It's one thing I like about Windows 8: it's become much clearer and functional.– peterchenMar 22, 2013 at 12:21
Add a comment
|
5 Answers
Make disabled button flat and less contrast, compare:
By removing the gradient you will tell the user it couldn't be pressed and by making text less contrast you're telling the user it's off - an analogy with a neon, it's light up so it's on, otherwise it's off like the "no" part on the image below:
answered Feb 22, 2013 at 11:15
-
1I like the idea of removing the gradient to remove the affordance, but it does run the risk of removing the whole suggestion that it could become a button. Especially if the label is not emphatic enough and it is not surrounded by active buttons to contrast it with. Something to be careful with.– PeterFeb 22, 2013 at 12:05
-
@Peter I believe it may happen if this button is the only button in the UI. Everything will be OK if there will be several enabled & disabled buttons (common scenario). Feb 22, 2013 at 21:31
-
4
-
Remember to check WCAG guidelines when you do this, though, as I think your button disabled state might not pass 2.1 AA colour contrast. Sep 21, 2020 at 22:10
Active buttons typically have greater contrast and a raised appearance, along with a hover state to further convey a tactile interaction. (A nice touch, though it's important to remember that hover states are not relevant for the fastest-growing segment of users: people with mobile devices.)
Disabled buttons are typically greyed out, flattened or depressed, and not responsive to hover state.
Subtle and careful use of screens, transparency, gradients, drop-shadow to indicate bevel, indentation, etc are all good tools. But keep the performance and complexity issue in mind. You should be building these buttons in CSS for the best user experience, maintainability, and semantics/indexing.
And that's where frameworks like Twitter Bootstrap and Zurb Foundation come in, with well-tested defaults for a wide range of active & disabled elements. And not just buttons: they also include various states for form elements, menu items, and so on. A lot of smart people contribute to these projects by researching, designing, and testing from all angles. You can count on them to provide a well-rounded starting point for common interface design elements and patterns.
An example of the basic buttons in Bootstrap:
-
While bootstrap et al are good for what they try to achieve they do not directly relate to this particular question about enabled / disabled states of grey buttons. Can you expand the answer so that you directly answer the question? (for example by referencing Bootstrap to show how they achieve the effect if disabled / enabled grey buttons).– JonW ♦Feb 22, 2013 at 12:10
-
3Thanks for the feedback! I updated my response to explain why I brought frameworks into the conversation. I had intended to include some screen shots, but as a new member I don't have the rquisite reputation points just yet ;)– Noah CFeb 22, 2013 at 12:16
-
1I agree the provided example isn't exactly ideal. The enabled buttons look good but the disabled default (blue) button is not clearly disabled. It begs the question does the user really need to know what button is (would have been) the default if it's disabled, and even if so, it should certainly be more obviously disabled--primarily by having less contrast. The white text makes it look enabled still, especially if there are no other buttons visible on screen to compare it to.– devios1Feb 28, 2013 at 20:55
The button is good, especially if its a secondary action, I see it as enabled.
To make it look disabled you could reduce buttons transparency, and when the user hover over it you could display a tool tip explaining why the button is disabled. Take a look at Wikipedia "Rate this page" section. The check box and text look transparent compared it to the text next to it. Actually Wiki used silver colour to achieve this, but using transparency would achieve the same result.
Can't really suggest much, because I don't know what is the purpose of the button and where its going to be used.
-
I suggest darkening the text and border slightly. It appears disabled to me.– devios1Feb 28, 2013 at 20:56
For disabled - you can grey it out.
Use the shading for changing states to on or off. As the most usual situation is that the light comes from the top, the button looks like it was convex, and lit from above. So, now it is not pressed. If you invert the shade on it, it will look like it was pressed (from convex it becomes concave). However, you could keep it convex and just recede it, by adding some new shadow cast by the chasis it sits in.
answered Feb 22, 2013 at 11:16
One of the most common examples for grey buttons of the difference between enabled and disabled states is from browsers themselves. Obviously these follow the same rules as per the other answers here, with a flat, greyed out effect to display disabled.
Firefox v19
Chrome v23
IE 9
On top of this though, one of the nice things about the default browser buttons is that the disabled state of the buttons still look quite like buttons (which can be an issue as commented by Peter). They seem to achieve this by having the curved borders of the buttons and an internal 1px white border on the buttons.
