July 10, 2013

The New User Experience Design of iOS7

Apple showcased a re-design of their mobile operating system on June 10. There is a lot of discussion in the industry and as one can imagine, there are people who feel positively about the changes and those that don’t. However with this design update, Apple is re-evaluating its entire design language. To help ease the transition, Apple has preserved some semblances to the existing OS design, yet enough has been changed that we can expect a superior structure and design standard to follow in future versions.

In this article, I review the changes and attempt to understand the rationale behind them, based on my analysis of Apple’s marketing material. I shall not talk about moving to a flat design from a skeumorphic design, as that has already been well-covered.

So let’s lift the hood and check out the changes underneath.

Visual Design

Color Palette

With iOS7, Apple is building a specific and consistent palette. For instance, the shade of blue used in the Mail, App Store, Safari, Weather and Maps application icons is the same. Though the color consistency is an improvement, this is somewhat diminished by inconsistency in the gradations of blue. In some icons, the blue goes from light to dark, and in others, it goes from dark to light.

iOS7 Color palette

Once you launch the app, the app icon color also ties to the primary color within the application. Let’s look at a few examples, namely the Notes, Inbox, and Calendar applications:

iOS7 Notes and Inbox Images

iOS7 Calendar Image



Just like standardizing the color palette, iOS7 also brings greater standardization to the icons. The icons now have a consistent style, to the level that even the line width across icons is also consistent. Following are some icons that have been introduced in iOS 7.

iOS7 Iconography

iOS 7 Typography

The font selection is very quickly evident when using iOS7. Jonathan Ive’s team has chosen a sleeker font that’s both sharper and takes less space. But like other design changes, there is more to it.

One, there is a clear style guide being developed with respect to typography. For example, let’s look at the visual hierarchy created for the Mail application listing screen.

Apple team has applied various levels of text sizes and colors in order to help the user focus on the most important information easily. In the Mail application, the greatest prominence has been given to the page title and then to the sender of the email and the available actions. This is to help the users scan and identify the email they care about the most. This is followed by the subject and then the details and the timestamp.

iOS7 typography
The second level of detail that Apple has focussed on is to make sure that the font scales well. In other words, the layout and readability of the font is maintained from small to very large sizes. In order to do so, they have not just scaled the font, but have adjusted the thickness of characters and the spacing in between to make sure the scaling works well.

iOS 7 Font
The impact of these changes can be felt in screens like Notification center and the Weather app, where one sees a significant variation in font sizes:

iOS & Notification Center & Weather Apps

iOS7 Grids

iOS7 seems to follow a 12 point grid system. With 768px width, this translates into 32px columns. Here is a closer look at some of the dimensions being applied into their grid system for the Mail application. A grid brings in a structural balance in the design. Applying the same core grid across applications also makes the experience more consistent and flows better.

Apple has shared little about this so far, we should expect to see more details on this in Apple’s Design Guidelines for iOS7. Such guidelines should help 3rd party developers help build a more cohesive experience for the end users across various applications.

iOS7 icon grid

The grid has also been applied to the application icons. In addition the icons have been made larger – 120px instead of 114px.

iOS 7 application icons

There is a level of coherence and flow that appears as one studies the OS. At the same time the icons of the applications created by other developers have a different visual style and that creates a conflicting experience for users.

Overall, while we may or may not like and agree with the color and design choices, the structure being defined here can be very useful and add value to new application designs.

Interaction Design

Apple’s designs are never skin deep. Quoting Steve Jobs, design is not just what it looks like and feels like, design is how it works.

At its core, the iOS7 redesign is not about following a flat design trend or responding to the criticism around skeuomorphism. It is about bringing a greater purity to the design. Though the interaction design has improved, the visual design is not as big a step forward as one would expect. In many cases, the visual design actually hinders the interaction.

Lets look at a few examples:

First Step – The Unlock Screen:

The lock screen has been cleaned up quite a bit. It doesn’t have any ornamentation, and simply shows the date and time in large, easy-to-read font.

However the new design makes it rather difficult to know which direction to slide to unlock the phone. There is a shine that moves over the “Slide to Unlock” text from left to right. But one cannot expect the user to necessarily understand that the shine animation represents the direction in which to slide.

Though this is an easy thing to learn, a small arrow at the end of the text or another such small indicator would help re- confirming the direction in which the user is required to slide.

Once you do slide, the transition is much better. In iOS6 the animation broke the view into sections that animate in separate directions. In iOS7, the slide interaction slides in the required view – which could be the unlock code view or the springboard. It feels much more like the expected response to the slide action.

Following are the screenshots. The screen shot on the left is from iOS6 and the screenshot on the right is from iOS7:

iOS 6 vs iOS7 slide to unlock screens


The first screen shot is from iOS6 and the second one from iOS7:


What has changed:

a) The shine effect has been retired

b) Softer colors have been applied

c) The icons are actually larger (120px v/s 114px)

d) The number of objects used to communicate the purpose of an icon have been reduced – for example the Calendar icon

e) Shadows have been reduced – for example see the app name text. This has allowed for the text to be larger.

An informed guess about Apple’s thought process is that this allows the user to focus on an icon with a greater ease, as there is lesser distraction. If this is true, then the users should be able to find the application faster than they are able to do in current OS designs.

To validate this, along with a colleague, I did some hallway usability testing. We tested the iOS7 and iOS6 springboard interfaces with 14 people, asking them to launch the apps while we observed and timed them. We found that in most cases the iOS7 design took people more time to recognize the icon. We found the variation to be greater in case of non- iPhone users v/s current iPhone users.

The following graph shows the relative time it took to launch various applications on iOS 7, keeping the time taken on iOS 6 as the baseline. For example, the Notes application icon took about 84% more time to be identified on an average across the 14 people, about 30% for the non-iphone users while about 134% more time for the existing iPhone users.

The Notes application icon in particular also took significantly more time than other icons. This can be explained by the fact that the people were not given any time to familiarize themselves with the springboard layout that we had chosen. The Notes icon was the first one we asked people to launch. For the subsequent icons, people had already formed a familiarity to the layout, leading to a significant drop in the time taken to identify the icon.

Relative time taken on iOS7
Launching and Closing Applications

The launch transitions have been improved. In iOS6, the animation always started from the middle of the current view, even if the icon was placed elsewhere. In iOS7 the transition starts from the icon that is being tapped and grows into the full screen app. There is greater continuity and association between the action and it’s result.

The reverse transition adds even greater value. When an app is minimized/closed, the transition goes in reverse. It starts from the full screen and shrinks to the specific icon. This provides a greater visual reference to the user as their eyes naturally follow the animation. Also, if one closed the app by mistake, this makes it easier to find the right icon and re- launch the app.

In – App Experience

In many of the applications, the iOS7 design shows a greater focus on the function. Many of the design elements presentin iOS6, which largely only provided an ornamental value, have now been dropped. Lets look at the Compass application. The first screen shot is from iOS6 and the second one from iOS7:

iOS Compass App - iOS6 vs iOS7

The iOS6 compass used a skeumorphic design. As a result it was limited in many ways. By moving away from the current design, iOS7 has been able to improve the functional value in a couple of ways:

1. The direction labels (N, E, W, S ) remain straight and thus are more readable. This would have broken the design in iOS6.

2. Apple designers have also been able to integrate a “level”. The “+” symbol and the circle in the middle moves and aligns with the big + symbol in the middle when the phone is perfectly horizontal. This again would not have been possible with the iOS6 design.


So what do these changes mean? There are two sides to this question: First, what does Apple do with it? We have seen a glimpse of this with the beta release. Most people I have spoken with do not like the colors and other design decisions, while some do.

Second, and in many ways perhaps more importantly, what would the 3rd party application developers do with it? This is where a huge opportunity lies. By embracing a design change like iOS7, Apple is both better aligned, as well as has provided better canvas for the other designs and developers to build much better experiences.

Here are some examples:




Overall, I think iOS7 is a step in the right direction. Some specific decisions about color and style have been criticized and rightly so, but the underlying system looks strong and in line with what the app building community was looking for. I would expect the design teams at Apple to heed the criticism and correct that to further improve the experience.