<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=452766261559932&amp;ev=PageView&amp;noscript=1">

What makes an awesome error page?

By Rob Kendal June Friday, 2019 dev, tech No Comments

Ideally, you never want your users to see error pages. But if they do, then there is still an opportunity to turn a negative experience around by providing something useful or entertaining. Here's a list of our favourite examples...

Top 5 error pages on the web

You’re browsing a website and perhaps you take a wrong turn or something just goes wrong and you find yourself at an error page. Although you hope visitors never come across errors, sometimes they happen and what’s important is how they’re handled; users need to know what’s gone on, why (if possible) and what they can or should do next.

For example, if you find yourself visiting a URL that doesn’t exist, you’ll usually see an error page that talks about 404 – which is the error number code – and ‘Page Not Found’. However you ended up there, you need to have some options available to be able to continue your web journey. This could be a list or other pages to try or a contact number for support.

Typically, error pages tend to be dull and lifeless, confusing, or look a little like The Matrix with their walls of technical explanations and error codes.

But they don’t have to be. By injecting a bit of levity or trying to delight users after their unexpected error, these pages can help keep users going and get them back on track, whilst also helping them understand what went wrong and why.

With that in mind, we’ve scoured the Internet to bring you our top five error pages, as well as a little example of some rejuvenated ones from our very own websites and applications.

1 – GitHub

Screenshot_2019-06-07 Build software better, together

What would a ‘top error pages’ article be without mentioning GitHub’s 404 page? Whilst it does have a helpful list of common links and a search bar to get to back on track, it’s their mascot, the Octocat at the top of the page that steals the show.

Not only is he sporting a Jedi robe, set in a Star Wars theme, but you can play with some nice movement and scroll effects by moving your mouse around in the scene.

2 – Hot dot

Screenshot_2019-06-07 404 — Hot Dot Production

Hot dot are a web development and digital artist agency in Russia. Whilst there site is borderline art on its own, it’s their interactive 404 page that stands out.

By visiting a page that doesn’t existon their site, you’ll be treated to a parallax, moving, morphing collection of bubbles forming ‘404’. You can click on them, pop them, and it’s all quite soothing to be honest.

3 – Good Dog Design

Screenshot_2019-06-07 Lost Dog Good Dog Design

A US-based design and development house, Good Dog Design’s missing page is another great example of getting creative whilst staying on brand. We’ve got the clear error message (‘404’) on the collar and some flappy, interactive phone numbers that you can click on and play about with at the bottom of the poster.

4 – Sygic Travel Maps

Screenshot_2019-06-07 404 Not found

Another of our favourites. The Sygic Travel Maps site offers a beautifully illustrated page not found. It’s simple and to the point with the familiar error code and a link to the home page.

However, the icing on the cake is the shifting desert scene. In about 30 seconds, the sun rises and sets, transforming the desert from blazing sun into star-spangled night.

5 – Distilled

Screenshot_2019-06-07 404 page not found - Distilled

Another graphic design and marketing agency, Distilled have gone in a conversational direction with their error page.

If you happen across a page that doesn’t exist, you’re presented with a scene featuring two well to-do gentlemen discussing the error using a more modern, Whatsapp-esque chat.

Helpful and quite funny.

Errors at IAM Cloud

Meanwhile, here at IAM Cloud, we’ve been revamping some of our error pages, such as our 404 page below:

Screenshot_2019-06-07 Error Something went wrong

We’ve refreshed the design with our updated branding but kept the familiar illustrated feel. The curved text and circular, debossed design offer something a little different than the norm, but still give our users direction as to what’s happened and where they can go next.

Let us know what you think and if you have any examples of clever or creative error pages you’ve seen out in the wild.

Topics: dev, tech

Subscribe to Email Updates