7 Must-Do Tips for UX-Friendly Error Messages

It comes in many varieties, ranging from Error 401: Authorization Required and Error 404: Not Found to the bulleted list of entries left out of the form. It’s the dreaded error message, and it can wreak havoc on the smooth user experience you worked so hard to create.

While error messages might not be the most riveting thing to talk about, they’re one of many small details that your usability partner and web designer and developer need to master. Otherwise, that new and gleaming site you just launched can frustrate even your most devoted clients, patients, or members.

What has our team at Astriata learned about error messages that can help you avoid the error pitfall ? Here, we share some helpful tips.

1. Prevent errors from happening in the first place.

One of the best ways to avoid frustrating your user with an error message, of course, is to error-proof your entire site, from start to finish. How can that happen? Put simply, it’s all in the design.

As UX specialist Page Laubheimer explains in an article about preventing user errors:

The term “user error” implies that the user is at fault for having done something wrong. Not so. The designer is at fault for making it easy for the user to commit the error. Therefore, the solution to user errors is not to scold users, to ask them to try harder, or to give them more extensive training. The answer is to redesign the system to be less error prone.

Strong human-centered, UX-focused design is not an out-of-the-box service that comes with an instruction manual. Instead, a good designer takes into account your organization or association’s unique needs to come up with a design that prevents errors and positions users for success. They then conduct usability testing on the design, checking for potential errors and revising the site accordingly.

Often, preventing errors requires the designer to remove or lower the memory burden on users. For instance, if users have to rely on memory to perform a task, then give them cues or provide a drop-down list of options. Also consider building in “undo” options (so they can correct their mistakes) and integrating warnings in error-prone parts of your site.

2. Make it clear what information is mandatory in your form.

Few, if any, of us like to fill out forms. That’s why it’s crucial to specify what fields are mandatory and what fields are not. This step, in itself, is a great preventive measure, especially considering that the bulk of error messages occur on forms.

Often, the words required or not required (or optional) convey that message in clear terms. You can also consider an asterisk, the universal sign for “mandatory.” Be careful not to overdo it, however, by using multiple tactics or writing your prompt in all caps, in red. Users are not robots. They have feelings, and you don’t want to scare them away.

3. Let users fix errors along the way.

Nothing is worse than filling out a long form, clicking submit, and then getting hit with a long list of errors to go back and fix. And if that’s not bad enough, imagine having to scroll back through the form to find your errors, instead of being taken directly to them.

These things happen all the time on web forms, but you don’t want them to happen to your users.

Through usability testing for one of our clients, a benefits association for government employees, “we found that the user responds better to an error message that immediately alerts users of invalid or missing data, instead of having the message come at the end,” explains Jodi McGill, a senior project manager at Astriata. “For instance, if a company name is required, then users won’t be able to move past that field until a name is entered.”

“If you do decide to wait until the end, then make sure the error message takes users directly to the error,” McGill adds. “Asking users to find the errors themselves on a long form can feel like an unnecessary burden.”

4. Don’t rely on the default error message.

Standard error messages built into the server use overly technical language that users don’t understand. For example, unless you’re a coder, you likely won’t be able to decipher something like: Error 16×22103: line 14: error mapping Object -> Int32.

Even the default and all-too-common 404 message—Page not found—offers nothing inspiring or helpful. Instead, work with your web designer and developer to use your error messages as a chance to engage with users in a positive way. You can even design the page to reflect your colors and style, while creating a custom-made message that not only helps users solve the problem but also matches your voice and tone.

And on that note …

5. Watch your tone.

It sounds like advice from a parent: “Watch your tone.” But it comes in handy with error messages. When you draft language for an error message, make it respectful and concise, and take caution not to blame the error on your user. For example, saying things like You made an error! or Illegal action! puts the blame on the user, making them feel as though they’ve done something wrong. Empower them with a kinder, more personalized and constructive message. For example, you might say:

Oops, we see that you’re looking for a form and want to help you find it.

In the above example, note how the precise problem is identified (a missing form) and an offer to help is made, all without blame—and without technical language.

Keep in mind, as you draft your messages, that they represent an opportunity to push forward your branding, and use them in a way that aligns with your organization’s external communications style, while offering constructive feedback. Often, this involves linking to other parts of your website, integrating a search bar into the message, or providing contact information so they can reach out and receive help from someone on your team.

6. Don’t forget about mobile devices.

You might feel proud of your own or your team’s proactive stance with error messages, but don’t stop at how they’ll appear on a standard desktop screen. Remember: mobile is huge. And you’ll want to design mobile-friendly messages that users can access and engage with, even on a small screen’s limited real estate.

With forms, remember, too, and users can experience fatigue when inputting data on a smartphone. Therefore, make data input as easy and efficient as possible. Also remember the connectivity issues that come with mobile, and consider building in options to, say, save data along the way, so users can reenter the form without having to start over when they lose connection.

7. Test how users react to your error messages.

Although plenty of usability specialists overlook error messages, we think it’s critical to include them in your UX testing. Otherwise, you’re simply guessing at how your users will react.

Sometimes, error messages occur erroneously, popping up when an error hasn’t even been made. For example, a user might receive an error alert while attempting to type in their birthday or phone number. In this case, the message comes at the wrong time and will annoy users, who are simply following instructions and attempting to do the right thing. These technical problems can go undetected if not accounted for thoroughly in usability testing.

As you consider these seven tips on error messages, know that a user-friendly approach to web design and development can make all the difference in how your clients, customers, or members experience your site—and the impression they form on your organization. Want to know how you stack up in terms of usability? Take our quick “Assessment on Your Path to UX Maturity.”