20

What is your experience with the usability of flat buttons? The common critique against those buttons is that people can't distinguish them, and they only look like headlines with a background. But if the rest of the UI also is very flat, wouldn't that help the users to understand what the buttons look like? Gmail, for example, has a very flat UI.

4
  • 1
    Gmail's buttons are not flat. The red compose button, for example, is a gradient: -moz-linear-gradient(center top , #DD4B39, #D14836). Google chose to make the gradient not as pronounced to be consistent with their new subdued theme. I think that flat looking buttons don't look clickable and take me longer to discover. This is clearly a matter of style over substance. Michael explains this issue in further detail on the related topic of why Gmail started making everything grayscale.
    – JoJo
    Dec 23, 2011 at 7:27
  • 5
    It all goes with the trend of the moment. On the first days buttons were flashy gifs, then round 3D rendered buttons, then css gradients, now flat, tomorrow, who knows? Goes the same depending on which OS you use. Probably form buttons in W8 are flat, wheras iOS makes them gray and button-like. You've got to choose your style that goes with the rest of the interface. Dec 23, 2011 at 10:16
  • 1
    If they're clearly buttons and your side's style is 2D, 2D buttons can have effective affordance while looking great where 3D buttons would look really weird.
    – Ben Brocka
    Dec 23, 2011 at 18:02
  • It's also important to note that gmail's buttons have a clear and pronounced 3D effect on hover and on click. They seem to quite obviously be buttons.
    – Ben Brocka
    Dec 23, 2011 at 18:50

5 Answers 5

19

This is a very good question, one that is bugging me, too. Even though I am an enthusiastic Apple user, I really love the new Win8/WP7/WP8 Metro UI (which has been renamed, can't think of the new name).

BUT:

Jakob Nielsen did extensive user testing and came up with some very interesting findings. http://www.nngroup.com/articles/windows-8-disappointing-usability/

It's a great post to read, this is the main take-away here:

"Flat Style Reduces Discoverability"

enter image description here

(image snagged from post).

See the "Change PC settings"? Is this a button or a footnote? It's a button, but it is very hard to comprehend. This is what many users had trouble dealing with.

For me as a User Experience enthusiast I really love this refreshing design. I can work and live with it, but if you think of users on the other end of the digital divide… They can not.

I have watched several non-digital users, especially my parents, and they might just read a dialogue box, but if it includes the slightest technical term they won't understand. At this point they will just look for the buttons and go for the one that sounds like the least potential damage/risk. (The cancel a lot and get frustrated.) Sadly many users are less into reflecting upon interfaces and this makes the discoverability of buttons a really serious issue.

Our own testing with BootMetro

We tested this with a part of our Webapp. We use Bootstrap, and wasn't not too difficult to use BootMetro and run a few simple user tests (http://aozora.github.com/bootmetro/). What we found:

  1. Users had no troubles with standard (and more simple) interactions.
  2. Many users really liked the fresh approach.
  3. Admin tasks got difficult for the less adept users.

Hierarchical Menus and extended options are the problem

Flat buttons turn into a problem as soon as you have a more complex app and start hiding less used or more advanced features in a lower hierarchy and link to these with an "extended options" kind of button. These are easily mistaken for headlines or comments/footnotes.

Conclusion:

Flat buttons are exciting. Even more exciting is the fact that Microsoft decided to dump some findings of centuries of user experience and design and go to flat interfaces. They really are thinking differently (sorry, I had to write that one!). So the mass market is being hit by a very different interpretation of buttons and user experience. This will produce friction, many users are complaining.

But I think this is where the future will go. Buttons are a real world representation of interactive functionalities, we have offline buttons everywhere, e.g. light switches etc. For the digitally experienced users this is fine. For the others: not so much - yet.

I would refrain from using flat buttons in the next year, maybe even two years. Except if your target audience can accept that and include many tech-savvy users.

2
  • +1 Was going to point out the user testing by Jacob Nielsen as well.
    – NotSimon
    Dec 30, 2012 at 17:23
  • Ironically Bootstrap 3 uses flat buttons. Sep 20, 2013 at 2:26
6

We can look at Metro UI for WP7, or Win8 for great working example.

All they have is "flat" buttons (ok, except those round control buttons, which, if you think about it, are flat too) and it works (imo) quite great. So, i think, what's important here is what user expects the button to look like - if flat button is a convention for every button within design language - it's ok to use it.

I am sure my grandmother would be confused seeing non-flat button just as much, as she would be seeing the flat one. ;]

1
  • 1
    Metro is a great example of a "flat" theme working very well.
    – Ben Brocka
    Dec 23, 2011 at 18:51
2

Keep in mind that context is extremely important.

In the case of Windows Phone 8 and Metro, you are often presented with screens where there is nothing else other than flat colored squares. Therefore, the user finds out pretty fast that these are buttons because there is nothing else to do than click on the colored squares.

Context is everything in this case.

What bothers me is text that can be clicked, especially when it's next to text that cannot be. You see this in the WP8 music player. Very bad for discoverablilty.

1

If other rules of button creation are followed you should be able to get away with using this approach.

The language is the most important part of a button. It should be in context to the action you are going to execute clicking it so the user makes the association.

Personally I would try to make it look as clickable and like a real life button as possible, but saying this more and more stuff is becoming touch screen so the concept of a physical button is being replaced in parts by touch screen.

I am currently facing a similar issue with a UI I am designing (brand guidelines and UIs don't mix!)

1

IMHO, the most important thing of a clickable UI object, be it a button, a link, or list, a checkbox, etc., is the visual clue to the user, in the following situations:

  1. On hover, you should indicate that the object is clickable, by changing the mouse cursor (usually a pointer, like the hand), and by providing a visual feedback, like background color change, changing margin, etc.
  2. On click, (not hover), provide another visual feedback. This holds true for buttons, not links. Usually changing the margin of the button, can simulate the clicked action more.
  3. On focus, that is when the object is the current object which receives information from input devices like mouse or keyboard, you can provide a kind of outline, like a dotted circumference, indicating to the user that the object is active, and receives his instructions.

If you provide these visual feedbacks, the type of button, be it flat or 3D, won't matter that much.

1
  • with touch you only have the second option - onclick. :-(
    – FrankL
    Dec 30, 2012 at 17:56

Your Answer

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

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