Error messages should guide the user toward achieving their goal. If something goes wrong, inform the user what they need to do next—briefly, clearly, and without placing blame.
Key Principles:
Provide a way forward and maintain a sense of responsibility.
Use a concise, verb-first approach, focusing on what the user should do next.
Avoid technical jargon and unnecessary detail.
Inline errors appear directly next to the problematic input field, helping users correct issues as they occur. They are often styled with red text or another attention-drawing color.
Example: “Enter a valid email address”
Detour errors appear in a modal or pop-up that halts the user’s progress until they resolve the issue. They momentarily redirect the user’s focus, ensuring the problem is addressed before continuing.
Example: “Log in to continue”
Blocking errors redirect the user to a separate page or screen, typically when a resource is unavailable or an unexpected situation occurs. These errors may provide navigation options or search tools to help the user find what they need.
Example: “Oops, the page you were looking for could not be found. It may have been moved or deleted. Please use the navigation bar above or search bar below to find what you’re looking for.”