A recent #ux discussion on twitter with Mike Rapp and Doug Collins about #FlatDesign, #Skeuomorphism, and #Affordance got me thinking (more than normal). And I’m sure this article has been written hundreds of times by smarter people than me, but here’s the hundred and first, as I had to empirically prove it for myself.
My gut reaction to flat design is: VOMIT. I’ve hated it since the moment i saw it. It felt like the design world’s extreme reaction to apple’s skeuomorphic (realistic looking) design in early MacOS and iOS apps. REMOVE ALL AFFORDANCE! (is what I felt like designers were screaming at me). I am not a graphic/visual designer. I am a psychologist, researcher, developer, architect. I LOVE good visual design, but gun to head I weight function over form and usability over pretty.
I know flat design was an attempt to simplify UI, make CSS (and load times) easier due to less of a reliance on imagery. But it felt like the pendulum swung TOO far the other way. And it was hot and trendy and got overused and abused (like poor Comic Sans).
I was pretty happy when material.io came out with digital #UI guidelines and added back some affordances (borders, shadows, depth). When the pendulum swings, usually gravity and/or time help it level out somewhere in the middle. yay!
Cut to today and Mike argues that flat design IS skeuomorphic in today’s society. (At least I think that was his argument. If not, see if you can borrow one of those MiB flashy things and delete this article from your memory). I immediately think he’s crazy. I go on a hunt to prove him wrong, and as with most things, I prove myself a little wrong, and open my neural pathways to thoughts that were previously non-congruous.
Skeuomorphism was Apple’s attempt to have humans understand digital controls, by making them mimic their real life counterparts. Digital buttons looked like real life buttons. Notebooks looked like real notebooks. Twisty knobs…okay, you get it. It was a great way to have a newish thing (iphones and ipads) feel not so foreign. The design pattern allowed people who think “i’m not a computer person” to use computers fairly easily, as they can relate to it and understand how to interact with it. So it was a great marketing strategy and it did its job.
Flat design came along (much later) and said “these controls are digital, you don’t need all that fancy dropshadow, shading, facade of being a real world 3d thing”. By removing all that, I argued (and still mostly do) that affordance was completely removed, violating a tenant of usability and interface design. The control did not afford to the user what it was and how it was to be interacted with. In real life a button usually sticks out, indicating you can push it. A handle (usually) is some kind of U/C shape affording you can grab it with your hand and pull. A flat panel says “push me”. The things an object says to a human about how to interact with it are its affordances.
SO! When Mike claimed that flat design IS skeuomorphic I went on a rampage to prove him wrong; I started taking pictures of things in my house. I was super happy looking at my tv remote and wall light switches and my piano keyboard. I felt vindicated! Look at all the shadows and “3d”ness!
But then I noticed the microwave. And the oven. And smartphones. And my apple mouse. And thought about my friends who have a nest. Or a smart fridge. Or a Tesla. Cue glass shattering and new neural pathways.
Some (many?) things in life today ARE flat, and not 3 dimensional. And I think users probably have an okay time using them. My microwave “buttons” do not have depth. they are flat rectangles with a stroke and a label. The nest and tesla ‘dashboard’ are screens. Smart fridges, smart door locks…screens. So I guess Mike isn’t wrong when he says flat design is skeuomorphic. I would caveat it with ‘Sometimes’, but IF this was his point, i’d agree.
I also learned how non-digital and dumb my house is, because I have more controls with 3 dimensions and shadows than not. :)
I also realized how some real world interfaces are a mix of flat UI and 3d controls. One could argue the microwave is mixed because it has a handle for pulling, not a flat ‘button’ to open the door. My jeep dashboard is a flat touch interface with some on-screen buttons, and some actual buttons and knobs. My bluetooth speaker has plus/minus icons that have slight indentations and are pushable, but definitely are not what I would consider ‘buttons’.
I realized our coffee maker has almost material-ish design for its interface. They are sort of buttons, but the visual affordance is very subtle. They don’t stick out very far, and I wasn’t sure without getting really close if they were in fact physical buttons or just small screens with words.
So, I suppose, in this one instance I will allow Mike to be correct ;) and publicly thank him for forcing me to think and research and analyze vs stand ceremoniously on my bias. So, digital interfaces started off mimicking real world interface controls, and now real world interfaces are mimicking digital interface controls. Circle of life? Irony? Neither?
One last thing to call out: unless the real world flat interface has voice controls I’m not sure how people who can’t see can use it without touch affordances. Research for another day!
#UXlife
