How to Design Better Error Pages

‘500 Internal Server Error’ is a generic error message, given when an unexpected condition is encountered.

Around the web you will see all kinds of error pages (404 and 500). Some are creative and fun, while others are plain and boring.

Although they are a fun opportunity, typical interface best practices should apply (no free for all).

Communication. Guidance. Emotional Design.

Communication

Treat interface like human conversation.

• Don’t use technical jargon like ‘500 or 404 error.’ I know our users don’t appreciate the subtle difference between 404 and 500 errors. (I actually don’t think technical sites like Github or Heroku should do it either).
• Don’t use the word ‘error’, use mistake. Again, ‘error’ is very informal and technical.

Guidance

• Like other in-site errors, tell the user what their steps are moving forward (unlike Snapchat’s below). Should they reload the page or try again later in the day?
• If you get bug reports automatically (or whatever your system is), inform the user that you now know about the bug. Reassure them that it is getting tended to. Additionally, it will also reduce how many users contact you about the bug (they wont feel the onus is on them).

Snapchat and Heroku Default

Emotional Design

• Delicately change the mood. A slight joke, a witty remark etc. The idea is that you halt the negative buildup of emotions.
• Don’t use imagery, text (“Oops”, “Shoot”), or punctuation (“!!!”), that evokes more sadness-why reinforce such feelings? It sucks, but don’t prolong or cause additional damage.
• There is room for fun and creativity, but the page feel and message should fit with your general brand persona.

Airbnb

Github

Other

• There should be a page title in the browser tab (saw a few sites omit this). Show the user where they are, the same way you do on other pages.
• There is no reason to have so much content on this page that scrolling is necessary. Keep it above the fold.

ClassDojo. There is an image down there, but requires some scrolling…

Our 500 Page

lives here: http://api.whooosreading.org/500

Oh and these are a few of my favourites (in terms of creativity and fun):

https://slack.com/500

http://konigi.com/showcase/latest

http://www.bluefountainmedia.com/error404

If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Give this a clap 👏!