Designing For The iPhone X
Sean McGowanOctober 31st, 20174 minute read
Sean is a technical researcher & writer at Codal, authoring blog posts on topics ranging from UX design to the Internet of Things. Working alongside developers, designers, and marketers, Sean helps support the writing team to ensure Codal produces engaging web content of the highest quality. When not writing about the latest innovations in app design, Sean can be found cooking, watching old movies, or complaining about the shortcomings of his favorite Philadelphia sports teams.
And unlike the underwhelming iPhone 8, Apple’s most advanced addition to the iPhone family is a notable departure from its predecessors. That might be exciting news for Apple fanatics, but it also means an entirely new set of considerations for UX design agencies like Codal.
From a software perspective, smartphone updates aren’t anything new to mobile development companies—upgraded and retooled versions of apps are released regularly, and even the launch of a fresh iOS may only require a few tweaks—but the iPhone X’s challenges lie in the physical realm, not the digital one.
As UX designers, we have to account for an iPhone with an entirely different form factor, the elimination of the familiar home button, and a slew of ultramodern features. Codal looks into all of this and more, as we dive into the best UX practices for the iPhone X.
Screen Size & Resolution
Though the screen width remains unchanged from the likes of iPhones 6-8, the X boasts an additional 145 pts of vertical real estate (we thank you for your service, home button).
This isn’t exactly a challenge for UX designers—just an adjustment to an artboard size of 375 x 812 in Sketch or Photoshop—but rather an opportunity to have some more breathing room in mobile designs.
No, the real hassle in the X’s form factor is its rounded corners, marginless display, and that jarring notch centered at the top of the screen. In Apple’s Human Interface Guidelines, they recommend avoiding the jutting obstruction entirely, decreeing designers must “ensure that layouts fill the screen and aren't obscured by the device's rounded corners or sensor housing”.
Because of the upper notch, and the edge-to-edge screen display, designers must account for the device’s “margins”, taking care that none of their content is obstructed or clipped by the X’s visual boundaries. Take a look at the diagrams Apple has provided:
In addition to the adjustments warranted by new screen dimensions, it’s also important to account for the iPhone X’s enhanced resolution. Indulgently dubbed the ‘Super Retina Display’, Apple’s highest quality screen yet has a stunning 458 ppi, meaning a new scale factor of @3x.
With the home button officially abandoned, Apple has supplanted its function with a thin, interactive control feature at the bottom edge of the device, easily accessed with a simple swipe gesture.
The change frees up space for more real estate, but will cause problems for any application that relies on interactive gestures at the screen’s bottom as well. In this case, it’s likely Apple’s system-wide gesture will override the app’s custom one, potentially walling off access to some of your app’s features.
Apple does suggest there’s some leeway in this situation, claiming that some custom, in-app gestures will take the place of Apple’s standard ones—the first swipe would activate the in-app gesture, and the second invokes the system one. But overall, Apple cautions the usage of edge swipes or taps entirely.
This is a major change for UX designers, who may now have to figure out where to place features that were previously accessible with a simple swipe. To make matters more complicated, Apple also suggests avoiding the corners of the device, acknowledging that “the far corners of the screen can be difficult areas for people to reach comfortably”.
The UX of X
We’ve touched on the two major adjustments your UX designers will have to make to ready an app for the X. If you want to quickly re-tool your app for running on the newest iPhone, screen size, resolution, and gesture modification are going to be your first priority.
But if we’re talking optimization, we’ve really only scratched the surface. The iPhone X offers a slew of new features, from AR kits to FaceID, that could impact your app’s user flows. If you offer a fintech application for instance, you probably utilize Touch ID—something the iPhone X has done away with.
We won’t see a mass adoption of iPhone X’s quite yet. It’s Apple’s most expensive mobile offering to date, with some even labeling it the tech behemoth’s first ever “luxury device”. But innovative digital agencies need to prepare now for the device’s eventual ubiquity, or fall behind from the cutting-edge.