Cornered by design.
Technology squared out by radius.
Remember when the screen of a smartphone was rectangular? Yeah, good times. Everything changed when the rounded corner and the notch appeared. You see behind the scenes the screen is most probably a square with non-addressable pixels, that’s why screenshots taken on my smartphone are still square instead of rounded edges and without a notch on them.
Why is it a bad thing? Because, unless accounted for and worked on, your media might be displayed broken and in the worst-case unusable.
I have seen a game on the iPhone that simply doesn’t care about the whole new generation. I won’t call out the name of this game because it’s not my place, they will have their reasons why it wasn’t updated to run well on a notched and rounded screen. Here is the screenshot vs the actual view of the game.
This is a special case because behind the scene this game must be developed for the desktop with a mouse and hover in mind. The UI is way too small to be usable on a touch device, probably created with Unity3D or a similar Game Development Kit.
It doesn't utilize the native regulations for layouting as other native apps do. Because it's a game and it uses a direct per pixel rendering approach, it seems to display starting from pixel 0,0 on the top left without accounting for the rounded corners and the notch.
Lucky us, we are not all doomed or blessed to do game or real-time 3d application development, so how does it even ‘corner’ us as designers?
Simple, first of all: the space for icons in the status bar is now extremely limited. The status bar used to have space for the name of the carrier, the network protocol (GPRS, Edge, 3G, 4G), the strength of the signal, the time and several other icons on the right for the location, alarm clock, Bluetooth, battery percentage and many others.
Now we are left with a scrolling carrier name on the left of the notch accompanied by a location usage symbol. Right of the notch, we have a carrier signal strength indicator, followed by the wifi signal indicator and an iconic representation of our battery. The only way to get a thorough statistic is to go into the ‘access control centre’ by swiping down from the right corner.
We can argue here that these are detailed status detail that belongs ‘below the fold’ (see the Wikipedia article about ‘above the fold’), but for me, the percentage of my battery is a ‘must-see element’.
But back to the design question: ‘Why should I care?’.
Because if you don’t, people will find your website repulsive and outdated. The web had to solve this problem: here is a good article on css-tricks.com, I will link the image for a better understanding.
As we can see: there is an issue with the display in the landscape mode. A perfectly fine website is now looking like a relic. Even when if account for the notch, we need way more padding on the left and right sight of the content. Both sides, because we don’t know if the notch is on the left or the right side of the screen.
Additionally, we are left with the way media is displayed. In fullscreen, the notch is covering parts of a video or photo and information that were perfectly fine in the corners are now cut off or invisible at all. But my biggest concern is directed to the bottom navigational menus of websites.
Let’s say you used the material design bottom navigation:
Which looked perfectly fine on a squared screen.
Now let’s have a look at how it will be on a smartphone with rounded corners.
As we can see the label ‘Favorites’ is running dangerously close to the curve and doesn't look as sophisticated anymore. It gets worse if even smaller icons are used next to each other.
Whenever I have to design for a native app or a mobile web application for a device with rounded corners I find my favourite tool lacking basic functionality.
Dear Figma if you offer me the preset for an iPhone X frame with a notch and rounded corners, please make the preview look like the actual device.
I was let’s say surprised the first time I run my designs past the new devices to discover that I need to do two designs. At least for the top and bottom parts of my device.
Here is an example of how virtually the same layout looks like on Nexus 5X vs iPhone X. The only thing I touched was the width of the screen by adding the missing pixels.
So what’s the takeaway of this? Fragmentation is a b*tch, we need a way to automate our design layouts inside our tools or at least a warning that it will break.
Design with even more ‘whitespace’ around the content, if possible. Regardless of your medium:
- Videos on youtube: rethink the position of your call to action buttons
- PDF: whitespace or scalable file such as any eBook format
- Website: whitespace or a way to detect the notch adapt to it
- Games: despite pixels being real estate on the screen, ‘waste’ them to make your buttons accessible.
Designing for such a ‘minor’ change is already a challenge, let’s hope that with the upcoming VR generations we don’t need to redo all of our websites to make them halfway accessible or at least not look outdated.
