The iPhone X differs from previous models with a large rounded screen with a wider range of colors and a face-recognition technology for the owner — Face ID.
Apple has already released the Human Interface Guidelines for the iPhone X. In this article, we would like to outline the main peculiarities of UI & UX for iPhone X according to Apple’s recommendations.
- If your application hides the status bar, Apple advises you to review this solution. Because the iPhone X has more vertical space. And the status bar is in the area that the application will probably not use.
- The aspect ratio of the iPhone X does not match the other models. So, if you use the same image for the background, it may appear cropped or not fitted with the screen.
- Apple is advised to avoid explicit placement of interactive controls in the lowest zone of the screen and the corners. Moreover, the users will use the lowest screen area for gestures that return to the Home screen and allow them to switch between applications. After all, interacting with elements in the corners of the screen may be just awkward.
- If possible, use system elements to build the UI. System UITabBarController, UINavigationController, UITableView and UICollectionView adapted automatically to the features of each iPhone model.
- Make a break. The iPhone X takes up the entire front panel of the device without indenting the edges. However, for ease of use, the user has certain indentations that you can anticipate in your application. If possible, do not get meaningful content right up to the edges of the screen: concentrate it in the so-called safe area.
- Let your content be limited to a rectangle. It’s a good practice to align content on a straight line from all sides. In particular, in the horizontal orientation, where there is no bar status: there must be an appropriate retreat on the side where the screen is not straight.
- Avoid conflicts with system gestures. Users expect these gestures to produce the same result regardless of which application is open. Swipe from the bottom of the screen up allows you to change the current application or opens the Home screen. Therefore, swipe from the upper right corner of the screen opens Control Center to the bottom, from the top left — Notifications. Exclusion is possible for games, but it is not desirable.
- A reminder of how to access the iPhone X home screen is always placed at the bottom of the screen above your application. Moreover, you can not hide rounded corners and this indicator, pausing them in black. Also, you can not specifically allocate them in any way.
- Allow the home screen to automatically hide the access indicator only if it is really necessary. For example, you create an application for watching videos or photos. In this case, the indicator will be hidden after the user does not interact with the screen for a few seconds. And it will appear again, and the user will only touch the screen.
- The iPhone X displays a color space of P3 that is different from the sRGB in a more rich color gamut. After all, take this into account when creating your application: you can use a wider range of colors.
- iPhone X uses to authorize Face ID. Do not forget about it and do not require a Touch ID from the iPhone X. Because the Touch ID is simply not there. And vice versa: do not require Face ID on previous versions of the iPhone.
- All iPhone X keyboards, including custom-made ones, always have the Emoji and Dictation buttons by default. After all, note that you should not duplicate these buttons in their custom keyboards.