9392 shaares
223 private links
223 private links
- Due to color vision deficiencies, it’s a good idea to always complement error messages with an icon
- Additionally, it might be a good idea to guide users towards specific issues of the form with an error summary.
- Never cover user inputs
- First of all, we avoid tooltips that open on hover and display the tooltip only once tapped or clicked.
- Error message position:
- they should be placed above input for various reasons, but it costs layout shifts. In doubt, a collapsible accordion instead might be a better idea there.
- they should be placed inline in tables. One of the simpler patterns is to display the error message in the same row where the content lives.
- Avoid toast error messages
- Establish stop-words for your error messages: they should never be used. See Error messages
- Provide Examples Of Correct Input or guide the user to the expected input. For example, "IBAN starts with the country code. For example, DE or AT.
- Display Error Summary on the top
- Additionally, you might want to adjust the favicon and the title of the document if errors do appear,
