Error pages are often displayed when the wrong URL has been used or it is broken, their purpose is to guide visitors out of the hole they’ve fallen in to. When a URL is clicked your visitors expect results and related information, if this leads to an error page it can be disappointing. Most of the time visitors won’t return to the website.
As a web designer and developer it’s impossible for you to control the cause of the error, but you can make the experience less frustrating and more creative by displaying all the relevant information needed to redirect lost visitors.
On your error page it is important to have one of the following:
Make sure you use the right language, especially when representing your brand
Use navigation or link to your websites sitemap
A search box is useful for those looking for more specific items, especially in ecommerce.
Sometimes error pages have been overlooked and underappreciated but it seems more and more designers have started to add humour to re-engage visitors. The examples below are very creative and could help you plan your error page.
google.com
This is a popular error page, it occurred when too many words were entered to search. The broken robot image adds humour; it made us think we broke Google!
www.b3ta.com/404
This website’s 404 error page is hilarious; they use a series of creative images and quotes, adding great personality in to their brand.
www.b3ta.com/404
We have featured them twice because their error pages are guaranteed to re-engage visitors.
dribbble.com/404
Creative hub Dribble uses an empty court as their error message. The vintage style image matches their creativity and style.
www.asos.com/holding.html#404
ASOS’s empty room is both humorous and unexpected. The clever concept is amusing and reminds us that we’ve entered the wrong studio! They have used navigation to help redirect their customers.
www.brandcrowd.com/404
Brand Crowd’s 404 page features a clever use of content and excellent creativity, the large 404 screen adds a sense of panic! This image is unexpected and reflects the innovativeness of the company.
mashable.com/404/
The social hub Mashable are known for their daily scoop of new media news. The lost sock concept is guaranteed to make their visitors laugh, they have also implemented a search bar to help guide lost visitors back.
starwars.com/404/
The creative star wars 404 error page is a classic! It uses consistency and concepts from the film and good use of search bar and navigation.
www.fullstopinteractive.com/404notfound
Full stop interactive have kept it simple and smart.
www.cofamedia.com/404notfound
Cofa Media have cleverly used the concept of a broken television screen to implement their error page. This links directly to their company and reveals how creative and smart this agency is.
With the right language, use of navigation and concepts you can easily reflect your brand and company’s culture through one simple error page.