Here's a spec for the feature after the multiple discussions

• No actions necessary
• short and to-the-point messages
• close button to close the message
• auto dismiss after certain interval
• 1 default and 3 flavors.
• same height as status bar and title bar combined

Values
Flavor: default
auto dismiss interval: 5 secs
slide down animation duration: 0.3s

Create params for

• flavor [string]
• duration [float]
• enable auto dismiss [boolean]

Copy guideline

• use short sentences.
• not more than 2 sentences
• do not use this if you want user acknowledgment on the notification
• not more than 3 lines of text

Assets + colors
Coming soon............ real soon.

@Fjalapeno @JMinor

M120 Notification across iOS

60

@Mhurd @Fjalapeno @JMinor @Nirzar to reiterate what we discussed in planning today:

Offline Alert UX

We will optimize for the main use case (online, success) by optimistically peeking/pushing the view. In the event of a failure, we need to show the alert banner w/ the error message for offline (taken from Apple's NSError failure reason).

This means the banner must be shown within the peek. This could be problematic if the banner is a global UI element.

This really doesn't mean the banner needs to be in the peek.

Making the banner non-global just to support this edge case makes it much more problematic to implement. For instance, overlapping the top nav bars in other views may not even be possible if we try to embed it within the peek.

Remember this is a peek into the content being pressed - not a miniaturized version of the full UI - there is no nav bar, there are not navigation buttons, no tab bar.

My recommendation is just let the empty state of the article view signify to the user that it is not loading (this is exactly the same behavior as Safari.).

As far as seeing the banner - Remember the peek isn't a static screen, it will only be present for a moment, as soon as the user sees the page isn't loading and lifts their finger, then they will see the normal UI and the banner.

cc @Mhurd @JMinor @Nirzar BGerstle-WMF

As far as seeing the banner - Remember the peek isn't a static screen, it will only be present for a moment, as soon as the user sees the page isn't loading and lifts their finger, then they will see the normal UI and the banner.

The problem w/ a global banner arises if we fail to load the content the user is trying to peek, and the feedback is obscured by the blur effect of the peek itself. I agree that showing the banner inside the view (as we do currently) has a few other trade-offs, and that having a "global" banner mitigates some, but it's unclear what "global" even means:

• "Take over" the navigation controller's navigation bar?
• "Take over" the status bar?
• "Take over" everything (i.e. the app window)?

The last two options are the only ones I can see getting around the peek issue.

Except that blocking the window could potentially conflict w/ not blocking the UI (since we have no idea what we'd be occluding).

but it's unclear what "global" even means:

Just like the mocks show - and just how most banner libraries work. They show over the top of the UI - they auto dismiss and then if you want to dismiss sooner you can tap them. This is all super standard and very established patterns and I think maybe we are overthinking it here.

The problem w/ a global banner arises if we fail to load the content the user is trying to peek, and the feedback is obscured by the blur effect of the peek itself.

Thats why we have the empty content screen. There is no confusion - the user sees the content didn't load and releases to reveal the main UI (which includes the banner).

I agree with @Fjalapeno on this one.

The banner should appear on the destination UI, not within the peek. Ideally the peek would be smart about catching failures and show the "empty screen" fallback image, but I don't think thats needed for a first implementation. If the peek is abandoned, then they get no feedback, which isn't great, but is good enough for a first pass. If we feel we must somehow alert a user on a failed peek, then we could potentially show the banner on the source screen after the peek is over.

^ ps. this is a global issue with feedback from peeks right? If we really want to address this, we should look into any HIG guidance on communitcating to the user during/after a peek, or look at a few more apps that have implemented peek and see how they handle this.

Conceptually, I think of the peek state as a mid-navigation state (its just a user cancellable one), and not a place where we should push info to the user. Its like adding a UIAlert in the middle of a slide navigation animation. Its better to disable the navigation option (ie. make peeks not work and notify its because they are offline via the banner mechanism) or let the navigation complete and notify the user why their destination looks different than expected (ie. the empty state screens), rather than try to insert information mid navigation.

@JMinor @Fjalapeno @BGerstle-WMF
No, this banner should not show up inside the peek view of anything. as far as i am concerned about the experience. peek should not work if there is no internet but we blocked that option. so we need to show the blank states for peek view.

I have posted the blank states for articles, search and feed over at T117925: As a user without internet connection I want a smooth user experience

we can move this discussion there too.

@Nirzar Need assets for this (check marks and other icons)

@Fjalapeno here's a temporary "icon" for all banners:

For copy, please use the existing messages from the existing alerts (ie. the scope of this is to change the flow and visual design of the alert system, we will do a separate pass for copy changes if needed).

Testing Global Error Banner View

Then it should slide down from the top of the screen

Passed

And it should contain localized text describing details of the error (e.g. Internet connection appears to be offline).

Passed

And it should be presented on top of everything in the app

Passed. See the above screenshot.

And it should have styling appropriate for its severity

Needs Design Review
More screenshots:

Testing Language Picker View

When the languages fail to download
Then I should see an error banner

I was not able to trigger specific error message. When in offline mode, the lang icon in articles is active. Clicking on it displays the banner "The Internet connection appears to be offline".

Testing Account Creation View - checked with 5.0.0.549 on iPad mini iOS 8.2
All specs are in place - including auto dismissal intervals.

Notes:

And the "create account" button should be disabled

There is only Next and Done button in the account creation process.

When in offline - the message about the Internet connection to be offline comes after a user submits the form. Maybe it's better to display it earlier?

The screenshots:

@Fjalapeno
Can you check colors of "Good" notification? Not sure if icon and text match. I made the icon #00C89C.

The good notification remains on screen for a very short period of time, too fast to read. Is there a spec for that timing?

@KHammerstein I just updated the colors to that hex (I previously used a color picker to get the value)

Looks great all, glad we made this happen for beta. I'm sure will need some refinements and edge casing, but really liking the new visuals and interactions!