5 essential elements of a successful 404 error page

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

404 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.

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.

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.

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.

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.

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.

Popular Posts

Read Next

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…