Matt Imus - UX Design and Research


Flat Design's Growing Pains

March 7, 2014

As flat design has gained popularity, the old visual conventions it replaced have become a popular point of ridicule. Digital Stitched leather? Green felt? Of course that was bad design. But in our haste to adopt the new style of flat design, we are abandoning two important aspects of the old style: visual richness and metaphor.

Trends start with a good idea. Flat design began with the need for a simple style that is authentic to a digital medium. Along with visual simplicity came simplified information architecture and more concise content. As this idea grew into a trend, it was copied without thought. The result is largely positive: better design in more places. Yet the original reasons for going flat have been forgotten in the process. When we blindly move toward a new style without knowing the reasons, we inevitably abandon both the good and the bad aspects of the old style.

Visual complexity and richness in particular is currently out of style, but we're taking this to an illogical extreme. In our fervor for simplicity, we've lost our appreciation of beauty, of the human touch. Simple visual elements like gradients and texture have been stripped from the style. Windows 10 is sophisticated, but without richness and heart. This spartan UI has created an unlovable appliance that we can't feel good about. While illogical, we are human and need to connect with our objects.

While visual richness is simply out of fashion, the abandonment of skeuomorphism - the use of visual metaphor in referencing a physical object to communicate similar function - has more direct functional consequences. The use of visual metaphor is often intertwined with a dated visual style. This metaphor - buttons that look like physical buttons, for example - can be useful. As we create a more sophisticated visual style, let's not leave behind the utility of metaphors.

There are a number of elements that can't be as effectively emulated in the most stringent of flat styles.

While patently vulgar from a visual design perspective, drop shadows are an effective means to distinguish a button. They provided contrast around the edges and distinguish interface elements from all of the other visual clutter on a page.

Abandoning the button drop shadow undeniably enhanced elegance and simplicity on a page, but we have yet to widely adopt the visual elements that can replace this functionality. Flat buttons often change color when hovered or pressed, but not in a way that mimics physical objects. This form of feedback shifts the burden of understanding from the designer to the user. The button changes, but not in a way that conveys as much meaning as a drop shadow changing, thus indicating the same function as a physical button. We need to continue searching for ways to integrate this element in to our work in a more visually sophisticated manner.

Rounded corners are a convention that have been replaced by the square style of flat design. This is superior from a technological standpoint, but we have again given up a signifier of button interactivity. Because non interactive elements of the page also have square corners, square buttons become less distinct. Rounded corners are a heavy handed method of visual communication, but their effectiveness is real and should not be abandoned in the name of a blindly followed a trend.

Metaphor as a whole has been largely abandoned in current iterations of flat design. We need metaphor to communicate. This is a classic, time tested form of human communication. Whatever the trend, whatever we call it, we will continue to use visual metaphors to communicate novel function. Bad design is the enemy, not visual metaphor.

By omitting visual metaphor, we've shifted the burden of understanding from the visual asset to the user's mind. Classic design patterns were obvious, if ugly. Now, buttons are most often a patch of color with a word in it. While not difficult to use, they lack the immediate communication that makes good interfaces great. Combined with a lack of visual richness and diversity, elements on a page become indistinct.

Contemporary interface design has entered a trap of following new visual trends at the expense of function. I can't defend the old visual styles, but I can defend the functionality that they brought. For flat design to work through these growing pains, we need to assimilate the best of both styles. We can accomplish both elegant simplicity and immediate understanding.

We need to develop new conventions that elegantly accomplish these communication functions on a cognitive, visual, and technical level. In time, we'll relearn the psychological tricks that make interfaces easy, while executing them in a visual style that is refined and digitally authentic. Anything less is robbing our users of the understanding they deserve.


Say Hello!

p: (360) 303-4783

View Resume (.PDF)   View LinkedIn Profile

Copyright © 2017 Matt Imus