Top!
Hello
The iPhone X, with which Apple celebrated the tenth anniversary of its cult smartphone in 2017, is still the talk of the town. The new iPhone is also a hotly debated topic among UX designers and app developers, as the hardware updates sometimes pose major challenges in terms of interface design. Below we have summarized all the important innovations.
The black notch at the upper edge of the device, which covers part of the display, is probably the most controversial innovation. It is already clear that this will lead to display problems in the near future, which will mainly affect the landscape mode. Until a corresponding design solution is implemented for the majority of apps, iPhone X users of the first hour will probably have to put up with partially hidden videos or misplaced menu elements.
However, Apple gives general hints in its guidelines that concern the handling of the notch. The round corners and the notch for sensors and cameras should not be hidden by black bars. It is recommended to follow this recommendation to avoid penalties in the App Store placement.
Figure 1: Notch, left: correct handling of the notch, right: what not to do - hide notch
Due to the notch, the status bar of the new iPhone has also changed significantly. For the first time in the history of the iPhone, the known height has been increased from 20 pt to 44 pt and is now as high as the navigation bar sitting below it.
Figure 2: Status bar, left: iPhone X 44pt, right: iPhone 7
The corner radius was also measured with 44 pt. Apple follows a clear line here, because this number has accompanied designers since the first days of the iPhone: A square with a side length of 44 pt represents the smallest unit that users can easily hit, according to Apple's guidelines.
Figure 3: Corner radius of the iPhone X
Status indicators such as background location retrieval, which previously doubled the size of the status bar, are now presented in the form of a button centered around the time and take up a minimum of space.
Figure 4: New design of the In-Call status bar in the form of colored buttons (here blue for location retrieval in the background).
As a consequence of the notch introduction and to ensure the correct display of layouts in landscape mode, so-called safe areas have been introduced. Apple again defines a distance of 44 pt between content and the device corners. However, backgrounds are allowed to extend over the full width to suggest a full-screen experience to the user.
Figure 5: Safe Areas for landscape mode
In contrast, designers have more leeway when designing video players or cards. Apple itself defines free-standing UI elements here, some of which extend into the corners. These usually have a superelliptical shape, a mixture of ellipse and rectangle, which nicely shows how the controls can harmonize with the rounded corners of the display.
Figure 6: Free-standing UI elements in the video player
In summary, visually appealing and platform-compliant interfaces on the iPhone X mean significantly more effort for designers and developers compared to previous models. However, the enlargement of the display also opens up many new possibilities to further develop the user experience. This decision is particularly beneficial for apps in the gaming and photography sectors, but it also offers a good opportunity to make more information ascertainable with the same device size.
It is worthwhile for all designers to have the complete catalog of specifications defined in the Human Interface Guidelines ready to hand. Apple's Developer portal also offers free iPhone X templates for the popular tools Photoshop, XD and Sketch.
