Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

enter image description here

share|improve this question
    
I suddenly find myself quite like the "Windows Classic" style. Grayed text means disabled, which is simple enough. –  Alvin Wong Feb 22 '13 at 14:16
    
@AlvinWong: It's one thing I like about Windows 8: it's become much clearer and functional. –  peterchen Mar 22 '13 at 12:21

5 Answers 5

up vote 29 down vote accepted

Make disabled button flat and less contrast, compare:

enter image description here

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:

enter image description here

share|improve this answer
1  
I 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. –  Peter Feb 22 '13 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). –  alexeypegov Feb 22 '13 at 21:31
3  
And don't forget to set cursor: default! –  David Murdoch Feb 23 '13 at 3:39

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:

Regular and Disabled Buttons

share|improve this answer
    
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 '13 at 12:10
3  
Thanks 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 C Feb 22 '13 at 12:16
    
Much better, thanks for the update. –  JonW Feb 22 '13 at 12:17
1  
I 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. –  devios Feb 28 '13 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.

share|improve this answer
    
I suggest darkening the text and border slightly. It appears disabled to me. –  devios Feb 28 '13 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.

share|improve this answer

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

enter image description here

Chrome v23

enter image description here

IE 9

enter image description here

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.