9 Comments

Summary:

Several of the concepts introduced to iPhone users in iOS 7 were modeled after features developed by competitors scrambling to catch up to Apple’s original iPhone breakthrough. Here’s a look the inspiration for those features.

horizantal iPhone iOS 7 screenshot home screen

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

webos_cards

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

iphone_prototypeIn 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

today_googlenow

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

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

safari_chrome

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 conference RoadMap on November 5th and 6th.

  1. The old ios 7 had all old tech thing,but overall i think that it was ten times easier to use. The problem was it was way to easy to hack into it though

    Share
  2. It’s interesting to see where Apple drew some of its inspiration for the iOS 7 design. Certain elements are definitely heavily inspired by their competitors, but overall the software is a huge improvement over iOS 6.

    Share
  3. I do not agree that pages in Safari is an idea borrowed from Google Chrome and the multitasking task card is from WebOS.

    Apple has already implemented these ideas in Hypercard. They may not be exactly the same as in Hypercard but the ideas were there. Furthermore, Hypercard is the predecessor of today’s web browser.

    People tend to forget a little bit of history.

    Share
    1. Stolen ! ” Great artists steal” Shamelessly copied.

      Share
  4. To me it looks like iOS 7 borrowed its visual style from….Windows Vista!

    Share
  5. As one of the older users who constantly touts the value of the Apple design in products, I am very disappointed. I have old eyes and this new design set is just plain “much harder to see”. Now glasses are required for everything and I cannot go back to IOS 5 – no “tweeking” can solve this issue :-(

    This statement should be given to everyone when they allow the upgrade – “this is irreversable”.

    I wrote to Apple about the icons months ago – really – primary colors? No beauty, no clarity, no depth – just hacking off the most depressing feature of Android. Safari tabs… most of us are right-handed… now you must close a tab with the close x on the upper left? One more leve of inconvenience.

    Apple used to set the standards – now they are back to following the standards – maybe they need to stop drinking their own Koolaid and go back to classy, elegant design. I could go on and on regarding how much less useful this new OS is – guess I will just have to be satisfied with the fact that only my phone has been updated. My iPad still looks lovely…

    Share
  6. Ios 7 upgrade is a design failure by Apple. Most current owners of Apple products bought those products specifically because they liked the look of the products, compared to competitors (among other things). To have an upgrade that completely changes that look leaves many users with a product that they like LESS than what they bought.

    Specific issues include:

    1. the removal of “button” graphics and the use instead of text on a flat white background makes it difficult to intuitively know what can be tapped and what cannot.

    2. the removal of most beveling, shading and textures leaves everything looking plain and white and forces the user to have to think to understand where the different “fields” in the app are–e.g., in the calendar program it’s necessary to think more to understand the layout.

    3. Many of the app icons have been changed to make them flatter, but also more abstract. Thus, for example, the “settings” icon, which used to look like an image of gears (intuitive) now looks like an abstract representation that may or may not be gears (not intuitive).

    4. Removal of designs with real-world mechanical analogues, such as a mechanical-looking “slide” to unlock the device forces a user to think more.

    Point: skeumorphism serves a purpose. Not just in getting people “comfortable” with technology, but in providing visual cues that allows a person to use an app more quickly and intuitively.

    Share
  7. Ios 7 upgrade is a design failure by Apple. Most current owners of Apple products bought those products specifically because they liked the look of the products, compared to competitors (among other things). To have an upgrade that completely changes that look leaves many users with a product that they like LESS than what they bought.

    Specific issues include:

    1. the removal of “button” graphics and the use instead of text on a flat white background makes it difficult to intuitively know what can be tapped and what cannot.

    2. the removal of most beveling, shading and textures leaves everything looking plain and white and forces the user to have to think to understand where the different “fields” in the app are–e.g., in the calendar program it’s necessary to think more to understand the layout.

    3. Many of the app icons have been changed to make them flatter, but also more abstract. Thus, for example, the “settings” icon, which used to look like an image of gears (intuitive) now looks like an abstract representation that may or may not be gears (not intuitive).

    4. Removal of designs with real-world mechanical analogues, such as a mechanical-looking “slide” to unlock the device forces a user to think more.

    Point: skeumorphism serves a purpose. Not just in getting people “comfortable” with technology, but in providing visual cues that allows a person to use an app more quickly and intuitively.

    Share
  8. Good article. By the way the origin behind all those changes is right, but you missed where they really came from, exactly. In 2011, HTC and Apple closed a deal where they are sharing their patent portfolio for 10 years, and if you go look at the multitasking and the HTC Browser you might notice they did the same WebOS card interface. Another thing to note here is that since HTC did produced the first ever Android smartphone they happen to have valuable patents of Android’s interface which Apple could exploit.

    In general the article is really good, nicely done. (Y)

    Share

Comments have been disabled for this post