Error messages

January, 2022


Communication creates trust. In a real-life, when a person withholds information or makes decisions unilaterally, the others start losing trust and feel that the relationship is no longer on equal footing. Same thing happens with system interaction. If an error occurs, communication need to be clear and users shouldn’t have to memorize the instructions in order to fix the situation.

Input fields

In case there is no inline validation, input fields in error are highlighted after user submit the form or trigger a secondary action.

Error is triggered by main action of the page

Display a message at the top of the form, or screen, summarizing the fixes needed and any additional explanation.
Use color and icon and provide help text to inform about validity/no validity of data.

Error is triggered by a secondary action

Display a message in the section and use color and icon and provide help text to inform about validity/no validity of data.


App errors

If some part of the system is not currently functioning, this is something that all users should know about it so say it with text.

Blocking normal operation of a page

If entire page is in error, block user flow and alert him with modal and then direct him to an error page.

Blocking normal operation of a section

If a section of the page is in error (but rest of the page works), replace all section by a contextual message

Peripheral error

For non critical/not persistent event, use a self closable toaster