972495 - Make the 404/500 pages pretty and useful and agnostic

Status: RESOLVED FIXED

(Marketplace Graveyard :: Consumer Pages, enhancement, P3)

Description

[krupa raj[:krupa]]

We need prettify and add useful links to 404 and 500 error pages

Comment 1

[Jai [:dolftax]]

May I take?

Comment 2

[krupa raj[:krupa]]

Attachment: 404 on an android.png

Comment 3

[Philip [:pwalm]]

Hey jpj!

Of course! Thanks for stepping up and contributing. Here are a few things to guide you:

- The 404 page should work across multiple view ports, so keep that in mind (mobile/tablet/desktop).
- The page design and any imagery should also be able to work and translate across multiple languages and countries.
- Come up with a few rough ideas, we can review and refine later.
- If you need assets, you can find colours/logos/typefaces here:
 - http://www.mozilla.org/en-US/styleguide/identity/marketplace/branding/
 - http://www.mozilla.org/en-US/styleguide/identity/marketplace/color/
 - http://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/

- And here are a few 404/500 pages that inspire us:
 - https://github.com/500
 - https://github.com/404
 - http://huwshimi.com/404/
 - http://mailchimp.com/404/
 - https://www.getdropbox.com/404

Thanks again, looking forward to seeing what you come up with. :)

Comment 4

[giammyjet]

my idea is to put some information on pages 404 to assist in the mozilla project or write the rights of users.

Comment 5

[giammyjet]

for example we can use a simple qotd script to show hints and helps

this is the code:

var ran=new Array();
ran[0]='example1';
ran[1]='anotherExample';
ran[2]='yetAnotherExample';
var id=Math.round(Math.random()*(ran.length-1)); 
document.write(ran[id]);

Comment 6

[Athul Suresh [:athulsuresh]]

Let's make it a typo thing with the 404 page like "Sorry You went to place maybe we could help you find your place" with a search option. big bold letter and all.

Comment 7

[Maureen Hanratty]

One of our interns pointed me to these excellent guidelines for 404 error messages by Jakob Nielsen:

http://www.nngroup.com/articles/improving-dreaded-404-error-message/

"All error messages must be:

• written in plain language that is easy to understand for non-technical users and that does not imply that the mistake is the user's fault
• precise in specifying exactly what was done wrong (that is, not be generic or vague)
• constructive in suggesting steps the user can take to correct the problem"

Like Athul mentioned above Nielsen also suggests including a search field.

Comment 8

[Athul Suresh [:athulsuresh]]

I could take up this bug..

Comment 9

[Andy McKay]

It would be nice if we had a error page that was mobile, agnostic (between consumer and developer pages) and useful.

Comment 10

[Philip [:pwalm]]

Attachment: 404 - Mobile and tablet.png

First draft of a 404 page (for consumer). The idea here is we'd have a fun collection that plays off of being lost, and a simple way to return to the homepage. Developer would be similar, but with some other kind of fun graphic/bit of knowledge.

Comment 11

[Christopher Van Wiemeersch [:cvan]]

LOL too good.

Krupa, what was your idea again about the 500 page?

Comment 12

[Andy McKay]

500 isn't covered, but I'm assuming we'd change the 404 to suitable error code (500, 403 etc) and remove the collections.

Comment 13

[Andy McKay]

Ideally this page should be 
* a small simple static file
* the apps should be loaded by JS
* repeat for the following status codes: 404, 403, 500

Comment 15

[Philip [:pwalm]]

Attachment: 404-mobile.jpg

Here's a version of the 404 page without the collection block. It matches the pattern motif we've established for collections, and can be applied across multiple screen sizes (the alert/copy/button would be centered to the display.

Comment 16

[Christopher Van Wiemeersch [:cvan]]

Looks pretty!

1. When using the Marketplace app, there is no browser chrome so users don't have a back button (or a physical back button on phones). That's why we added the back button to the header (when the user is on any page other than the homepage).
2. How does this look for tablet sizes (at least ~710px wide)? Desktop sizes (~1024px)?
3. Are we still going to show the maps apps? I am lost trying to think of a better pun! :-P
4. How would the 500 (Internal Server Error) page look?

Note for implementers:

If we go are going to show these maps apps on the 404 page, then we need to make sure it doesn't make a request to our API. With error pages, it's bad practice to include other resources (e.g., images, XHRs). (I've filed bug for this: bug 1064691.)

Long story short: we'll likely need to hardcode the names, links, and icons or remove them.

Comment 19

[Philip [:pwalm]]

Attachment: mobile & tablet view.png

1. Added header.
2. See attached image. the mobile is 320px wide and the tablet is 1024px wide.
3. II think the idea was this page could be viewed across all Marketplace products (store/devhub/etc), so I removed the collection block to make it a bit more generic.
4. The tablet version shows a 500 error. We could just swap out the copy depending on error.

Comment 20

[Christopher Van Wiemeersch [:cvan]]

Nice

1. Heh the pup's cute, but what's he for?
2. How does it look at desktop width (~1200px and wider)? How would you adapt the red background here, when we have the header and the footer?

https://www.dropbox.com/s/dzhddd3sk4viq9o/Screenshot%202014-09-09%2014.26.22.png?dl=0

Comment 21

[Philip [:pwalm]]

1. That's my dog, he's the Official User Image in my mock-ups. That bar was grabbed from a newer UI we've been working on, so ignore that. :D
2. We could have the error sit in a block similar to the feed? But bigger?

Comment 22

[Philip [:pwalm]]

sorry, "sit in a block similiar to the ones we use in the feed"

Comment 23

[Ryan Feeley [:rfeeley]]

Heads up that we’re working on one for Firefox Accounts. Copy is not final, but it’ll likely look something like this: http://people.mozilla.org/~rfeeley/images/500.gif

Comment 24

[Potch [:potch]]

For the sake of your servers and bandwidth, be sure error pages are served with a minimum of HTTP requests. Best practices say to put as many error page resources in the page as possible. Definitely any CSS and JS, and even images! Here are some examples:

http://www.google.com/dsfasdf
https://github.com/flergenbergen (use of data:uris)

Comment 25

[Christopher Van Wiemeersch [:cvan]]

While I cannot deny its adorableness and quirkiness and whimsy, repurposing your company's logo in a negative light makes it easier for the media when they go to sensationalise something negative about your company. Branding would probably agree here.

I can't find sources now, but a few years back, whenever negative Twitter press showed up in the news, the media would use the Fail Whale™ as supplementary clipart to represent Twitter's failures, issues, and mistakes.

Just my 2¢. Looks cool though!

Comment 26

[Wasim Thabraze]

Hello Andy,

I'm new to Bugzilla and would like to work on this bug. I feel glad if you can assign me to this bug and guide me to work on it.

Thanks in advance.

Comment 27

[Andy McKay]

There's UI added by pwalm to this bug and there was another 404 design he did which is attached to a bug somewhere...

Comment 28

[Sinoy Siby]

Attachment: This is a rough page that i have created and some one should work on it.... those who can draw images please ping me I will give the ideas and we can work together to make the awsome.

Comment 29

[Sinoy Siby]

Attachment: Rough idea that I have worked out.

Comment 30

[Davor Spasovski [:spasovski]]

The new error page template is ready but we're missing an SVG of the icon (triangle with exclamation). Please attach to bug when available. I'll use the existing round 'alert.svg' in the meanwhile.

Comment 31

[Davor Spasovski [:spasovski]]

For reference: https://github.com/mozilla/fireplace/pull/1338

Comment 32

[Davor Spasovski [:spasovski]]

SVG created, PR updated.