Error messages are a natural part of life with an interactive device.  Users will inevitably make mistakes, and the software needs to handle those mistakes gracefully.

Unfortunately, the state of error messages on the web is pretty poor.  They leave users angry, confused and frustrated – all feelings you don’t want from someone interacting with your product.

So how do we make it better?  Here are four ways to improve your error messages, plus a bonus tip that might make error messages a thing of the past altogether:

1. Ditch the Modals – Modal windows are popups, and they’re incredibly annoying and intrusive.  In the early days of the web, modal windows were how most error messages were displayed, generally popping up after the user submits the form.  Today, using them is a lazy, systems-model approach that forces the user into disrupting their workflow to respond to the popup.  Plus, a modal window pulls a user out of the form flow, sometimes causing confusion and a jarring effect.

Instead of using modal windows, display your error messaging inside the page that the user is working on.  For instance, displaying messages above or below a form field is a much more elegant and user-centric solution.

2. Provide Useful Messages – “An error has occured”, “The data type is incorrect”, or “Please enter a valid value” are all terrible ways of communicating an error to a user.  When someone makes an error, they need to correct it, and often aren’t aware of why they’ve made the mistake.  Instead of simply telling the user that an error has occured, tell them why, and tell them what they need to do to fix it.

The key is to make the error specific to the data that needs to be corrected, and actionable.  Instead of “Please fix the errors below” with highlighted fields, tell the user “Oops, you forgot to give us your last name…please fill it in.”  The more clear your message is about what happened, the easier it is to fix, and the better users feel about you and your site.

3. Be Responsive – As a user works through your site, they’re constantly going through a loop of action and evaluation.  They take an action, evaluate the success of that action, then move on to another action based on the evaluation of the previous one.  The same happens when filling out a form.  If a user fills out 8 form fields, then clicks submit and is given a bunch of error messages, it degrades the experience by disrupting this loop.

Instead, use Ajax (or simply JavaScript) to display errors in real-time as the user fills out the form.  This helps make the action-evaluation loop smaller, where the user is able to evaluate the success of each field, not wait to evaluate the success of the form.

4. Design Error Messaging Early – One of the big reasons that error messaging is so bad is that it’s stuck in as a necessary evil at the end of the development process.  After forms have been built, error messages are set up to simply meet the baseline requirements of the form.  As a result, they’re often unclear, unhelpful, and impolite.

Next time you’re building an interactive product where error messaging will be involved (which is most), write those messages as you’re working through the initial design of the product.  If you sketch a form, stop and write down the possible errors and how their messages should read, before moving on to another part of the product.  This way, developers will have an easier time implementing the messaging, and your users will benefit greatly for it.

Bonus Tip: The best way to handle errors is to prevent them altogether.  In his book, Designing the Obvious, Robert Hoekman Jr. talks about the concept of Poke Yoka – a Japanese concept that simply means “error-proofing”.

The idea is to take the burden of fixing errors off of the user and shift it to the computer whenever possible.  For instance, if a user provides a phone number with no dashes, user JavaScript to add the dashes in the background before submitting to the database.  The same can and should be done with dates, credit card numbers, or anything else that needs proper formatting.  Also, providing examples of how data should be input – the current date already filled into a “date” field – helps users know what is required and prevents errors.

Throughout your site or application, you’ll have moments where an error can be prevented, or corrected silently in the background.  Think critically about each error message and ask yourself if you really need to have the user correct this error, or if it can be handled in some other way.

There you have it – four ways (plus one) to improve your error messages and create a better form experience on your product. Don’t settle for poorly designed error messages, using these tips is a way to ensure you’re delivering a top-notch experience to your users.