Provide a self-contained nice error page

[muffinresearch]

This should show something nice if the server sends a 5xx/4xx response.

[designakt]

@muffinresearch Are you referring to a replacement for that page?

[muffinresearch]

This is more a general requirement for any apps that are running under addons-frontend so it's not specific to the discovery pane which appears to do its own thing if the iframe fails to load.

[designakt]

So what would be examples of such a page in use? I have trouble understanding the context. It sounds rather un-specific, and therefor might be difficult to tell the user what went wrong, and what they could do to fix it. Which are 2 crucial pieces of information to give users so that they can act on the error message.

[designakt]

More context for what makes an error message understandable and actionable for users: https://www.nngroup.com/articles/error-message-guidelines/

tl;dr: Explicit indication Human-readable language Polite phrasing Precise descriptions Constructive advice

[muffinresearch]

@designakt the use-cases here are static error pages for core HTTP error statuses:

Here's some examples:

• 5xx
  • 503 (service is temporarily not availble - e.g. down for maintenance etc.
  • 500 e.g: web server blew-up)
  • etc
• 4xx
  • 404 (Page not found)
  • 410 gone (page explicitly removed)
  • 403 (forbidden) e.g. you're not authorized
  • etc

First step will be to make something fairly generic.

Most of the time they won't be seen by the end user (albeit a 404 might see some use).

If these are standalone they can be displayed by anything e.g. a load-balancer, the addons-server or this project. We should probably consider making a separate project and using them everywhere.

They should be standalone (self-contained) so as not to rely on any other service to be able to show them.

[muffinresearch]

@pwalm @designakt Any updates on this?

[designakt]

@muffinresearch I do not see the point in showing a generic error message not specific to any frontend. It implies that we can not tell the user how to recover from the error. And what good is the message then? See our current AMO error which tries to help you find other things if we can not find the page. (https://addons.mozilla.org/404) While we build the new AMO we definitely will also need to define a replacement for that page. But maybe I misunderstand something. How about we meet to chat about it?

[muffinresearch]

@designakt @pwalm re: mozilla/addons#3747 a 503 error page case is probably the page we need to pull together as soon as possible - here's an example of the sort of thing I'm talking about:

https://github.com/503.html https://github.com/502.html https://github.com/500.html https://github.com/400.html

As for it being generic, the point was about making something generic that can be re-used for different specific error codes where we would customize the message for the error it wouldn't be a one-size fits all approach.

Let me know if you want to discuss further - if it's possible to get a design for the 503 as a starting point I'd like to get at least that underway. It could be that one design will work for 5xx and 4xx in which case we start with one thing and just work out the right copy for each case.

[pwalm]

Generic is good. I will start on these today.

[pwalm]

First pass:

Thoughts?

[tofumatt]

Oooooh, I like it!

I am a fan of goofy error drawings, but I know it's a tight quarter so we can always have one later 😉 (I actually think a cute error page is good UX, if it makes the user smile they'll get less angry, hopefully)

[pwalm]

Yeah, I'm for a cute page too, I just know they get bogged down in the selection/design process. So let's keep it simple on this first pass and make it more fun when we scale up to desktop.

[muffinresearch]

Yeah, I'm for a cute page too, I just know they get bogged down in the selection/design process. So let's keep it simple on this first pass and make it more fun when we scale up to desktop.

This looks ok for the mobile pages - however, I was aiming for something that doesn't have any header or footer so that this page will work in any addon-related web service context so the same page is used in all places without special-casing for mobile or desktop.

As mentioned in https://github.com/mozilla/addons/issues/9576 The most pressing need is something that we can use in addons-server, because at the moment our 503 is just the words "internal server error".

If the page is simple enough then it should work in all cases.

[pwalm]

Error page in situ:

Need Scott to provide some copy, but this is the gist. Little arrow points up to the search box to prompt another search, and the grey copy at the bottom will change depending on the error.

[designakt]

Adding @devaneymoz to make sure he knows about copy needs.

[devaneymoz]

Here’s some generic catch-all error messaging (written to accommodate pwalm’s desktop design). If we also need custom messaging per each type of 500 error, let me know…

No excuses… Look, we both know this is my fault. Can’t find that page you’re looking for. Very sorry about that! But we’ll fix this. In the meantime, you can try searching for some awesome add-ons right up there.

[muffinresearch]

Closed via mozilla/addons-server#1033