To err is human. We all make mistakes,and when it comes to digital design, users likely face error conditions when they interact with your product. But how the system handles those conditions have a tremendous impact on the experience that users will have.
In this article, we will review practical tips that will help you design error states for websites.
How to minimize the number of errors during development
Every error, regardless of the root cause, becomes a point of friction for your visitors. It blocks them from moving forward towards their goal. The visitor has to stop and invest time and effort into solving a problem they face. Experienced designers know that preventing errors is always better than curing them. That’s why the best error message is the one that never shows up.
Anticipate possible errors
Analyze how users interact with your website and identify where they might face errors. It’s recommended to start with high-level analysis — analyze user flows to identify areas where users might face troubles.
Typically, errors appear when users do incompatible operations (such as provide invalid data input) or due to technical problems (various network problems). For example, it’s usually hard to correctly fill out a long form without errors on the first attempt. You should take these cases into account to minimize the chance of errors.
It’s also essential to collect information about real user behavior (how users interact with your product). Use both in-person observation and analytics for that:
- In-person observation. Conduct contextual inquiries and watch how users interact with your product in their natural environment.
- Use analytics to identify areas where users face friction. For example, if you want to optimize web experience, you might want to track the average time on task (the total duration users spend on your task) and compare it with the expected time.
Write clear instructions
Clarity is a top priority in digital design. Instructions that you provide to your users should help them understand what they need to do in each given moment of time. Instructions are especially important during the first-time experience because when users only learn how to use a product they might face a lot of problems.
When writing instructions, you should always avoid jargon. Get rid of technical terms, and express everything in the user’s vocabulary. And always test your instructions with your users. Conduct a series of usability tests with your target audience to ensure that users understand what they need to do in each given situation.
Support Undo/Redo operations
Jakob Nielsen calls Undo/Redo operations “emergency exits.” This feature lets users leave an unwanted state without any impact to their data and gives users a freedom of exploration. Users are more willing to explore when they know that they are safe. Always support the keyboard shortcuts Ctrl + Z and Ctrl + Y for common operations.
Error prevention techniques with examples
Here are some techniques that can help you avoid error conditions.
Introduce constraints to input
It’s possible to prevent users from making errors in the first place by utilizing constraints. Do not allow users to type or select something that is not valid. For example, when you design a flight booking form, you shouldn’t allow users to select dates from the past because it doesn’t make much sense.
Use a date picker that allows users to only choose today’s date or dates in the future. This constraint will make users pick a date range that fits.
Learn more →
Offer good defaults
Good defaults minimize interaction cost (user effort required to provide data). For example, instead of making the user provide information about her/his address, it’s possible to pre-select some fields based on a user’s geolocation data.
Add extra friction to potentially dangerous operations
It’s always a good idea for any irreversible operations to show a confirmation dialog such as “Are you sure you want to do it?” This extra friction will make the user stop and think about what they’re doing. It also prevents users from triggering some action by accident.
Side note: You might argue that design should always support Undo operations. It’s true, but sometimes it’s impossible to introduce the Undo feature due to business logic limitations or the nature of operation.
Error recovery techniques for web development
When errors do arise, well-designed error handling prevents users from feeling ignorant. Here are some techniques that you can use when things go wrong:
Write helpful error messages
How do you make it easy for the user to recover from form errors? The answer is to write proper error messages.
Do not write:
- Vague errors. We often see errors like “Oops, something went wrong.” Such errors don’t contain any valuable information (it’s not clear for users what to do next)
- Raw errors. Raw errors are errors that contain an app’s internal error codes like “WGeneralError521 The operation cannot be completed.” They are written by developers and for developers, and aren’t very helpful for average users
- Dead-end errors. Dead-end errors are errors that simply state a problem. A typical dead-end error might state, “Your file cannot be saved,” without telling the user what’s wrong (is it a network issue? Is it something wrong with a file itself?). The user should not guess what’s happening. Ideally, the form should state a problem and share some tips on how to solve it
Make your error message easy-to-understand and helpful:
- Tell the user what went wrong and possibly why
- Explain what the user needs to do to fix the error (when it’s not evident)
Use dynamic form validation with inline instructions
Imagine you go through filling out a long form, and when you click Submit, you see a long list of error messages at the top of the form. Not cool, right?
User input should be validated right after the user provides it. A technique called inline validation will help you with that. The user doesn’t need to click/tap the Submit button to see what’s wrong.
In his article “Inline validation in forms — designing the experience,” Mihael Konjević compares benefits and downsides of various inline validation strategies and proposes a validation strategy which he calls “reward early, punish late.”
Apps that follow this approach inform the users about incorrect input in the context of operation (right after the user stops typing and moves to the next input section).
Proximity is another important element of data validation. Place the error message next to the field to help users comprehend the status.
Add a bit of humor
Well-crafted error handling can turn a moment of failure into a moment of delight. Humor is the spice of life and it’s easy to humanize error states by pairing nice visuals with a funny copy.
At the same time, you need to remember that humor is contextual. A joke that can be funny in one context can be terrible in another. Imagine a situation when you work hard on a very important document for a few hours and finally decide to save it. When you click the Save button, the system “rewards” you with an error message “Uh-oh, we were unable to save it. Sorry!” Such a message is entirely inappropriate.
Conclusion
The best error message is the one that never shows up. Yet, when we design for error-prone conditions, our goal is to prevent users from having stress and make interaction with a product as enjoyable as possible.
Get setup with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID.
- Install LogRocket via NPM or script tag.
LogRocket.init()must be called client-side, not server-side. - (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- ngrx middleware
- Vuex plugin
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
