Does flat design reduce affordance of actionable objects?

Question

Flat design has many merits, including being visually simple and easy to recognize. However, I don't think flat design is a one-size-fit-all solution to all situations.

Flat-designed buttons or icons are usually designed with simple strokes. For simple user interfaces, flat design relieves the user's visual burden, and therefore is good design.

However, for interfaces containing many gadgets, I don't think flat design is a good idea. For example, the new iOS 7, which followed the trend of flat design has created a less usable experience in my opinion. In many cases, even I, a designer, did not realize that the text is actually a click-able button.

Have there been any studies to show that users can still locate actionable objects (like buttons) as quickly or accurately with flat design as when those same buttons have gradients/drop shadows?

Answer 1

My interpretation is that people are getting used to the new world of computer interfaces and they don't need metaphors to hold their hand anymore. Something doesn't need to look exactly like a button to know you can press it. We need far less information to recognize the buttons, so we can now get rid of some of the noise.

It a very common pattern when new technology emerges. Here's a very old example:

At first, the symbols are direct (if cartoony) representations. Then they slowly lose their extrinsic meaning and become defined more by our conventions of using them (our shared language) and the references to outside concepts disappear.

This is what's happening in flat design. We aren't losing the affordances per se (if the design is good), we're just using a common language of more subtle cues to indicate the function of an object.

Note that true affordance (in Norman's original sense) is very rarely found in interface objects. A door may prohibit us from pulling it by not providing a handle (and only a push plate), but interface elements can rarely be so forceful. They communicate using simpler cues. For a long time these were based on more familiar technologies, but as computer interfaces become more common and tangible interfaces less so, these references are becoming less helpful.

The language of flat design relies on cues like high contrast boxes, rounded corners, use of color and content-based navigation. I wouldn't think of it as a reduction in affordance, but as references to old technology becoming less useful as metaphors. I would bet that any child born today (in a first world country) pushes a digital button before she pushes a tangible, old fashioned one.

New technology is always phrased in terms of the old. When the telephone was first invented, it was pitched as a news service that you could call to have your newspaper read out to you. At some point it breaks free of these constraints and begins to be seen on its own terms. That's what's happening with interfaces.

So my answer would be: flat design is a response to less need for affordance and a reduction in the efficiency of interface metaphors.

Answer 2

Two well known articles from the by Jakob Nielsen commenting the results of usability tests on tablets running flat designs and windows 8

http://www.nngroup.com/articles/tablet-usability/

http://www.nngroup.com/articles/windows-8-disappointing-usability/

Both point in the direction that flat design leads to a loss of visual affordances.

My two cents. All the discussions I've seen about this subject are based on analysing the different styles abstractly (it provides better this and that...). However as a UX designer, I think a key aspect is often ignored. What does the new style imply from the point of view of user interaction?

As I see it, for almost four decades we have collectively coined a language for people to interact with computers which is by now deeply rooted in the user community. However, Flat design -specially that poorly conceived- with its aesthetic pretension to break with the dominant trends, has also brought an (unintended) rupture with established user interaction practices. As such increased user issues could only be expected.

Answer 3

There is a few things to consider about this. A flat design, as we know, helps to implement the visual design within front end, because of simplicity and, at least in web, it makes almost everything possible to make just with CSS.

It depends on how you work with it, just like every design style out there. I think that the most important thing is how coherent is your design. There is a specific color for the important actions? The buttons are in one place in all your screens? The iOS approach and even the Windows 8+ or Android approach take different faces of flat design but their clear guidelines and consistency, make this clear enough to know what is everything, know how it works and what they are for.