For brands and businesses, it’s also a lost opportunity. While web designers and copywriters spend ages perfecting homepages and about pages, the poor old 404 page is a little bit neglected.
Fortunately, an increasing number of web designers are putting us out of our misery by designing witty, entertaining 404 pages that leave a lasting impression on their visitors, and ensure people remain on the website by guiding them in the right direction.
What is a 404 Page?
Firstly, a quick reminder – what exactly is a 404 page?
A 404 is a Client Error HTTP status code that appears when a page you’re trying to open on a website cannot be found on its server. There are various reasons for this – most commonly, the user has typed an incorrect URL, found a broken link, or the page they’re looking for has been moved or deleted. A 404 could also indicate that the server or internet connection is down.
Those dull, generic pages we’re used to seeing simply tell users the possible reasons they’ve landed on that page, but leave them hanging with little other information.
By designing a custom, creative 404 page you will not only reduce your users’ frustration, you’ll also help the branding and navigation of your website, and possibly even gain a few conversions as well.
Here are a few tips and tricks to designing a memorable 404 page.
1. Use the Right Language
Firstly, you need to make it clear to your visitors why they’re seeing a 404 page. Explain that something has gone wrong and suggest likely reasons why they’ve ended up there.
It’s important to use the right language for this – try to avoid using an error message and instead inject a little personality and humour into your page, while making it clear that it’s a 404 page.
Hootsuite has this bang on with its witty 404 page, depicting an image of their missing icon on a milk carton. The tone has just the right amount of humour, but importantly it also includes a link to their homepage and a menu bar.
Ditto Mashable, which uses humour and simple language to set its visitors back on the right track.
2. Add Some Useful Navigation
Essentially, your goal is to ensure the user remains on the website and finds the information they are looking for. So you need to provide them with some tools to help them on their way.
There are several ways to achieve this:
- A link to the homepage will aid those users who have landed on your site from an external source.
- A link to several of your most popular and/or relevant pages could help them in their hunt.
- A search bar will help users find what they’re looking for.
- Contact details so visitors can report the fault or ask for help.
Including at least one of these tools, or a combination of several of them, will give your users paths to follow instead of leaving them simply navigating away.
Magnt includes a clear call to action with a large banner stating ‘Please take me to the homepage’, and a menu header at the top where users have the opportunity to sign in or take a free trial. We especially love the witty Venn diagram.
Starbucks offers a full range of options in a neatly branded page with the coffee cup stain indicating that something is missing. Its users have a clear explanation, and a choice of options, including the chance to report the missing page directly to the Starbucks team.
3. Stamp Your Brand All Over It
Many of the generic 404 pages we’re used to seeing are devoid of personality and when users land on them they could, frankly, be anywhere.
When you’re designing a custom, creative 404 page you need to ensure that the user is in no doubt that they’re still on your website. Which means maintaining your brand image and design.
Include your logo, use the same colour scheme, font and imagery that you use on the rest of your site. It shows that you care and leaves your user in no doubt about where they are.
Heinz leaves its stamp on its 404 page with a bottle of its most famous product lying empty on its side and a clear note to the errant visitor. It gives users plenty of options in both the header and footer of the page, and includes a search bar for ease.
Dropbox gives its users a very simple, yet effective image that’s a play on its logo in the form of a box that’s had the full Escher treatment. It opts for a simple error message, leaving the humour in the image, and gives its users 3 options to find the page they’re after.
4. Leave a Lasting Impression
OK, so you’ve explained the possible reasons that led your visitor to the page, given them some helpful tools to navigate to the right place, while assuring them they are still on your site by keeping the page in tune with your overall brand theme.
Now you need to give them something a little bit special to amuse or entertain them and leave a lasting impression. You may wish to simply add an amusing graphic, or push the boat out and include an animation, a video or something interactive. This is your opportunity to creative something memorable. Have fun with it.
Audiko, a company that makes free ringtones, has created a simple, yet stunning picture full of London imagery with lots of hints that you’re lost including an appearance from one Sherlock Holmes. Visitors also have a link to the homepage and a search box.
Daniel Karcher Film Design Studios has created an excellent animation, complete with sound, of a train rolling into a subway station. The attention to detail is brilliant, with subway posters depicting aptly named TV series and films – a hint that you are lost – and plenty of leads to get back to the homepage. You can also hop into one of the carriages and ride the subway for a while.
FlippingBook chooses an interactive game that leads lost visitors on a treasure hunt around their site until they find what they’re looking for, or uncover some hidden treasure – brilliant!
5. Regularly Check Your Links
Finally, while you might be proud of your creative 404 page you want to ensure that it doesn’t become a regular sight for visitors. To do this, get into the habit of running a regular check for broken links on your website – about once a month is a good frequency to aim for.
In a perfect world, there wouldn’t be any need for a 404 page. But sometimes things go wrong.
Your challenge is to equip your visitor with a user-friendly page that guides them in the right direction, while entertaining and amusing at the same time. And making sure that they don’t see it too often.
What elements would you include in a creative 404 page? Do you have a favourite 404 page? We’d love to hear your thoughts.