Deference: Thoughts on iOS 8/Yosemite vs. Android L Design

TLDR version: While there are many similarities in Apple and Google’s new design languages, the main difference is that Apple's design is more modest and deferential - they limit color in the UI and limit animation to transitions between apps to get out of the way of content, while Google emphasizes color and animation within the UI. Neither approach is inherently better, just different.

Full version:

There have been several posts comparing Google's new "material design" for Android and Chrome with the design of iOS 7/8 and OS X Yosemite. I want to posit what I think is the fundamental difference between the two. In a word: deference. While both emphasize simplicity and focus on content over UI, iOS prioritizes content even higher than Android L. It is more deferential re: UI design.

For the record, I think both iOS 8 and Android L are beautiful. It's great to see both companies focusing on design and pushing the state of art. As an Apple guy, I'm genuinely intrigued by material design and interested to try it.

My first reaction to material design was that Google had one-upped Apple on UI. They had created a truly unified framework across desktop and mobile. The metaphor of apps as physical paper that can expand and respond to touch was compelling. The bold color and animations looked truly delightful and fun, while iOS 7 has left some people cold and a little confused

However, as I've compared screenshots of the new Android L apps to iOS 7 apps, I've gained a new appreciation for the understated qualities of iOS 7 and think it may prove the more enduring and timeless of the two designs. In particular, I came to appreciate how much the UI of iOS 7 tries to get out your way and the elegance of the "three layer" concept behind it.

Both Google and Apple claim that they want to remove UI clutter and focus on content. Apple refers to this principle as "deference". The UI should be as unobtrusive as possible. It should get out of the way and let the user focus on the content they care about. Google seems to agree on a basic level.

The difference is that Apple takes deference to a greater extreme. This can been seen in the different ways Apple and Google use color. In iOS 7, bright colors are limited to the homescreen, where app icons are the focus. When you dive into an app, the UI is just a transparent pane that hovers above the content. It is minimal to the point of being unnoticeable. The only color is in tappable elements and menus, which are often just text.

This use of color is an extension of the concept of layers in iOS 7. Layer 1 is the content: the photo, web page, or document you are looking at. This is the most important layer. Layer 2 is the app UI: the transparent navigation bar that the content scrolls underneath. Layer 3 is the notification/control center: glass panes that slide over both the content and the app UI. The UI and notification layers both defer to the content. They are actually transparent and take on the color of the content underneath, just as windows do in Yosemite.

Transparent UI elements defer to content:

1401736611-apps_safari_tabs_2x_medium

In Android L, on the other hand, the navigation bar is a splash of bright color. Both this and the animations draw attention to themselves. This is not necessarily a bad thing. The high contrast can help the user distinguish UI chrome from content. But they clearly are less deferential. They stand out and shout to the user "tap here!" or "this thing just moved over here!"

High-contrast UI offsets content:

17_medium

To illustrate this further, look at the mail apps in iOS 7 and Android L:

Ios7ipad14_medium

Gmailandroidl_medium

The Gmail app is bold and colorful, while Mail.app is understated and almost monochrome. Both look appealing, but there is much more color pop and and whiz-bang animation in the Gmail UI. This gives it a fresh look and catches the eye, but I wonder if it will hold up as well over time.

In conclusion, it's too early to say that one approach is better than the other. Both approaches are consistent with their brands. Apple, aside from their detours into skeuomorphism, has always been about understated, elegant designs. Google, aside from their detour into the "robotic" look of Android, has always been about colorful, playful designs. Just look at the logos of the two companies. Only time will tell if users prefer the more zen and deferential approach to the more colorful and cartoon-like.

What do think are the fundamental differences in Apple and Google's new design languages?