Closed Bug 972495 Opened 10 years ago Closed 9 years ago

Make the 404/500 pages pretty and useful and agnostic


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



(Not tracked)



(Reporter: krupa.mozbugs, Assigned: spasovski)



(Keywords: uiwanted, Whiteboard: [good first bug][repoman][ktlo])


(2 files, 4 obsolete files)

We need prettify and add useful links to 404 and 500 error pages
Assignee: nobody → mhanratty
Keywords: uiwanted
Priority: -- → P3
Whiteboard: [cosmetic]
Whiteboard: [cosmetic] → [cosmetic][mentor=mhanratty][goodfirstbug][ux][ui][design]
Whiteboard: [cosmetic][mentor=mhanratty][goodfirstbug][ux][ui][design] → [cosmetic][mentor=pwalm][goodfirstbug][ux][ui][design]
Assignee: mhanratty → pwalmsley
May I take?
Attached image 404 on an android.png
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:

- And here are a few 404/500 pages that inspire us:

Thanks again, looking forward to seeing what you come up with. :)
my idea is to put some information on pages 404 to assist in the mozilla project or write the rights of users.
for example we can use a simple qotd script to show hints and helps

this is the code:

var ran=new Array();
var id=Math.round(Math.random()*(ran.length-1)); 
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.
One of our interns pointed me to these excellent guidelines for 404 error messages by Jakob Nielsen:

"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.
Mentor: pwalmsley
Whiteboard: [cosmetic][mentor=pwalm][goodfirstbug][ux][ui][design] → [cosmetic][goodfirstbug][ux][ui][design]
I could take up this bug..
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
Blocks: 972490
Attached 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?
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]
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
Mentor: pwalmsley
Blocks: 1047703
Blocks: 1047706
Assignee: nobody → delza
Assignee: delza → jeroentulp
Assignee: jeroentulp → nobody
Attached 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)
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)

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?
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?
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:
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: (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!
Blocks: 1068890
Whiteboard: [repoman] [contribute] → [good first bug][repoman]
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
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
Attachment #8587265 - Attachment is obsolete: true
Attachment #8587265 - Attachment is patch: false
Attachment #8587265 - Attachment mime type: text/plain → image/png
Attached image Rough idea that I have worked out. (obsolete) —
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: nobody → dspasovski
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)
SVG created, PR updated.
Flags: needinfo?(sinoysiby93)
Closed: 9 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.