Booklet

author

Mike V Dijssel

Design

How To Design Error Messages For Forms

design

Design

|

How To Design Error Messages For Forms

Error messages are indicators of specific system statusses. It's super important for users to see, understand and able to react upon them. So how do you create clear error messages? I got some tips for you.

COMMUNICATE WHAT
IS HAPPENING
When something goes wrong, it's super important to tell the user what's going wrong. So they know what to change. If you don't communicate this you take the risk the user will make the same mistake again.

USE CLEAR LANGUAGE
When you're giving feedback on whats going wrong, make sure you use language what the user will understand.
Try to avoid difficult terms and professional jargon. Don't bother the user with this.

HIGHLIGHT THE FIELD
One of the most common Ul patterns in error prevention for forms is highlighting the specific input field. This makes it scannable for where the errors are popping up. Red is the color that is the most associating with errors. So try to stick to this, your users are expecting it.

TRY VISUAL MARKERS
OR ICONS
Another great way to give the errors more visual weight is using visual markers or icons. By using visual markers vou can get more attention and you can make the error recognizable for those with color blindness.

KEEP IT SIMPLE & STUPID
Users don't like to read unnecessary information, so keep it clear about what's going wrong. To much unnecessary text will bring a cognitive overload and thereby you increase the chance that the user will not read the text. So KISS... Keep It Simple & Stupid

USE INLINE VALIDATION
Inline validation is a great way to provide immediately feedback about what's succeeded or what's going wrong. This make it easily noticeable and you're offering them the option to fix the error immediately. Inline validation isn't always possible if you need to interact with specific servers.

SOME EXTRA TIPS

  • Aim for inline validation
  • Only use inline validation after completing the input field
  • Show error messages next to the field
  • Use a color that's different
  • Always keep it clear and simple as possible
  • Don't use tooltips for errors

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets