Share this article:
Thoughts on Flat UIs – The Science and History Behind the Trend
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.
Many designers trained in Bauhaus philosophies (myself included) and working 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.
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.
About Tania Schlatter:
Tania Schlatter (@TaniaSchlatter) designs interfaces and communication systems by combining user-centered and visual design techniques. Equally interested in content and form, Tania is dedicated to making technology and information work for people’s hearts and minds. Tania teaches interactive information design to graduate students at Northeastern University, and has been practicing design for more than 20 years.
Tania wrote Visual Usability: Principles and Practices for Designing Digital Applications, with co-author and business partner Deborah Levinson, with whom she owns Nimble Partners, a Boston user experience firm. It’s available for purchase on the Elsevier Store and you can save 30% on it and other UX/UI books by using discount code “STBCNF13” at checkout . Learn more about Visual Usability here.
Computing functionality is ubiquitous. Today this logic is built into almost any machine you can think of, from home electronics and appliances to motor vehicles, and it governs the infrastructures we depend on daily — telecommunication, public utilities, transportation. Maintaining it all and driving it forward are professionals and researchers in computer science, across disciplines including:
- Computer Architecture and Computer Organization and Design
- Data Management, Big Data, Data Warehousing, Data Mining, and Business Intelligence (BI)
- Human Computer Interaction (HCI), User Experience (UX), User Interface (UI), Interaction Design and Usability
- Artificial intelligence (AI)