What's wrong with Flat Design?

August 8th 2015, 19:12 | Written by Konstantin Koll

I've wanted to write this opinion piece ever since the first beta version of Windows and iOS 7 have emerged in 2013, but have found the adequate time only now. So what's wrong with Flat Design? Turns out everything, if you take psychology and the human brain into account.

Flat Design vs Skeuomorphism vs Realism

If you've been interested in UI design, you've probably heard of the ongoing debate on skeuomorphism vs flat design. So here's a question for you: which of these two calculators (iOS 6 and iOS 9) features a skeuomorphic design? Just click on the thumbnails to see larger versions of the images.

If you've answered “the one on the left, of course”, then you'll have to stand corrected—both calculators are actually skeuomorphic!

Defining Skeuomorphism

“Skeuomorphism” is a catch-all term for objects retaining elements and design cues of the past. Examples are computers storing files within a folder, and deleting them by putting them in the recycle bin, or a lightbulb that is shaped like the flame of a candle. In that regard, both calculators above are skeuomorphic, because they resemble a classic pocket calculator.

Regarding design questions, the discussion is not about skeuomorphism vs flat design, but flat design vs realism—the use of rich textures and life-like controls that are rendered similar to physical objects.

Realism

Historically, realistic design of user interfaces has been limited to games, where it's a goal to retain the player's immersion into the game. On top of my head, “Ultima Underworld” comes to my mind, with an awesome stone and marble user interface that looked almost real back in the day (computer graphics have improved a great deal since then). I really like the potion energy meters, and the carved out marble bins to store game items!

This has changed in the early 2000s with Steve Jobs and his infatuation with realism. Early versions of Mac OS X feature rich textures, shadows, and lots of glass reflections. Even today, it's still a gorgeous design with a great color scheme and fantastic icons:

Realism and the iPhone/iPad

Realism became ubiquitous—literally in everybody's pockets—with the introduction of Apple's iPhone, and later the iPad. When the iPhone was first revealed, nobody had seen such visual richness in an operating system's user interface before, let alone on a phone. I like the different materials, including the leather stitching (which is also found on my iPhone and iPad covers, and is said to be based on the interior of Steve Jobs' private jet), the gorgeous icons, and the great overall design. Third-party apps like “Hipstamatic” have taken realism to the next level, with awesome new photo filters designed as different vintage films or lenses for purchase.

The one thing above all others which made iOS the most successful smartphone user interface of all time was the fact that it was brilliantly simple to use and understand: its realism let people intuitively make associate with real-world counterparts.

Flat Design

Most people believe that flat design—the design trend of 2013—came up only recently, but that is not true. Its principles, such as minimalistic design, use of a grid layout and bold use of typography, are actually based on Swiss design of the 1940s and 1950s, an era where the famous font Helvetica was invented by Max Miedinger. Below is a specimen for Swiss design; just google for “Josef Müller-Brockmann”, the leader of Swiss typography, to see more examples.

Looks all too familiar, doesn't it? A solid colored background and bold typography in a sanf-serif font—could even be a modern website! With the demise of Steve Jobs, the departure of Scott Forstall from Apple's inner circle and the installation of industrial designer Jony Ive in his old role, iOS 7 and its successors have completely ditched realism and went flat (pun intended). Tim Cook talked about a “stunning new interface”, and Jony Ive spoke of the “profound and enduring beauty in simplicity, in clarity, in efficiency”. Discussions on the web got nuclear—and rightfully so!

Taking psychology and the human brain into account

Flat design is currently used extensively, not only in iOS—that's just a very prominent example. In theory, flat design sounds great: reducing the visual “clutter” to focus on content. But it doesn't work out that way.

Your computer, tablet and smartphone have special circuitry to deal with 3D graphics, motion processing, or floating point numbers—and so has your brain! For example, people react to faces much faster than to anything else (unless they are autistic), because certain neurons in the human brain bypass the visual cortex used to recognize objects. That's why you see so many stock photos of people on websites or in ads: to get your attention.

The human brain likes to structure things and put them into categories. That's why there are shortcuts to recognize different layers of objects: a different brightness often translates into different depths and distances in the real world. Our brains have gotten very good at recognizing this. The websites of Facebook, Instagram and Pinterest are using this to structure different items:

There's a deep reason why people were so thrilled with the level of realism up to iOS 6: it's not just that they like some “eye candy”. Shadows, different levels of brightness, textures, reflections and gloss effects are visual metadata for our brains that allow us to recognize and categorize on-screen items with specialized neurons, “hardware-accelerated” if you like. It's not at all surprising that users have come to rely on these subtle clues to make their way through an interface. When you remove them, you end up with a flat world where every element is suddenly placed at the same level. This makes the specialized circuitry in our brains useless, so we have to analyse the user interface consciously:

Did you get it? In the screenshot above, all items and the caption are not separated by a darker background or shadow—the caption can easily be mistaken for another feed item, and is not immediately recognized as “actionable” UI control. You have to learn that the three dots on the right pop up a menu. Windows 8 has taken this to an extreme (in the first screenshot below, there is no visual separation of toolbars and window content):

Both iOS and Windows 8 add gaudy colors “straight from the tube” and their own inconsistencies to this ungodly mix. They both sacrifice usability and well-established design best practices for flatness.

What to take away

Visual rhythm requires some degree of subtle depth, so human brains can better recognize different UI elements. Removing these tools, this “visual metadata”, makes it difficult for people to use a product. While Flightmap uses the Windows theming to blend in (at least for now), we go out of our way in the design of liquidFOLDERS, our relational file system, to deliver a sophisticated, clean, but also realistic UI:

In the next article, I'll write about the wrongs of iOS 7, mostly its childish icons, before returning to aviation-related topics (I promise). As a bonus, I'll leave you now with a great comment on the flat design of iOS 7 from late 2013 by a user named “KRR”:

“But in almost all of the comments people (mostly designers) seem to discuss whether they themselves like the flat design or not. But one point seems to be missing: All these designs (whether they are UIs of mobile phones, PCs, web sites, …) must be ‘sold’ to ordinary consumers, and I think most people (including me) associate complexity with working hours, and working hours with money. So: complex design = lots of work = expensive, simple flat design = little work = cheap.

When I admire classic works of art, I tend to value the objects based on how much time I estimate the artist must have spent preparing that work of art. So if I look at a big painting with lots of tiny details, I add together the times I estimate would go to each detail, and then I think to myself: Even if I could paint that well, it would take me at least a year of full-time work to reproduce that. Therefore, a good work of art (of course, everything else in the painting has to be ‘right” in the painting, too). Or if I go to a medieval church, and there is an angel statue made of silver: One where the artist has taken the pains to make each individual hair of the eyebrows and every feather in the wings is way better than one where these details are missing.

And I think it's not just me, most people do this, at least intuitively. Einstein said that any endeavor is 10% inspiration, 90% perspiration. Well, we cannot know the amount of inspiration, so we judge the perspiration part. The more complex the design, the more working hours it ‘contains’, the more expensive it seems. And this way of judging things works rather well for most of us, for most of the time. Just remember the proverb: If it looks like a duck… (replace duck with cheap). Now, the details can be subtle, but there must be details, otherwise the design seems simplistic and cheap.

So after this longish introduction, let's discuss iOS 6 vs iOS 7, especially the Safari icon, which was shown in the article. The Safari icon of iOS 6 you could admire for minutes: look, there's even the Americas in the compass background in faint colors! And if I try to estimate how long it would take me to reproduce that icon, if I had to do it myself, I think it would be more than a day's work (and even then I probably couldn't get it just right). On the other hand, the new iOS 7 Safari icon looks like: Hey, I could put that one together in less than half an hour with Windows Paint… So think about this: more than a day vs less than 30 mins. The feeling of premium quality is gone! So I think in the long run people are less willing to pay Apple's premium prices, not that all the details are no longer premium.”

liquidFOLDERS UG (limited liability), Hans-Böckler-Str. 15, 58638 Iserlohn/Germany
Amtsgericht Iserlohn HRB 8300, VAT-ID DE271286194
Authorized to represent and responsible for content: Dr. Konstantin Koll

© 2007–2017 liquidFOLDERS | All rights reserved | Last modified: 01/08/2016, 08:22 | Contact | Privacy policy