Thoughts on Flat UIs – the science and history behind the trend

The "flat UI" trend demonstrated by the evolution of Google's icons (from Google's Visual Assets guidelines).

This post was also published on publisher Elsevier's SciTech blog August 6, 2013.

The current "flat UI" kerfuffle provoked by Microsoft's Metro UI and Apple's beta release of iOS 7's interface seems largely to be about change, and whether or not people who write commentary on the web like flat graphics.

They miss the point. There is science and history behind the flat UI trend. Let's take a look.

Gestalt theories of visual perception were defined in the 1920s by psychologists. These theories underlie most professional visual design. Gestalt principles are what graphic design students learn to employ to:

• create visual impact 
• direct the eye
• create visual tone – balance or discord, for example

The principles coincided with advances in printing in Germany and the rise of the Constructivist movement in art. These were the "seeds" from which the Bauhaus design movement developed. The philosophy of the Bauhaus was reactionary to the prevailing trend of the time (Art Deco) and called for objects and built environments to serve their use: form should follow function, and be true to materials.

The Bauhaus influenced important graphic and product designers such as Josef Muller Brockmann, Dieter Rams, Paul Rand, and Armin Hofmann, as well as information designer Edward Tufte. All of these designers believe that what is represented should express the message or use; no more, no less. This can be summed up in Tufte's "data-ink ratio" and Dieter Rams' 10th good design principle: "Good design is as little design as possible." This history and approach is what many trained designers draw from. The rise of user experience design as a profession has put more trained designers than ever before in the position of influencing applications.

The perceptual and cognitive psychology research and theories that underpin Colin Ware's book Visual Thinking for Design and Jeff Johnson's Designing with the Mind in Mind are mostly ignored by graphic design BFA programs and thus are not particularly familiar to trained visual designers. However, they are familiar to many usability practitioners and UI designers from technical backgrounds. This research helps explain part of the current issue: why people like skeuomorphic design.

Skeuomorphism is the use of visual qualities to suggest or artificially imitate a physical characteristic, like faux wood textures printed on countertop surfaces or embellishing the side of old station wagons. In digital interfaces, Apple's address book software uses skeuomorphs. It renders pixel illustrations of seamed binding and paper "pages." In the early days of the Apple Macintosh computer, dragging unwanted files to the pixel-rendered trashcan helped people learn a completely new visual and interaction language through the use of familiar icons and symbols, and familiarity makes people feel comfortable.


Sample of Apple’s use of skeuomorphs – the address book app in OSX.

Many designers trained in Bauhaus philosophies (including my business partner, Tania Schlatter, who drafted this post) and who work on UX and interfaces often find skeuomorphs absurd for two reasons. First, in our Apple address book example, the "pages" create a false interaction cue. The dimensional rendering makes it look as if the pages might be clickable to advance, but they are not. Second, entering a contact on a digital device with rendered "paper" and "binding" feels untrue to the qualities of the digital material being manipulated.

Few interfaces designed these days need to rely on skeuomorphs to make users feel comfortable with the UI. The time is right to leave those visual "crutches" behind. Doing so, however, has launched "flat UI" as a trend, which can cause more harm than good. When employed as style rather than philosophy to underpin the entire user experience, designers may strip out what they see as distracting decoration in the interface without leaving enough visual data for people to understand what they see.

The subjective "flat UI" debates distract from the real issues, which are the same as always: designers and product managers need to look deeply before adopting or disavowing a trend. Remember that the last big web design trend – "fat footers" – came about to improve search engine rankings in the wake of changes to Google's results algorithm. Even though our tools change, methods hold true. Designers and project managers need to (re)focus on their users, content, and organizations to design interfaces that promote understanding, are appropriate for the medium and context of use, and help differentiate their products for businesses and their customers in meaningful ways.

Additional references:

• Video documentary: Dieter Rams on his design principles
• Jon Kolko's slides on Tufte (slide 16 is on data-ink ratio)
• Hofmann, A. Graphic Design Manual: Principles and Practices, Arthur Niggli
• Meggs, P., Purvis, A. Meggs' History of Graphic Design, Wiley
• Muller-Brockmann, J. Grid Systems in Graphic Design
• Tufte, E. The Visual Display of Quantitative Information, Graphics Press