Search

Apple Design Goes Flat with iOS 7

Kar Loong Wong

4 min read

Sep 17, 2013

Apple Design Goes Flat with iOS 7

Lots of people have been calling Apple’s new iOS 7 design “flat,” but to me, that’s oversimplifying Apple’s intent.

First, let’s go back to 2007. There is no iPhone, no one knows what multi-touch means, there’s no swipe left, no pinch to zoom. To help users understand these new concepts, Apple had to make them immediately familiar to users. Therefore, they decided to mimic real-world objects for the basis of their app UI, in an approach known as “skeuomorphic design.”

However, there is a problem with skeuomorphism. In skeuomorphic design, elements may be decorative and non-functional, which can be a major distraction from content and functionality. Look at the interface for the Game Center app, which was designed with a wooden title bar and green felt background. The whole app looks like a felt gaming table. The downside is its lack of scalability: How would a search field or a Facebook share button look on a green felt background, without ruining the illusion that this is a gaming table?

Game-Center-screen

I will say that even with its downsides, the skeuomorphic design is very intuitive, so much so that even a 17-month-old baby can use it! Here is the proof. Ok, it’s a fun video, but I digress.

A little over six years have passed since the first iPhone was introduced, and we’ve all grown accustomed to having multi-touch in our daily life. Every time I come across a screen, I automatically assume it has a multi-touch interface, and I’m disappointed if it does not.

IOS 7 fOCUSES ON THREE MAIN THEMES: Deference, clarity and Depth

Deference

With iOS 7, Apple has decided it’s time to take off our training wheels. They have stripped away the faux UI to expose the app’s core functionality, reaffirm its relevance and build up from there. That means putting content first! Apple has created a UI that helps users understand and interact with the content, but never competes with it.

For example, in the new Weather app, current temperature information is featured front and center. The realistic cloud animation plays a secondary role. Gone is the card appearance of the old app, with its unnecessary ornamentation and artificially confined data. The edge-to-edge design gives elements more breathing room, creating a less cluttered feel.

iOS7 Weather app vs. iOS6 Weather app

Depth

With the new design, Apple does not rely on skeuomorphism for dimension and realism. That means that iOS 7 has no artificial shadows, no unnecessary ornamental elements and no faux textures. The sense of physical realism and liveliness are instead being conveyed through how things respond to users’ touch interaction, via realistic motion and  parallax effects.

Here is an example of parallax effect on iOS 7: an object’s position or direction seems to change depending how your device is tilted.

iOS 7 parallax animation

Another example is the Notification Center’s slide down animation, which bounces back as if it’s rebounding from a fall. The degree of bounce back depends on how forcefully users swipe down.

iOS 7 Notification Center Animation

The use of translucency, combined with animation and motion, further create a sense of depth and vitality.

Clarity

The design of the application should make it clear how the user uses it. In, say, Apple Mail, there is a clear distinction between what is content and what is control, through the use of system blue color to show users what elements are interactive.

iOS 7  Email App

This update will be jarring for users who have become used to skeuomorphic design, but trust me: The new design has more realistic animation and realism than skeuomorphic design can ever offer.

Tips for using iOS 7

  • In most native applications, swiping the left edge and right edge takes users to the previous or next page. This is a very useful feature, especially when navigating between pages in Safari or Calendar.

  • Pulling down anywhere on the home screen will display the search box.

  • You can now store significantly more apps within a folder.

  • You can easily disable parallax effects through the accessibility settings.

  • Don’t freak out if you don’t see any app updates. They are updated “automagically.”

  • The Notification Center will learn when and where you commute, and it will recommend the best route and tell you how long it will take, based on current
    traffic conditions.
    iOS 7 Notification Center Travel Time

  • You can now block pesky calls or texts with a built-in call blocker.

  • A single swipe from the bottom of the screen will bring up a control center that enables you to quickly access airplane mode, the camera, a calculator, bluetooth, wifi and more, even on your locked screen.

  • Most importantly, enjoy the ride!

Zack Simon

Reviewer Big Nerd Ranch

Zack is an Experience Director on the Big Nerd Ranch design team and has worked on products for companies ranging from startups to Fortune 100s. Zack is passionate about customer experience strategy, helping designers grow in their career, and sharpening consulting and delivery practices.

Speak with a Nerd

Schedule a call today! Our team of Nerds are ready to help

Let's Talk

Related Posts

We are ready to discuss your needs.

Not applicable? Click here to schedule a call.

Stay in Touch WITH Big Nerd Ranch News