How to make 404 error pages useful

Lewis Wake
Thursday 25 June 2015

If you’ve spent enough time surfing the rad waves of the internet then it’s likely you’ll have stumbled upon a 404 page at some point.

The 404 page is a standard response code in HTTP telling the user that they’ve clicked on a broken link somewhere. Essentially, it is an error page communicating to the user that the page they were looking for cannot be found.

Traditionally, landing on a 404 page has been an immense source of frustration but in recent years developers have taken up the challenge of creating well-designed and witty bespoke 404 pages to at least soften the blow of finding you’re in the wrong place.

There are many articles listing creative 404 pages – however, some can be overly creative and not necessarily benefit the user. A popular online webcomic, xkcd, famously skipped comic #404, as the url for that comic went directly to their 404 page. (403, 404, 405). (It’s like the digital equivalent to why you find few hotels with a thirteenth floor.)

Even our own University of St Andrews has it’s own 404 page that adds some humanity into a technical fault.

On this page, it reads:

“That page may never have existed, or it may have been moved or deleted.
Or perhaps it floated out to sea. Sorry about that.”

We’ve had feedback from a few students who have ended up on this page and complimented adding a sense of humour to the 404 page. It even garnered positive feedback from the student community on Facebook after going slightly viral.

Screen Shot 2015-06-23 at 11.47.30

Once your user has realised that they’ve landed on a 404 page, and had a wee chuckle, it’s time to guide them in the right direction again.

A 404 page should never be a dead end. If one of your users lands on a 404, you want them to be able to safely and easily navigate back to the path they were on.

Provide the user with some key links on the 404 page for them to continue with their task. We have a search box on our 404 page, and we aim to add links through to key parts of the website when we update this 404 page to our new style. We also consider include a contact email address to allow the user to report a problem if one has occurred.

And that’s 404 pages: soften the landing for the user, and provide appropriate links for them to continue their task.

Related topics

Share this story