Addressing the Usability Issues of Flat Design

What we now refer to as flat design started in 2013 with the launch of iOS 7, the operating system for Apple iPhone and iPad. Prior to iOS 7, the user interface (UI) on Apple’s devices was heavily skeuomorphic, meaning that digital elements were designed to mimic their real-world counterparts. (The Notes app, for example, looked like a yellow legal pad.) In iOS 7, Apple stripped away all skeuomorphic design and attempted to reduce the UI to its simplest forms. And, as goes Apple, so too goes, well, everyone. Thus Flat 1.0 was born.

Flat 1.0 is defined by its complete lack of anything extraneous. Its approach is total simplification of design, down to its most basic elements. Here are some examples from the iPhone, showing the earlier skeuomorphic design on the left and the more recent flat design on the right.

Alert box comparisons

 

Buttons from iOS showing an older, more three-dimensional style and the newer "flat" style.

 

Phone dialer from iOS showing an older, more three-dimensional style and the newer "flat" style.

Some of the usability issues that flat design introduced are obvious in these examples. How do you know if a word or phrase is a button, without any styling to indicate it? The reintroduction of some “skeuomorphic” elements can address the issue.

Graphic showing options to make a "flat" button style more accessible by adding a border or a drop shadow.

The techniques above, used to fix the user experience (UX) shortcomings of flat design, are part of what we now call “Flat 2.0.” With Flat 2.0, elements such as outline, simple drop shadow and meaningful animation are added back into the mix. Many of Flat 1.0’s usability issues can effectively be addressed using these additions; however, many UX/UI designers still feel constrained by the limited palette of options available. A newer approach, defined by Google, called “Material Design” adds some additional options back, with some constraints, to further address overall usability. Consider…

Material Design Example


Taken from Google’s Material Design documentation

In the example on the left, there is nothing to indicate that the red action button is separate and clickable. In the center, the card and the button have drop shadows, which help set them apart, but they share the same drop shadow. This makes them look as if they could be part of the same object. In the example on the right, the button’s drop shadow is more spread out, showing that it is on its own plane, above everything else.

In Flat 2.0, and to a greater extent in Material Design, the rule of thumb is to only have nonflat design elements when they have functional meaning to the user. Shape and shadow, movement and animation, transparency and imagery, all have to be more than just eye candy. Movement should indicate where the user has come from or where an important item has gone. Transparency should provide context, indicating to the user that they are simply dealing with a layer of content and that they have not, in fact, navigated away. Shape and shadow should harken back to their skeuomorphic roots to signify an interactive element.

These examples are just an introduction to the issues related to flat design, and, while they show some very concrete ways to address those issues, the important takeaway is the general approach to these solutions: When dealing with flat design usability problems, try reintroducing more traditional UX cues to address the issue. Remember, those cues can be very stylized and still be effective.

There is a spectrum of options from pure flat through highly skeuomorphic. Good design can happen at any point in that spectrum. Don’t fall into the trap of dogmatic adherence to a set of rules to the detriment of usability. There are always creative ways to address usability concerns that will retain the desired aesthetic and, through better functionality, likely make the overall design better.

Resources

Work-Life Balance in This Technology-Crazed World?