Design For The iPhone Notch Like A Boss
The iPhone X is much taller than iPhones past with virtually no bezel. The body size is about the same as the iPhone 8, however the 5.8-inch OLED screen is larger than the iPhone 8 Plus’s 5.5-inch screen. Lets take a look at what is new and the things to keep in mind when we approach designing for the iPhone X.
The Screen: Lengthier
The taller form factor, an extra 145 pt allows for additional content rows or a menu that, on previous standard iPhones, would have been too cramped.
Content Central
The screen size difference between the original iPhone and the iPhone X is a massive 332 pt in height. This enables the content to take up majority of the screen space while still allowing for critical action and navigation components like nav bar, tab bar, tool bar and the home indicator to have their own space. There is no longer a battle for space between the content and the navigation components, which allows the user experience to be even better while conforming to Apple’s Human Interface Design Guidelines
Elephant In The Room: The Notch
Lets talk about the notch. Probably the most controversial aspect of the iPhone X, some people like it and some people hate it. The notch houses sensors for FaceID, the camera and the speaker. The notch is the only element that prevents the iPhone X from truly being an edge to edge screen.
After having comprehensively used the iPhone X it seems the notch still provides valuable space for the status bar and extra app content. Apple advises that designers and developers would do well to embrace the notch by ignoring it and to not hide it with a black bar or by introducing gesture controlled elements that morph the notch. By hiding the notch your app can feel smaller than the apps an iPhone X user is accustomed to, as explained in this video
Huge Screen Titles
iOS 11 introduces a feature that was initially seen in the Apple music app, which is titles that are sized at 34 pt and set at Semibold in black. This is now a standard alternative ( you can still choose to have the traditional screen title in the nav bar) in iOS 11. The interesting behaviour here is that when a user scrolls the title animates to the centre of the nav bar while shrinking to 18pt set at Medium. This behaviour ensures that the big screen title does not take up space from the content itself giving back that valuable space when the user scrolls.
Status Bar And The New Home “Button”
The status bar now includes multiple gestures and a height increase. The height has more than doubled from 20 pt to 44 pt. When swiping down from top left the Notifications can be viewed. When swiping down from the top right the user can view the Control Centre. The home button has been done away with on the iPhone X, instead we have an on screen interactive element. Swiping from the bottom up takes the user to the home screen, if done quickly. To access the screens navigator the user needs to interrupt the swipe up.
Safe Area?
Being edge to edge (relatively) the iPhone X screen introduces curved edges and the earlier mentioned notch. Apple has introduced safe area guides to ensure that the content doesn’t get clipped by either of the two new elements. The safe are layout guide helps designers and developers visualise the area where their content should be ideally placed to avoid content clipping. Backgrounds are expected to NOT follow the safe area guide to utilise the edge to edge screen design, however content such as text, images, video and buttons should follow these guides.
The Corners: Round and Round
Usually you may not place elements in the corners of the screen, however when your app engages the Camera the status bar is removed and the interface is edge to edge. On such app screens it is important to ensure there is enough margin in the corners to ensure that the content does not clip and does not hug the curved corners. A corner radius of 16 pt is recommended for views that are placed near any of the four rounded corners of the iPhone X.
An Inferior Choice: The Hamburger Menu
While initially fun and fresh, the hamburger menu is a usability nightmare as it demands more taps from the user to access features and screens. This is an example of a context where data encapsulation does more harm than good. When the screen is bigger the users suffer even more in terms of one hand usage. The user is unable to reach all the way across to tap the Hamburger menubutton without doing a weird in-hand shuffle. The Hamburger Menu is the reason why Mobile-Web experience has remained stagnant and inferior to native app experience.
With the longer iPhone X screen the tab bar is the obvious choice to replace the Hamburger menu, it takes up little space and ensures that other screens are accessible to the user immediately and are always under visible attention. If your app has more 3 to 5 primary sections you should be using a Tab Bar.
A continuing series on how to design for the iPhone X. In the next post we will go into further details of designing for the iPhone X. We will also discuss the UI Kits and resources to use to help speed up the design process.
For continuous design tips and tutorials you can follow me on Twitter.
