Summary: Flat design is a web-design style that became popular around 2012. It is still widely used today, and its overuse can cause serious usability problems. One of the biggest usability issues introduced by flat design is the lack of signifiers on clickable elements. Flat 2.0 may provide a better alternative.

The Origins of Flat Design

The release of Microsoft’s Metro design language and Windows 8 in 2011 was particularly influential in popularizing flat design. Microsoft’s design documentation referred to its new style as “authentically digital” — a phrase that neatly captures the appeal of flat design for many designers. Unlike skeuomorphic design, flat design was seen as a way to explore the digital medium without trying to reproduce the appearance of the physical world.

The flattening of Apple’s homepage provides a useful benchmark for the growth of the trend’s popularity. Skeuomorphism and realism had long been trademarks of Apple design, and its homepage resisted the flat trend until around 2013.

Usability Problems with Flat Design

Since flat design’s emergence in 2011, Nielsen Norman Group has been a vocal critic of its inherent usability issues. Our primary objection to flat design is that it tends to sacrifice users’ needs for the sake of trendy aesthetics.

For years, users had been exposed to traditional signifiers of clickability, such as blue, underlined links and 3D effects on buttons. As design trends shift and users are exposed to new patterns, the average user’s ability to intuitively identify linked elements has evolved. But just because users are better at detecting linked elements doesn’t mean they don’t need any clues at all. In fact, we’ve noticed that long-term exposure to these flat yet clickable elements has been slowly reducing user efficiency by complicating their understanding of what’s clickable and what isn’t.

When we asked a 22-year-old Canadian how she knew what she could click on in websites, she gave the following answer:

“When it’s blue and underlined, that’s how you know initially. You see that even in Word and stuff. But really, especially when it’s underlined, that helps. Or if it’s a button, it doesn’t have to say Click Here, but if it says, Buy Now or Purchase or Add to Cart.”

This quote neatly illustrates the types of cues people use to determine clickability:

• Traditional, externally consistent signifiers (such as the blue, underlined text or raised buttons)
• Something reminiscent of a traditional signifier (such as underlined text of any color or boxed text)
• Contextual clues (such as actionable text or placement at the top of the page)

If your organization wants to transition to a flatter aesthetic, follow our guidelines for designing recognizably clickable elements to make sure you aren’t causing click uncertainty.

Fattening Flat Design

Recently, designers have begun to notice the usability issues of flat design. As a result, a more mature and balanced interpretation of flat design has emerged. Designers are finding they can be “authentically digital” and explore the unique opportunities of the medium without compromising usability.

This newer interpretation is sometimes referred to as “semi flat,” “almost flat,” or “flat 2.0.” This design style is mostly flat, but it makes use of subtle shadows, highlights, and layers to create some depth in the UI.

Google’s Material design language is one example of flat 2.0 with the right priorities: it uses consistent metaphors and principles borrowed from physics to help users make sense of interfaces and interpret visual hierarchies in content.

As with any design trend, we advise balance and moderation. Don’t make design decisions that sacrifice usability for trendiness. Don’t forget that — unless you’re designing only for other designers — you are not the user. Your preferences and ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your own design is intended to do.

Early pseudo-3D GUIs and Steve-Jobs-esque skeuomorphism often produced heavy, clunky interfaces. Scaling back from those excesses is good for usability. But removing visual distinctions to produce fully flat designs with no signifiers can be an equally bad extreme. Flat 2.0 provides an opportunity for compromise — visual simplicity without sacrificing signifiers.

Three-Dimensional Effects, Skeuomorphism, and Realism

To define flat design, we must define what flat design isn’t. Flat design is commonly interpreted as a reactionary movement against 3D, skeuomorphic, and realistic design styles. A fully flat interface doesn’t use any of these styles.

Three-Dimensional Effects

Three-dimensional effects give an illusion of depth to an interface, which can help users interpret visual hierarchy and understand which elements are interactive.

• Elements that appear raised look like they could be pressed down (clicked with the mouse). This technique is often used as a signifier for digital buttons.
• Elements that appear sunken or hollow look like they could be filled. This technique is often used as a signifier for input fields, like search tools.

Since the early days of graphical user interfaces, screens have employed pseudo-three-dimensional effects (shadows, gradients, highlights) to help users understand the available actions at a glance. However, the pseudo-3D effect in these early GUIs tended to be aggressive, overdone, and visually distracting.

Skeuomorphism

In digital design, a skeuomorphic design is an object that has unnecessary, ornamental design features that mimic a real-world precedent. Skeuomorphic designs are intended to help users understand how to use a new interface by allowing them to apply some prior knowledge about that precedent.

Realism

Realism is a design style that mimics physical items or textures for aesthetic reasons.

Skeuomorphism is often confused with realism. In web design, the two styles are usually found together. The primary distinction is that realism is a visual style that uses design elements and textures that mimic the physical world for purely aesthetic purposes, while skeuomorphism supports a metaphor to help users understand the interface.

If your UI uses a flat design, make sure you follow the best practices to avoid its pitfalls.