640688 - Implement new rethought 404 page, make it less naughty and more awesome

Status: VERIFIED FIXED

(www.mozilla.org :: General, defect, P1)

Description

[James Long (:jlongster)]

Our 404 page is pretty bad:

http://mozilla.com/lulz

We should start discussing ideas for new 404 UX. Morgamic suggested coming up with a few 404 pages and displaying them randomly. I like that idea.

So what would be some cool 404 pages?

* Anything involving a firefox critter lost in forest/space/etc.
* Firefox critter fighting off monsters
* Parallax
* Interactive game?
* Funny pop culture/tech references?

It definitely needs some slick HTML5-ness, most likely just canvas with some interactivity. parallax is awesome, any other ideas?

Other cool 404 pages:

http://github.com/lulz
http://proteys.info/lulz
http://blippy.com/username_available/404

Comment 1

[James Long (:jlongster)]

Er, the github.com link actually works. Here's the real 404 page:

https://github.com/404

Comment 2

[John Slater]

Warning: if we make the 404 content too awesome people may start bypassing the real content just so they can see the error states.

(kidding...let's make it awesome)

Comment 3

[Laura Forrest]

This will be great!

Along with making it look cool, let's also think about how to help people find what they were looking for. Currently we serve out waaaaay too many 404 pages (more data coming soon) - it's a pretty broken part of our site right now. Let's think about how we can make that component of this experience better as part of this project.

Comment 4

[Tara (musingt)]

adding myself to this bug here :) Blippy is my favorite ! keep clicking on him to see what happens...  Excited about this :)

Comment 5

[Tara (musingt)]

Here's a simple yet nice one:  http://www.google.com/q
No animation or anything fancy, but something to reference.

Comment 6

[Tara (musingt)]

By the way, our previous 404 page was listed among the 200 best for inspiration (gotta scroll down quite a bit to see it) http://www.webdesignshock.com/showcase/404-error-page-designs/

Comment 7

[Laura Forrest]

After fruitful brainstorming + casual hacking we've started improving this page. Assigning to Steven G to implement his first go that we previewed yesterday once it's up to snuff. After that, lets file a phase 2 once we've got our new graphics. 

Watch out, fail whale.

Comment 8

[Laura Forrest]

Steven - How goes the first phase of changes to this page? (exclamation point falling off, download button present, simplified header). Would be great to implement that work.

Comment 9

[Steven Garrity [:sgarrity]]

Laura, we can probably clean up what we've got next week for the 2.2 release.

Comment 10

[Steven Garrity [:sgarrity]]

An update with more detail and a proposal for a different approach:

Here are the changes we've had in mind for the first phase:

1. use simplified header/footer
2. drop the left column of text
3. add the download button
4. add simple animation to have the exclamation mark fall over.

#1 and #2 are easy. #3 is technically easy, but starts to put a bit of pressure on the design of the page - the current, ahem, illustration, and general page layout doesn't really make it easy to just drop in the download button (unless we drop it in down with the existing text, rather than the top right.

#4, the simple animation, actually needs another day or two of development time to polish for production. Unfortunately, that development time probably can't happen this week or next.

Since we have this development delay on the animation, I'm wondering if we should change this to be a design bug including a new illustration. The requirements for the design would be something like this:

* Simplified header/footer (see mozilla.com/plugincheck/ for an example)
* Simplify/update the text (probably completely drop the bottom left block of text, optionally re-write the rest - especially if it ties in to the illustration.
* New illustration
* Incorporate the download button

Comment 11

[John Slater]

I know Tara has reached out about the illustration, but am not sure if she's heard back or not. Probably a safe bet to assume about two weeks to get that taken care of. How does that impact the schedule, do you think?

Also, copying Matej to help with the subject of new & improved text.

Comment 12

[Tara (musingt)]

Haven't heard back yet.  But from what I recall, 2 weeks is usually their ideal minimum turnaround time for custom illustrations.  Don't want to rush the creative process :)

Comment 13

[Laura Forrest]

(In reply to comment #10)
> An update with more detail and a proposal for a different approach:
> 
> Here are the changes we've had in mind for the first phase:
> 
> 1. use simplified header/footer
> 2. drop the left column of text
> 3. add the download button
> 4. add simple animation to have the exclamation mark fall over.
> 
> #1 and #2 are easy. #3 is technically easy, but starts to put a bit of pressure
> on the design of the page - the current, ahem, illustration, and general page
> layout doesn't really make it easy to just drop in the download button (unless
> we drop it in down with the existing text, rather than the top right.
> 
> #4, the simple animation, actually needs another day or two of development time
> to polish for production. Unfortunately, that development time probably can't
> happen this week or next.
> 
> Since we have this development delay on the animation, I'm wondering if we
> should change this to be a design bug including a new illustration. The
> requirements for the design would be something like this:
> 
> * Simplified header/footer (see mozilla.com/plugincheck/ for an example)
> * Simplify/update the text (probably completely drop the bottom left block of
> text, optionally re-write the rest - especially if it ties in to the
> illustration.
> * New illustration
> * Incorporate the download button

Agree - let's do this next phase all at once. I thought you guys were closer to being able to push something than it sounds, and this new graphic will def change the page structure a bit. For example, if DDL designs a horizontal graphic, should the "!" fall over it, around it, etc?

Tara and I are in the process talking to DDL. Once we're closer to getting a couple of graphic options I'll loop in SilverOrange to start talking more about clever interaction options, download buttons, and more.  

Come to think of it, the final graphic will also affect the new copy. For example, it would be good for the headline and graphic to work together. 

Assigning to me until we're ready to design the UX and implement.

Comment 14

[Laura Forrest]

Checkin here - we're still working on finalizing the graphic and copy. It's gonna be good...

Comment 15

[Laura Forrest]

Still waiting on graphic.

Comment 16

[Tara (musingt)]

Rough ETA:  mid-next week, with consideration that Monday is a Holiday.  Sorry for the delay.

Comment 17

[Laura Forrest]

Good news - the final graphic is now here! Check Bug 652683 for that. 

This is ready to roll. The main outstanding item is to "actually add html5 awesomeness" to this page via Bug 661546. New ideas added there.

Comment 18

[Steven Garrity [:sgarrity]]

No HTML5 awesomeness yet, but we've got the new illustration/copy implemented in trunk in r91574.

Comment 19

[Stephen Donner [:stephend] Not actively reading bugmail]

(In reply to comment #18)
> No HTML5 awesomeness yet, but we've got the new illustration/copy
> implemented in trunk in r91574.

Notice: Undefined variable: firefoxDetails in /data/mozilla_trunk/en-US/404.html on line 18

Fatal error: Call to a member function getNoScriptBlockForLocale() on a non-object in /data/mozilla_trunk/en-US/404.html on line 18

Comment 20

[Steven Garrity [:sgarrity]]

(In reply to comment #19)
> Fatal error: Call to a member function getNoScriptBlockForLocale() on a
> non-object in /data/mozilla_trunk/en-US/404.html on line 18

Fixed in trunk in r91578.

Merged to stage in r91577 and r91579.

Comment 21

[raymond [:retornam] (inactive)]

qa-verified stage http://www-trunk.stage.mozilla.com/en-US/plugincheed

Comment 22

[Tara (musingt)]

Looks great !!  no way we can add some subtle "blinking" in there?  :)))

Comment 23

[Steven Garrity [:sgarrity]]

(In reply to comment #22)
> Looks great !!  no way we can add some subtle "blinking" in there?  :)))

Watch the purple guy's eyes for a while... (r91689 in trunk). We can add more later.

Comment 24

[Matej Novak [:matej]]

This is looking great, everyone. I love it!

Comment 25

[James Long (:jlongster)]

merged r91689 to stage in r91769

Comment 26

[James Long (:jlongster)]

pushed to production r91770

Great job, this looks fantastic!

Comment 27

[raymond [:retornam] (inactive)]

verified fixed http://www.mozilla.com/en-US/plugincheed