Flat 2.0 & How It Solves Flat Design’s Usability Problems

Look at this screenshot below. Try to guess which elements are clickable based on this screenshot. It’s not those that you would first think of. We can find many other similar usability problems all over the web.

Flat design is characterized by the lack of three dimensional effects and glossy visual elements in order to achieving cleanness, minimalism, and clarity. It goes against the previously predominant design style, skeuomorphism that makes use of shiny buttons and illustrations imitating real-life 3D objects.

If we use three dimensional effects, it naturally gives an illusion of depth to our designs. This helps users quickly find interactive elements, those that either can be clicked on (like buttons and icons), or filled in (like form fields). One of the main concerns about flat design is that it makes it hard for users to recognize clickable elements.

The Verge Home Page

IMAGE: The Verge

Usability Problems of Flat Design

Flat 2.0 gives answers to the perceived problems of flat design. It’s a smart compromise between functionality, aesthetics, and usability. Of course, we don’t need to use the Material UI kits everywhere, but understanding the philosophy behind it can give us a solid background about how to develop our own style in accordance with the latest findings in user experience design.

No Visual Signifiers of Clickability

Before the flat era, web designers usually indicated clickability by using visual solutions such as gradients, textures, raised edges, or drop shadows to make buttons and other clickable objects look like they can be pressed on.

In their criticism on Windows 8’s usability, they used examples of Windows Store apps, and the website of the Los Angeles Times to show the issues that low information density (having few stories on the initial screen, headlines without summaries, barely recognizable grouping, etc.) can cause from the point of view of usability.

Flat design lacks these visual signifiers, and has to solve the same task with a much smaller toolset: colours, shapes, proximity, and contextual elements.

Why it this a problem? Let’s try an experiment.

While flat design gives us tremendous help and a great toolkit to provide our users with fast and clutter-free websites, it can cause certain usability problems, especially when it’s overused.

Clickability Issues

Reduced Discoverability Because of No Z-Axis

The new style is still flat, but it adds a little three dimensionality back to the designs in the form of subtle shadows, highlights, and layers. Flat 2.0 – if it’s used well – can fix the aforementioned usability problems by bringing back a little realism (skeuomorphism), and adding some depth and details, while keeping the advantages of minimalism such as streamlined websites, clarity, and faster page loading time.

Flat design has also been criticized for risking low information density by the UX expert Nielsen-Norman Group.

As more and more designers recognize the usability flaws of flat design, a new, more mature version of it has sprung up, called “Flat 2.0” or “Almost Flat” design. While the change from skeuomorphism to flat was radical, the evolution of flat design is much more elusive.

Low Information Density

Material Design uses the z-axis, gives subtle depth to the design, and smartly makes use of layers by separating them with drop shadows and animations. Google has a supercool description about how it works, and it’s really worth to read through it to understand its main principles and rules.

Flat design has been around since as early as the 1950s when the International Typographic Style was developed. In recent times it has gained wide popularity since the launch of Microsoft’s new geometry- and typography-focused Metro design language, at first in the new Windows Phone in 2010, then in Windows 8 in 2012.

Windows Store Apps - Low Information Density

Flat design essentially aims to streamline websites, raise focus on content, offer more intuitive interactions, and provide a faster and more functional user experience. It’s also easy to use its simple, box-like elements, and grid-based layouts for responsive design.

The Rise of Flat 2.0

This means that they need to use more effort to discover relationships between objects, and understand the visual hierarchy of the site. For example we need to spend more time on the home page of Microsoft’s Developer Network to visually decode the information, and the purpose of the different elements on the site.

From another aspect, less information can also be seen as removing distractions, enabling users to focus only on important things, but if minimalism is overdone it can easily sacrifice the primary goal of a site, i.e. transforming information to the viewers.

Flat 1.0 vs. Flat 2.0

IMAGE: Dapper Gentlemen

Material Design

People in real life find objects and move along in three dimensions: the x-, y-, and z-axis. When they run into a minimalistically designed, flat website without 3D effects, they get an experience that is different from what they are used to, what they are primarily familar with.

Material Design Color

As good designers always aim to improve the experience of their users, the web design industry is constantly changing. Flat design has replaced skeuomorphism quickly, resulting in grid-based, minimalistic layouts and simplistic elements that lately have overrun the web (this has generated some talk about web design becoming boring or even dying, but it couldn’t be further from the truth).

Material Design Dialog


Reduced DiscoverabilityThe rule of thumb in UX design is to always try to minimize cognitive load on the user in order to maximize usability. As we can see it in many cases, this doesn’t always happen with flat design.

Google’s new design language, called Material Design is probably the most notable example of the Flat 2.0 style. Google released Material Design with Android L in 2014. While Material Design retains the main characteristics of flat design, it uses certain metaphors from physics to help users quickly find analogies between the real world and the digital world.

Leave a Reply