How the ‘notch’ on the iPhone X could be a UX designer’s worst nightmare

26th September 2017 / 6 minute read

iphone x graphic

The world went crazy for the reveal of the brand new iPhone, and it was no surprise that the occasion was witnessed by millions of people across the globe.

Philip Schiller had the pleasure of once again standing in front of everyone to talk about all the new and amazing features that the new iPhone provides. But the one part of the iPhone that caught every UX designer’s eye was the ‘notch’ on the phone’s screen.

What is the notch?

The new iPhone X boasts a sensational edge-to-edge front display, but this isn’t entirely true. The notch on the front of the phone is a black section on the screen where the front camera, infrared camera, speaker, microphone, proximity sensor, ambient light sensor, and dot projector are located.

Why it’s a pain for UX.

The issue remains that the notch is not part of the display screen. Whatever you display on your phone – a website, social media page, picture, video, or game, the notch will interfere with the display. This is what spells disaster for web & app designers and developers across the globe.

Not only do we have to accommodate to scale images to fit different screen sizes as it is, but now web designers and developers need to accommodate to the iPhone X screen and its notch.

What it means for designing & displaying websites on the new iPhone.

Displaying a website on an iPhone X means that the display needs to be optimised to suit the screen’s aesthetics.

Because of the notch, certain areas of the screen are not safe to present features of an app or page. Some would say that the original iPhone screen display is probably the equivalent size of the ‘safe’ area on the latest iPhone model too.

Website development for the iPhone X will very much be focussed on a rectangular safe zone when the phone is turned portrait or landscape.

Turning the phone landscape means the left, the right, and the bottom of the screen are no longer safe. It’s important to complete research and experiment with the display of an iPhone X before you go creating any kind of mobile app or web application.

Holding the phone upright in a normal position and having your website display portrait still has some limitations. The top of the phone screen is cut off from the notch. If you don’t allow for the notch, then there could be some significant segments on your website missing, covered up, or terribly altered.

iphone x graphic boundries

How are webpages being displayed?

To ensure that the notch isn’t impacting the usability and layout of a webpage when the phone is in landscape orientation, the iPhone X renders webpages with white bars on either side of the screen.

Another reaction to the notch is the scroll bar, which disappears behind the notch as you move down a webpage. This has outraged many, but we’re assuming that Apple will fix this issue before it is launched in November.   

Let’s put the pitchforks down.

Ok, for some of us, the notch is a feature that many of us don’t like – whether it’s the look of it or the questions it raises when designing an application for it.

In Apple’s defence, until they can embed cameras and sensors under the screen’s glass, there’s no other way of adding these cool features to the phone.

What other people are saying

If you fancy some insight about what other people are saying about the notch, then do take a moment to look at various other blogs across the web.

The Verge asks whether Apple’s iPhone X is “Hot or Notch”, and present many examples of how the notch looks. If you’d like to see examples of the iPhone X new notch, then check out their article – Apple’s iPhone X notch is an odd design choice. also wrote a blog about how the ‘notch’ stole the show. They take a look at the best reactions and ideas from across the web. Have a read and even a giggle at some of the reactions – ‘Notch’ crazy, iPhone X mad.

What are your thoughts on the iPhone X? Are you a fan or notch?

What's up next?

SEO - It’s Better With Meta!

29th September 2017 / 5 minute read

For anyone completing research about search engine optimisation (SEO), it’s pretty likely that you will come across something called meta. If it’s something you haven’t heard of before, then you’re probably wondering what it actually is...

Facebook advertising