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.
- Android App Developers UK
- Android App Development Company In UK
- Android App Development Company UK
- Android App Development Edinburgh
- Android App Development In UK
- Android App Development UK
- App Developers Edinburgh
- App Developers Glasgow
- App Developers London
- App Developers Scotland
- App Developers UK
- App Development Companies In UK
- App Development Companies UK
- App Development Edinburgh
- App Development Glasgow
- App Development Scotland
- App Development UK
- Best App Developers
- Best App Developers UK
- Best UK App Developers
- Digital Marketing
- Digital Marketing in China
- Enterprise App Development UK
- Find An App Developer
- Internet of Things
- iOS App Development Companies In UK
- iOS App Development Scotland
- iPhone App Developers UK
- iPhone App Development UK
- London Mobile App Developers
- Looking For App Developer
- Mobile App Developer Edinburgh
- Mobile App Developer Glasgow
- Mobile App Developers Dundee
- Mobile App Developers Scotland
- Mobile App Developers UK
- Mobile App Development Company In UK
- Mobile App Development Company UK
- Mobile App Development Edinburgh
- Mobile App Development Glasgow
- Mobile App Development In UK
- Mobile App Development Scotland
- Mobile App Development UK
- Project Planner
- Success Page
- Top App Developers UK
- Top App Development Companies UK
- Top Mobile App Developers UK
- Top UK App Developers
- UK App Developers
- UK App Development Companies
- UK Mobile App Developers
- Web Application Development Glasgow
- Web Application Development London
- Web Application Development UK
- Website Design Dundee
- Website Design Edinburgh
- Website Design Glasgow
- Zudu Subscribe
To Keep up to date with Zudu, subscribe to get news, updates and offers straight into to your inbox.