This is the first in an on-going series of posts we're going to do called "UX Protips". There are hundreds of little tips and tricks that you can implement to slightly increase the UX of your product. We're doing a series of deep dives on these tips to help you better understand how to make them work for your business. Hope you like it!

Nobody likes to dwell on potential problems, but consider how much trouble we'd be in if a car manufacturer neglected to include a "check engine" light, just because they didn't want to entertain the possibility of future maintenance. Similarly, web pages have their own "dashboard lights" that alert developers to issues and help communicate any problems to their customers. These come in the form of error pages.

Error pages are inevitable on any website–they're the by-product of healthy growth and the occasional website redesign. Unfortunately, SpringTrax found that 74% of visitors leave your website after hitting a 404 error page. Worse still, most of these visitors never return. When broken links riddle your homepage or continuously crop up on search engines, your website begins to feel impenetrable and consequently you lose your client's trust.

What many people don't realize is that when your users encounter an error, it doesn't have to be some terrible experience. It's an opportunity to make them smile. An opportunity to show them that you care about the little things. An opportunity to turn what's normally a frustrating experience into a funny one.

To accomplish this, your 404 and 500 (and maintenance) pages need to do three things:

1. Error Pages Need Clarity

The most basic function of an error page is to inform your visitors that they've encountered an error and give them options on how to move forward. The last thing you want is a page so cluttered or creative that your user misses this critical information. Your error page should be simple in design and easy to understand, like this example from Wistia.

Your error page also needs to address a variety of different possible scenarios. For example, if a visitor on your site encounters a 404 page they may have incorrectly typed your web address, but what if they stumbled upon that error through a dead link on a search engine or, god forbid, your website? Don't be too quick to point the finger at your user–you can still turn this situation around and make their foray into your corner of the internet a positive experience!

And this needs to go past just your 404 page. According to Google search statistics, 500-level errors, indicating an internal server hiccup, occur twice as often as 404 errors. Each error page should clearly communicate the issue and a call to action that helps navigate your wayward visitor back to your homepage.

2. Be Creative, Cultivate Your Brand

Creating a page that's creative and attention grabbing is probably the most important step in convincing your visitor not to close their browser and type in your competitor's URL instead. Yes, you need to navigate them back to your website and steer them toward what they're looking for, but first you need to convince them to stay.

Dead links and error pages suck, but you can make yours something useful that markets your brand or just bring a smile to your user's face. Consider Ghost's 404 page. The page is clean and simple, and the bottom features helpful links leading back to the site proper. Their quirky 404 image is awesome: despite having nothing to do with their product, Ghost understands that in so many cases user experience means more than good product.

Alternatively, Lego.com's error page showcases the simple whimsy of their product. Again, it's clean and simple and shows off their brand. The bottom of the page summarizes the issue for their visitor, while the top will carry you back to the homepage and offers you a handy search function. Remember that creative doesn't necessarily mean whacky–unless that's the image you've cultivated!

3. Real-time Server Status Information

The biggest opportunity to improve the UX of your error pages is to answer the question "What do I do next?". Your page can be visually stunning, but if the user still doesn't know how to fix the problem in front of them, they're going to leave feeling slighted.

Here's an excellent example of a server error page from VendHQ. You'll notice that the text on the page includes real-time information from their status page. I can even click through to get more information about what's happening and what I should do next.

This results in a much better user experience than had I just been told that "there was some error". That's not very helpful! I would be stuck wondering whether or not I did something wrong and when I'll be able to come back to complete the task I was trying to do in the first place.

Free Site To Create Error Pages

We realize that creating clean, beautiful error pages that automatically pull in your real-time server status can take a while to build. If we're being honest, it's probably just not that highly prioritized on your list of things to do. So we built Better Error Pages.

Better Error Pages is a mini-site where you can easily build and customize 404, 500 and maintenance pages to use on your website. If you're a StatusPage.io user, the error pages will automatically include real-time status updates for your users so that they can assess whether the error is on your end–say, for some scheduled maintenance–or theirs.

The best part? Whether you're a StatusPage.io customer or not, it's completely free. For the full scoop on our Better Error Pages tool and what prompted its creation, check out our blog.

Final Thoughts

Unfortunately, just a few bad experiences with your product might be enough for a user to conclude that they don't like your app. And if they decide to talk to their friends about you, it will likely be something negative rather than positive.

Error pages are like deserts interrupting a website's otherwise rich topography. One moment you're browsing exciting content, the next you're transported into a cyberspace wasteland courtesy of a dead link or mistyped URL.

The question is will your error page be an oasis or will it leave your visitors feeling stranded?