I read a humourous post last night, titled Oops! I ruined your life. :) that got me thinking about error messages. The post is about the cutesification of error messages from large technology companies, like Google, but I think the base message is important for any website: make sure your errors are helpful.
Most common error messages a user is likely to see on your site is a 404 error, or ‘page not found’. No matter how careful you are checking broken links and ensuring everything works correctly on your site, users can still trigger one by typing an incorrect URL, or using an old, outdated link to a long-gone page on your site.
On the Stem site, we like to keep things simple: we offer a plain language message, and display a search box for users to try their hand at searching for the content. This way, if the content is actually on the site, they will be able to access it. The message is displayed any time someone tries to access a URL on the site that doesn’t actually exist.
Some basic things to keep in mind when designing 404 errors:
- Keep your audience in mind. The average user doesn’t know what ‘404’ refers to; however, ‘Page not found’ is understandable, without being condescending to more web-savvy users.
- Offer alternatives. Display a search box, a link to the homepage, or even a simplified site map. If possible, you could even show content related to what they may be looking for. You can also include a back button to return users to the last page in their browser history, but this can backfire if the page the user was previously on was not actually on your site.
- If possible, offer to help. This is especially important for sites whose sole purpose is to supply information. Include a contact form or email address; there could even be a phone number to encourage users to contact the company and get the information they were looking for.
- Lastly, make sure it appears when it should. This may be more of an issue for your dev team, but any time a 404 error is thrown by a website, the tailored message — and not a server error — should appear.
Heinz has a great example of a ‘page not found’ error, as well as a terrible one.
Here is Heinz’s ‘not found’ page:
This error message speaks to Heinz customers. It does not say outright that the page wasn’t found, but, keeping the brand front and centre, they say the page is empty and display an empty ketchup bottle at the bottom (successful product placement without compromising the message). They provide instructions to search the site from the primary navigation. They also display links to main pages, organized by section; even if a user does not see what they were originally looking for, something else on the site could catch their eye. Lastly, the rest of the site’s regular page elements are intact: the site’s design, primary and footer navigation, and company logo. There is a reason this example crops up on many, many ‘best 404 errors‘ lists.
So, how does Heinz also have a terrible example of a 404 page? The above version is only loaded when you type in a URL ending in .aspx – say, “http://www.heinz.com/404.aspx” or “http://www.heinz.com/stemlegal.aspx” — anything with that file extension. As soon as the file extension is wrong — even by using .asp, another valid file extension used on other websites — you get this:
A completely generic server error. This is what users would see when they mistype/forget the file extension, or follow a really old link that pre-dates the site’s use of ASP .NET (.aspx). It’s not helpful, it’s likely written by developers, and, to many, it’s completely incomprehensible.
A friendly site can quickly become unfriendly when it displays confusing or useless error messages. Don’t forget to extend your copywriting, content strategy and branding even to pages you hope users will never see — you won’t regret it!