Skip to main content

Error message

Follow the validation pattern and show an error message when there is a validation error. In the error message explain what went wrong and how to fix it.

Open this example in a new tab

When to use this component​

Show an error message next to the field and in the error summary when there is a validation error.

Use standard messages for different components.

When not to use this component​

Do not use error messages to tell a user that they are not eligible or do not have permission to do something. Or to tell them about a lack of capacity or other problem the user cannot fix - because the problem is with the service rather than with the information the user has provided.

Instead, take the user to a page that explains the problem (for example, telling them why they’re not eligible) and provides useful information about what to do next.

There are separate patterns for:

  • ‘there is a problem with the service’ pages
  • ‘page not found’ pages
  • ‘service unavailable’ pages

How it works​

For each error:

  • put the message in red after the question text and hint text
  • use a red border to visually connect the message and the question it belongs to
  • if the error relates to a specific field within the question, give it a red border and refer to that field in the error message - for example: “you must enter a year”

To help screen reader users, the error message component includes a hidden Λάθος:’ before the error message. These users will hear, for example, Λάθος: Η ημερομηνία γέννησης πρέπει να είναι στο παρελθόν”.

If your error message is written in another language, you can change the prefix as needed, as shown in this example.

<p class="govgr-error-message">
  <span class="govgr-visually-hidden">Λάθος:</span> Η ημερομηνία γέννησης πρέπει να είναι στο παρελθόν
</p>

You can use one of the above HTML.

Legend​

Open this example in a new tab

Be clear and concise​

Describe what has happened and tell them how to fix it. The message must be in plain English, use positive language and get to the point.

Do not use:

  • technical jargon like ‘form post error’, ‘απροσδιόριστο’ and ‘error 0x0000000643’
  • words like ‘απαγορευμένο’, ‘παράνομο’, ‘ξεχάσατε’ and ‘απαγορεύεται’
  • ‘παρακαλώ’ because it implies a choice
  • ‘συγνώμη’ because it does not help fix the problem
  • ‘έγκυρο’ and ‘άκυρο’ because they do not add anything to the message
  • humourous, informal language like ‘ουπς’

Do not give an example in the error message if there is an example on the screen. For example, if you are asking for a National Insurance number and include ‘QQ 12 34 56 C’ as hint text, do not include an example in the error message.

Above all, aim for clarity.

Read the message out loud to see if it sounds like something you would say.

Be consistent​

Use the same message next to the field and in the error summary so they:

  • look, sound and mean the same
  • make sense out of context
  • reduce the cognitive effort needed to understand what has happened

Use the question or form label in the error to provide context. For example, ‘Εισάγετε πόσες ώρες δουλεύετε την εβδομάδα’ for ‘Πόσες ώρες δουλεύετε την εβδομάδα;’

Be specific​

General errors are not helpful to everyone. They do not make sense out of context. Avoid messages like:

  • ‘Προέκυπτε κάποιο λάθος’
  • ‘Απαντήστε την ερώτηση’
  • ‘Επιλέξτε μια επιλογή’
  • ‘Συμπληρώστε το πεδίο’
  • ‘Το πεδίο είναι υποχρεωτικό’

Different errors need different messages. For example, text fields may be:

  • empty
  • too long
  • too short
  • using characters that are not allowed
  • in the wrong format An error for a specific situation is more helpful. It will tell someone what has happened and how to fix it.

Use instructions and descriptions​

Some errors work better as instructions and some work better as descriptions. For example:

  • ‘Εισάγετε το πρώτο σας όνομά σας’ is clearer, more direct and natural than ‘Το πρώτο όνομα πρέπει να έχει μια καταχώρηση’
  • ‘Εισάγετε πρώτο όνομα το οποίο είναι 35 χαρακτήρες ή λιγότερο’ is wordier, less direct and natural than ‘Το πρώτο όνομα πρέπει να είναι 35 χαρακτήρες ή λιγότερο’
  • ‘Εισάγετε ημερομηνία μετά τις 31 Αυγούστου 2021 για το πότε ξεκινήσατε το σεμινάριο’ is wordier, less direct and natural than ‘Η ημερομηνία που ξεκινήσατε το σεμινάριο πρέπει να είναι μετά τις 31 Αυγούστου 2021’

Use both instructions and descriptions, but use them consistently. For example, use an instruction for empty fields like ‘Εισάγετε το όνομά σας’, but a description like ‘Το όνομα πρέπει να έχει 35 χαρακτήρες ή λιγότερο’ for entries that are too long.

Use error message templates Use template messages for common errors on:

Track errors​

Find out how often people see them. This will let you:

  • improve content
  • A/B test variations
  • redesign a journey

Research on this component​

Error messages designed using this guidance have been tested with all types of users in live services, including tax credits.

Research showed users:

  • understood what went wrong
  • knew how to fix the problem
  • were able to recover from the error

If you’ve used this component, get in touch to share your user research findings.