Make the 404/500 pages pretty and useful and agnostic

RESOLVED FIXED

Status

enhancement
P3
normal
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: krupa.mozbugs, Assigned: spasovski)

Tracking

({uiwanted})

Other
Android
Dependency tree / graph

Details

(Whiteboard: [good first bug][repoman][ktlo])

Attachments

(2 attachments, 4 obsolete attachments)

Reporter

Description

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

Updated

5 years ago
Assignee: nobody → mhanratty
Keywords: uiwanted
Priority: -- → P3
Reporter

Updated

5 years ago
Whiteboard: [cosmetic]

Updated

5 years ago
Whiteboard: [cosmetic] → [cosmetic][mentor=mhanratty][goodfirstbug][ux][ui][design]

Updated

5 years ago
Whiteboard: [cosmetic][mentor=mhanratty][goodfirstbug][ux][ui][design] → [cosmetic][mentor=pwalm][goodfirstbug][ux][ui][design]

Updated

5 years ago
Assignee: mhanratty → pwalmsley

Comment 1

5 years ago
May I take?
Reporter

Comment 2

5 years ago

Comment 3

5 years ago
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

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

Comment 5

5 years ago
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]);
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

5 years ago
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.

Updated

5 years ago
Mentor: pwalmsley
Whiteboard: [cosmetic][mentor=pwalm][goodfirstbug][ux][ui][design] → [cosmetic][goodfirstbug][ux][ui][design]
I could take up this bug..

Comment 9

5 years ago
It would be nice if we had a error page that was mobile, agnostic (between consumer and developer pages) and useful.
Summary: Make the 404/500 pages pretty and useful → Make the 404/500 pages pretty and useful and agnostic

Updated

5 years ago
Blocks: 972490

Comment 10

5 years ago
Posted image 404 - Mobile and tablet.png (obsolete) —
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.
LOL too good.

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

Comment 12

5 years ago
500 isn't covered, but I'm assuming we'd change the 404 to suitable error code (500, 403 etc) and remove the collections.
Assignee: pwalmsley → nobody
Keywords: uiwanted
Whiteboard: [cosmetic][goodfirstbug][ux][ui][design] → [repoman] [contribute]

Comment 13

5 years ago
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

Updated

5 years ago
Mentor: pwalmsley
Duplicate of this bug: 972490

Updated

5 years ago
Blocks: 1047703

Updated

5 years ago
Blocks: 1047706

Updated

5 years ago
Assignee: nobody → delza

Updated

5 years ago
Assignee: delza → jeroentulp

Updated

5 years ago
Assignee: jeroentulp → nobody

Comment 15

5 years ago
Posted image 404-mobile.jpg (obsolete) —
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.
Attachment #8452882 - Attachment is obsolete: true
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.
Flags: needinfo?(pwalmsley)

Updated

5 years ago
Duplicate of this bug: 1064691

Updated

5 years ago
Duplicate of this bug: 1064615

Comment 19

5 years ago
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.
Attachment #8486191 - Attachment is obsolete: true
Flags: needinfo?(pwalmsley)
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

5 years ago
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

5 years ago
sorry, "sit in a block similiar to the ones we use in the feed"
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

5 years ago
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)
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!

Updated

5 years ago
Blocks: 1068890
Whiteboard: [repoman] [contribute] → [good first bug][repoman]

Comment 26

5 years ago
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.
Keywords: uiwanted

Comment 27

4 years ago
There's UI added by pwalm to this bug and there was another 404 design he did which is attached to a bug somewhere...
Blocks: 1135257
No longer blocks: 1135257
Blocks: 1135257

Updated

4 years ago
Attachment #8587265 - Attachment is obsolete: true
Attachment #8587265 - Attachment is patch: false
Attachment #8587265 - Attachment mime type: text/plain → image/png

Comment 29

4 years ago
Posted image Rough idea that I have worked out. (obsolete) —

Updated

4 years ago
Attachment #8587267 - Attachment is obsolete: true
Attachment #8587267 - Attachment is patch: false
Attachment #8587267 - Attachment mime type: text/plain → image/png
Severity: normal → enhancement
Whiteboard: [good first bug][repoman] → [good first bug][repoman][ktlo]
Assignee

Updated

4 years ago
Assignee: nobody → dspasovski
Assignee

Comment 30

4 years ago
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.
Flags: needinfo?(sinoysiby93)
Assignee

Comment 32

4 years ago
SVG created, PR updated.
Flags: needinfo?(sinoysiby93)
Assignee

Updated

4 years ago
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.