Designing Mobile Applications for iOS 11
Part 1: Thinking in Layers
With the release of iOS 11, Apple has revised the user experience of some of their native applications and introduced new interaction patterns.
In the course of dissecting the interaction patterns of the App Store and Airbnb’s mobile app I’ve documented a new approach to navigation in iOS 11 that dispenses with the static page model and introduces a layered approach in which full bleed panels, UI elements, and action sheets stack on top of one another. The impact of this approach is felt in some key aspects of Apple’s mobile navigation: the bottom tab nav and top navigation bar.
The new release of the App Store takes an editorial approach to content offering daily updates that promote individual apps and collections of apps organized by theme and category.
With the shift to a daily format, the home screen organizes apps into a long scrolling news feed.
Single apps or groups of apps are displayed in graphically rich cards.
Cards are customizable within a narrowly defined design system and are composed of a number of elements:
Images : Full bleed or 3/4 the height of the card
Subhead : Located on top of the headline, used to indicate category or genre
Headline : Tagline or theme of the app or collection of apps
Caption : More details about the featured app
Icon : Floating above the background image (2) or incorporated within the cell (4)
Chip : A call to action or price, confined in a rounded rectangle
Cell : Reserved for collections (4) the cells adhere to a traditional iOS format, composed of an icon, title, subtitle and a chip
While cards are a familiar approach to showcasing articles or items, the interaction patterns that follow are a greater departure from the previous iOS experience.
The home screen is organized into weekly issues, apps within each issue are arranged hierarchically in a vertically scrolling news feed.
Featured apps or collections of apps are organized into cards. Cards afford a single interaction — press for details.
- Detail Panel
On press, the card grows to occupy the layer above the feed. The panel obscures the status bar, the navigation bar and the tab navigation.
- Utility Bar
Gone are the traditional status bar and navigation bar. Say hello to what I’m calling the utility bar.
The utility bar is a transparent or semi transparent bar that pins to the top and floats above the content. In this scenario, the utility bar is occupied solely by a close button that changes color based on the content. In other apps the utility bar offers more interaction choices. (see airbnb)
- Bottom Action Bar
On scroll an action bar is revealed. The action bar is pinned to the bottom and drives deeper interaction.
- Action Sheet
On press of the bottom action bar an action sheet appears on a layer above the detail screen — obscuring the content below.
Thinking in Layers
Rather then thinking of interactions occurring on separate pages, it’s helpful to think of interactions occupying layers stacking on top of one another.
Each layer is a step forward toward completing a focused task.
In the App Store the first layer is the feed on the home screen.
The second layer is the detail panel, content launched from pressing a card.
The action bar and utility bar occupy the third level, pinned to the top and bottom of the view port and floating above the content on the second layer.
The fourth layer is the action sheet, the final step in the completion of a task.
AirBnB: iOS 11 Interaction Patterns in Action
The same layered interaction patterns are evident in Airbnb’s mobile application.
Search results appear as a vertically scrolling feed of cards.
Properties appear as cards. Cards afford two simple interactions — press for details or press to favorite. Similar to the App Store they are composed of common elements: photos, headline, sub head and rating/review.
- Detail Panel
Detail panel obscures all other navigation; the system tool bar, the nav bar and bottom tab navigation.
- Utility Bar
The utility bar floats above the detail panel and affords three actions — a back button on the right and the capacity to launch a message panel and favorite panel on the left.
From this example you can see how the utility bar can offer more potential then the traditional navigation bar.
- Bottom Action Bar
On Airbnb’s app the action bar is ever present, pinned to the bottom, it occupies a layer above the content and drives interaction with a prominent button designed similarly to an iOS chip.
- Action Panels: Messaging
The utility bar affords two key actions — messaging and favoriting. The interactions take place on layers above the detail panel. Messaging obscures the entire detail panel and launches deeper interactions into messaging - affording access back to the detail panel via a close button on the left.
- Action Panel: Favoriting
Favoriting follows the App Store action panel format — acting as a traditional action sheet occupying the bottom third of the view port
As with any new interaction pattern there are risks to consider.
How many layers is too many?
While the layered approach offers an intuitive and focused approach to simple flows it may present issues with more complicated interactions.
As layers multiply will users become disoriented and abandon tasks?
How well will users adjust to navigating backward through layers to return to a page with a bottom tab nav or menu?
Will users miss the status and navigation bars?
The absence of the navigation and status bars on secondary and tertiary layers may be disorienting for some. However their extinction may be inevitable if rumors of a central notch in the new iPhone’s screen prove true.
Does the layered approach remind anyone else of Material?
As I’ve been designing an app for iOS 11 I’ve found dissecting Apple’s latest apps inspiring.
Leveraging Apple’s user experience and UI components may help bootstrap your design process and assist you in building a cohesive user experience across applications.
Hopefully it will inspire you to push beyond these patterns and evolve the user experience with your next endeavor.