Warning icon on Avatar

[cdpestitschek]

Background: This iteration is about creating a notification in User profile / settings / help center which would show/represent if something is wrong related to health status of users system.
To see more details about the user profile and avatar, check here

User statement

I as an agent would like to be aware if something is wrong with my system, having this information I would know something is wrong and i should get support.

We are looking for accessibility recommendations, including icon sizing and color.

Stage of design: Define/High-fidelity
Research: TBD
Links to mockups or prototype: Figma file

[nkrantz]

Hi @cdpestitschek -

Because you're trying to implement a new type of flow here (see a warning > navigate to health status message > take action) it's important that we're thinking through its future potential and scalability. Showing the warning icon on the user Avatar (and the system status update in the user control center) is very specific to the user. If the only warnings that you'll ever want to show going forward are user-related warnings, that's okay, but we want to make sure we're thinking thoroughly about any future (non-user-related) warnings you might want to display.

In order to create a scalable flow here for identification of warnings/errors, let's think of a comprehensive, future-proof solution rather than coming up with a specific solution for user errors only. Could there ever be a possibility of needing to display system-related errors that wouldn't make sense in the user control center? What if there were so many errors that needed to fit inside of the user control center, that it actually took away from the main purpose and actions of the user control center?

Thinking through these types of situations will help to be able to define scalable flows for different types and severities of warning/error. It might make sense to pull out the system health information from the user control center into a separate item in the masthead, specifically for dealing with warnings.

[shleewhite]

Hi @cdpestitschek Do you have what you need or would you like more assistance with this?

[cdpestitschek]

Not for now @shleewhite. @nkrantz thank you so much for the feedback && clarification.

[bchicca]

@nkrantz I have a different use case for showing a specific error about the user profile not loading.
Is this combination allowed: error icon + popover?

[TheSisb]

Hi @bchicca,

From a feasibility perspective, you are able to trigger a Popover on an icon-only button.

From a design perspective, it's hard to say.

• If this message pertains to the page that is being loaded, the message should be presented on the page using the Alert component.
• If this is a system wide-warning, you may want to consider Nora's answer from above.

Hope this helps

[bchicca]

@TheSisb this is an error pertaining the profile component. When there is a problem with that component, users are not able to log out. It's tricky because it's a component error, not a system error, not a page error, and the component is very small to display a help text.
I haven't seen this use case covered in the error patterns page, is it something that would make sense adding?