How to manage usability with multiple http error messages?

Question

I am writing an Angular 1.5.3 app. On my main 'home' page controller I call 2 different endpoints with $http. The two endpoints are not related to each other and have separate data etc. One problem I am having is if both of those endpoints have an error then my user is going to see 2 error messages. The messages may or may not be the same (e.g. sometimes no internet connection).

FirstService.request()
    .then(handleFSSuccess)
    .catch(handleError);

SecondService.request()
.then(handleSSSuccess)
.catch(handleError)

function handleError(error) {
    ErrorService.showErrorBanner(error);
}

If I only show one error banner, then the other error messages may not be shown.

I am not sure what's best for the user in my situation.

Answer 1

Whats important for the user?

As a user I want to know if something's not working and more important if something's not working I want to know why. Is it a problem from my side? Like no internet connection? Or is it a problem of the application I am using (like server problems)?

As a user, can I do something to solve this issue? If yes, what can I do?

That being said, I think that overwhelming the user with multiple errors is really demotivating, so show him the error message that is more critical.

If you have multiple error message for the same reason (like no internet connection) you should think about your error-structure, the user just cares about "no internet connection".

Answer 2

If you want to show only one error;

note: I wouldn't recommend this option, it removes a lot of important information.

Show the first error the app encounters. That way users can chronologically try to fix things. It also prevents showing dependent errors. For example: you need a http connection to load an element, but you don't have an http connection, so you get an error for the connection, and an error for the element. Fix the connection, and the second error is also gone.

If you want to show multiple errors:

There are several ways to show this;

• show each individual error
• show one error of each type

The simplest way is to just throw out every error as it appears. If you're worried about duplicate notifications, specify the element which throws the error. If you're displaying a facebook feed and a twitter feed, and only one of them throws an error, the user might not care because they're not even using that element of the site. As an added benefit, it will make bugfixing easier because you get more detailed feedback about WHAT is broken instead of just knowing SOMETHING is broken.

But if you want to save a bit more screen space and/or be more organized, you can collate errors in something like an array? You could use a simple counter or be more specific and name each element. Example:

(2) Errors of SpecificErrorType:
  -FirstElementWithError -SecondElementWithError
(1) Errors of AnotherErrorType:
  -FirstElementWithError

Or the inverse:

(2) Errors in FirstElementWithError:
  -SpecificErrorType - AnotherErrorType
(1) Errors in SecondElementWithError:
  -SpecificErrorType

This also gives some insight into prioritization. For example throw all the counters into a incrementing database and blammo you have a list of most-common errors or error locations.

Answer 3

I agree with @PixelSnader. Here's how I suggest you can place it on the application -