Skip to main content

Whether your iOS app is two or five years old, it’s highly likely with the introduction of iPhone X that you may need to review the User Interface (UI) to make sure you’re still providing the optimal user experience by utilising all screen real estate available to you.

 

Depending on your app, there may be many things you need to consider with a potential design update. As the Lead iOS Developer at Mobiddiction, here are my top considerations when designing for iPhone X:

Captilise on the full screen experience

Let Scroll Views scroll to the very bottom of the screen even beyond the edges of the curved bottom of the display. Apple actually asks designers not to hide the cut-out at the top and the curved edges at the bottom. So don’t go placing black bars to make it look like an ‘old’ school iPhone 8.

Replace Touch ID with Face ID

Previous iPhones have a great feature with Touch ID. Touch ID allows users to unlock their device or perform password locked actions inside apps by using their fingerprint. This sensor was hidden inside of the home button, since it has gone in the iPhone X, Apple replaced it with a more advanced and secure way of unlocking your device. Face ID uses some really great algorithms to detect your face and unlock your device. Make sure you don’t reference ‘Touch ID’ anymore in your onboarding or menu, replace it with ‘Face ID’.

Full screen images

If you are currently using full screen images in your design, you will need to update them for iPhone X. You don’t want to hide any important parts of the visual due to cropping.

Inset & center important information

Make sure all important content is center aligned and use symmetrical insets so your UI doesn’t get clipped by the device’s sensors or corners. If you use Auto Layout, your content will automatically be placed within a safe area so your design won’t be hidden behind the corners, sensors or the home indicator.

New status bar 

You’ll notice the new status bar is split in two parts. This is because the sensors are on top of the display. If you are using this space for something special (previously 20pt high, now 44pt), you will need to update your interface because it will be taller on the iPhone X. Make sure it can be dynamically changed in height. Older iPhone users will know the feeling when on a call and the UI is shortened due to the phone call taking up the top of the display. Calls or navigation apps will now no longer affect the height.

Show it off

If you currently hide the status bar, you might want to reconsider this – even Apple ask you to. Since the screen is taller and you have more real estate to display your content, it might be useful to unhide the status bar. Users can find useful information up there and most of the time it won’t be used by other UI elements.

Be mindful of gestures

Since the physical home button is gone, you interact with your iPhone (more than ever) by using gestures. When you swipe up, you go home or go to the multitasking view. When swiping left and right on the home indicator, you switch between your open multitasking apps. By swiping down from the top of the screen, you go to your Notification or Control Center. More so in games, you can use custom gestures that may override the native iOS gestures. You can use your own gestures by implementing “edge protect” which is a feature that will prefer the app’s specific gesture first, before the OS gesture, only one time though. Use this sparingly, because it will make it harder for your users to use system features.

Larger navigation bars

With iOS 11, the design of the native navigation bar has had an update; they’re now much taller. This design will be great on the taller iPhone X and will blend nicely with the new status bar. So consider using it in your design. It will also have some nice native animations when scrolling.

Aspect ration

The Aspect ratio of iPhone X is different from previous models so consider revisiting all the custom built video player and image viewers.

Navigation Bar / Tab Bar

When using navigation or tab bars, it’s better to use the native apple provided navigation bar or tab bar as it will optimise the size and animations based on the screen size and aspect ratio.

DON’T: Place interactive controls at the bottom of the screen

The spacing around the home indicator is purely created for gestures. Placing buttons near this indicator or in the bottom round corners of the display may not work out well. Users might accidentally use the home gesture and your UI will be difficult to reach. However you can still use tab bars and function bars, but keep in mind that they should not interfere with the home indicator.

DON’T: Hide the home indicator (all the time)

iOS makes it possible to hide the home indicator in your app, this will auto-hide it when the user doesn’t touch the screen for a few seconds. It will reappear when the user touches the screen again, this should be mainly used for immersive experiences like viewing videos or photos. The home indicator will also change color automatically based on the background of your app.

Or watch Apple’s video on Designing for iPhone X.

While the iPhone X is brand new and you may not be seeing every Tom, Dick and Harry with one, we know what tends to happen with Apple products; they’re eventually (if not initially) adopted by the masses and you can guarantee that if your app is not optimised for iPhone X soon, a significant portion of your user base will be missing out on the complete experience.

If this all sounds too hard, feel free to contact me and we can discuss a review of your iOS App.

author avatar
Hamsa Chandrappa

Leave a Reply