Errors are frustrating and interrupt the customer experience, so create messages that can help the customer.

When creating error messages, don’t blame the customer and avoid alarming them by saying that something has gone wrong. Instead, explain what happened and help the customer get back on track.

Keep the message jargon-free and avoid technical terms like, ‘validation in progress’ or ‘invalid entry’.

Don’t use ‘Uh oh’ or ‘Oops’ as they don’t provide any useful information, and please don’t use please. Rather than being apologetic for every error state, focus on helping customers recover quickly by being direct and specific.

It’s ok to use ‘please’ for the error summary heading, but it doesn’t need to be repeated elsewhere.

Give helpful hints to customers before they attempt to fill in a field.

Error messages should be displayed where the error is located instead of making the customer scroll through the page (especially on a mobile device) to find the corresponding field.

Types of error messages

Blank field errors

If a customer hasn’t filled in a required field, include the name of the field to maximise clarity. Avoid ambiguous error messages that could apply to any field such as ‘Enter a value’ or ‘This field is required’.

Formatting errors

Formatting errors are shown when someone enters information in an unexpected or incorrect way. Phone numbers, email addresses and dates are examples of fields that need specific formatting. In these cases, it’s best to suggest how someone should enter the information.

For example, for an error relating to a phone number:

Keep inline error messages brief. There’s no need to include a full stop at the end. If two sentences are required, insert a full stop to separate them, leaving out the full stop at the end.

Displaying error messages

In-line errors

On a standard form, error messages should be displayed between label and input. They should be visibly distinct from inputs without errors. This distinction is created with the ⚠ icon, a message in red text, and a red keyline for input fields and selects.

There are some instances where the red keyline is not used, such as radio buttons, check boxes and button groups.

WHY DISPLAY MESSAGES IN BETWEEN LABEL AND INPUT?

Surfacing the error below the label and above the input gives greater context to the error message. It also assists people who use magnification tools to read the label and an associate error in a natural reading order. This avoids any unnecessary scrolling up and down.

This also helps on mobile devices when tapping into the input opens a virtual keyboard. By placing the error message just above the input, the error message isn’t covered by the keyboard.

Error summary

In addition to in-line error messaging, there should also be a summary of errors displayed at the top of a page that is triggered by selecting the submit button. The summary contains a list of all active errors on the page.

The summary allows screen reader users to understand what they must do to recover from the errors. They can proceed by using the links in the error summary, or tab through the error summary and continue onto the page, flowing naturally down and recovering as they go.

For one-page and multi-page forms, an error summary is the most accessible way of managing errors.

Avoid disabled or ‘greyed out’ buttons

For most people, a disabled button can be confusing and frustrating. To a person relying on assistive technology, a disabled button may not be obvious to them at all. This creates a significant barrier in using a form. It is better to guide a customer through helpful messaging, so they understand what to do next.