Things to keep in mind when designing for “new” iPhone X
Cheat-sheet for designers to refer when designing your next project for iPhoneX
Last Tuesday, Apple unveiled the latest in its flagship devices. Apple CEO, Tim Cook launched the new iPhone X, iPhone 8 and iPhone 8 Plus, a third generation of Apple Watch and a 4K Apple TV. However, what caught most of the attention of Apple lovers and the developer community is the new iPhone X with all-screen Super Retina display, a much bigger screen real estate, Face ID authentication, faster processor, and wireless charging. The iPhone X also sees the iconic ‘physical home button’ replaced by a new small ‘white line’ as the home indicator.
Every new Apple device offers some opportunities and challenges to the designer and developer community. On the same lines, the new iPhone X offers new features that will surely impact the way an iPhone app UI/UX is designed.
iPhone X has bigger screen, higher resolution and many new features to significantly impact your app design.
How to design for the new iPhone X?
Let’s look at the new features of the iPhone and understand how app designing will be impacted by it?
Bigger Screen Size
In portrait orientation, the width of the display on iPhone X matches the width of the 4.7" displays of the previous iPhones. However, in landscape orientation, the display on iPhone X is 145 pt taller than a 4.7" display, creating a roughly 20% additional vertical space for content.
Apple in its latest human interface guidelines advices app designers to ensure that layouts fill the screen and aren’t obscured by the device’s rounded corners, sensor housing, or the indicator for accessing the Home screen.
Layout
Most iPhone apps that use standard, system-provided UI elements such as navigation bars, tables, and collections will automatically adapt to the iPhone X new form factor with the background materials extend to the edges of the display are appropriately inset and positioned.
For iPhone apps with custom layouts, supporting the new device would be easy if it uses Auto Layout and designed in accordance to Apple’s safe area and margin layout guides.
Considerations while designing for the new layout-
Provide users with a full-screen experience with backgrounds extending to the edges of the display, and vertically scrollable layouts, like tables and collections, continue all the way to the bottom.
- Position important content symmetrically and centered to support both portrait and landscape orientation and to avoid clipping by corners and device’s sensor housing
- Use standard, system-provided interface elements and Auto Layout to construct your interface.
- The status bar is taller on iPhone X than on other iPhones. So dynamically position content based on the user’s device.
- Reconsider hiding the status bar in your app as it displays information people find useful. Hide it only to offer added value.
- Avoid explicitly placing interactive controls at the bottom of the screen and in corners as people use swipe gestures at the bottom edge of the display to access the Home screen and app switcher, and these gestures may cancel custom gestures you implement in this area.
- Don’t place black bars at the top and bottom of the screen fill-in device’s rounded corners, sensor housing, or home indicator. It’s also not a good UI/UX practice to use visual assets like brackets, bezels, shapes, or instructional text to attract special attention to these areas.
High Resolution Display
The new iPhone sports a high resolution display with with a scale factor of @3x and dimensions of 1125 x 2436 pixels (~458 ppi pixel density). The high resolution display means designers have to provide resolution-independent PDFs for glyphs and other flat, vector artwork, whereas provide both @3x and @2x versions for rasterized artwork.
While designing high resolution artwork designers should-
- Use an 8px-by-8px grid to keep lines sharp and make sure that content is as crisp as possible at all sizes, without requiring much retouching and sharpening.
- Use PNG files for intricate artwork that requires effects like shading, textures, and highlights. Use JPEG for photos.
- Use PDF for glyphs and other flat, vector artwork that requires high-resolution scaling.
- Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color.
- Optimize JPEG files to find a balance between size and quality. You need to try out different compression settings for each image to find the optimal size without compromising on image quality.
Screen-edge Gestures
iPhone X brings screen-edge gestures to provide access to Home screen, app switcher, Notification Center, and Control Center.
Considerations for screen-edge gestures
People are intuitively used to system wide screen-edge gestures like ‘Tap’ to activate a control and ‘Drag’ to move an element. Over the years, these gestures have become standard and will negatively affect the user experience if replaced with other gestures. So it’s best not to change them. However, in some rare cases, like while designing games custom screen-edge gestures can be used. To boost the app experience, it is essential that users are educated on using custom gestures during app onboarding.
Face ID Authentication
iPhone X supports Face ID for authentication while opening the phone or paying using Apple Pay. However, Face ID authentication needs to be used sparingly only when it’s required and in return for something of value, such as accessing additional features, personalizing the experience, purchasing content, or synchronizing data. Also while designing the app, care should be taken so as to keep the sign-in process fast and simple so as to accentuate the app experience. Also if your app integrates with Apple Pay or other system authentication features, don’t reference Touch ID on iPhone X.
Augmented Reality
Apple also introduced its Augmented Reality or AR Kit for the developers. AR allows users to manipulate surroundings by overlaying the physical world with virtual objects to create real-life experiences.
The AR in iPhone X will bring new opportunities for designers to offer rich, immersive and engaging experience to users in addition to development of new kind of apps and games. However, it will also present new challenges in method interaction, UI design and app experience.
The New “default” Systems Font
With the iPhone X and other newly launched devices, Apple has also introduced a new in-house developed default font ‘San Francisco’. iOS and OS X make use of a new font family called SF while font family for Apple Watch is renamed to SF Compact. Both the Font Families have similar proportions but different designs.
Designing with the new font-
Apple advises using SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger. When you use San Francisco font for text in standard controls like buttons and labels, the OS will automatically apply the most appropriate variant based on the point size.
3D Touch Interaction
3D Touch brings a refreshing new dimension to touch-based interaction. It allows users to access additional functionality by applying varying levels of pressure to the touch screen. Apps can respond by displaying a menu, showing additional content, or playing an animation. However, users don’t have to learn the new gestures to interact with 3D Touch.
Pressing the icon of an app on the home screen displays an action view which lets you quickly perform common app-specific tasks and see interesting information. For example, pressing the Camera icon provides a shortcut for taking a selfie, record video, take portrait and record in slow-motion.
Designing for 3D Touch-
- Create quick actions for high-value or frequently used tasks. You can provide a total of 4 quick actions in an app.
- Give a clear, easy to understand title and a recognizable icon for each quick action. Use familiar titles like, “Directions Home,” “Create New Contact,” and “New Message.” and use the familiar system icons
- Don’t use quick actions for notification or to ease navigation.
- Don’t use an emoji in place of an icon.
Summing up
The iPhone X brings a significant change in the screen display and hence in UI/UX design of iPhone apps. The new features offers designers to show some fresh creativity with modern UX trends and latest technologies. We would like to know your thoughts on Apple’s new device and its influence on the app UI/UX design. Please feel free to share your thoughts in the comments section. If you liked the article, share it with your fellow designers and friends on social media.
