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.

Our design team is thinking of using grey secondary buttons on our site. I'm concerned they may appear to be disabled to our users (especially when used with the primary orange buttons). There is a hover state on them so users would know they are not disabled when mousing-over.

enter image description here

share|improve this question
    
Do the grey buttons turn orange when selected? –  rk. Apr 19 '13 at 19:07
3  
I'd certainly be careful with that. Greying something usually signals "unavailable". So given the screenshot, I would assume "log workout" and "import workout" are inactive and will have me wondering why... –  Marjan Venema Apr 19 '13 at 19:20
3  
The buttons still look clickable. For the disabled state, the buttons should turn flat, and the text color should change as well. –  zzzzBov Apr 19 '13 at 19:40
    
Is this concern verified by testing? Or is this a speculative concern about the potential that an unknown number of users might be confused to the point that the conversion rates of the buttons drop? –  Charles Wesley Apr 19 '13 at 20:15
    
@rk - the buttons do not turn orange when selected. the orange button in the example above is the Primary button color. the hover state for the grey buttons is a darker grey. –  meepsh Apr 20 '13 at 17:57
show 6 more comments

7 Answers 7

up vote 21 down vote accepted

Grey buttons can still be used, provided you can give enough indication that the button is indeed not disabled. You could have a darker font color, like this:

Grey (non-disabled) Buttons

Even then, this approach is not recommended. Seconding Pasha's thoughts, such an attempt to make grey buttons seem "non-disabled" might still not be convincing to all users. Unless you're bent on retaining the grey, you could try the following options:

(A)

Make your secondary buttons align with your website color palette. You could try coloring the buttons the same blue you have on your header:

Blue Secondary Buttons

Having buttons that match your color palette will help blend the buttons in with the rest of your theme, reassure users to the integrity of the site, and yet not create confusion about the secondary nature of the button since it lies alongside a vibrant orange button.

(B)

As an alternative, you could also try having the orange color scheme for all the buttons, but differentiate secondary buttons from primary ones by inverting the color scheme, as Koen said.

Orange on White Secondary Buttons

The story does not end here. Further to this, you'd need to work out the color schemes for the hover state, depressed state and disabled (if needed) state of these buttons. Good luck with that!

share|improve this answer
5  
+1 for alternative A –  arqh Apr 23 '13 at 5:47
    
Good examples however the colors in your examples could be misleading.. The first example draws the eye to the dark/bold text. Your second example has blue for secondary but the blue's weight is alot heavier than the orange which makes the secondary appear to look more primary. The third makes the secondary buttons seem disabled however the eyes are targeted to the primary. –  Courtney Jordan Apr 23 '13 at 15:17
    
I remain suspicious that the buttons in alternative B are disabled. –  Brian Jul 24 '13 at 19:56
add comment

Do not rely on hover state for affordance. Don't make it a puzzle for me to figure out what I can click on or not, just show me. Also, tablets and other touch centric devices don't have a hover state at all.

Grey buttons next to colored buttons of the same shape tell me that they're disabled and not available at this point. Greying out items that are (temporarily) unavailable is such a standard that you can't go and grey things out that are not unavailable. While you could've greyed them out even more, you're already risking uncertainty for the user.

Secondary buttons should be presented differently from primary buttons. It's common for them to be a text link. Below this field the "post your answer" button is actually grey but being the only button it's clearly the primary action. "discard" is a blue text link that is clearly the secondary action.

You could also use a different shade of orange or invert the color scheme (orange text on a white-ish button).

share|improve this answer
1  
+1 I like the suggestion on letting the secondary actions apply a white background with orange text, like a negative to the primary action. I picture it both as looking better than it does now, plus it would run a much lower risk of falsely conveying a disable state. Good answer! –  AndroidHustle Apr 20 '13 at 12:01
add comment

Using grey buttons is not a bad idea! Grey buttons show the user that items are secondary actions compared to the primary action (which is orange). If you add another color say blue into the mix it may confuse the user as to which button is the primary action.

For example, my company uses light grey buttons to show a secondary action and a dark blue for primary actions.

enter image description here

For disabled buttons we use this type of grayed out button. Notice how it appears faded out compared to the primary/secondary buttons.

enter image description here

share|improve this answer
    
disabled buttons also have more of a faded out look showing the user they are unable to click the button. –  Courtney Jordan Apr 19 '13 at 19:24
3  
Your example is different: the text "reset" is blue. Ie. the button is not greyed out. –  Koen Lageveen Apr 19 '13 at 19:30
    
@KoenLageveen: Yes my example is using a different color for the text. I'll update my answer to include what a disabled button should look like –  Courtney Jordan Apr 20 '13 at 11:08
add comment

These grey buttons are somewhat in between the traditional "active" buttons and traditional "disabled" buttons. Just by looking at your screenshot, it would be unclear to me whether those buttons work or not.

Now, what does unclear mean in this context? It means that some people will think those buttons are active, while other users will consider them disabled. The rest of the users will be puzzled, and try to hover the buttons with a mouse to see if they light up. Those users will figure it out that the buttons actually work, but they will still probably feel discomfort at this because you are undermining their knowledge that grey = disabled. Now in any other application they'll be forced to check whether a grey button actually works or not.

So the question really becomes: do you really want those buttons grey so bad, that you'd risk losing some fraction of your customers, and slightly alienating another fraction?

share|improve this answer
add comment

In most of the websites I have seen that use disabled buttons there are clear distinction between active and disable. There is no predefined rule that grey means disabled, usually something that is disabled simply changes opacity, even browser default buttons change opacity. I think it is clear to your users that these buttons are clickable.

Google is a great example of having their secondary buttons being grey and knowing they are grey and not disabled.

google

Here is how you could distinguish between grey and disabled.

disabled buttons

share|improve this answer
add comment

I believe most of the times the greying-out of an element also come with a low contrasts (e.g. light gray background and white text).

Context is also important. If that grey is present somewhere else in the website it will be simply considered as part of the color palette of the site itself.

Just make sure you have a clear :hover state and you should be good.

share|improve this answer
add comment

Those grey buttons looks fine. It doesn't have gray title color, so there is no point to count it as disabled.

As an example, you can visit apple.com and check that no one ever thought on horizontal menu as it is disabled.

share|improve this answer
1  
hey shmidt, thx for the feedback. i might argue that buttons and navigation (the horizontal apple menu) are not the same. buttons can be disabled where navigation menus usually are not. –  meepsh Apr 20 '13 at 18:03
add comment

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.