4

My understanding of a flat UI design would not be to grey out icons but to 'hide' what isn't relevant to the user, leaving a more clean and minimalistic interface.

However, one of our software developers wants me to design a flat UI with 'greyed out' buttons (and probably other things too, but we haven't got to that yet).

I'm just wondering if that's something that you would do with a flat UI, and if so, how that's possible?

Improve this question
8
  • I assume when you say "grey out" you mean disable rather than color grey in an ordinary state. Correct? If so, here are some related questions: Greyed-Out vs Invisible? and Greying out or hiding information icons
    – Graham Herrli
    Commented Aug 8, 2014 at 1:50
  • I personally prefer disabled buttons to be visible with a tool tip explaining why. This helps with dscoverability and reduces the frustration of "I can see it but not do it"
    – Andy Boura
    Commented Aug 8, 2014 at 9:19
  • I'm also confused here. When you say hide, is that button/icons/element being used a lot, but is hidden when something is disabled? Even then, don't make things vanish and appear willy nilly. That is very confusing to a user. Because what could possibly make sense to you, could appear to be incredibly random to a user.
    – UXerUIer
    Commented Aug 8, 2014 at 18:57
  • @Majed, I mean 'hide' the element when it is not something the user can click or and nor would they want to click on it at that stage. For example, when you click a play button, they want to keep the play button visible but disabled. I think it would be intuitive that once you've clicked it, the button could change to be a stop button. This would give the user feedback that they've clicked the button (because the button has changed) and also gives them the only options that are available; stop and pause. In a media player, for example, you change the play button to pause once it's clicked.
    – cateraf
    Commented Aug 11, 2014 at 0:48
  • In my opinion greyed out/disabled state is not directly against the flat or minimal design concept, which advocates for removing unnecessary elements. In general flat design is about keeping everything simple and you can certainly have a simple disabled button (without drop shadow/extra style decorations).
    – Poyi
    Commented Aug 13, 2014 at 22:20

4 Answers 4

Reset to default
3

You really don't want to hide buttons from user. Even if a button isn't relevant at some time, showing it as disabled reinforces that the specific functionality isn't available right now. And graying out is a good way to show disabled in a flat color rich design.

Take this for example. You're filling up your login information and the Login button is grayed out till both username and password fields are filled. If there was no login button at all, it may confuse user.

Hiding buttons may also cause user to spend time searching for it. A grayed out "buy" button on a shopping app for an out of stock item is way better than no button at all. Also helps remember where to find the button when it's enabled.

Improve this answer
3
  • This simply isn't true. There are instances when you should hide a button and others when you should disable it.
    – erik_lev
    Commented Aug 13, 2014 at 23:21
  • Yes, of-course there are such instances. But essential elements should never be hidden. And that's true always, not just for flat design. He should not hide things just because he's following flat design.
    – kBisla
    Commented Aug 13, 2014 at 23:25
  • I'm starting to think that it depends on the action to follow. I'm wondering if you don't need to grey out a button if the next logical steps don't even use that button. E.g., You press 'play', then the play button is removed in favour of 'stop' and 'pause'. The user doesn't need to press play again, and the change from the play button to a pause button can indicate the status change. Alternatively, I could put all three buttons available and then just grey out those that are not applicable. Seems like there are two ways to do it - it depends on the interface design and what the user wants..?
    – cateraf
    Commented Aug 14, 2014 at 1:15
1

My initial concern is with how the user will react to a button that is "greyed out". In my practice, greyed out usually refers to something that is disabled by the developer.

If you want a good example of Flat UI done right, check out this link here:

Designmodo -> http://designmodo.github.io/Flat-UI/

Inside, the default button and the disabled button are very much the same. However, a proper implementation of the Flat UI style would incorporate more than one color in the scheme. However, I wouldnt push it farther than three distinct colors.

Improve this answer
5
  • 2
    If you want to 'hide' irrelevant information from the user, why not try lowering the opacity and having the color closely match its background. An example being the greyed buttons used right here on UX Exchange (look to the right --->)
    – Stephen Rodriguez
    Commented Aug 8, 2014 at 4:24
  • Thanks Stephn_R. It's good to know I can grey something out but I wonder whether it's something I should even have greyed out.. tricky.
    – cateraf
    Commented Aug 11, 2014 at 0:49
  • Well sometimes thats something the end user decides. So keep an eye for user testing
    – Stephen Rodriguez
    Commented Aug 11, 2014 at 1:17
  • That's great advice -- thank you. You make a good call. Ultimately, the user is our target so we want what works for them. Thanks - very helpful.
    – cateraf
    Commented Aug 11, 2014 at 6:54
  • No problem. If that has solved your problem, please mark this answer as the solution.
    – Stephen Rodriguez
    Commented Aug 11, 2014 at 13:11
0

Use dark colored icons say #666666 on light colored background say #f4f4f4. This will increase the focus. Eg Google drive mobile app

Improve this answer
0

Thanks for so many responses! I thought I'd post the answer because there are so many different viewpoints I didn't want to mark any one of them as singularly 'correct'.

The answer seems to be: You CAN do it, but SHOULD you?

It seems to be that there is a place for inactive buttons on a Flat UI (i.e., you can do it) but you must carefully consider each situation when you want to hide or inactivate a button. Things to consider:

  • Does the user need to see the next steps available? If yes, use greyed out/inactive.
  • What is the user's preference?
  • Are you using a greyed out item help to advertise? If yes, use greyed out/inactive.
  • Are you using tooltips? Tooltips help to clarify why an element is unavailable.
  • Have you got sufficient screen space to have inactive icons without too much clutter?

A good website on this (as suggested by Alexej Froehlich): http://www.uxbooth.com/articles/interaction-design/who-killed-the-inactive-button-state/

Hope this helps someone in the future -- thanks for all your responses!

Improve this answer
1
  • "Are you using tooltips? Tooltips help to clarify why an element is unavailable." <-- please consider: Touch interfaces lack hover events for tool tips. Also, hovering for tooltip explanation in general is already an advanced approach to use an interface.
    – Alexej Froehlich
    Commented Aug 15, 2014 at 7:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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