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
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.
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:
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:
Make your secondary buttons align with your website color palette. You could try coloring the buttons the same blue you have on your header:
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.
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.
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!
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).
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.
For disabled buttons we use this type of grayed out button. Notice how it appears faded out compared to the primary/secondary buttons.
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?
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.
Here is how you could distinguish between grey and disabled.
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.
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.
