Flat design, affordance and taking responsibility

Flat design is as the name suggest a very simplified, pared back design aesthetic favouring design elements that lives on a 2D plain hence the name.

First championed by Windows Mobile with Metro it is now favoured at Microsoft, Apple and Google. Google having developed their Material Design standards based on flat design:

material_design_gui_03

It is thought to have developed as a direct result of skeuomorphic design or an overly heavy use of real world design cues and textures. The worst example being iOS Podcasts app:

podcasts-1.0-audio

Flat design is seemingly simpler, it is certainly easier on the eye but it suffers from a big usability problem. There is no affordance.

Let’s talk about doors. In his seminal book on design The Design of Everyday Things (you have read it right? Amazon USA | Amazon UK) Donald Norman talks about the problem with push and pull doors and how a design can make you feel stupid.

It’s a problem we’ve all come across, even George Bush.

affordance

By looking at the handle of a door you should know how to open it.

door affordance

A push plate to push the door a pull handle to pull a door. (sorry for the crappy stock imagery!)

Affordance in digital, or how flat design gets it wrong

Here’s an example of a first time Google user who is educated, has owned a feature phone for a few months and is asked to search for images of his favourite actress:

He can’t.

There are a number of ways the design could be improved. Maybe adding help text? Or adding the word search to the button? Neither of these approaches will be as successful as making the text box look like a text box and making the search button look like a search button.

Adding help text doesn’t ever work, how many times have you tried to pull that handle to open the door and not read the help text “PUSH”? It happens all the time.

push-pull-e1373575904287

Adding help text doesn’t help. It takes more brain power to understand the door.

The same is true in digital design. From the iOS set-up process. Which of these items are links? Where are the visual cues? The links have no affordance. The same is true of Google’s Material Design. Where do I click to get more on the forecast? Which parts of the music player can I interact with?

flat design

It’s not easy to understand. It takes time to figure the interface out. That’s fine if you are an educated, experienced internet user but if you are, you are in the minority. Many people struggle with flat design.

I’m not alone in seeing this problem in user research. The Nielsen Norman group have been highlighting the problem with flat design for a year or so now and have empirical evidence to back it up.

We need to go back to basics

Flat design is an aesthetic reaction to over used real world design cues. We need to reign it back. Buttons need to look like buttons again, text boxes need to look like you can type in them.

I’m not advocating going back to 1998’s design approach but it rejecting the old we’ve lost a lot of what made designs work. We lost text boxes the look like you can enter something in there and buttons that look like they can be pressed.

Google from 1998 and from 2014

We need to stop designing for ourselves and take collective responsibility for our designs because we are alienating our users by blindly following fashion.


Originally published at Joe Leech.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.