How iOS 7 changed third party apps / 09.27.2013

by Suzanne Ginsburg

At first glance, “Redesigned for iOS 7” doesn’t seem to mean much more than a new app icon, borderless buttons, and a status bar colored to match the navigation bar. But if you dig a little deeper, you can find a few ambitious exceptions that fully embrace the three iOS 7 themes—deference, clarity and depth. For some apps, this dedication led to a much improved design. Other apps are worse off than before, with usability compromised and brand identity non-existent. This article features app designs on both ends of the spectrum, organized around the key design solutions introduced the iOS 7 UI Transition Guide. If you’re planning to update your own app—or start from scratch with iOS 7 in mind—the examples may help you get started.

iOS 7 Design Solutions & Outcomes

 1. Full screen layouts & transparent UI elements: iOS 7 lets apps utilize the entire screen from edge-to-edge. For example, if your app currently displays the status bar, with iOS 7 you may enable users to see blurred content “behind” the bar. Similarly, if your app uses other standard bars—navigation bars, tab bars, toolbars, search bars and scope bars—iOS 7 users may see “behind” those as well. If you choose to take advantage of these features, make sure app content fills the area behind the UI element. Additional details can be found in the Bars section of Designing for iOS 7.

Outcome: A large number of iOS 7 apps appear to have transparent status bars with the blur effect.  Others like Twitter have taken a more conservative route–they customized the status and navigation bars so they match and made them opaque. Some apps such as Instagram, Foodspotting and The New York Times go beyond the confines of the status bar and use the new layout to display full-bleed photos.

The New York Times uses transparent status bars and full-bleed photos.

The New York Times uses the blur effect for both the status and navigation bars; it also uses the full layout to show full-bleed photos.

Twitter's status bar matches the app's navigation bar in iOS 7. They have deliberately turned transparency "off" which is not uncommon for many apps.

Twitter’s status bar matches the app’s navigation bar in iOS 7. These are both opaque.

2. Layers and motion: The iOS 7 UI Transition Guide recommends using layers to convey hierarchy and position, reinforcing the relationships between onscreen objects. As users move between these layers, apps may also introduce enhanced transitions to further reinforce the hierarchy and depth.

Outcome: Layers in iOS 7 are frequently used to show text on images (e.g., Yahoo! news photos and musicXmatch albums.) Another application is for quick access to transient views, similar to the Notification and Control Centers. Huffington Post took a variation of this approach for their All Sections screen. Although the intentions were good—to orient the user—the unpredictable photo that appears underneath the screen can be disconcerting. In terms of transitions, some effective ones can be found in the new Luvocracy app—a zoom one with blurring for the left navigation (video on Youtube) and a bounce one for revealing product page photos. To see a parallax effect in action, check out Flipboard’s magazine covers. As you tilt your iPhone or iPad, more of the image is revealed.

Yahoo! uses layers to display text overlays on images in iOS 7.

Yahoo! uses layers to display text on images in iOS 7.

Huffington Post uses a transparent layer for its All Sections screen.

The Huffington Post uses a translucent layer with the blur effect for its All Sections screen.

3. Negative space & color: Designing for iOS 7 suggests that apps move away from unnecessary embellishments and make ample use of negative space: “Negative space makes important content and functionality more noticeable and easier to understand. Negative space can also impart a sense of calm and tranquility, and it can make an app look more focused and efficient.” Additionally, they suggest letting color simplify the UI, “A key color—such as yellow in Notes—highlights important state and subtly indicates interactivity. It also gives an app a consistent visual theme.”

Outcome: Depending on who you ask, many apps have either misinterpreted this recommendation or followed it too closely. Whatever the cause, there seems to be an abundance of apps with loads of white space and delicate splashes of color. While this may be good for Apple – these apps can be easily identified as iOS 7 apps—it might have a negative impact on the app since these vanilla designs can seriously dilute a brand’s identity. After slogging through the sea of white apps, richly colored apps like Snapguide are a welcome surprise.

Snapguide's vibrant colors are a welcome relief in the sea of white apps.

Snapguide’s vibrant colors are a welcome surprise in the sea of white apps.

4. Dynamic type: Dynamic Type provides automatic adjustments to letter spacing and line height for every font size. If your app chooses to adopt Dynamic Type, text will respond appropriately when users change their preferred text size in Settings. Apps where reading text plays a central role—news articles, email, Tweets—could benefit most from this feature. Moving your app to Dynamic Type means users will have less work to do and a more consistent reading experience.

Outcome: Adoption of Dynamic Type is not widespread at this point. One reason for the low adoption is simply necessity—it’s most beneficial for a subset of apps and these apps have already developed homegrown solutions to address text sizing. But these homegrown solutions are also part of the problem since it means users have to adjust the text size for each app.

nyt-dy

The New York Times uses Dynamic Type, shown at the largest size.

5. Auto Layout: As noted in the iOS 7 documentation, apps that take advantage of Auto Layout may have an easier transition from iOS 6 to iOS 7 since the feature makes the app automatically adjust to the new UI element metrics. Also, incorporating Auto Layout in concert with Dynamic type enables apps to adapt to changes in text size. For example, you may want to change a one-column layout to a two-column layout when the user chooses a small text size.

Outcome: When Auto Layout is used to address the transition from iOS 6 to 7 it’s hard to identify since it may only be obvious in the code. On the other hand, when it’s used with Dynamic Type the examples should be easier to come by. That said, I haven’t found any so please send any examples you have to share.

6. App icon & button bar icons: App icons for iOS 7 have several changes which are outlined in detail in the Icons & Image Sizes section of Designing for iOS 7. Notable changes include a slight increase in size, a new golden ratio grid, new color scheme, more flat style, and a curved outline. Additionally, Apple recommends that apps redesign any custom bar button icons so they are lighter in weight and similar to the iOS 7 style.

Outcome: All iOS 7 apps have updated their app icons since it was on the “must” list in the UI Transition Guide for iOS 7. In contrast, only certain apps have redesigned their button bar icons to match the new look and feel. Some may be reluctant to change their current ones, particularly apps that custom designed their icons to fit their brand. Then again, it could just be a matter of time. All apps may eventually update their icons as they may start to look too dated—“Oh that app is so iOS 6!”

Shazam redesigned their icons for iOS 7.

Shazam redesigned their icons for iOS 7.

The Ted app redesigned their button bar icons for iOS 7.

The Ted app also redesigned their button bar icons for iOS 7.

7. Borderless buttons: Apple recommended that apps add button borders or backgrounds only when necessary. The rationale is that users typically know that most items in bars, action sheets, and alerts are interactive, thus the border is unnecessary. Some exceptions for this rule that were included in the UI Transition Guide: the built-in clock’s timer start button and the “buy” button within each iTunes row.

Outcome: Borderless buttons are widely used in many iOS 7 apps perhaps because this change is low impact and low effort. When used in the navigation bar they are clearly actionable UI elements, however, when shown alongside main app content some borderless buttons look like stylized text. Part of the problem with these “buttons” is that every app has a different action color, e.g., Foodspotting is green and Opentable is red.

Some of Foodspotting borderless buttons may not appear actionable to users.

Some of Foodspotting borderless buttons may not appear actionable to users.

Borderless buttons in the Snapguide navigation bar.

Borderless buttons in the Snapguide navigation bar.

8. Other views & UI controls: A large number of standard controls were updated for iOS 7 including: date picker, contact add button, detail disclosure button, info button, labels page control, picker, progress view, refresh control, segmented control, slider, stepper, switch, text field. Temporary views such as action sheets, alerts and modal views have also undergone visual changes. None of these should have a significant impact on pre-iOS 7 app designs since the form factors are similar. Details are in the Controls section of Designing for iOS 7.

Outcome: There are numerous examples of apps that use the new UI controls since they come for “free” with the upgrade (no coding changes needed.) One nice feature worth mentioning is the ability to customize the color of the switch “on” state.  It seems gratuitous but this small detail can make a screen feel truly unified. Another welcome change is the new table structure which allows fields to reach the farthest edges of the screen, providing more space for users to type.

Luvocracy's sign up features the new tables, switches & more from iOS 7.

Luvocracy’s sign up features the new tables  from iOS 7.

Luvocracy's switches are red.

Luvocracy’s switches are red.

Foodspotting's switches are green.

Foodspotting’s switches are green.

9. Gestures: With iOS 7 users may now swipe up (also known as the “screen-edge pan gesture”) from the bottom of the screen to reveal the Control Center. Similarly, if users wish to access Notifications, they may swipe down from the top of the screen. Apps that currently uses similar gesture commands should reconsider their approach as they may conflict with these built-in gestures.

Outcome: Unfortunately, even apps without clear gesture conflicts may be impacted by these changes, e.g., scrolling up on the New York Times news can accidentally reveal the Control Center. Also, it appears that some apps may have changed their navigation style to avoid gesture conflict. For example, Facebook now has a tab navigation bar on its main screen—presumably to avoid a conflict with the back swipe gesture? While the goals behind Apple’s new gestures were laudable, the implementation has its flaws.

Facebook has gone back in time and reintroduced the tab bar from earlier versions, albeit with different tab items and icons.

Facebook has gone back in time and reintroduced the tab bar from earlier versions, albeit with different tab items and icons.

10. System improvements: In addition to the in-app changes described above, OS level changes may impact third party apps, notably Share Sheets with Airdrop and Multitasking. If an app already integrates with the OS Share Sheets they automatically get the new sheet. Also, multitasking features that used to be limited to built-in apps are now more widely available, which means downloads and updates can happen in the background.

Outcome: Share Sheets with Airdrop can be seen in many iOS 7 applications though there are plenty of apps that still use a simple action sheet or a home grown solution. It’s hard to blame them considering the complexity of the new Share Sheets. As for multitasking, it appears that many news and photo apps are taking advantage of the background upload/download support. Fortunately users may turn off the multitasking in Settings if it impacts performance, though I wonder how many people will be able to troubleshoot this type of problem.

New York Times uses the new Share Sheets with Airdrop.

New York Times uses the new Share Sheets with Airdrop.

Albumatic uses a simple action sheet instead of the Share Sheet.

Albumatic uses a simple action sheet instead of the Share Sheet.

Want to learn more:

Filed under: ipad, iphone | Comments Off on How iOS 7 changed third party apps »

Comments are closed.