How to make 404 error pages useful
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.
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.