Product DesignApp Development

Designing for a notched world

Nobody believed they would actually do it. The announcement of the iPhone X (iPhone 10) and its now-infamous notched screen was met by the mobile design community with at least some level of consternation, stress, and at worst—sheer horror:

Ben iPhoneX tweet

The design group at WillowTree has its fair share of reservations about our new notched world, but are taking steps to ensure we’ve considered most of the implications for existing products and new design engagements. And while the notch is stealing the limelight of post-announcement discussion, we believe the implications of the edge-to-edge screen with rounded corners and ‘swipe up for home’ features are equally critical for designers to understand and embrace.

divider 600

Brave Notched World

In its most recent update of the Human Interface Guidelines, Apple instructs designers not to obscure or draw attention to the notch or the screen’s rounded corners:

"Don’t mask or call special attention to key display features. Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don’t use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either."

This doesn’t mean that Apple will necessarily reject apps that don’t follow their interface guidelines, but they certainly reserve the right to and have done so in the past.

Of course, there will very likely be scenarios where designing the sensor housing / notch to disappear will make sense. Apple even had an example of Apple Music using this tactic in a modal player view.

Black Status Bar Apple Music

Respect the Safe Area

Because of the notch—but also due to the rounded corners of the screen—it’s of critical importance to mind the ‘safe area’ defined by UIkit.

You can think of this safe area like you think about overscan when designing for TV apps for platforms like tvOS or Roku. As long as you respect the safe areas, you won’t run into any clipping issues around the notch or rounded corners.

iPhone X safe area

Consider both landscape orientations

Ensure your design doesn’t break when the notch is at right or left when in landscape mode. Adhering to the safe area guidelines will help, but you’ll still want to mock up how the layout will look in both cases. The irregular margin created by the notch could lead to negative space imbalance or other visual oddities if not carefully considered.

Beatles notch tweet

divider 600

Tab Bar and Home Changes

Everyone’s talking about the notch, but the iPhone X also radically changed the lower area of the interface, the most actively used part of the screen (it’s closest to thumbs). Apple modified the most common navigation model, the tab navigator, to extend downward beyond the ‘home bar’ and fill the rounded corners of the screen. The new tab bar design is visually anchored to the bottom of the screen and is carried through the rounded corners which adapts the design to fill the more rounded shape of the screen:

iPhone X tab bar

In testing a few of our apps in the new iPhone’s simulator, we discovered that if using custom navigation controllers for either the top navbar or the bottom tab navigator, layout issues like ‘floating’ tabs could occur. Apple says in their HIG that apps that leverage standard UI elements with autolayout should be safe from such visual bugs.

Swipe up for home

Apple touted the lack of a physical home button as a logical next step for the evolution of smartphone hardware design. Apple’s claim: Why do users need a physical button when a gesture could serve the same purpose?

To get to the home screen, users will swipe up from the bottom edge of the device. It looks natural and effortless, but perhaps less-so than the slide to unlock model or physical home button.

However, swipe to home does make sense with some of the other ‘swipe to dismiss’ gestures now commonplace in mobile apps, such as the photo gallery view in the Facebook app.

Facebook video gallery

The introduction of the swipe to home gesture has major implications for apps that make use of swipe up gestures, like American Airlines’ custom navigation controller. You’ve probably already experienced such a conflict if you’ve ever tried to open Control Center while in the Facebook Video Gallery modal.

Apple’s home gesture will likely leverage an edge swipe (like accessing control center in iOS 10). Designers should carefully plan for precise gesture activation regions with developers so that your app’s gesture controls don’t conflict with the home gesture.

divider 600

Embrace the Notch.

To quote our Director of Product Design, David Murray :

“The new [iPhone X] screen takes on a more organic form, which breaks today’s expectation that screens are always rectangular.”

Apple has taken an important, if jarring, first step in breaking the ubiquitous glowing rectangle of the modern smartphone screen. We at WillowTree think that’s pretty exciting, and while we understand the drawbacks of the iPhone X’s screen, we’re embracing it for the new age of mobile design possibilities it will motivate.

Moving from Monolith to Microservices Architecture

When a client decides to move from a monolith platform to microservice architecture,...

Read the article