User Friendly Error Messages

Martin Hansen-Lennox

Published Fri 14 Aug by Martin Hansen-Lennox in Perfecting Your Website's Design and Creating Better Content

Error messages can leave users feeling frustrated, often causing them to abandon the page. We'll show you how to avoid this problem and help you turn desertion into conversion.

An error message needs to help the user fix whatever problem generated it. 

But each message is also an opportunity to guide your user, reassure them and build trust.  Learn more about How to Build Trust with Online Customers.

In our practical guidance section we’re going to suggest a few solutions to help your users enjoy a better experience.

Practical Guidance:

Avoid Technical Lingo – Speak to them in their own language, avoid stressing users out with messages like the example below.

Target the Error Message for Your Audience – Don’t annoy your users by trying to be cool or clever unless it matches your brand.

Avoid the Use of Negative Words – Words such as 'fail', 'wrong', 'incorrect' or 'invalid'

Negative messages like the next example won't instill confidence in the user to deal with the problem.

Here’s some examples of how to reword your message and avoid upsetting the user:

  • Incorrect email address v Please add a correct email address
  • Invalid date input v Please enter the date in the following format: 2014-12-30
  • Wrong email address v An email address should contain both letters and numbers

Clearly Explain the Error  

  • Explain why the error has occurred and how it can be fixed
  • Never make the user feel like it's their fault by apportioning blame
  • Don’t make it hard work - Highlighting errors means users can quickly scan the page and fix the problem 

Avoid Using the Colour Red 

While it’s good to highlight errors, avoid using the colour red. Red spells danger and can have a negative effect on your users. Instead, use the colour orange: it alerts users without alienating them.

Provide Information on How to Get Help 

By adding the following:

  • A button to take them to back to where they previously were
  • A support email address
  • A phone number

Avoid Lists of Error Summaries

Huge lists of errors can magnify the problem for the user and make them feel overwhelmed, so provide error messages one at a time. 

Use Field Labels

Place error messages next to field labels -  It's particularly helpful for disabled users as it allows screen readers to read the error message and the label together in order to correct the error.

Provide Call Out Bubbles 

Error messages which point to the fields are very effective. Bear in mind that the call out button should disappear when the users clicks onto the next error.

Be The First to Comment on This Item

  • No comments for this item yet

    Why not be the first?

Comments Closed

Comments for User Friendly Error Messages are now closed

What's New With The Team?

More Recent Updates

UK: 0115 8088303

INT: +44 (0)115 8088303

29 Royal Standard House
Standard Hill

Nottingham Web Development