UI Design for iPhone X: Top Elements and the Notch
In the same spirit as the first post (UI Design for iPhone X: Bottom Elements), this post will deal with designing for the iPhone X. I use findings in our own apps in some of the examples.
The Notch (Sensor Housing)
You can’t talk about this topic without first addressing the controversy the notch has caused.
John Gruber said “It offends me. It’s ungainly and unnatural”, and Joshua Topolsky went as far as “It is, put plainly, a visually disgusting element”.
Regardless of your feelings for the notch, the reality is that to do a near edge-to-edge screen on a phone in 2017; you need to make place for sensors and speaker. The technology to hide them behind the screen simply is not here. We’ve seen different manufacturers choose different solutions to the problem. This is the one Apple chose, so let’s work with what we got.
So how should you deal with it?
Apple writes in the HIG: “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.
In the Designing for iPhone X video, posted by Apple after the X’s announcement, Mike Stern says: “Your app or game should always fill the display that it runs on. Placing black bars at the top or bottom of the screen makes your app feel small, cramped, and inconsistent with other apps on iPhone X”.
Apple is choosing to highlight the fact that the screen reaches the top left and right corner of the device. So the recommendation is clear. As a good platform citizen, one should follow their lead. By doing so, you likely have better chances to be highlighted by Apple in the App Store, or even win an Apple Design Award.
Eventually, they will get rid of the notch. It could be 2, 5, or even 10 years, but it’s a stop gap, not a permanent design solution. In the meantime, treat it like the elephant in the room. We all know it’s there, but for the most part, you should design as if it’s not.
Status Bar
Because of the notch, the status bar has gone through a significant change on iPhone X.
The familiar 20 pt tall status bar, the same height it’s been since the first iPhone…
…is now 44 pt tall on iPhone X.
The number 44 pt is found once again in the screen’s corner radius. That number has been with us since the first days of the iPhone, as a 44 pt sided square has been used to represent the smallest touch target that can be hit easily.
Scrollbars stop before the screen radius begins. So by using a status bar background like this, scrollbars have a visual stop.
Apple points out: “If your app currently hides the status bar, reconsider that decision on iPhone X”. I always thought apps that hid the statusbar did the wrong thing as you’re hiding important information from the user.
Navigation Bar
Customized navigation bar for Vegourmet. Black bars works especially well on the iPhone X. The notch stands out less, while the blur effect still allows content to shine through.
The taller status bar is combined with the height of the navigation bar for a total of 88 pt. As a developer, you should use the Safe Area Layout Guides.
Transparent Navigation Bar
When viewing a recipe, we let the recipe photo take up most of the screen, and a transparent navigation bar is a natural way of doing that. The effect works well for iPhone X, too.
We use a gradient divided into navigation bar image and shadow image for an extra tall and smooth gradient overlay. By letting the navbar image stretch, the same asset works well on older devices as well.
Cards
Music and Mail are two examples of Apple apps with card UIs that leave the status bar area against a black background. These are used to highlight the modality of a screen, such as now playing or composing an email.
This style goes against Apple’s guideline of letting content reach the corners and should be used sparingly.
Still, it’s a good look when the UI blends with the hardware, I always thought.
Large Titles
Large titles work well to present a section of your app. Typically it can be used at the root level of a tab, but in some cases, it may be warranted further down in the navigation hierarchy.
The lost screen real estate is reclaimed as soon as you scroll.
Going with a black UI is one way your app could blend more nicely with the hardware, while still following Apple’s guidelines.
Landscape
In landscape, the Safe Area Layout Guides pad your content 44 pt from the left and right edge, effectively avoiding both the sensor housing and rounded corners. It also pads away from the home indicator at the bottom of the screen.
Table view cells and background colors reach the edges, giving a kind of faux full-screen experience.
Safari makes extensive use of padding. By default, content will be inset 44 pt from the left and right edges. Web developers can adjust their sites to reach edges of the screen if they desire.
To better utilize the full width of the screen you can look to Apple’s revised video player UI. Its floating elements are tucked a bit into the corners of the screen.
Apple’s video control actually uses a superellipse shape. It’s also an excellent example of how to harmonize UI with the screen corners. Distance, 27, plus radius of the control, 17, equals 44.
Apple Maps do a similar thing, where some of the controls will go close to the edge of the screen, but unfortunately they don’t harmonize with the screen’s corner radius.
If you rotate the device 180°, the controls are pushed away by the sensor housing, which ruins the symmetry. It’s not a perfect solution.
Remember that this first iPhone X is derived from the 4.7" screen size and don’t use landscape views as extensively as the Plus phones do, with their 5.5" screens.
Landscape on this size phone has always been a compromise, and likely most users will only use landscape for browsing or playing video or games. I find it kind of annoying when apps rotate to landscape, as that’s almost never something I desire.
Status Bar Tidbits
There can be a location arrow next to the clock and an animated dot above the status indicators to indicate network activity.
The consolidation of the status indicators to the right makes a bit more sense when you realize you can swipe down the right side to reveal Control Center with the old status bar. This is what you have to do see all your status items and battery percentage.
The in-call status bar which previously doubled the status bar height is now a simple button shape around the clock. Recording and background location usage are treated in the same manner, with a red and blue button shape respectively.
The home screen edit mode for rearranging icons uses a curious solution where the status indicators are replaced with a Done-button.
And Finally… What NOT To Do
Don’t use the status bar area to animate rainbow colors shooting out of the notch.
Don’t use the notch as a UI element…
…nor as a pull-to-refresh spinner.
(These were not unprompted, ideas like these are floating around…)
Further Reading & Resources
High level insights with relevant documentation and videos can be found on Apple’s Update Apps for iPhone X page.
Read the first post in the series; UI Design for iPhone X: Bottom Elements.
Get my iOS 11 app icon template for Sketch, it’s free.
Update November 7
Sebastian de With shows an clever solution for his camera app Halide:
“Initially we had controls up there but we ended up with this solution, showcasing functional non-interactive readouts in the ‘ears’. I think it plays to the strengths of the screen, and we now really use every pixel on the screen that’s available.”
A camera app is probably immersive enough that hiding the status bar is an OK tradeoff.
