Designing for iPhone X
Vidit Bhargava
Over the ten years of iPhone’s existence, Apple’s star product has gone through many iterations and has changed it’s screen size and aspect ratio at least of couple of times. Each time the iPhone’s screen changed, it opened up possibilities for newer interactions and Interfaces. The iPhone X introduces multiple changes to the phone’s display. It’s a much taller display to start with, then it’s got a cut out for sensor area that partly cuts through the top edge and it’s clipped by giant rounded corners, and all of these changes will have an impact on the design of the app.
Long Display – Interaction in center of Display
The first thing you’d notice about the iPhone X is the fact that it has a really long display. With a long display, one of the things that’ll be difficult for the user to do is perform horizontal swipe and pan interactions easily, As it becomes difficult to ’reach’ to the top of the display with the hand anchored in the bottom region of the phone.
Apps with intricate interactions at the top of the display might want to consider moving them towards the central region.
For Example: An Interface like this would probably be better interactable if the carousel were shifted downwards. The new long navigation options really help here.
In fact interactions at the bottom region like the one in the Uber app, might also want to reconsider they’re element’s height as the swipe interaction could interfere with the system interaction of closing the app, if the interaction is on smaller elements.
In short, on the new iPhone, user interactions like Swiping, Panning, Zooming, are best reserved for the central part of the display instead of the top or bottom.
Since the display is tall, the use of tab-bars for primary navigation becomes even more important. Apps that are using the navigation bar for placing important actions may want to relocate the actions to other areas like the tab bar.
Some examples of how the UI for different iPhone apps can be tweaked to make it easy to interact with the tall screen. On the left is a layout for representing where the phone’s interactions are going to be easiest to use. The layout also marks places where information and primary actions could go. Notice how the interaction area stays clear of the system’s interaction area. On the right are some examples of different User Interfaces, showing how this layout structure could be put in place for different types of UI.
Sensor Area adjustments
The iPhone X’s notch (bad naming from the rumour mill, it’s more of a flap or groove) is probably the most talked about feature of the screen this year. With the display making way for a significantly large sensor area which houses the phone’s many intricate sensors including the ones used for FaceID, and the front facing camera, an odd groove moves inward around the top edge. This gives the iPhone’s display a distinctive non-rectangular shape. This shape gets even more pronounced once the display has a lighter background. Many who don’t like the shape have suggested using dark status bars to hide it all the time.
However, Embracing or Denouncing the sensor area is a completely aesthetic choice for most of the User Interfaces, since that area’s just a 44pt barren wasteland where you can’t do much in terms of design or information representation, other than the presenting the status bar. Your using a black bar around it or using the navigation bar’s colour / or a different background colour depends on what kind of a design paradigm your app’s Interface uses.
Apple’s many different system apps present the area around the sensor tray differently, But none makes an extra effort to hide or show the sensor area, and for most part adhere to the design paradigm being used in the app.
Sometimes using black bars near the sensor area might not be a bad idea. For Example, YouTube’s player sits at the top of the display, currently ignoring the status bar but inserting other navigational elements around that area. However, YouTube wouldn’t want the video to be clipped by the sensor area, and moreover they’d not want the interactable area to be that high up on the display. Therefore, YouTube will want to rethink how it presents the video in a vertical orientation. Sure, they could insert black bars around the sensor area and insert actionable elements around it but they could also redesign the player and move it slightly downwards for easy interaction with the seek bar.
Wrapping around the curves of the Display
Another key element of the display is its rounded corners. The rounded corners make for an interesting space to work with. You’d not want your text to be clipped by any one of those rounded corners, therefore, adhering to the safe area margins becomes a necessity.
However, with user interface elements like buttons, sheets, tab-bars, progress symbols etc, rounded corners also serve as a good reference point for elements to align with the display’s corners. The image below shows how you can align your UI elements rounded corners to that of the display’s rounded corners.
A comparison of how aligning rounded corners creates more visually pleasing elements. The element on the right aligns to the bottom of corners of the display and is moved upwards to accomodate the home indicator. It’s more visually pleasing than the one on the left which doesn’t align it’s rounded corners to that of the display.
Conclusion
The iPhone X’s display marks the beginning of the end for rectangular screens. User Interfaces can no longer assume a box to be the dimensions for all their elements. When designing for iPhone X, designers would not just want to rethink how some of their elements are positioned but also make sure that the areas that are clipped don’t end up hiding key elements of information or interaction.
This is the biggest change to the iPhone’s screen, and it calls for a complete rethinking of your app’s User Interface.