404 Design

I love the small details in web design. One of them is design of 404-pages (error pages). So I’ve worked a bit on my 404-page, and made three quick tips for 404-design. You should also review your 404-page:-)

When are 404-pages used?

404-pages are used when the content that should be shown on a given page doesn’t exist. That happens when:

  • The user tries to navigate to a page that doesn’t exist (ie. by typing a wrong URL in the address-bar)
  • When a link points to a page/content which has been deleted or moved to a new URL
  • When there’s an occasional glitch on the site

What makes a good 404-page?

An error page is just plain annoying for the user. So, in many ways, the main purpose with the 404-page is to minimize damage, and help the user overcome the obstacle. The standard WordPress-404 page is typically something like a message in plain text:

Oops! That page can’t be found.

It looks like nothing was found at this location. Maybe try a search?

WordPress TwentyNineteen Theme

That can be spiced up a bit, and turned into a better experience for the user!

Tip 1:Be a bit more amusing

There’s no obvious reason to be way too serious, especially when You have led the user into a dead end. So a little self-deprecating humor fits a 404-page well. At least if You’re not an undertaker – in that case, You should probably not crack the greatest jokes on Your 404-page.

A couple of funny 404-pages are chucknorris.com and gymbox.com.

Screendump of Chuck Norris' 404-page
Screendump of Chuck Norris’ 404-page – Chuck Norris jokes never go out of fashion;-)
Gymbox's 404-page
Screendmup of Gymbox’s 404-page. Have a look at the site to get the full experience of being in the wrong place – a place where John Travolta is dancing with his crotch…

The humour doesn’t necessarily have to be visual – a simple, little wordplay can also do the trick. Have a look at the web dev tool Jekyll for a great example.

Jekylls 404-page
Jekyll shows a bit of nerdy humour with a nice, little wordplay…
Tip 2: Entertain the user

You might as well try to entertain the user a bit, when he/she has reached a dead end. DR (Danish Broadcasting Corporation) and the hosting company Qualo do this well.

DRs (Denmarks Broadcasting) 404-page
DRs 404-page: DR keeps the users attention by telling small stories about chips, x-rays and post-its, which were all invented by mistake.
Kualo.co.uk's 404-page
Kualos 404-page: Kualo grabs the users attention with a nice integration of the space-invaders game.
Tip 3: Help the user move on

The 404-page shouldn’t run off with all the attention. The user did after all get there when looking for something else. So help the user find other relevant content on Your site. Include a search form, links for the latest news or products or the likes in order to make it easy to move on.

Legoland.co.uk - 404-page
legoland.co.uk makes it easy for the user to find the home page, book a visit, find maps etc.

My 404-page

Screendump af min nye 404-side
Screendump af min nye 404-side

As mentioned, I’ve made a new, simple 404-page for myself. For the graphics, I’ve found an old photo of myself, glitched it on photomosh.com and used it as a full-screen background. I like the idea of a glitched photo, now that my website is primarily about photography/videography:-)

I didn’t spend too much time on the text. I have used the words “damn” and “major glitch” – they fit my tone of voice well (my personal way of talking).

After a little explanation, I give the user the possibility to go to the home page or search the site. I should probably spice the page up a bit, and show the latest 3-4 articles. But… I might do that later. Until then, enjoy my new 404-page😉

Leave a Reply