flatHeader

Flat is a misnomer

I worked with someone fond of saying “I reject your false dichotomy.” Any time he was presented with an either/or option, it was most often rejected. Presenting a false dichotomy often meant I hadn’t thought in an integrative way to make the best of both options work together.

In software user interface (UI) design, flat vs. skeuomorphic is a false dichotomy to me.

Skeuomorphism is the use of shadows, textures, and patterns to make things look like real world objects. The intent is to make software easier to learn and use if it mimics real world objects, interactions, and metaphors. Even if there isn’t a real world equivalent of what you see on screen, an object’s styling can provide enough cues on how it should work.

“Flat” is the name that’s been given to the removal of skeuomorphism.

Right now there’s a popular belief that flat is better, as if there’s a binary choice between flat and skeuomorphic. But making it an either/or choice seems misguided. Discard everything helping discern depth? Discard everything providing affordance? Discard everything supporting metaphors?

Instead of flat vs. skeuomorphic, I thought it’d be interesting to look at things in different terms: Ornament vs. Metaphor

Ornament: How much detail and embellishment, like shadows, reflections, and textures, is applied to the appearance of UI?

Metaphor: How literally does the UI represent familiar objects and concepts?

I always find visualizing things on two spectrums reveals insights, so here’s some “flat” and “skeuomorphic” UI elements arbitrarily compared by ornament and metaphor.

buttons

The button metaphor is consistent and literal, but the ornament varies quite a bit.

close_buttons

Looking at the window controls, all are quite abstract concepts. The windows icons only make sense once you know what the buttons do (hide, full screen, close). The OSX metaphors are extremely abstract, as they follow the patterns of north american traffic lights: Red = stop (stop using this window), Yellow = slow down (hide the window), Green = go! (make the window big and start using it to its full potential.) Regardless of the styling, the metaphors are the same.

sliders

These are all over the place and present extreme opposites: The original iOS style looks like a literal volume slider on a 1970s hi-fi amplifier, complete with a machine milled aluminum knob. The Windows Phone slider is abstracted as far as visually possible. Even the slider knob has been removed. It’s conceptually pure, representing only the percentage of progress or used space. But does that make it more compelling?

toggles

Again, Windows Phone is extremely devoid of embellishment. The iOS 7 toggles are interesting: They look exactly like the hardware switch used on the iPod shuffle and iPad switch (literal), yet also appear abstract.

allCombined

And here’s everything in one diagram because it’s fun.

Observations

I didn’t know what to expect from this exercise. But in doing it, I realized my compelling aesthetic is less about flatness and more about subtlety. Removing all ornament in a puritan idealism reveals stark, sharp, high-contrast controls that touch on brutal and is in no way subtle.

At the other end we see extremely rendered lighting effects, shadows, and reflections that (while I have a soft spot for them) are also not subtle can be seen as distracting.

But that spot in the middle? To me, that’s where everything feels right and balanced. Notice the iOS 7 sliders and toggles are greatly reduced in literalism, yet still use shadows and highlights to convey physicality. However, the OK button uses nothing. While iOS 7 is deemed “flat”, it’s certainly not. Instead, it’s subtle.

Subtlety isn’t about not using ornament. It’s about using ornament where it’s necessary.

Milton Glaser gave a fantastic talk decrying “less is more”, articulating it better than I ever could:

Being a child of modernism I have heard this mantra all my life. Less is more. One morning upon awakening I realized that it was total nonsense, it is an absurd proposition and also fairly meaningless. But it sounds great because it contains within it a paradox that is resistant to understanding. But it simply does not obtain when you think about the visual of the history of the world. If you look at a Persian rug, you cannot say that less is more because you realize that every part of that rug, every change of colour, every shift in form is absolutely essential for its aesthetic success. You cannot prove to me that a solid blue rug is in any way superior. That also goes for the work of Gaudi, Persian miniatures, art nouveau and everything else. However, I have an alternative to the proposition that I believe is more appropriate. ‘Just enough is more.’

Conclusion

I’m not writing this to say you should use “flat” or “skeuomorphic” or that one aesthetic is better than the other or that you can even come to major conclusions without considering other experiential aspects like colour, motion, or sound.

Instead, the next time you’re making an either/or decision between A and B, consider whether A and B are appropriate labels and whether they’re obscuring parameters that might reveal more insights.

Then visualize the conversation on those parameters.

If you’re interested in false dichotomies and integrative thinking, I highly recommend reading The Opposable mind by Roger Martin.