How Does Flat Design Damage and Improve Usability?

Posted: 19 Sep 2013 05:30 AM PDT

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.

The post How Does Flat Design Damage and Improve Usability? appeared first on Vanseo Design.