Our Thoughts on iOS 7: CLARITY

0B_intro

This is a continuation of a series about Sequence’s POV on the recently released iOS 7. When Jony Ive introduced iOS 7, he stated that the redesign focused on clarityefficiency, and organization. We’re using those criteria, and the overarching attribute of personality, as our structure for this review series.

Past articles include the series introduction where we establish our review criteria.

 

To have clarity in an experience is to have understanding. Understanding of what the user is meant to do, what choices they have, and how to make them. After using iOS 7 for a number of months and getting a sense of the experience from top to bottom, Apple’s design strategy to achieve clarity could be grouped into three primary aspects.

1. Using Letters as a Design Language

Text
It’s clear that Apple wants typography to take center stage in the new iOS; the prominence and importance of text in the new design system has been dialed up significantly. Since type is the most effective method of communication for most datapoints, the new design makes sense.

Here are a few side-by-sides for comparison (iOS 6 on the left; iOS 7 on the right):

1_compass2_calendar3_map4_calc

Icons as Letters
Continuing the theme of “type first,” the native icons have been distilled down to simple line art, more reminiscent of an alphabet character than a graphic.

icons_1

The icons’ similarity to letterforms creates enough comfort so that actual letters can be used when needed, without feeling out of place. (Let’s gloss over style inconsistencies in the use of different fonts between the “3D” and “I” information icons.  The point is made.)

icons_2

Author Scott McCloud put a lot of thought into the usefulness of imagery, creating a “Picture Plane” diagram that does a great job of charting imagery between the three vertices of the nonsensical “Abstract,” the detailed “Realistic,” and the cognition-heavy “Language.” Using the Picture Plane as our guide, iOS 7 line icons are more akin to actual letters, while the old iOS 6 leaned towards realism.

mccloud_triangle

However, there’s a tradeoff when you distill icons down to their simplest shapes. On the plus side, there’s less visual information to parse, so if the basic metaphor of the icon is cognitively well known to you, it’s a more instantaneous and frictionless communication. But if you are less familiar with the metaphor, then you have less visual information to aid in understanding the icon’s meaning, resulting in confusion and hesitation.

For most users, many of the icons in iOS 7 are not well known, or the use isn’t immediately understood. This creates a significant amount of “what does that icon mean?” testing and trying, causing users to lean heavily on their past experience with iOS 6 and use this knowledge to translate the new icon system.

Beta note about the use of font in iOS 7: iOS 7 launched with a Light version of the font, presumably because it was felt to be the cleanest, but subsequent beta releases changed it to Regular (with a heavier line weight) due to public feedback of illegibility.

2. Minimalism = Clarity

A primary expression of Apple’s “anti-skeuomorphism” stance in iOS 7 is the removal and/or simplification of UI elements. A great example of this is the new treatment of buttons. Presumably, Apple’s theory was that the button label alone (“Save,” “Cancel,” “Add,” etc.) creates enough of an affordance that the user will know what to do without the need for button borders, gradations, drop shadows, etc.

However, visual simplicity doesn’t guarantee experience simplicity. While skeuomorphic design can often be perceived as visually busy and cluttered, it can help the user identify interactive elements. In fact, visual simplicity, taken too far, will actually hinder understandability by not providing enough affordances to let the user understand the capabilities and purpose of the interface in front of them. Despite strong arguments against skeuomorphic design, there are benefits to the practice that cannot be denied.

Looking at the following iterations of the unlock widget, it’s clear that there are cases where Apple went too far in its quest for simplicity. (This is also a great example of the value of using the beta phase to collect feedback and make adjustments.)

5_swipe

The decision to add a third UI element to this area (existing elements included slide to unlock and camera access, while control center access was added) means that even more affordances are necessary to aid in user comprehension.

And while we agree that native iOS 6 treatments of buttons and interactive objects may have been too heavy in some instances, that heaviness brought with it the clarity that comes from understanding which elements are clearly interactive and which aren’t.  With iOS 7, it feels like Apple is overcompensating by removing so many of the expected visual cues for understanding function.

We asked if there might have been a middle ground. The example below presents the past and present iOS styles and adds a similar screen from a 3rd party app for comparison.

6_comparison

Note about skeuomorphism: iOS 7 hasn’t removed all skeuomorphism. The iOS 7 Notes app still features embossed type and textured backgrounds. Other examples exist as well. It’s unclear if this is just an indication that the overall mandate wasn’t implemented uniformly, or if it is acknowledging that in some cases, skeuomorphic design has its place. If it’s the latter, then we would love to know the internal criteria Apple is using to determine what apps keep this style. 

notes

3. Layers of Orientation

When it comes to navigation, iOS has always maintained some pretty clear metaphors that reinforce the user’s understanding of place within an experience.  Whether it’s the screen transitioning right to left to indicate moving deeper within an app (and vice versa) or a modal screen temporarily sliding up over the originating screen to then be dismissed, returning the user to the place they started, the “hub and spoke” model for iOS has been effective in keeping the user orientated within an app.

Frosted Glass
iOS 7 has introduced a frosted glass design element to increase the feeling of depth and the understanding that things on top (toolbars) often affect things below (content).  Modal UIs and interrupt states maintain the blurred UI of the parent screen in the modal background. This reinforces the context that the parent screen is still there and once the contained task in the modal is completed, the user will return to the same place. It’s a solid, logical extension of an already effective system (and has the added benefit of being emotionally impactful).

7_frosted

An understandable criticism of the frosted glass is the visual noise it creates. But we believe that, while skeuomorphism was removed from iOS 7 because of the unnecessary clutter that comes with it, the blurred background of the frosted glass works because there is a reason for it: to establish a sense of layering and orientation.

Zoom Zoom
Another method iOS 7 uses to maintain an understanding of place is the use of zooming in/out as a transition. This is primarily seen when launching an app from the homescreen: the icon appears to move forward, while the app UI appears once the zoom reaches full screen, resulting in the appearance that the app UI was contained within the icon. Just as the frosted glass treatment helps maintain contextual awareness of elements behind the foreground UI, the zooming mechanism gives the sense that objects are containers that hold other objects, while also being a part of a larger whole.

Outro
Whew!!! That was a long post. Our first post was, of course, the longest, since the notions of clarity, efficiency, and organization are very intermingled. The extra length here set up subjects that will be discussed further in following posts.

You’ll have to wait until our last post to see our summary thoughts on iOS, so make sure you come back to check it out.

Share this Story

Related Posts

One Comment

  1. […] articles include the series introduction where we established our review criteria, the first post in the series, where we reviewed the redesign’s success with clarity, and the second post, which reviewed […]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *