Every time Apple releases its new version of phones, UI/UX designers across the globe buckle down to learn what the new interface guideline has in store. It was no different when Apple’s CEO Tim Cook announced a score of Apple products, and a 4K Apple TV. But what caught the attention of iPhone aficionados was the amazing iPhone X.
The exciting post-release brouhaha it created among designers and end users is hard to miss, as the iPhone X came with a slew of interesting features:
* Face ID authentication
* Edge-to-edge Super Retina Display
* Augmented Reality (AR) Kit
* Bigger screen size
* Faster processor
* Wireless charging
Since the iPhone X has been publicized to deliver immersive and content-rich experience, it has consequently impacted the way UI/UX designs are being created for the new iPhone X.
So, here we have collated a set of Human Interface Guidelines that iPhone app designers should keep in mind before they begin to design for the new iPhone X.
Bigger Screen Size
Though it offers bigger screen size, the display width (in portrait orientation) of the iPhone X is same as the width of iPhone 6, 7, and 8, which is 4.7 inches. Where it differs is in its height, making it taller by 145pts, giving a 20 percent additional vertical space which can be used for content.
1125px X 2436px (375pt x 812pts @ 3x)
2436px X 1125px (812pts x 375pts @ 3x)
Super Retina Display
The 5.8” retina display employs new technologies to accurately follow design curves, clear to the beautiful rounded corners of the phone. Since it offers a high-resolution retina display with the scale factor of @3x, designers can now supply high-res images for all the artwork they use in the app.
- For flat vector artworks, it’s best to provide resolution-independent PDFs
- For rasterized artworks, it’s best to provide both @3x and @2x versions of the artwork
- Use PNGs for artworks with textures, shading and highlights; for photos use JPEG
Source: Design Code
The above illustration shows Points and Pixels difference between previous iPhones and the new iPhone X.
Firstly, while designing for iPhone X, make sure that your layout fill the screen correctly and is not lost or obscured by the phone’s rounded edges, sensor housing, or the home screen indicator access.
iPhone 4.7inch iPhone X
Apps that use the standard, system-provided UI elements (navigation bars, tables, collections) automatically adapt to the phone’s new form factor. For apps which use custom layouts, supporting with iPhone X should be fairly easy, especially if the app uses Auto Layout and follow margin layout and safe area guidelines. The defined safe area also prevents content from overlapping toolbar, tab bar, navigation bar and status bar.
Layout considerations for iPhone X
For a complete full screen experience, ensure that your backgrounds are extended to the edges of the display, and vertically scalable layouts such as Collections and Tables are continued all the way to the bottom.
Apps can be previewed using Simulator (included with Xcode) to check for clipping and layout issues. The upside-down mode is not supported in iPhoneX; and features like wide color imagery is best previewed on actual devices.
Pay attention to the Status Bar height. The status bar in iPhone X is taller than other iPhones, so dynamically position the content to make use of this facility. Also, the status bar offers useful information for users, so consider it carefully before you hide it.
Don’t mask/hide the notch. Do not place black bars either at the top or at the bottom in an attempt to hide/mask the rounded corners or housing sensors. Neither use visual elements like shapes, bezels, brackets, or texts to draw attention to this area. As the below image illustrates, let the design flow naturally towards the notch.
Source: Design Code
Be mindful of aspect ratios. The iPhone X aspect ratio is different than other 4.7 inch iPhones. As a result, a 4.7in iPhone artwork appears letterboxed or cropped when they are displayed full-screen on iPhone X, likewise, when a iPhone X artwork is displayed full screen on 4.7 in screen, it appears to be cropped and pillarboxed. To avoid discrepancy in this regard, ensure that relevant content is within the viewing area.
Creating websites for iPhone X landscape. On the iPhone X landscape mode you could see empty spaces on the left and right sides. This is because the safe area feature kicks in automatically as you turn the phone. To overcome this empty space challenge Apple has created a guide to help designers adapt websites for iPhone X landscape mode. Here’s the guide.
Source: Design Code
The iPhone X video player offers two viewing modes – full-screen (aspect fill) and fit-to-screen (aspect).
While displaying video content by default on iPhone X it could result in cropping, if there is too much cropping, you should rescale the video to fit the screen.
Allow users to switch between full-screen and fit-to-screen viewing modes.
It is best always to display video at its original aspect ratio.
The iPhone X display supports a P3 color space, which is capable of producing richer and more saturated colors than sRGB.
Do not use same color for interactive and noninteractive elements, as it may become difficult for users to distinguish.
Lighting can affect the way the color is seen on the phone, so test your app’s color scheme with different lighting conditions.
Use wide color. Photos, videos, visual data, status indicators all look more lifelike and impactful through wide colors. To learn more, check out Apple’s in-depth color management guidelines.
Gestures are series of actions that users perform on the touchscreen. There are several gesture guidelines that designers must consider to avoid confusing end users.
Since people are familiar with standard gestures, as a general rule, use standard gestures.
Do not use standard gestures to carry out nonstandard actions. If you are developing a game app then it makes sense to use non-standard gestures. So, avoid swapping gestures as much as possible.
Do not block systemwide screen-edge gestures. Since systemwide actions are performed by users (by swiping at the screen edges) to reveal Home screen, Notification Center, Control Center, Dock (on iPad), avoid blocking or interfering with these gestures.
It’s a good practice to offer shortcut gestures to supplement interface-based navigation rather than replacing them. If possible, offer simple ways to navigate or perform actions even if it takes an extra tap.
Other design considerations
Don’t mix up Face ID and Touch ID referencing. The new iPhone X offers Face ID for authentication. If you’re building an app which integrates with Apple Pay or any other authentication feature, do not reference Touch ID on iPhone X. Similarly, ensure that your app does not reference Face ID on devices that support Touch ID.
Don’t end up adding extra Emoji and Dictation key. On iPhone X the Emoji and Dictation keys automatically appear below the touch keyboard (even while using custom keyboards), so while creating your app do not repeat them by inserting them in the keyboard.
It’s better to test your app in landscape orientation. While you may uncover some issues in portrait mode, the majority of issues are expected to appear in landscape mode, so, it is best to test all your UI in landscape mode.
The design topography of iPhones, in general, consists of several guidelines, and Apple expects designers to strictly adhere to these guidelines. Everytime a new version of iPhone is released, new guidelines come along with it. As a result, it becomes imperative to learn these new guidelines to build better apps, which fall within Apple’s design regulations.
Our aim is to facilitate iPhone app developers about these guidelines, and we hope this information has shed some light on the new iPhone X Human Interface Guidelines. However, if you want learn more, here’s an all-inclusive and comprehensive guidelines report from Apple for your convenience.
Need assistance in designing powerful iPhone apps? Just drop us a line at firstname.lastname@example.org