What is the correct pattern for an error in the navigation bar?

[bchicca]

Hello,
I'm wondering what's the correct pattern to use in this use case. The error is caused by a query failure with the user card component so the whole component can't be displayed (top right):

This is the component when everything is working normally:

[TheSisb]

Hi @bchicca,

Clarifying question: what triggers the error? Is it on page load or after a user performs an action?

We recommend using a Toast to communicate a direct response to a user based on their action. Using a toast lets users know that their action was acknowledged. Toasts are a little offset from the top/right edges of the window, as can be seen in this example.

You can consider an Alert to notify a user about high-priority or time-sensitive changes in the system. Alerts communicate system-level information that isn't triggered by a user action.

[bchicca]

@TheSisb this is not a consequence of the user's actions, it is a failure in the backend. It means that the components in the second screenshot cannot be displayed at all. What is Paste's recommendation for this use case? Is the alert (currently used, first screenshot) the right pattern?

[nkrantz]

Hi @bchicca! Without more information about the error and why the menus aren't able to load, we can't give a single recommendation/pattern that would necessarily account for your use case, but we've come up with some options.

I'd recommend against using an Alert to replace the section of the Topbar that isn't able to render. Alert wasn't designed to indicate an error for something that doesn't load in a small localized area, and it could be a confusing pattern for users who are familiar with Alerts and the existing navigation components. Instead, it might help to think about what customer workflow is interrupted when the User Dialog and/or Status Menu don't load.

1. If it's not severe, a smaller indicator can do fine, like icon, help text, popover (see the Error State Pattern). Anything more prominent will likely distract them anyway if they can continue their work as usual.
2. If it's very severe (maybe an agent not being able to change their online status means they can't start their work at all, for example), then it's worth having an Alert that spans the entire page width.

Our designers have created a few mockups to demonstrate these options, feel free to take a look and let us know if any of them fits your specific use case!

Additionally, you might want to reach out to Console and Segment designers to see how those products handle similar errors.

Let us know which direction you end up choosing! Thanks.

[bchicca]

Thanks @nkrantz ,
The icon + popover will work well as the two components may break independently so we can separate the errors. It's not explicitly mentioned in the patterns page, it would be great to add it there so people know that's a possibility.