When Apple unveiled the iPhone X, it seemed like everyone on the internet immediately had an opinion. Not that this is anything new, it’s the internet. The X looks to take the iconic phone a big step further, combining a lot of new features with some that have been slowly ramping up across recent releases. The home button is gone, the screen rolls over the edge, Face ID is here, and then, there’s THE NOTCH. The device lands November 3rd, so there’s no time like the present to start designing with it in mind.
Going Home
For ten years, since the very first iPhone, there has been a round button at the bottom of the device. It was an almost universally recognized design element. Even the most basic drawing includes that button. And now it is gone. In its place is an indicator, where gesture controls bring up the app switcher or the home screen. Toolbars and buttons shouldn’t interfere with the control, and scrollviews should run cleanly underneath. Apple suggests against using this control for in-app gestures, unless absolutely necessary. Even then, using edgeprotect, swiping once will activate the app-built control, and anything more returns the device-based elements. The tricky point will likely come in scrolling content, when rapid swiping may accidentally trigger the controls. But it creates an opportunity to create more visually compelling layouts, larger imagery, and controls that don’t look stacked up over a black bar. As for that bar, Apple strongly recommends against including one to mimic the old layout.
Feeling Edge-y
With the X, Apple has entered the realm of edge-to-edge screens. It’s been available on competitor phones for a couple of years now, but Apple is promising a new and more immersive experience. With only the notch on the top interrupting the view, designers have more real estate to play with. For designs made using native ui elements and Auto Layout, resizing should happen automatically. And the Super Retina display will use assets sized at 3x, just like the 7+ or 8+. The aspect ratio is different so images will be cropped or boxed to fit, but focusing content to the center and maintaining minimum margins for actionable items should keep everything on-screen. A potential pain point will be touch sensitivity on the sides of the screen, where the side of the palm or thumb may trigger unintended actions. Keep interactive elements away from the edges by a recommended minimum 30px.
Facing Forward
Face ID is slated to replace the fingerprint scanner, using biometrics and ir light to identify the owner’s face, learning and adapting to changes in facial hair, hairstyle, age, or plastic surgery. (Don’t worry, the passcode will still exist) It is supposed only work when the user’s eyes are open, even through sunglasses. Expect financial institutions and other security-sensitive apps to leverage this using forward, in addition to fingerprint and password protection. Bear in mind, the devices that support these features operate in exclusivity. There are no devices that support both Touch Id and Face Id, so a device id check should be implemented. This keeps users from seeing the wrong verification system.
The Notch.
I won’t even make a pun about this, it’s that serious. Seemingly the most polarizing feature of the iPhone X, the notch is a constant presence on the screen, housing all of the front sensors, cameras, doodads and widgets. It splits the status bar in to two ears, and increases the height. For portrait mode, this may be an opportunity to create a better nav experience, leveraging the extra room to create clearer actions. In landscape, it gives the iPhone X an extra 145pts of room, but with the downside of an omnipresent black lump occupying the margin. It’s the only visual disruption to the whole device. For video or immersive gaming, it may well become a blind spot in time. Responsive web is going to need some help though. The apple-supported move to accommodate the notch is a not-insignificant white margin on either side of the browsing window. It feels like a step backwards, like viewing a site optimized to 1024px on a 1920 screen. One way around this is setting a page background color, blending the margin into the field for most of the layout. It isn’t a perfect solution, but it’s a step in the right direction. The notch is poised to become the defining feature of all subsequent iPhones, and as time goes on, expect more designers to implement novel, beautiful solutions.
The iPhone X will become the benchmark all other phones are measured against. Without question, it is the target device for any application hitting the app store, and will become a dominant device for mobile web. Evolving our designs now only gives us a leg up.
Apple has already released the Human Interface Guidelines, and UI kits, for the iPhone X and iOS11. These provide good foundations for margins, native ui controls, and a cheat sheet to the upcoming changes. Find them here:
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
https://developer.apple.com/design/resources/#ios-apps
Evolving Your Design to Fit the iPhone X
by Sophey Schrull on September 21st, 2017 | ~ minute read
