Nick Babich Nick Babich is UX designer and writer. He has spent the last 15 years working in the software industry with a specialized focus on product design. He counts advertising, psychology, and cinema among his myriad interests.

Error prevention in web development

5 min read 1496

Error Symbol

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.

We made a custom demo for .
No really. Click here to check it out.

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.

Past Dates
When you design a date picker, it doesn’t make much sense to allow users to select dates from the past.

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.

Expedia Error Example
Expedia doesn’t allow users to select dates from the past.

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.

Skyscanner Example
Skyscanner uses the user’s location to autofill the ‘From’ field.

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.

Delete Confirmation
When users see this dialog, they might stop and think, “Is it really what I want to do?”

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.

Rocket Button Protection
You can notice that the extra layer of glass protects the rocket ‘Launch’ button from accidental presses. Image credit telstarlogistics.

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)
Email Already Taken Message
The system informs the user that this email is already in use. Image credit: Twitter.

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?

Error Message Detail List
It’s frustrating when you complete a long form and once you’ve pressed submit, you receive multiple error messages at the top of the form that you need to match with your input. Image credit: John Lewis.

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.

Google Forms Email Alert
Google Forms informs users that the email isn’t valid when the user finishes typing it. Image credit: Medium.

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.

Airbnb 404 Page
Airbnb 404 page with a nice injection of humor.

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.

Medium Error Example
This is a message that writers see when Medium can’t save the data.

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.

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Nick Babich Nick Babich is UX designer and writer. He has spent the last 15 years working in the software industry with a specialized focus on product design. He counts advertising, psychology, and cinema among his myriad interests.

Leave a Reply