In my last post, I went over some of the problems I have with the new UI in iOS 7. In this post, I’m going to trace the design lineage of some of the better aspects of the new release, like Control Center and the new multitasking interface. Many of the new UI designs in 7 borrow ideas from Apple’s competitors (notably Google and Palm), and there’s nothing wrong with that: everyone does it.
That said, let’s dive in.
Parallax
Starting with the original iPhone, the accelerometer built into Apple’s devices made it possible for apps to use the motion of the device as a control. In iOS 6, Apple experimented for the first time with using motion data not as a control, but to add decoration to an app’s UI. The metallic-themed controls in the Music app would “shimmer” as you tilted the device, and the gray highlights in the navigation bar also shifted.
In iOS 7, Apple uses the same trick to get a parallax effect. Aspects of the UI are separated into layers, and shifted relative to each other based on the orientation of the device. It’s used throughout the OS, unlike in 6 where it was solely relegated to the Music app.
Multitasking
The multitasking interface in iOS 6 was pretty barebones. Double-tapping the home button brought up a list of icons from your recent apps, and you had to page through them four at a time. If you hold down on an icon you get the signature “jiggle” effect as little minus signs appear in the icon’s corner, which quit the app when tapped. Double-tap the home button in iOS 7, and the app zooms out into a visual list of your recently used apps, with the apps’ icons sitting below previews of the apps themselves. Flicking an app upwards will quit it.
HP’s webOS, the now-defunct successor of PalmOS, was the pioneer of this interface on mobile devices (though it’s arguable that Palm itself got the idea from Apple’s Exposé feature on OS X). The entire OS revolved around the concept of apps running as “cards”, and pressing the webOS equivalent of the Home button brought you to an overview of your cards rather than an app launcher. The “flick-to-quit” gesture in iOS 7 was borrowed directly from it.
Circular network status
In iOS 6 and earlier, the network indicator used the traditional stepping bars to indicate signal strength. In 7, Apple replaced that with a design based on five circles, with the number of circles filled in representing the status. Based on one of the images of iPhone prototypes released during the 2012 Apple vs Samsung trial, it looks like Apple had considered this design from early on in the iPhone’s development.
Transparency
A big part of iOS 7 is the emphasis on blurs and transparency. The best place to see this is in the new Music app: scroll through your albums, and you can see the blurred cover art fly behind the navigation bars. Apple’s used transparency in many areas of OS X over the years. The Dock, Launchpad, menu bar, quick look, scroll bars, and dialogue sheets are just a few features that use transparency to some degree in the current version. Transparency is used for much the same purpose as it is in iOS 7 as well: to add a sense of depth and layering. You can see your desktop background blurred out behind Launchpad, just like you can see your phone’s wallpaper in iOS 7′s multitasking interface.
Today
The Today tab in Notification Center gives you a quick glance at what’s going on. It shows the current weather, upcoming calendar appointments, stock prices, any due reminders, and how long it’ll take you to get to locations you frequent.
Google released a similar service in 2012 called Google Now. It can show the same things as the Today tab, but it’s more full-featured because of its hooks into your Google Search history. It’s clear that the Today tab is a response to Now, and it’ll be interesting to see how Apple continues to compete without Google’s search data as part of its service.
Control Center
One of the things that sets Android apart from iOS is the inclusion of widgets: mini-apps that float over the home screen. Whether Apple should include widgets is a question for another day, but it’s undeniable that it gave Android the edge when it came to quickly toggling settings like BlueTooth and Wi-Fi. On iOS, if you wanted to toggle settings you had to go into the Settings app and navigate to the appropriate page. In 4.2 Jelly Bean, Android also added the ability to toggle these settings from the notification drawer as well (see above).
Control Center in iOS 7 is meant to mitigate this: swipe up from the bottom of the screen, and you have access to buttons that toggle Wi-Fi, BlueTooth, Airplane Mode, Do Not Disturb, and portrait lock. You also get brightness and music controls and shortcuts to the Camera, Clock and Calculator apps.
Safari
iOS 7 introduces a new tab page in Safari that replaces the horizontal list of tabs with a vertical list that gives the tabs a tilted look. When you tap on one, it zooms forward until it fills the screen. You can swipe a tab to the left to close it. Another change is the move from a separate search and URL bar to a unified design.
Google Chrome introduced iOS to these particular design styles in June 2012 when it was released on the App Store. Tabs appear as a vertical list (though without the tilted effect) and you could also swipe them away to close them. The unified search/URL bar was actually introduced with the first version of desktop Chrome in 2008, which Apple switched to when Safari 5 was released two years later. A further three years later, and it’s finally made its way to iOS.
Do you like the changes Apple made when they borrowed from their competitors? What design ideas have competitors borrowed from Apple? Tell us in the comments.
Editor’s note: GigaOM will be holding its 3rd annual experience design conferenceRoadMap on November 5th and 6th.