Proposal: UI for Long-Lived App-Wide Status Messages

[sapallie]

Proposal: UI for Long-Lived App-Wide Status Messages

Summary

Add new UI for long-lived app-wide status messages for scenarios such as updates available or errors that may occur which prevent the user from experiencing an app or its features working as intended.

Rationale

• Users should be informed about status changes that occur on an app level (Teaching tips are specifically built for informing users of nonessential options that would improve their experience – there should be a overarching UWP UI element to inform users about essential changes too.)

Scope

Capability	Priority
Notification will not block user from effectively continuing to interact with the app while the notification is active.	Must
Will make users aware of critical & non-critical messages about app-wide status.	Must
Supports custom content and style.	Must
Status message able to automatically and programmatically dismissed when status is no longer relevant.	Must
Status message can be dismissed by user.	Should
If there are multiple status messages, the app should decide how to stack the messages.	Should
Responsive to app resize and UI changes.	Should
Will act as a system notification.	Won't

Scenarios

Critical Scenarios:

• Internet connection lost while sending a message in a messaging app (@sapallie)
• No microphone connected when trying to record something (@sapallie)
• Server that's essential for the app working properly is down (@sapallie)

Non-critical Scenarios:

• Update available.
• Back-up complete.

Design mockups:

Status Card

They are similar to Teaching tips but should be used for prompting users about errors or important status changes.

Status Bar

In-app-UI banner similar to what is currently in use by M365:

Your Phone App error message:

VS Designer banner showing 2 separate links:

"Recording started" message in Teams:

InAppNotification

Port from Windows Community Toolkit to appear from the edge of the app window as an overlay UI control.

Open Questions

Scenarios/Requirements for this UI:

• App title
• Scenario description (status message, critical/non-critical, and description of how you would like to present it)
• Screen shot of app screen where error would present (if available)

[adrientetar]

@sapallie, could you make the design mockups accessible publicly? Unless they're not to be shared at this point.

[mthomason]

Currently doing XAML development, and I'd love to see something like this. Or, something like a nice scrolling message control.

From a Microsoft branding standpoint, a standardized error banner seems like it could go horribly wrong. I'd fear end users associating every application error with the Microsoft brand. I just read the proposal, and first thing that came to mind was memelords tweeting about the flashy banner of death.

[sapallie]

@sapallie, could you make the design mockups accessible publicly? Unless they're not to be shared at this point.

Sorry @adrientetar, I can't share them just yet. The designs are Microsoft only for now.

[SavoySchuler]

@sapallie, thank you for this phenomenal feature idea! I am a Program Manager for WinUI and I am excited to pitch this to the team!

I wanted to write a little bit about our process so that you can be in tune with how we'll proceed from here. Starting now, I'll work to refine the high-level scope/requirements of this proposal and the justification for the development. Then I will pitch it to the rest of the WinUI team and we will deliberate on whether it aligns with our Road Map (#717) and if we think we can act on it relatively soon. If so, I'll be approved to figure out the details and begin spec writing so that the feature will be ready for a developer.

Here are few things I already know I need to get a bit more of an idea for...

• Visual behavior

Is your proposal for an edge-to-banner? Or a notification tile like what Windows Notifications do but in the app window such as the in the center, along the bottom edge, or in a corner?

Sorry @adrientetar, I can't share them just yet. The designs are Microsoft only for now.

I don't think I would be able to get this proposal approved without being able to include a public visual of the request as the repo is open source and close-sourcing the visual side of the conversation would entangle the process and experience for our community. Based on responses to the above, I am happy to take a shot at drafting a mock up for the proposal. Would you prefer this or do you have a timeline envisioned for granting your permission to make your design public? I love your mockup and would be eager to have them included in our brainstorming here lest we unnecessarily take the discussion in a divergent direction to your intention. Please let me know! 😊

The banner will make users aware of errors that prevent them from using an app/a feature

The banner will be dismissable for non-critical errors

Am I correct in reading these statements to mean you also need to have the option for a non-dismissable bannerfor critical errors? If so, could you tell me more about your specific app scenario for recieving one/proceeding from the point of having a non-dismissable banner? Are the users relegated to close the app unless the problem is solved? Or is this where the buttons would come to, say, navigate them to the Network & Internet settings page?

Thanks again and I look forward to refining this idea!

Everyone, please feel encouraged to contribute your needs, designs, and perspectives to this conversation! 😊

[mdtauk]

I would like to say, there are a few proposals that all ask for a similar thing. Rather than make this specifically an Error banner - why not just bring in the In App Notification from the Community Toolkit. There could be an icon property added, which would make it show an error icon, or a confirmation icon, etc.

[sapallie]

@SavoySchuler – good to hear from you. I tried to answer all your questions but please let me know if you need anything else.

Visual behaviour:
Ideally the banner would be similar to a Windows Notification tile and would either be pinned to the top or bottom of the app window. Where it’s pinned depends on the other visual elements in the app and where the focus lies. This decision should be made by a designer.
I think the GIF @mdtauk posted would be a great starting point.

Dismissing:
I think it’d make sense to dig deeper into what I mean with critical vs. non-critical errors:

• Critical errors = app functionality is impaired because of a system-wide problem (e.g. internet connection lost) – these should link to the system settings where the user can maybe fix the problem
• Non-critical errors = some of the functionality is impaired or a single feature doesn’t work but users can still do other things in the app
• It’d also be cool to introduce a purely informational iteration of the banner as well that can be used to let users know that app updates or new features are available.

And I think all of these should be dismissible (I updated that in the proposal description as well)

Example visuals
I did a few changes to the visuals and am able to share them like this:

These examples are an iteration where the entire banner is basically a big button. Users can dismiss it or click on it to go to the system settings (critical error), open a web page with details about feature fixes (warning 1), reload the app page (warning 2) or go to the Microsoft store to update the app (informational).
It’d be possible to expand this concept to add multiple buttons within the banner.

[mdtauk]

I really like those visuals for the banner. I would move the text and icon up by 4 px, so they are centred in the white area, rather than the white and coloured bar.

[Felix-Dev]

Agreed. The posted visuals look quite nice.

[mrlacey]

I really like those visuals for the banner. I would move the text and icon up by 4 px, so they are centred in the white area, rather than the white and coloured bar.

I haven't counted the pixels but it looks as if these are centered if the space for diacritic marks above the X-height is accounted for.

[mrlacey]

@sapallie Have you made any thought about allowing these controls to be automatically, or programmatically dismissed?

If prompting about being/going offline, it would make sense to programmatically remove such a prompt when online again. (I've seen apps not do this and it can lead to a confusing experience.)

Similarly, having non-essential messages not displayed indefinitely can avoid unnecessary UI clutter and can prevent power users from needing to get out of flow once they've read a message by not forcing them to manually dismiss the notification.

I understand that there are potential extra accessibility considerations around such a control and these behaviors but I believe these ways of dismissing the control are essential.

[mrlacey]

I think it is important to call out that such a control is not intended for general messaging within an app. Unless that really is a desired use case.

[mrlacey]

Should an app be allowed to display multiple banners at once?
If so, how will they be arranged? And is this something that the app can control?