As skeuomorphism falls out of favor and the trend towards flatter design takes hold are we losing something more than depth in the interfaces we design? Is it possible we’re making our sites less usable? Could it be that flat design is damaging to usability.
Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.
That’s a question Paul Boag is asking in preparation for the upcoming season of the Boagworld podcast. Instead of leaving a comment on Paul’s post I want to offer a few thoughts here.
The abridged version to the question is that in the short term flat design possibly makes a few things less usable for some. In the long term the trend toward flat design likely improves usability. Read on for the longer version.
Visual Metaphor
Flat design began as a reaction to skeuomorphism. A skeuomorph is basically a visual metaphor. Metaphor has been a common and effective way to communicate new ideas by relating them to existing ideas that are likely familiar to an audience.
- Metaphors help explain complex concepts by connecting the new to the familiar
- Metaphors add richness to communication by appealing to the senses
- Metaphors are persuasive and engaging and lead people to take action
If I tell you someone has a broken heart it communicates much more than saying that person is sad and it does so in a more interesting and emotional way. We’ve all been there and know the feeling of a broken heart and everything we’ve ever felt or understood about those events is communicated by the phrase “broken heart” in a way they aren’t with the word sad.
The same thing happens visually. For example we’ve all had experiences with buttons. We’ve been pressing real physical buttons our whole lives.
The screen doesn’t offer physical buttons, but it does offer things that want to be pushed or clicked or tapped. Designing those things to look like a button relates to the familiar and makes the clickable more appealing to our sense of touch. Even if you aren’t familiar with the web, you’d likely recognize the button and know it can be pressed in some way.
A Metaphor too Far
The problem with some metaphors is they get overused. As they do each person who uses one, tries to top everyone who used it before. A subtle drop shadow loses its subtlety. Gradients and reflections are soon added. With overuse and one-upmanship, the metaphor becomes cliche. We tire of it and an unintended message gets communicated that the person using the now cliche is lazy.
That’s essentially what happened with flat design. The visual metaphors, the skeuomorphs, that designers have been using have crossed into the tiresome. They’ve become cliche. The meanings they once communicated are getting lost in the unintended communication they now carry. They’re overused and lazy just as fewer and fewer people need to the metaphor to understand the interface.
Flat design took lessons from Swiss Design. It stripped away the lazy metaphors and the visual cliches we’ve been relying on for too long.
Is Usability Lost in the Transition?
Getting back to the original question, Is flat design damaging usability? To some degree it is. It’s removing visual metaphors that have been communicated. Sure, they’ve become tired metaphors, but not to everyone. And while fewer and fewer people need the metaphor to understand the interface, many are still helped by it.
Even for those of us who don’t need to be told that things on a web page can be “pressed” it might still slow us down at times. A flat rectangle doesn’t suggest press me the same way a 3-dimensional button does.
Of course, depth cues are not the only visual cues we have as designers. Shape, color, location, space, and many other things can be used to communicate what’s present on the screen.
In taking inspiration from Swiss Design, the trend toward flat design is a return to design fundamentals that will ultimately help make our designs more usable. A flat button may not appear as “pushable,” but a better use of space around it will make it easier to push or click. Simplicity, order, clarity, and legibility all buzzwords from Swiss Design point to an increase in usability.
Summary
Flat design probably reduces usability for some in the short term. It’s stripping away metaphors that some have relied on for years. Fewer and fewer people need those metaphors though, and in time new visual metaphors will be with us to help replace those that are being removed.
The loss of depth cues is not the end of visual communication or design. There are other visual metaphors to be created, repeated, and eventually overused. And it won’t be too long before depth cues make their way back.
To focus on the word flat and see only the lack of depth is to miss the point. Flat design is more than removing depth. It also brings more attention to design fundamentals that, if anything, will lead to an overall improvement in usability, even if less buttons are recognized as buttons.
Flat design done wrong is just flat. Flat design done well removes some visual depth cues in order to return to the fundamentals and it provides many more cues beyond depth to communicate.
Download a free sample from my book, Design Fundamentals.
It’s true that “flat” reduces the usability, since it is just a new trend. However, on the other hands, human are always getting curious to learn using the new objects, new concepts in majority.
It’s gonna take time for conceptual recognition.
Thanks for your thoughts, nice article!
Best Regards,
I think in the long term “flat design” won’t make a difference where usability is concerned. It removes some thing that are probably make sites more useful to some and it will likely replace those things with other things that end up making sites just as, if not more, usable.
If “flat design” does indeed lead to a greater use of design fundamentals in the end it will lead to more usable sites.
To a certain degree it’s to be appreciated that the trend towards over decoration has reversed to a trend of more minimal style. In many cases too much decoration detracted from the content or functionality of websites, or added very little value.
However, unfortunately this “flat design” trend has gone too far in many places already, in my opinion. On websites, google products and iOS7 there are many places where it’s just not clear anymore what is clickable or not. Is this just a title or can I click it? Can I click around this word/icon or do I have to hit it precisely? The other way around, sometimes you touch something or some area in an interface (for example to scroll) and it happens to be a clickable thing and suddenly an action is taken you didn’t want to take.
So, if you take a simple button which used to be full of gradients, shadows and glossy overlay and remove those decorations, that’s fine. But if you even remove the border and coloured area and only leave a simple word, almost indiscernible from other text, without a clue it’s an actual button, you’ve gone too far.
I think some of why it’s not so clear is because this is a new trend. At first it’s about everyone stripping away the unnecessary decoration. Only then can everyone see where a bit of decoration might be helpful or where it was doing something more than decoration and needs to be replaced.
I agree there are times when too much is removed and the “flatness” goes too far. It’s why I think we’ll see some short term damage to usability. However I think the industry will figure it out and understand where too much has been removed and figure out what needs to be put back.
Overall I think more attention is going to be focused on design fundamentals, which will ultimately makes us better designers and lead to a net effect of improved usability. It’ll take some time to get there though.
As you said, flat is only taking away one dimension (the depth-cues), but metaphors are still used! I often find that people compare flat and metaphors as if they are opposites, but in the end it is only about the design of the used metaphor (flat vs. skeuomorph, in the extremes),isn’t it?
Cheers from Berlin
I completely agree. I even think the depth cues will come back. Things went overboard a bit with the attempt to mimic physical things and the trend is now to go the other way. In time designers will bring back some depth and we’ll find ourselves in the middle.
We seem to bounce back and forth between extremes, don’t we?