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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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:
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:
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.
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.
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.
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.