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 the best website error message is often overlooked, but it’s important to ensuring an optimal user experience.

Chances are you have encountered a poorly executed, standard error message for web application use.

Generic Error Message Design: Microsoft | 5 User Experience Tips for Creating the Best Error Messages

What does this mean?!

User-friendly error messages need to clearly define what, why and how:

  • What the problem was.
  • Why it happened.
  • How to solve for it.

So how can you design and develop a better user experience for your visitors, and in turn increase conversions?

In this article, I’ll show you what to focus on for the best error messages.

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

Five Ways to Create the Best Error Messages

1. Be specific to the user’s task.

When writing the best error messages, it’s important that your copy is customized to the actual error that occurred.

It can be confusing when a website error 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 error message experience is to be told the specific problem and given a way to correct the issue.

Concise guidance is necessary for the best error messages, to keep users engaged and willing to make the corrections.

Error message examples: Dropbox | 5 User Experience Tips for Creating the Best Error Messages
Notice how Dropbox is very detailed in their error message alert for an incorrect email address, by requesting the missing character.


2. Let users know you’re human.

Oftentimes, a generic error message 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 for more user friendly error messages is to think about explaining it out loud to someone.

How does the error message sound when you speak it in conversation?

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’.

Optimizing error message UX (user experience) is also a good opportunity to incorporate icons. It’s just another way to humanize your message since people respond well to imagery.

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

3. Embrace humor in the situation.

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

Keep it lighthearted; otherwise, it may seem like you’re trying to cover up a mistake rather than owning up to it.

The error message should still be informational, clear, and polite.

Something went wrong, so tasteful humor is a bonus when it happens.

Funny Error Messages: Piccsy website | 5 User Experience Tips for Creating the Best Error Messages
Piccsy uses unique and humorous illustration, coupled with a humble message when it gives a website error message.

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 your audience 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.

Your user 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.

Login error messages are the worst, am I right?

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!).

Login error messages UX: MailChimp | 5 User Experience Tips for Creating the 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.

Clear and visible password error messages reduce the amount of work a user has to do, in order determine the right combination.


5. Create a useful 404 error page message.

404 error message text is a unique situation in the world of error messages, but definitely not rare. The default message provided by a user’s browser can often be unhelpful and generic.

To create the best error messages for a 404 page, it’s important to know 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 error message design will help a user find the information they’re looking for, and encourage them to explore your site further.

Customize your 404 error message text 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

One of the more important 404 error page best practices is to set up the page so that it returns an actual error from the webserver–you don’t want it to get indexed by search engines.

The takeaway:

Design for when things go wrong, as much as for when they go right!

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

404 Error Message Examples

Take a look at a few effective 404 error message examples below.

404 Error Message Text: Lego Website | 5 User Experience Tips for Creating the Best Error Messages
Lego | See error page

404 Page Error Messages Best Practices: FreshSparks Website | 5 User Experience Tips for Creating the Best Error Messages
FreshSparks | See error page

404 Page Best Practices: Github Website | 5 User Experience Tips for Creating the Best Error Messages
GitHub | See error page

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

Error Messages: Best Practices for Better UX

Think about all the places on your website that things could go wrong. List them out, and then start to assign a concise and friendly error message to each.

Human tone and language will help users relate better to a situation with an error message, and help them understand it.

Use these five elements to offer examples of good error messages on your website or app.

  1. Be specific to the user’s task.
  2. Let users know you are human.
  3. Embrace humor in the situation.
  4. Don’t make users work for it.
  5. Create a useful 404 error page message.

Apply styling to your error messages 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 you share about creating the best error messages for users?

Share 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!

LET'S WORK TOGETHER


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

REQUEST A QUOTE
BACK TO TOP