Any thoughts on switching to the "home indicator" area for iPhone X? (screenshot)

[benguild]

UPDATE: I've submitted my Pull Request with CWNotificationStyleHomeIndicatorNotification: #111

---

Previous messages:

Out of curiosity I thought I'd try this library on the iPhone X:

... It works as expected, but also as expected the text is covered by the "notch" area.

A better option might be for those phones with the notch to use the "home indicator" area just temporarily at the bottom of the screen. Any thoughts or interest on this?

[lewis-smith]

I've also seen this issue. Another option might be to allow setting content on the left and right?

I guess I could do this myself with the custom view option.

[benguild]

@lewis-smith Meh, to be honest that seems like a totally different implementation to me....

[kenyth]

how about the area just below the notch (sensor housing), but above the safe area? Does the area there have enough space for notification?

[benguild]

There’s not enough space there. The best place is the home indicator. -- iPhoneから送信

[kenyth]

It seems "use the home indicator area" won't be allowed. It says "placing all non-scrollable content within the safe area" when specifically talking about ui elements close to the home indicator in Apple's latest "Designing for iPhone X" video.

[benguild]

Yeah but neither was using the status bar area. -- iPhoneから送信

[kenyth]

FYI.

I have a small app heavily depending on the status bar notification design both for short-period notification message and for persistent app status display such as selection status in editing mode.

Previously, before iPhone X, it looks like this:

With iPhone X simulator, I did some experiments as below (1. ignore the white area at the home indicator area, it's a bug not fixed yet; 2. font size could be further tuned):

None of the experiments above is acceptable from my point of view. For short-period notification message, maybe it could be tuned into an acceptable state, but for the persistent app status display used in my app, they are simply not acceptable.

[lewis-smith]

If all the text appeared on the line where it says xxx selected, I think that would look good.

A simple work around could be:

message = "hello"
if iphone x
  message = "\nhello"

[marcphk]

For short, brief notifications, perhaps a marquee-style ticker tape that takes over the time in the left ear would make sense.

[benguild]

@magicmarc For consistency that does not make sense in my opinion. This library has a clear design and function that should remain consistent. If you want to fork it and do that, it'd be a separate project.

[marcphk]

@benguild - Indeed, you’re right.
Perhaps something like this is a better solution; pad and float:
http://blog.maxrudberg.com/post/165590234593/ui-design-for-iphone-x-bottom-elements

[benguild]

@magicmarc I agree that could be nice, but it also seems like a separate project/fork if the functionality were to change to be something floating over the content of the view vs. being part of a tab-bar or in the home indicator function area... which is arguably the most similar reproduction of this "off view" functionality on the modern platform, IMO.

This pod/library uses "reserved space" to display a simple notification without affecting the application itself. In my eyes, the only current alternative without changing this functionality is to use the home indicator area instead.

[benguild]

Just so that we're all on the same page, this is what I'm thinking for the iPhone X:

It'd be basically the same thing as now, just in a place where the horizontal display isn't interrupted and still within a reserved space, for momentary use only.

[kenyth]

Just FYI.

Now I finally go with this design for my small app:

1. a revised version (actually I also integrated a progress view into it) of CWStatusBarNotification only used for short-period or instant notification message
2. a floating small bar under navigation bar for persistent app status display

for notification message only (showing for less than 1s), 20pt high, ignore the confusing "xxx selected" text

for persistent app status display

Sigh...compared to all these, in my case, the original status bar notification design is way more elegant and needs much less implementation effort.

[benguild]

@kenyth That seems way worse than just putting it over the home indicator. Why are you insisting on it being at the top of the screen? It looks totally out of place floating under the notch, and when blended into the navigation bar you're bound to have consistency issues when navigating between view controllers.

[kenyth]

@benguild because it's consistent with the iOS 11 native banner alert design, and kind of consistent with the previous version of the my app. And the new persistent app status display design of my app is at top, users shoudn't get distracted by having to find some notification messages at the bottom. Considering all this, it's kind of odd for a notification message showing at the bottom. It is not blended into any bar, but just float over the whole app, and it appears for just no longer than 1 second. By having it over that exact position, interaction is not much encouraged both with the notification message and with the navigation bar when it shows, but it won't block any sight of the any normal navigation bar so it becomes as trivial as possible to users. Anyway, the appearance and animation may be further tuned.

[benguild]

@benguild because it's consistent with the iOS 11 native banner alert design, and kind of consistent with the previous version of the my app. And the new persistent app status display design of my app is at top, users shoudn't get distracted by having to find some notification messages at the bottom. Considering all this, it's kind of odd for a notification message showing at the bottom. It is not blended into any bar, but just float over the whole app, and it appears for just no longer than 1 second. By having it over that exact position, interaction is not much encouraged both with the notification message and with the navigation bar when it shows, but it won't block any sight of the any normal navigation bar so it becomes as trivial as possible to users. Anyway, the appearance and animation may be further tuned.

...@kenyth These issues sound specific to your particular app, as you had to explain it out. None of that is in the pod/project's description, which is simply as follows:

CWStatusBarNotification is a library that allows you to easily create text-based notifications that appear on the status bar.

Now that the status bar is obstructed, it makes sense to put it in the only reserved space that is not obstructed: the home indicator.

---

I don't think anyone is embedding any critical UX using this like you are, and your case of using it for such is probably a bad idea. There are a number of other ways that you can accomplish what you want to do, such as using the "prompt" property of the navigationItem on your view controller.

[kenyth]

Actually I'm not sure it's the best way to go in my case. But it seems the most reasonable way to go at least for now.

When the notification message (shows for less than 1s) and the persistent status both show, it looks like this:

@benguild another reason I'm not willing to touch the home indicator area is if you don't hide the home indicator that won't work and if you hide it, even temporarily for the purpose of showing a notification message, I'm not confident if it could pass the app store review. But I'm open to change at any time to a better design if it proves that it can pass the app store review. So I agree with your attempt at the home indicator area.

[benguild]

I think for a brief status message (~1.5 seconds max) based on a user action, it should be fine. Persisting coverage of the status bar or home indicator such as to indicate a state of selection as the user is browsing is not a good idea at all.

[kenyth]

@benguild It's clear that the perspectives from my app and from a library like CWStatusBarNotification are different. I was not suggesting in any way the design of the library should be similar to what I did for my app. And actually I'm looking forward to "borrowing" a better design from the future version of the library, as I did for a long time before iPhone X comes out and I really appreciate that a lot.

[lewis-smith]

What's the ETA for the home area version?

[benguild]

@lewis-smith I'm not sure if anyone is working on it yet, are you interested in contributing?

[marcphk]

@benguild I’m not sure if the text being in a reserved space should necessarily take priority over the notification being at the top of the screen (which is where we are used to reading notifications, and will definitely not be partially covered by the user’s hand and therefore brief ones potentially missed).
iOS 7’s notifications were similar to a two line CWStatusBarNotification. These have now been rounded and are padded below the notch on the iPhone X. CWSBNs should surely be in the same place.

Another argument against using the home area - left/right swipe gestures in this space on the iPhone X invoke a shortcut to multitasking, and swiping up invokes full multitasking/the home action. CWSBNs are (and I feel should remain) dismissible without disrupting these gestures.

[benguild]

@magicmarc Your arguments are fair, but the issue is that a space that was once largely for status related activity is now mostly gone. The only other option to while retaining the design is to put it into the home indicator area temporarily and then either redesign each dependent app/functionality to work in some other way if the developer thinks it's going to be an issue?

In terms of the notifications being at the bottom of the screen (vs. top), I'm not sure if this is an actual problem to be honest but I'd be open to hearing more from you as to why you think it could be.

[lewis-smith]

@benguild I'm not interested in contributing this change. For my app (and I think for many) putting the message at the bottom means there's a strong chance it will be at least partly obscured by the user's thumb.

I wonder, if Tweetbot update to show the status bar either around or beneath the notch, would you consider following them?

[pipizanzibar]

Are you guys going to update the library before November 2?

[benguild]

@pipizanzibar I'm not sure if there's a consensus about direction for this. Ultimately the status bar is not available anymore, @lewis-smith is saying if we use the home indicator area it's probably blocked by someone's thumb yet he hasn't even used the iPhone X yet AFAIK, and there's not enough space under the notch to put text there.

[pipizanzibar]

@benguild this library already allows you to choose between:

• notification covering the navigation bar
• notification covering the status bar
  Is it an option considering a fallback of the second case into the first case just for iPhone X?

[benguild]

@pipizanzibar If that's what you want, then do this:

if (@available(iOS 11.0, *))
{
        if (!UIEdgeInsetsEqualToEdgeInsets([[[UIApplication sharedApplication] keyWindow] safeAreaInsets], UIEdgeInsetsZero))
        {
                [statusBarNotification setNotificationStyle:CWNotificationStyleNavigationBarNotification];
        
        }

}

EDIT: Edited to wrap with @available to target iOS 11+ only.

[pipizanzibar]

thank you @benguild I will probably use it,
but I would still like to consider it as a default implementation, I don't consider the home area as a good place for a notification since with this tall device the eye wouldn't focus on what's happening there.

[benguild]

@pipizanzibar I'd propose having a new enumerated value or something like CWNotificationStyleNavigationBarAuto ... to not break existing apps, regardless of whether or not the status is visible as-is.

[pipizanzibar]

it looks fair enough to me

[pipizanzibar]

what if it goes right under the navigation bar? 22points tall just like a status bar? do you feel it as a completely different project/implementation?

[benguild]

yes

[pipizanzibar]

I'm testing the notification in the navigation bar in iPhone X, but there is an offset in the vertical centering of the text since it is not centered referring to the distance from the notch :|

[benguild]

@pipizanzibar open a separate issue for that please 🙌🏻

[Tulleb]

@benguild I also disagree with you about the importance of the text area being superior to its placement.

The user will always focus on the top of the screen prior to the bottom as its thumb might hide the bottom part 80% of the time.

Moreover, as @kenyth said: you are missing the home indicator which can't be hidden for real at the moment.

From my point of view, if the alert is supposed to be a short and non-permanently displayed sentence, then the small area between the notch bottom and the safe area layout guide top part should be enough.

And if at the end of the debate there is still disagreement between some motivated brains, we can always propose a new option for the user to choose between a top or a bottom display, right?... But with a default value in the status bar obviously, hahaha :)

[benguild]

I've sort of reached the conclusion in my mind that since the status bar is largely obfuscated, this library should probably just be deprecated. It doesn't mean that it can't inspire or be the template for something else, but I'm personally thinking about something more along the lines of how iOS displays notifications or maybe having something appear under the navigation bar instead.

[Tulleb]

It could be another option but... 3rd of November is going to arrive very soon :)

[benguild]

I mean can anyone argue the fact that status bar notifications should be outside of the status bar? :)

With that said, yes there is a mode in this to use the navigation bar, and as a temporary fix... I'd suggest using the code I included above to target that for iPhone X users in order to assess the solution from there once you actually get a feel for the device.

[Tulleb]

Here is what it looks like when using the small gap between the notch and status bar bottoms:

[benguild]

@Tulleb That looks awful

[Tulleb]

This is just to give it a look @benguild :)

[ignasibm]

No official answer to this problem? iPhone X coming out in a couple of days.... For the moment I'm using CWNotificationStyleNavigationBarNotification with a re-centered label, but it's quite big and ugly......

[benguild]

I've submitted my Pull Request with CWNotificationStyleHomeIndicatorNotification: #111

[btelintelo]

Can we merge the PR or close the PR for something else?

[ppamorim]

I solved it modifying the Swift version:

Iphone 8 on left and iPhone X on right.

[benguild]

@ppamorim yikes... I'm not sure if hugging the notch is what people would want.

---

On that subject, I've been giving this some further thought:

I think that the ideal approach here for doing any sort of status bar notification after using various apps and the iPhone X for a bit longer... is probably to use an icon in the left-hand side of the notch area instead of displaying the time, temporarily. Basically, you'd animate-in the background color as before, leave the status information on the right, and then fade in an icon there to indicate some sort of status issue.

Whether or not you'd want to fade out the icon afterward and scroll some text past in the left-hand part is questionable given that it would have to repeat unless someone was trained to look there straight away, but regardless...

I think that ultimately displaying information in the status bar that's not minimal (an icon, etc.) is probably a lost cause at this point given the direction of the hardware. I suggest abandoning the project at this point and considering other options that'll work on all formats. (such as something along the lines of what I suggested above)