<?xml version="1.0" encoding="utf-8"?>

Provide helpful error messages

Provide helpful error messages Bad Practice
Provide helpful error messages Best Practice

When users fill up forms while making a purchase or booking a flight ticket, they want to stay informed about what's happening in the system.

To make the error inputs easy to notice and understand:

  • Indicate error inputs using a prominent, contrasting color (usually red) and a relevant icon
  • Politely describe what happened and what users should do to fix the problem. 
  • Apply real-time, inline validation rather than submit-time modals. The latter breaks the flow and distracts users. Errors that appear immediately allow users to correct their answers before moving on.[1]
Improve your UX & Product skills with interactive courses that actually work