Flat design, affordance and taking responsibility

Mr Joe Leech
Nov 9, 2015 · 4 min read

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
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
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
affordance

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

door affordance
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

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store