Flat design is a popular design style that isdefined by the absence of glossy or three-dimensional visual effectsin the graphical elements of a web page. Many designers consider it to be an offshoot ofminimalist web design.
Three-Dimensional Effects, Skeuomorphism, and Realism
To define flat design, we must define what flat designisn’t.Flat design is commonly interpreted as areactionary movement against 3D, skeuomorphic, and realistic design styles. A fully flat interface doesn’t use any of these styles.
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 raisedlook 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 hollowlook 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.
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 is a design style that mimics physical items or textures for aesthetic reasons.
Skeuomorphism is often confused withrealism. 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 thatmimic the physical world for purely aesthetic purposes, while skeuomorphismsupports a metaphorto help users understand the interface.
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 avocal critic of its inherent usability issues. Ourprimary objection to flat designis that it tends to sacrifice users’ needs for the sake of trendy aesthetics.
For years, users had been exposed to traditionalsignifiersof 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 intuitivelyidentify linked elementshas evolved. But just because users are better at detecting linked elements doesn’t mean they don’t need any cluesat all.In fact, we've noticed that long-term exposure to these flat yet clickable elements has beenslowly reducing user efficiency通过复杂的理解按什么kable 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)
如果您的组织想要过渡到一个平的ter aesthetic, follow ourguidelines for designing recognizably clickable elementsto 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’sMaterial designlanguage 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 designingonlyfor other designers — you are not the user. Your preferences and ability to interpret clickability signifiers aren’t the same as your users’ because youknowwhat 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.
If your UI uses a flat design, make sure youfollow the best practicesto avoid its pitfalls.