User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
What UI component should I use to display API error or backend error? Any best practice and what kind of UI element can I use to display it. I don't want to display it inside a form, but a sort of general way to display it. What are some best practices?
The errors are general errors like:
Any error alert should offer the user a way to resolve the problem.
This resolution could be something simple like trying again later or something complex involving settings or syntax but the response to the error should always send the user in the right direction to fix the problem as quickly and easily as possible.
Having said that, it's not the users' responsibility to fix your database issues and there may be a bigger problem beyond the users' control - In these cases, the resolution is to point the user to somewhere they can report the fault.
When it comes to visibility, this depends on the severity of the error from the users' point of view. One of your server warehouses could be on fire but that doesn't matter to the users. On the other hand, a user could have entered an illegal character into a field that will make their system choke - this is extremely critical to the users.
The more critical the error (from the users' perspective) the more visible the alert should be. "Server access times are a little slow right now" could be a little notification in the corner of the window whereas "Your next click will delete all your records" needs to be a big dialogue sanity check in the front of the window blocking the user from doing anything until a response has been made.
[5 months ago but an interesting topic...] The context of your example errors are widely different, some suggest the user can't do anything, some suggest they could.
Predominantly a back end or server side error is visualised by way of a 'server stack' icon. Usually 3 squares or circles on top of each other. An issue would be the icon in yellow or orange, if there is no connection whatsoever, potentially this could be the stack with a line through it in red.
In any case, the user needs to be able to understand more than just seeing the icon, contextual messaging should be included so they can understand whether this is a sudden and temporary error, or if it's a major error which may need the back end dev team to look into it for hours or days. The user needs to understand 'time to fix' so they don't waste their time worrying or trying 100 random things. If it can be fixed with a page refresh or log out/log in, then the message should state this and potentially offer the 'log out' cta right there and then as it would be the only possible function. If it's a fatal error though that requires time and effort to fix, the user needs to be made aware they can't do anything and to try later ('later' being contextualised more appropriately in a suggested time frame). The better customer service here would be to state a notification will go out when it is fixed, so they should not try again until they receive an email or push notification.
