Flat 2.0 & How It Solves Flat Design’s Usability Problems
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.
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.
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.
Usability Problems of Flat Design
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.
No Visual Signifiers of Clickability
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.
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.
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.
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.
Reduced Discoverability Because of No Z-Axis
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.
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.
The 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.
Low Information Density
Flat design has also been criticized for risking low information density by the UX expert Nielsen-Norman Group.
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.
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.
The Rise of Flat 2.0
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.
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.
Material 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.
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.
Conclusion
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).
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.