Are Flat Buttons Unusable?

Question

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.

Answer 1

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"

(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.

Answer 2

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. ;]

Answer 3

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.

Answer 4

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!)

Answer 5

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.