iOS 7 And The Transition To Flat
The new iOS redesign is bold. It’s a radical shift toward a polar opposite direction from its felt, faux-leather, lifelike user interface aka Skeuomorphism. Now it’s completely bare and it’s shocking. Apple, known to execute confidently to the smallest details can no longer fulfill that promise. The icons are horrendous, the user interface lacks structure and everything feels unpolished. But it’s not all bad. Far from it.
As designers, we must not forget that we design for the people. We must gain empathy and ride on the arc of modern design. Currently, it means dramatically flattening our hard-earned visual style. Admittedly, many of us are victims of Complexity. This will certainly test our ability to adapt.
So far, the reactions I’ve seen at WWDC, MacRumors, Hacker News, John Gruber’s post have been overwhelmingly positive. Yes, designers will cry, but who can blame them? They’ve been thoroughly educated by the same company who aims to re-educate them. What we’ve known of Apple is no more. It’s a blank slate, lead by sir Jonathan Ive who is now leading both software and hardware design.
It’s very flat. Far more than I envisioned. For any designer that have been used to Apple’s Human Interface Guidelines as well as OS X, this will come as a shock. The kind of shock that makes you question if you’re in the “cool” generation anymore. It’s uncharacteristic of Apple to be behind, following the footsteps of Google, Microsoft, and even Yahoo. Apps like Calendar and Mail will very much remind you of Google’s counterparts. Even the Weather App looks like Yahoo’s.
But it was bound to happen. Flat design relies strongly on typography and colors, and very little on gradients, shadows or textures to set itself apart. To understand why, one must zoom out a little and think how Google and Yahoo, or even Microsoft came up with such direction. Yes, it was because of Apple. The iPhone’s UI and good typography such as Helvetica Neue Light are practices professed by Apple since the dawn of the modern mobile design. So, instead of thinking how Apple is copying, you must instead look back at the history of influences. Everyone influence each other to collectively create what is truly modern for the new generation of users who are well-educated about technology and in turn unfamiliar with dated visual references such as a reel-to-reel tape, leather calendar or poker table.
Past the hit-or-miss visual appearances, iOS 7 has depth. In fact, it does a lot of things right. It has vitality. It’s truly modern with its 1 pixel lines, thin typography and white UI. Unlike Android’s Dark/Gray UI, Microsft’s Black and white UI, Apple uses white prominently and elegantly. It feels very clean and Zen.
Visual Structure and Inconsistencies
It’s now very hard to tell the difference between the header and the content. Both generally use the same colors and very subtle variants of gray/white. Buttons no longer look like buttons – they’re blue texts. Sometimes, you will see strong shadows that look out of place like on the ON/OFF toggles. Even weirder, there are paper textures on the Reminders app. iBooks still uses wood.
- The Spotlight feature was quite hard to find. It now can be access by swiping down on the Home Screen rather swiping right. Strangely enough, once you enter something, it’s not super clear how to get out of that screen.
- Some colors don’t quite work and have very low contrast. Yes, it’s uncharacteristic of Apple to lack such execution.
This is the best use of blurred backgrounds I’ve seen. It works really well on all backgrounds without compromising readability or playfulness. This design method can be quite generic as the colors are typically pre-selected. In iOS 7, it blurs the actual background even while you interact with it, bringing out the vibrant colors underneath. I’m actually debating if they’re using a Screen or Overlay blending mode.
Messages animates the blurred blue bubble underneath the keyboard, Controls Center adds a nice-looking white layer while Notifications adds a darker gray layer. It feels like an ultra-modern frosted glass layer. Sometimes, it evens feels like the credit card’s rainbow-colored anti-theft sticker. In a way, that’s modern Skeuomorphism, without the extra textures. The content is the hero.
The thin typography works. It borrows from the world of magazines. Generally, fonts are bigger, therefore more readable. Since buttons are now texts, they come in bigger sizes. Quite frankly, they’re very self-explanatory, while not overblown like in Windows 8 which can be sub-optimal for spacing.
Accessibility in iOS 7 now offers better support for larger fonts. Interestingly, when you speak to the older generations of users, you’ll notice that one of main questions they have is how to make fonts bigger. So, this is a welcome change. At the WWDC, Apple announced some exciting features like Autolayouts and better accessibility.
Animations are my favorite part, starting with the zooming into each app – it feels intuitive because your eye can follow those movements naturally. As you open the bottom Control Center or swipe down the Notifications, you never loose context.
- Notifications uses physics and bounce back.
- There is a very elegant animation when you first land on your home screen where all the app icons fall in place. Also on the Home Screen, as you tilt your phone, there is a Parallax effect. Technically, the background simply moves toward the direction where you tilt your phone. Not game-changer but it can please a crowd. It looks like magic.
- In Messages, as you scroll, there is also a Parallax effect. It feels very organic and fun.
- The “Push” transitions are now replaced with a slightly more polished page hover transition. It feels smoother.
I was in the room along with 6,000 developers watching the Keynote. There were a lot of excitement. At one point, one person even screamed “I love you”. That’s because fundamentally, iOS solves many problems elegantly:
- The whole lock screen can Slide To Unlock. It feels much easier now.
- Bottom swipe gives access to quick Brightness, Wi-Fi, Bluetooth controls. It even added quick access to Camera, Calculator and the new Flashlight. This isn’t some gimmicks – all those functions are well-used.
- Folders can now have an unlimited amount of Apps, swipable inside them.
- The App Store has a much improved search and has a beautiful download animation. Moreover, your apps will now update in the background.
- Swiping from the left edge of the phone on iOS 7’s apps will go back to the previous screen. This effectively solves the one-hand usage issue I blogged about earlier.
- The multi-tasking feature is quite well-executed.
- Safari has a Pinterest-like way of hiding/minimizing the navigation bars. Additionally, the tabs feature has a brilliant design that allows unlimited tabs.
- Photos now have filters built-in and are cleanly organize by time and location.
The list goes on…
This is my personal experience as someone who attended the WWDC and who tested the iOS 7 beta for a day. I sincerely think that this design will grow on you. But that doesn’t mean Apple shouldn’t fix those ugly icons.