How to make error pages useful.

Error pages don’t have to be just ‘error’ pages — you can make them work for you.

Error pages of popular websites and apps

Visitors stumbling on error pages on your website is nearly inevitable. Whether they are trying to access a restricted page, they mistyped a URL, the architecture of your site was changed such that an old bookmarked link no longer works, or there was a temporary issue with your server; you wouldn’t want to lose visitors just because they couldn’t find what they were looking for on your website. In any case, error pages don’t have to be dead ends or drop-offs for users. We can harness these pages to keep users in and help them find their way around.

What exactly are error pages?

Let’s think of it like Tim who is looking for a postal office in downtown Lekki. Even though it’s not his first time there, he isn’t very familiar with the area. He looks out for markers and landmarks to help him get around. In the course of his search, he’s met with a roadblock and a huge sign that reads ‘Road Closed. Construction in progress.’ Snap!

That sign is like an error page on a website. In Tim’s case, it’s like a website or webpage that is temporarily not available due to maintenance. Error pages, like the name implies, show up when something goes wrong on your website. Sometimes, it could be a mistake the user made, other times it’s the site’s fault. Whatever the case, there’s a message that shows what’s happening or what went wrong. These messages are delivered by the web servers and always have a dedicated error or status code.

Here are some common error web pages (with their respective HTTP status codes) include:

• Bad Request (400) — This error shows up when your web browser’s request to load a page or file from a server is somewhat incorrect or corrupted and that server can’t seem to understand it. It could also be because the file or page requested is too large for the requester.
• Unauthorized (401) — As the name implies, this error happens when the user tries to access a restricted page or content without valid authorization to do so. Here, login access or authentication is usually required.
• Forbidden (403) — Similar to 401 errors, the user is restricted from a page by the web server because special permission is needed, and not necessarily login access.
• Not Found (404) — This error code is returned by the server when it can’t locate a web page requested by the browser. 404 errors could happen if the user mistypes the URL, clicks on a broken link, or follows a link to a page that has been deleted or moved somewhere else.
• Request Timeout (408) — Here, the server waited for a request from the browser for a period of time and didn’t get one. Rather than continue waiting, the server sends a 408 error code indicating that the connection with the website has ‘timed out’.
• Internal Server Error (500) — Just as the name suggests, the server has encountered an internal error and is unable to handle requests properly. This is usually the most common type of these errors experienced on the web.
• Service Unavailable (503) — This error indicates that the server can not handle requests, either because it’s under maintenance or it’s overloaded. This state is usually temporary though.

There are many of these HTTP status and errors codes, but how do you optimize them (some of them) to make visitors or users continue on your website instead of scramming off in panic or frustration?

Optimizing Error Pages

These are a few tips to help you make your error pages work for you.

1. Be clear about what happened.

Stating exactly what went wrong is the first step to converting what would have been a negative experience into a positive one. Use clear, simple terms, not technical programming gibberish like “Client certificate is untrusted or invalid.” You don’t want to add confusion to frustration.

Airbnb‘s simplicity here is very helpful

2. Don’t be rude.

A little apology can ease the tension. Even if the mistake was made by the user, never blame them. Instead, take the blame and provide a solution or way out.

3. Suggest a way out or include contact options.

Many websites stop at just stating the error that occurred. It’s important to help the user by offering suggestions on what to do next. It could be a search box, links to main pages, a back button, or even a way to reach your support team for help.

Medium’s 404 page — They even suggested ‘lost’ articles.

4. Make it lightweight, and downright simple.

If the error page takes time to load, then that could lead to even more frustration. Error pages should be quick to load, without clutter, and straight-forward. Many websites put a lot of interesting elements, animations and interactions on their error pages which can be distracting for the user. You don’t want your users to spend too much time on your error page, do you?

Korapay’s error pages load within split seconds — you can try it

Optimizing your error pages not only improves the experience on your website, but helps you showcase the personality of your business. Users love products that work fine even when there are problems or when they make mistakes. Error pages have the potential to increase your conversion, so treat them like every other important page.

Feel free to share your suggestions on how you could make error pages useful.