Guest post by Davor Tomić

Why designing completely flat is not (always) the safest bet, and how Google got it right this time.

It wasn’t until I saw a teaser video for the documentary “App”, that I could shake off the guilt for actually somewhat missing skeuomorphism. In 2014 we were already far into the “flat design” era, and anyone asking for a bit of depth in user interfaces was considered either ignorant, weird or yet another troll.

I just thought replacing one extreme with another wasn’t a solution.

In the video, Neven Mrgan drew an interesting parallel between skeuomorphism and classic cars. Similar to UIs of the past, he argues, many cars from the 1940s, 1950s and 1960s were very “over the top” in terms of style. Every car’s detail was proof of true craftsmanship, and that’s what actually made people fall in love with cars. Outgrowing the paradigm of gas guzzling transporters, those cars touched people’s souls and became something to be admired and desired.

Unlike how it happened with the automotive industry, the romantic era of UI design ended rather abruptly. Over night, and almost in a Fahrenheit 451fashion, UIs rich with visual cues were replaced with oversimplified sheets of outlines and solid color rectangles.

Microsoft opened the door with Windows 8 and Metro design language in 2011, but it wasn’t until Apple — once champions of skeuomorphism — decided to suck every bit of soul out of iOS in 2013, that flat design became “the only right” way to model user interfaces. Suddenly, gradients and shadows were nowhere to be found, and users were told they were now smart enough to know what is what, without any visual cues to lean on whatsoever.

Braun RT20 radio (1961), designed by Dieter Rams

The famous quote states that perfection is achieved when there is nothing left to take away, but surely that shouldn’t have been taken as justification for removing almost everything.

Dieter Rams’ designs are true gems of genius simplicity, but his radios still had knobs and buttons. Albeit, they were fewer, and looked simpler.

Perfection means different things to different people. That’s why good designers listen to their users all the time. You’ll never make it perfect (for everyone), but considering user feedback and reiterating on your designs accordingly, can get you close enough.

Minimal ≠ Simple

I don’t dislike Flat design itself, but rather poor implementations of it. Insisting on absolute flatness equals going to extremes, and I also dislike extremes, because life doesn’t happen there. Not good life, anyways.

After all, Flat design has been out there for years now, and you didn’t hear about mutinies of Internet users having taken place, them shouting those all too familiar words — “change it back”.

At the same time, you didn’t hear about widespread demonstrations against utterly stupid TV reality shows, or equally stupidifying tabloids either, but still we’ll probably agree that those have been the biggest cause of intellectual decay nowadays. And by now, we’re all probably aware of the consequences. #2016

Just because internet users don’t publicly voice their discontent with the latest design trends, it doesn’t mean they are actually happy with them. That’s why you need to do user testing.

But don’t just take my word for it. With time, it became clear that downgrading users’ brains from using perceived 3D to completely 2D interfaces came with a steep price — decreased usability. Check the following few articles for more information:

• Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users
• Long-Term Exposure to Flat Design: How the Trend Slowly Decreases User Efficiency
• Why the Flat Design Trend is Hurting Usability

All virtues of flat design — good typography, tasteful color schemes, lots of whitespace, clear visual hierarchy — were, and still are, highly appreciated. However, combining those niceties with absolute absence of depth and other visual cues, resulted with web layouts starting to resemble full page ads in printed magazines, both visually and functionality wise.

The unlikely hero

And then it came out of the blue.

It was June 25, 2014, a year after Apple overhauled iOS 7 and went “all in” on flat and minimal. One of their biggest competitors, which until then was never considered to really get design, much less to have been able to produce any, announced a whole new design language. They called it Material Design , and it promised bringing the “don’t make me think” philosophy back to web design.

Just 5 years earlier, things looked bleak for Google. The design community had ridiculed them for having tested 41 shades of two blues, and totally missing all points. Compared to iOS in 2009, Android looked clumsy and lacked any sort of polish. If you had an Android phone, you were either a geek, or just desperate to have a smartphone, and iPhone was out of your buying reach. I was a bad case of both.

One could argue that Google was lucky enough to have failed sooner and faster. They had touched rock bottom and became painfully aware of the importance of design, as well as how badly they sucked at it at the time.

Fast forward to the present day, and it’s a completely different story. In terms of design (and) innovation, Google today runs circles around Apple. They have not only caught up in terms of the essentials (type, color, white space, iconography, interactions, visual consistency), but have gone beyond the surface, and started thinking deeper.

Shortly after Material Design was presented, emerged Flat Design 2.0 — still flat, but slightly less so. I like to think of it as of “Flat with a grain of salt”. It’s a beautiful and effective combo of aesthetics and usability.

And Apple agrees, as is evident on their website. As much as they like their buttons flat and skinny, the ones that enable people to buy Apple’s products, actually have gradients. Go figure!

3D is where people operate the best

So, how did Google even come up with such an incredibly well thought out design system?

Richard Fulcher, Design Manager on the Material Design systems team at Google, explained in Episode 134:

Especially for mobile, we wanted it to feel like all of the surfaces of Material that a user would see when using the system, could plausibly exist between the glass they’re touching with their finger, and the metal back of the device, as it rests against the palm of their hand.

Just to illustrate how important depth is in UI design, imagine driving a car with a steering wheel drawn on a touchscreen. A ridiculous idea? Absolutely, but some car manufacturers have already taken the route of removing (almost) all physical knobs and buttons from the cockpit, and replacing them with a big shiny touchscreen. Good luck using that without removing your eyes off of the road! Until we’re ready for the no UI era, let’s keep it simple, usable and safe, shall we?

17″ touchscreen in a Tesla S — probably safest to be used while parked

Same analogy could easily be applied to web design. Surely, we don’t expect to literally get physical with on-screen controls, but what helps immensely about using them are appropriate visual cues. Similar to driving a car, using a UI should be something you don’t (have to) think about. If a user has to stop what they’re doing for even a second, because it wasn’t very obvious to them what they could click or tap on, they will get frustrated and leave. And once you lose them, they rarely come back. (Unless it’s enterprise software, and users don’t have a choice but to use your product. Then you’ll just be despised.)

Material motion

What is so great about Google’s design system is that it not only brought back the concept of depth as we knew it, but actually empowered design even further. It went from making things look familiar, to making them feel familiar. While some design influencers reduced UI elements down to skeletons, Material breathed life into them.

The fabulous FAB

Then there’s the FAB (“Floating Action Button”), reserved for the most important job a user will want to do within a particular UI. It is appropriately promoted (by using elevation, color and iconography), which should help the user to immediately find it, and do their job quickly.

While this particular UI pattern helps users immensely, in the way of saving them time and energy, it demands from designers to employ additional discipline to their work. Similar to when designing in the “mobile first” fashion, designers should always account for the context in which the UI will be used, as well as for the most likely purposes it will be used for. In other words, they need to establish a clear hierarchy of actions, promote the most useful ones, while keeping the others available, albeit via progressive disclosure.

Or, to quote Scott Berkin’s golden rule for what to make discoverable:

Things that most people do, most often, should be prioritized first. Things that some people do, somewhat often, should come second. Things that few people do, infrequently, should come last.

Beware of the guidelines trap

Google’s designers didn’t only think deeper, but also wider. Material Design works equally well on screens of all sizes, as well as on all kinds of devices — handheld, desktop, TVs, etc — making it a truly holistic solution. It makes it so easy to create an app or website for any imaginable device with a screen, and keep it all very consistent.

But therein also lies the most common trap of relying on Material Design. Designers sometimes feel like they’re bound to using the exact colors, font family and icons as suggested in the Material Design Guidelines, which inevitably leads to a lack of identity and differentiation of their designs.

Sadly, so many apps and websites based on MD look alike, generic and dry.
Being as guilty of that sin as any designer, I was so relieved to hear Richard Fulcher explain that those are not rules at all — unless you’re a designer at Google, working on one of their own apps.

Therefore, my fellow designers, please feel absolutely free to make your designs truly your own, recognizable and unique. All of the underlying principles of Material Design should still function nicely with your unique visual style, so fear not!

Make design systems work for you

Material Design brought many good things, and not just of the visual kind. It made designers think more, so that users shouldn’t. Material made us aware of all the layers and dimensions of design, few of which meet the eye on first sight. It comes with out-of-the-box UI patterns which can easily be implemented to many UIs, and engender instant improvements. It also offers detailed guidelines, but one should be careful not to take them as the law. (Unless they work as a designer at Google, that is.)

Everything changes constantly, and so does design. Even though that change isn’t always for the better, it is failures from which we learn the most. And that isn’t to say that Flat design itself is a failure. It merely means that any new trend or direction should be challenged, and users always asked for feedback. Sometimes it will work just fine for your target audience, and sometimes they will appreciate being offered few more visual cues. But it is designers’ responsibility to learn about their users’ preferences, and not take silence as a sign of approval. Ask, listen, iterate. Rinse and repeat. The road to making great products is really that simple.

You can listen to the interview with Richard Fulcher from Google that inspired this blog post via Soundcloud below or on the original episode page for Episode 134 of UX Podcast.

This post was originally posted by Davor on Medium.

Davor started doing web design in 2002, back when the job description simply said “webmaster”. He and a friend ran a very successful micro web design studio in Croatia until 2011.

Davor joined DeviantArt’s design team, where he worked until 2015, when he moved from Zagreb, Croatia to Stockholm, Sweden, where he worked with Ooyala as a design lead. In January 2017, he started a new adventure and joined the UX team at Nordnet.