BLOG

Igniting the business of creative on the web.

So you made a mistake. Or, did the website you were using make a mistake? Either way, errors are a big point of frustration for web users–we don’t like them and they can cause us to bounce away from our intended path.

Creating great website error messaging is often overlooked, but it’s important to ensuring an optimal user experience.Click To Tweet

Here’s where to start, and what to focus on for the best error messages:


1. Be specific to the user’s task.

When writing error messages, it’s important that your copy is customized to the actual error. It can be confusing when a message doesn’t offer any clarity as to what exactly went wrong. This is especially critical if users are inputting personal data or completing a checkout process (it can cost you a lead, or worse–a sale).

A more positive experience is to be told the specific problem, and given a way to correct the issue. Concise guidance is necessary to keep users engaged and willing to make the corrections.

best error messages
Notice how Dropbox is very detailed in their error alert for an incorrect email address, by requesting the missing character.


2. Let users know you’re human.

Oftentimes, error messages can sound very technical to a consumer (read: intimidating). Moreover, some errors place blame on the user. It’s more effective to be understanding, friendly, and speak the same language.

A good way to incorporate a more human tone to your error messages, is to think about explaining it out loud to someone. How does it sound when you speak it in conversation?Click To Tweet

If someone is less comfortable with technology, an error can be a huge roadblock. Reassure the user that they are not ‘talking to a computer’.

Error messages are also a good opportunity to utilize icons–it’s just another way to humanize your message (since people respond well to imagery).


3. Embrace humor in the situation.

Although a user may not want a comedic error message when their credit card number isn’t correct, there are some situations where it might be nice to be funny.

Keep it lighthearted, otherwise it may seem like you’re trying to cover up a mistake rather than owning up to it. The message should still be informational, clear, and polite. Something went wrong, so tasteful humor is a bonus when it happens.

funny best error messages
Piccsy uses unique and humorous illustration, coupled with a humble message when the website gives an error.

Hey there…enjoying this blog post?

Subscribe to get more free articles delivered to your inbox!


4. Don’t make users work for it.

Doing some heavy lifting for your user is usually the best way to ensure a great experience. You can have all the best error messages in the world, but if the user has to stop and think for a while to correct an error…it defeats the purpose.

Help a user get through a task efficiently and effectively. If it’s difficult, the only thing a user will remember is how long it took to figure out what was incorrect. They probably won’t want to live through that again.

A good example of this is during a login process. It’s possible that one wrong combination for a username and password could lead to multiple attempts before success is achieved…or frustration enough to quit. When the average user has 10 passwords and 4 usernames at any given time, the effort can seem insurmountable (that’s 39 chances to get it wrong!).

Mailchimp login - best error messages

The stress of forgetting a username/password combo is alleviated on the MailChimp website. If a username does not exist, they tell you before you even attempt a password. This reduces the amount of work a user has to do, in order determine the right combination.


5. Create a useful 404 page.

404 error messages are a unique situation in the world of error messaging, but definitely not rare. The default message provided by a user’s browser can often be unhelpful and generic. To create an effective message, it’s best to start by looking at what type of website error this is. A 404 means that a page is not found: the cause could be a deleted page, a broken link, or a mistyped URL.

A successful 404 page will help a user find the information they’re looking for, and encourage them to explore your site further. Customize your 404 page to include the following:

  • A clear notification that the page cannot be found
  • Consistent header and footer from the main site (navigation especially!)
  • Links that may send users down an alternative path, or to the home page
  • A search bar to help users find something specific
  • Ensure that the page is set up so that it returns an actual error from the webserver–you don’t want it to get indexed by search engines

Many websites get creative with their 404 pages–alleviating the annoyance of an error with lighthearted humor, or guiding a user elsewhere.

Lego - best website 404 page
Lego | See error page

FreshSparks - best 404 error pages
FreshSparks | See error page

GitHub 404 - best error messages
GitHub | See error page

Takeaway: Design for when things go wrong, as much as for when they go right!Click To Tweet

Conclusion

Think about all the places on your website that things could go wrong. List them out, and then start to assign a concise and humanized error message to each. Apply styling that is branded to match your site, yet still stands out enough to alert the user.

If you work with a developer, collaborate on what makes sense in the front end interface, and what can be done to support it on the backend.

These small changes will improve a user experience significantly, by reducing frustration and keeping the path to completion on track!

What other tips can be shared about creating the best error messages for users?

Leave your comments or questions below!


FreshSparks is a creative studio specializing in custom website design & development, focused on user-centered experiences. We can help you build a successful new online presence, or upgrade an existing website. Get a free consultation for your next project.

Did you enjoy this blog post?

Subscribe to get more free articles like this, delivered to your inbox!

  • Your own error handling is lame. Making me click back? C’mon.

    • Appreciate the feedback, Dougy! Where exactly are you getting an error? Would love to address the problem.

LET'S WORK TOGETHER


Take your online presence to a new place and get started with us today!

REQUEST A QUOTE
BACK TO TOP
177 Shares
Tweet115
Share34
Share22
+16