How to design apps for smartphones with notches

With the iPhone X and the upcoming Google Pixel 3 bringing notches to the masses to accommodate facial recognition and the removal of a home button, smartphones have more screen real estate than ever before.

As a developer, it’s your responsibility to adapt your user interfaces to take advantage of this new space and help users navigate your app.

In today’s post, we’re looking closer at some of the challenges associated with notchy screens, and offer some solutions to make your app more accessible, engaging and user-friendly.

Move important elements away from the corners

If you’ve spent any time within social networking or messaging apps, then you’ll no doubt know that elements like back buttons and search icons are always located by the corners of the screen.

This is, of course, done on purpose; developers want to make their apps as easy to use as possible, and the corners of your smartphone are usually the easiest to tap on.

This design element has been used for a number of years now, but for newer smartphones with rounded corners, it isn’t always the most optimal solution.

Instead, developers should use new components such as floating action buttons (see Google’s Material Design) and gestures, like swiping to go back a page rather than dedicated navigation in the corner of the app.

Leave the top of the screen alone

Just as corners are top locations for important user-interface elements, the top of the screen is another prime location for useful features.

However, whilst it was once easy for users to tap at the top of their devices, wider 18:9 aspect ratios are becoming more common in flagship phones, and as such, users now struggle to reach the tops of their phones without stretching, and with the inclusion of notches, they’re even more awkward.

As a user interface designer, it’s important to take this into account when deciding where to place important elements within your app.

To avoid bad user experience, you should instead add the most important tools and features to the bottom of the screen in a tab bar.

Think about the safe area

With the removal of the home button and the introduction of the notch on flagship smartphones, and due to rounded screen corners, it’s important to mind the ‘safe area’ of the screen which is defined by Apple’s Safe Area Layout Guide and Android P’s Display Cutouts.

Failing to follow the guidelines could result in important app elements being ‘clipped out’ and inaccessible to users. And as new Layout Guides are introduced as more manufacturers create notchy phones, being able to adapt and scale your apps to different aspect ratios and safe areas is critical.

Don’t forget about landscape orientation

Whilst the majority of smartphone users access apps in portrait mode, landscape usage has continued to grow because both smartphones and tablets have seen an increase in their average screen size.

This is particularly true in iPhone Plus and Samsung Galaxy Plus lines.

It’s important to ensure that your app doesn’t break when users access in landscape mode; the notch could be to the left or the right of the display depending on the way in which the user is holding their phone, so adhering to safe area guidelines is important.

You should also mock up your layout in landscape mode with a left notch as well as a right notch to ensure your app looks balanced; too much negative space or incorrect spacing could damage your user experience.

Utilise new technology

One of the biggest reasons why Apple introduced a notch with its iPhone X model last year was to allow the company to remove the need for a physical home button.

While Google opted for a fingerprint scanner on the reverse of their Pixel models, Apple wanted facial recognition to serve as a successor – and with that, they introduced exciting new technology.

The good news for developers is that the facial recognition makes it easier to create new functionality within your app.

You could utilise the iPhone’s TrueDepth camera to create an augmented reality game, or integrate FaceID to increase security and remove the need for passwords.

Embrace notchy phones

While criticism for the new iPhone X models didn’t go unnoticed (Samsung even launched their own advertising campaign to criticise Apple’s decision to introduce the notch), the future of high-end smartphones will include notches.

Larger screens and the removal of a home button makes browsing more fluid and enjoyable, enabling endless possibilities for your app.

At Zudu, we consider ourselves mobile app development experts.

Don’t hesitate to get in touch today on 01382 690080 to find out more about how we could help transform your business.