The Long Road to Google’s Material Design

It was pretty awesome to have a car in the 70’s and 80’s. If you had a cool uncle or cousin, he might have owned a Chrysler with faux woodgrain panelling.

Back in the early part of the century genuine wood panelling was reasonably common in car exteriors, but fell out of favour as metalworking techniques got better and cheaper.

This fake woodgrain is a classic example of ‘skeuomorphism‘, or the tendency for a new design to mimic the look of older design tropes — even when those tropes have no obvious functional value. Some love it, some hate it.

Of course, skeuomorphism is not limited to physical objects — it often finds a home in our digital environments.

In this article, we’ll skim through the recent history of the major mobile operating systems, before zooming in for a closer look at how Google’s new Material Design for Android L fits into the picture.

Skeuomorphistic Apples: iOS

When Steve Jobs introduced the original iPhone, the mobile OS ecosystem was in a very different state to today. The iPhone’s 3.5-inch screen was considered huge and skeptics even labelled it as overkill.

In the context of the 2007 mobile UI landscape, the iPhone’s arrival was quite a shock. With an advanced touchscreen that allowed for the kind of lush, detailed UI that simply wasn’t possible on most competing devices, it made perfect sense to play up the rich screen to a mobile market that had grown up on ‘candy bar Nokias’ and 90’s era Blackberrys.

That first version of iOS had complex shadows falling across 3d textures and faux-metal edges glinted in the faux-light.

In 2007, few people knew what ‘skeuomorphism’ was – much less talked about it. They just knew they couldn’t wait to show their friends and colleagues “the cool way the pages turn like a real book on my iPhone? Z. O. M. G!“. It’s hard to remember 8 years later, but at the time everyday people — teachers, grandpas, bus drivers and nurses — were genuinely charmed that Youtube was a cute little retro TV and the calendar had leather stitching.

Of course, like people, user interfaces rarely get simpler as they age.

Four years later, large, touch-screened smartphones had become the norm for hundreds of millions of users around the world, and industry standards were slowly moving towards simpler UI designs.

However Apple’s then iOS chief, Scott Forstall, was still a firm devotee of the rich, skeuomorphic interface they’d pioneered. Who wouldn’t want fake leather stitching, shiny metallic gradients, specular reflections and Marker Felt fonts for the iOS6 stock apps after all?

Apparently not everyone, as this was believed to be one of the main reasons Forstall was ‘let go’ a year later. He was replaced by the then Senior VP of Design, Jonathan Ive, who would lead a much flatter, simpler design direction on iOS7.

Ive’s love of straight lines, simple curves and a limited palette — evidenced in the iPhone’s industrial design — had been a point of contention between him and Forstall for some time . His first take on the iPhone UI (iOS7.0) stripped away all of Forstall’s candy glosses, replacing them with flat tones, simple geometry and ultralight type.

If you have an eagle eye, you’ll see that iOS7 is not completely flat. Examine the notes app, for example. The background is a subtle paper texture. Understated, but nonetheless it’s present.

The keyboard buttons have also hint at a shadow together with round corners, which you might not encounter in a purely minimalist design. But generally — allowing for a few initial teething problems — Ive’s design overhaul seems to have given iOS welcome new life.

Trends come and go with the seasons, and I suspect we’ll see a swing back towards skeuomorphism at some point in the future. Nevertheless, the ‘anti-skeuo’ sentiment currently in the design community seems to run deep.

Metro blocks: Windows Phone

Of course, Apple hasn’t been the only company making fundamental UX changes. Microsoft’s mobile operating system, Windows Phone (formerly known as Windows Mobile) has been around since the late-90s and carries with it a longer history — as well as the associated baggage

Drawing on the familiarity people had with desktop Windows, Windows Mobile tried to leverage the classic Windows XP and Vista experience, recustomized for mobile. As a concept, it made sense to try, even if many desktop paradigms didn’t transfer seamlessly to mobile.

The Windows Phone relaunch (2010) kicked off a completely fresh approach, incorporating a clean, geometric, box layout with monochrome app icons. The interface maintains a dedicately two dimensional worldview.

As an interface, the Window Phone interface was conceived from day one to be a mobile friendly experience. The beginnings of this design approach — codenamed ‘Metro‘ in it’s early days — could be seen in Microsoft’s Zune player and software. Although the design blueprint later made its way up to XBox, Window Media Center, Windows 7 and later Windows 8, Microsoft already knew they had a UI that was designed to function well on small screens.

The UX discussion around the interface wasn’t without controversy, due to the way our brains are understood fetch information. Some users recognize and remember visual elements and imagery much more readily than purely textual information — others work in the exact opposite way.

The lack of icons in the Windows Phone menu systems lacks consistency, as the app drawer window depicts only app icons, removing textual information behind.

In some ways the UX might work well this way, as Microsoft definitely got their priorities right, by making the apps menus often used more visually prominent (who wouldn’t recognize that facebook “f”?), but it could be argued that the design lacks consistency in many places.

Take these screenshot for example. The contrast between images and rendered logos compared to the native minimalistic icons is visually jarring. Sure, on one hand it’s the responsibility of the app publisher to comply with style guide requirements, but the average consumer who wants a fluent workflow will find this disjointed, regardless who is responsible.

Nevertheless, it has to be said Microsoft’s approach for Windows Phone UI was courageous and undoubtedly innovative.

Arguably it was too innovative for some. It is certainly not something long-time Windows consumers were used to, and big changes — even vast improvements — are always a challenge to sell to rusted on customers.

Funky & groovy: Android

What about Google? It looks like Google has done their homework. Android has undergone many changes over the years, but it seems they’ve engineered their biggest update yet: their new Material Design.

Material Design is the brainchild of Matias Duarte, vice president of design at Google. Duarte was plucked from the wreckage of Palm’s widely-lauded but ill-fated WebOS, which used an impressive card-based metaphor for user interface. Some might call Material Design ‘Son of PalmOS’.

“It is a sufficiently advanced form of paper as to be indistinguishable from magic.”

Matias Duarte says the unifying metaphor behind Google’s new design direction, is to provide a unified set of physics and rules for how software should look and act.

Material Design focuses on creating a logic for the virtual interface, while not exactly replicating the rules of physics in the real world.

What has been not mentioned though, is that Material Design combines two great philosophies which made out Windows Phone and iOS, to come up with a final original product. Just look at it, you can neither call it minimalistic, nor complex.

One of the reasons iOS’s skeuomorphism is so infamous, may be due to its focus on conveying substance only through static visuals. Things look different but they don’t behave differently.

Microsoft understood this from the early days of Windows. The operating system didn’t look like your working desk, but it worked like it! You would drag windows on the screen the same as documents on your desk, depending on what needed your attention right now. These user experience mechanics become so deeply integrated in the way we think and interact with our devices, that we might take it for granted.

Back then this wasn’t any less of an innovation than Material Design is for us today (or hopes to be).

Material Design adopts a form of skeuomorphism, not in it’s raw visuals, but in the way they are transformed and animate. Items often appear as cards, yet they have none of the texture, reflections or ray-traced shadows of real cards.

Nevertheless, they move in a three dimensional space — swooping over and under one another. Yet this is a smooth, simplified 3d world where cardboard no longer has a fixed dimensions, allowing it to effortlessly stretch and squish itself at a whim.

Unlike Google adopts a flat Metro-esque color palette, shapes and panels have substance and depth. They move towards you and recede. You understand where they come from and where they go to. You have a sense of what’s beneath them and what will come next. It’s logical and quite beautiful

Moreover, this trick engages our built-in understanding of the 3d space in front of us — an understanding we’ve all been honing since birth — but blends it with an almost ‘children’s book’ visual style.

Important interface elements get our attention not by their flashy visuals, but by their attractive movements. This animation choreography is particularly impressive. It’s not what they’re wearing, it’s the way they dance!

Google also uses graphical representations and shapes as variables, rather than polished visual elements, the eye perceiving and processing it as it is. It leaves space for user imagination in order to customize the experience it offers. This is a very strong advantage of minimalism which Google seems to use well.

Googlardium Leviosa!

For a company long known for what bordered on front-end/UX disdain, Google certainly seems to have found some UI magic pixie dust. Material Design is an impressive and almost mesmerizing approach to a difficult design problem. It solves even practical problems within its environment, not only visual ones.

I’m looking forward to how things develops. It’s impressive work.