5 essential elements of a successful 404 error page

Default avatar.
August 01, 2014
5 essential elements of a successful 404 error page.

thumbnail404 pages are one of the most overlooked aspects of any website design, and when they’re not overlooked, the tendency is to create something fun — in the hope that a bit of humour will lessen the user’s irritation at the missing information.

Many designers opt for the default 404 believing that the rest of their scheme is so full-proof as to not require a back up plan. Others crack a joke, or use the page as a little web experiment.

There’s nothing wrong with being humorous if that’s what the page requires, but fun and functionality are not mutually exclusive, and a good designer will always ensure that their user find the way to the information they were looking for.

1) Craft your error message

The most important part of a 404 page is the error message. An error message with an apology and some helpful suggestions should be front and center. Try to offer an explanation of what went wrong, for example: The link you clicked may have been wrong” or The post your looking for may have been deleted”. The language that we use is very important, so we certainly want to choose it with care.

Users can be sensitive creatures, especially when things are already not going the way they expected. Often times, the blame for this inconvenience immediately falls on our shoulders, even if we had nothing to do with placing the link that brought them to our site. So our relationship with the user is starting off a bit strained. This is what makes our language important. We want to win them back, not further the stress. So we need to avoid placing any blame on them with the phrasing we choose.

hootsuite

popscreen

starbucks

2) Always include a search box

We know the user wants to find something on your site, we know they haven’t found it. Be grateful that they’re prepared to give you a second chance and make sure you have a well functioning search box.

Even if we have nothing else (which as you will get from this post, is not all that recommended), a search box is a must. Since the visitor didn’t find what they were looking for, we need to set them on the right course. Repair this breach by giving them a convenient and handy way to search for that missing link (pardon the pun). This gives them a compass to offer them their bearings

This small curtesy works wonders in winning back the trust of the user.

The only exception to this rule is if you’re site is so small (ie. a single page site) that a search will only ever produce a handful of results, in which case skip to the next tip.

wiredcanvas

jamiehuskisson

github

3) Provide a category list

If the user has a specific topic that they came to your site looking for, having a list of your various categories can be extremely useful. This way if what they were looking for is now gone, they can hopefully find something else on the site that is in the same vein, and they’ll be encouraged to stick around a bit longer. And if they are curious, this gives them a little more insight into the other subjects that you cover or deal with throughout your content.

Once again, this is a place where we need to be sure and not to overdo it and overwhelm the user. Sometimes, less is more, and that principle holds true in the case of your category list. If your category list is somewhat extended, perhaps just sticking to the most popular would be appropriate.

averagejoes

wpbeginner

bookofzeus

4) Upsell your featured posts

If you’re working on a blog, magazine, or any other site that has posts then this is a fantastic opportunity to direct the user to the content you’re already promoting. Those posts that we tend to want to feature widely, can find a good fit among the added functional elements of our newly expanded 404 page.

From our most popular posts, to the most recent content that we have up for the public, or even just the posts we personally feel shine brighter than the rest of them; whatever the case may be, these are the posts that we want to put in front of any user landing on our 404. It is something of a longshot that we keep a user once we have effectively lost” them (or gotten them lost with the misplacement of blame falling on our shoulders), but if we’re going to go down, we might as well go down swinging.

inspirationbit

1976design

npr

5) Don’t forget key links

The last added element we are going to cover in this post is the inclusion of some key links to various important pages on our site. Naturally, which links matter most and deserve this 404 placement really depend on the site, brand, mission, and more. But offering links to the key pages of our site can go a long way to enticing a lost user on our site to stay long enough to find who we are and what it is we do.

With that in mind, adding a link to our home page, about page, our archives and/​or our contact page wouldn’t be a bad idea. This is not to say that our navigation need appear on the 404 page in full matching fashion as it does on every other page, but a scaled down set of key links would serve nicely instead.

ux-booth

nngroup

Rob Bowen

Rob Bowen is an emerging filmmaker, celebrated author/​podcaster and poet, and most recently the co-founder and imaginative co-contributor of the creative design and blogging duo at the Arbenting and Dead Wings Designs.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…