Every website gives a certain error response when the content for a URL you visit is “not found”, known as response code 404. Most of today’s modern website are equipped with at least a basic “404 not found” error page template that alerts the user and search engines about the missing content. But just because something is common and standard, doesn’t mean it has to be boring. In fact, you should at least look for opportunities to enhance the user experience. I challenge you to go a bit further and think creatively about this often-overlooked default error page.
The basic function of a 404 error page
Even if you do the least amount of web design, your server should still return a generic “not found” error if a visitor attempts to reach a URL for a page that does not exist there. It will probably have a plain white background and no design elements at all. Common reasons for this to happen are typos in the URL, renamed pages or files, and deleted content. While you want to try your best to prevent people from experiencing this error, it is bound to happen sometimes. Modern content management software and professionally designed websites usually have a slightly more customized error page template that will give a clearer stated message and maybe a link to suggest how to find other parts of the website.
Considering better user experience with your website 404 errors
For quality customer experience and for better SEO, it is recommended to prevent “not found” errors as much as possible. If your website has a large amount of these errors compared to the amount of successful traffic to its content, it will raise a lot of concern.
Simple ways you can prevent 404 errors are:
- Make sure your page names are not misspelled or spelled in complicated ways
- If you delete old content, add proper 301 redirects to another page in your site
- If you rename or move a page, add the proper 301 redirect to the new URL
- If you advertise a link to your site, make sure it is spelled properly
Even with a basic 404 page design, the user experience will be improved if you specify instructions to the visitor on how to continue using the site properly. You can also add a keyword search form to this page that allows them to find what they were trying to locate.
Getting more creative with your 404 page design
As I mentioned, there will be sometimes when a person runs into this error page. So why not make that experience a little less stressful and maybe even fun? By customizing the design of the page, you can weave your brand into every detail of the website. You can avoid embarrassment from a broken link by adding some helpful information, interesting recommendations, or humor.
Examples of creative custom 404 page designs
In this example from a bakery business, the witty humor that the company is known for is highlighted on an actual sample of one of their products. The type of error is still clear, but the page is colorful, the navigation is easily accessible, and a quick search tool is offered. Even better, it entices you with a little hunger for a delicious cookie that you can probably find in the shop.
WEBii custom 404 page design example for bakery
This example from a recognized UX agency cleverly customizes the “buried” missing content with its brand mascot – a beloved dog. The search function and navigation are still easily accessible at the top of the page. This creative design makes you feel like you are still part of the brand story.
UX agency custom 404 page design example
In this example from our flagship website, bold brand colors and customized fonts lead the page. Searching and clicking to the homepage are available in a click.
WEBii custom 404 page design example
For a local transportation-related organization, we introduced a fun light rail track theme for anyone who might have stumbled on an old missing file URL.
Train track custom 404 page design example
What creative elements could you bring into your 404 customization? Do you have a logo element, a mascot, or a theme that inspires ideas? Should your page be simple and clean, or boldly colorful? What kind of navigation elements might be helpful to your visitors that typically find themselves on this type of error page?
Don’t forget to watch your analytics
Remember that you should still remain mindful of your traffic patterns the overall usability of your website. Continue to monitor your statistics to see how many people are struggling to find what they need. Some tools such as redirection plugins for WordPress, or analytics report tools, will show you data on how many 404 errors users are experiencing and which page URLs are the most problematic. You should continue to fix those issues as you maintain your site. The goal here is to take advantage of every aspect of your website with quality design, but we do not necessarily want to encourage more people visiting your beautiful new error page.