Thursday, September 21, 2017

iPhone X Design and the Notch

From a hardware perspective, the cameras and sensors in that part of the iPhone couldn’t have realistically been placed anywhere else, so what do you do if you want an edge-to-edge display? You either have the display reach them, surround them; or you maintain a minimum of bezel on the ‘front’ and ‘chin’ of the phone, and leave them out of the display area.

[…]

Well, I can’t believe I’m writing this, but I actually prefer these two design choices over what Apple has done with the iPhone X. Like with the notch on the iPhone X, my eye is immediately attracted by the Essential Phone’s front camera, ‘breaking’ the display’s continuity there in the middle. Yet I think that it’s small enough to get enough out of the way aesthetically, and not be a hindrance to the phone’s user interface. More information can be displayed both to the left and right of the camera. To be fair, Apple had too much technology to cram there to achieve a similar, less visually annoying result. Then why not opt for a Samsung-inspired approach?

John Gruber:

I’m not on board with Apple’s “embrace the notch” user interface, but I do find it commendable that they showed the notch everywhere during the keynote Tuesday.

[…]

Ben Bajarin did get an answer from Apple on this at the event, and I was correct: the default is for video not to zoom to fill every pixel, so you won’t see the notch in video playback unless you double-tap.

Bryan Irace:

Remember when we first saw all of this wasted space and thought “Surely this will make sense on the new phone”? 🙄

Marco Arment:

I was hoping that the long-rumored edge-to-edge iPhone screen would still be a rectangle, possibly even with room for a Home button on a narrower bezel, so I wouldn’t have to change my habits (or my app’s layout).

[…]

Apple would’ve lost what the iPhone has had since its introduction: a unique, recognizable shape that distinguishes itself from all of the other boring rectangles out there.

John Gruber:

My objection (again, after admittedly only spending 10-15 minutes with an iPhone X in hand) remains that Apple could embrace the notch on the lock and home screens, allowing for this new iconic silhouette, without embracing it all the time.

Keith Harrison:

If you are not using safe area layout guides or layout margins there is a good chance your controls will end up too close to the device edges. The rounded edges, top central housing or bottom home indicator can clip, hide or overlay controls that would be fine on other iPhone models.

[…]

There is a new property (insetsContentViewsToSafeArea) on table views in iOS 11 that controls whether the content view of a table view cell is inset for the safe area. This is true by default which causes a subtle change with table views in landscape on an iPhone X.

Paul Haddad:

Feels like so much wasted space, landscape has less “safe” area than the 8.

Marco Arment:

The X’s biggest UI-design problem for me isn’t the notch — it’s the home indicator and the rounded screen corners.

iPhone UIs basically can’t use the four corners anymore. That’s not a small deal.

We’re going to have to add a lot of margins everywhere.

Will be challenging to have the same UI scale between the iPhone SE, 6/7/8, Plus, and X.

SE owners will get the worst UIs forced on them.

Joe Cieplinski:

I do have to wonder as well, why so many people seem obsessed with this edge-to-edge screen concept. It’s important enough for Apple to make a major design tradeoff with the notch, so it’s clearly a big deal to people. But as I’m reworking my apps to behave correctly on the X's screen, what I’m learning quickly is that all four far corners of the screen (the areas that used to be blank “chin” areas) are too inconvenient for thumbs to reach easily. Which means they are lousy for UI interactive elements. Thanks to the notch, and the fact that the phone is no longer 16 x 9, watching video full screen is a poor experience as well. So most of what’s important is going to end up in the “safe” areas—in other words, the exact dimensions of your iPhone 8 screen. Basically, we’re lighting up the edges of the X screen with background color and calling it a revolution.

NIELS:

Don’t place interactive controls at the bottom of the screen. The spacing around the home indicator is purely created for gestures, swipe up to go home. Placing buttons near this indicator or in the bottom round corners of the display might not be great. Users might accidentally use the home gesture and your UI will be difficult to reach. You can however still use tab bars and function bars, but keep in mind that they should not interfere with the home indicator.

Previously: iPhone X, iPhone and iPad Resolutions.

Update (2017-09-22): Max Rudberg:

These are explorations on how certain design patterns can be adapted to the new screen.

Update (2017-09-23): Chris Pirillo:

Is the iOS “Plus” landscape keyboard layout artificially cramped because we’re paying for the screen sins of the iPhone X?

Update (2017-09-27): Dan Masters:

If “all screen” is so important, why draw attention to the non-screen part with iOS’ bleed-through status bar design?

[…]

If for brand differentiation, why not simply show the bleed status bar on the home and lock screens (much like Springboard has become iconic in its own right), while at least having it black inside apps to keep the focus on the software experience?

Update (2017-09-29): Timothy Horton (via John Gruber):

Other pages — especially those designed with full-width horizontal navigation bars, like the page below — can optionally go a little further to take full advantage of the features of the new display. The iPhone X Human Interface Guidelines detail a few of the general design principles to keep in mind, and the UIKit documentation discusses specific mechanisms native apps can adopt to ensure that they look good. Your website can make use of a few similar new pieces of WebKit API introduced in iOS 11 to take full advantage of the edge-to-edge nature of the display.

Update (2017-10-03): Todd Ditchendorf:

When u ask your engineers to invent these kinds of hacks to work around your HW design…don’t u stop & reconsider it?

Marco Arment:

Can I just look at my layout on the landscape X and cry?

I’m sure we’ll all like the notch eventually, but damn, landscape is just awful.

Colin Cornaby:

Not completely offended by the notch, but I’m definitely not sure rounded display corners is a good idea for phone UI in general.

The notch is less disruptive than adding massive right/left/top/bottom margins specifically because of the curves.

Bob Burrough:

Bondi Blue iMac: shape defined by display
iMac G4: shape defined by display
iPhone: shape defined by display
iPhone X: display defined by shape

Ken Segall:

That’s why it makes me nervous when I see today’s Apple playing loose with words and images to sell a product.

Case in point: the “all-screen” iPhone X.

Of course we can see with our own eyes that iPhone X is not all-screen. It has a noticeable edge around the entire display, which even the Samsung S8 does not have. And then there is “the notch” — the object of many a critic’s venom.

[…]

“It’s all screen,” says the headline. Yet, astonishingly, the image focuses almost entirely on the only two parts of the phone that are not screen—the visible edge and the notch.

Update (2017-10-04): Peter-Paul Koch (via Hacker News):

During the introduction of the iPhone X a hilarious gif made the Twitter rounds, showing a list scrolling past the new notch.

I asked the question any web developer would ask: “Hey, is this even possible with web technology?” Turns out it is.

Max Rudberg (via Nick Heer):

In the same spirit as the first post (UI Design for iPhone X: Bottom Elements), this post will deal with designing for the iPhone X. I use findings in our own apps in some of the examples.

Update (2017-10-20): John Gruber:

But with the notch? No way. Here’s one simple way to think about it: what does Apple do 2-3 years from now if they ship an iPhone with no notch? Describe it as “Really all screen this time”?

Update (2017-10-21): Bob Burrough:

iPhone 1 bezel width: 4.64 mm

iPhone X bezel width: 3.91 mm

This is according to Apple’s developer documentation.

iPhone 5, 5S, 5C, SE all have bezel widths narrower than iPhone X.

Update (2018-01-23): Brad Ellis:

iPhone X rounded screen corners don’t use the classic rounding method where you move in a straight line and then arc using a single quadrant of a circle. Instead, the math is a bit more complicated. Commonly called a squircle, the slope starts sooner, but is more gentle.

Update (2018-09-03): Ryan Jones:

iPhone XS wallpaper does a stellar job of hiding the notch. Apple not embracing the notch.

Update (2018-10-26): Rob Griffiths:

The notch adds nothing to the iOS experience, but takes away much. Those stupid ears grab my eyes every time I see them, and there’s no way to avoid them, save never using anything but an all-black screen. When not in an app, they show status items on a black background, which is fine…as long as your iPhone’s wallpaper is also black.

But once you’re in an app, you’re in Notchville…

CSS Design iOS iOS 11 iPhone iPhone X Web