Showing input error Flows

Instructions for editing information without interrupting input.

9 checks · 3 content groups

Checklist contents

Review progress

Step by step in flow

Track status, feedback, and next actions every step of the way.

Start with a neutral input boxDon't report an error before the user has a chance to fill in the field.

Try interacting

Allows input without interruptionWhile typing, keep feedback just enough and avoid errors appearing whenever the content is unfinished.

Try interacting

Check when the user leaves the fieldAfter losing focus, combine the border or icon with a message stating how to edit the data.

Try interacting

Give users a chance to correct itWhen the user returns to an input field, temporarily clear its warning while they edit, then validate the field again at the appropriate time.

Try interacting

Start the task

Compare information and presentation in context of use.

Check when the user has enough informationAvoid reporting errors before starting; Choose the appropriate time after entering or sending.After correct correction, update the status; Don't let old errors persist until another submission.Example “Email needs to be in the form name@example.com” attached right to the email box, not just at the top of the page.Explain clearly how to fix itExplain the specific request instead of just stating it is invalid.Attach the message to the error fieldUse labels, statuses, and relationships so the support tool reads errors in the correct cell.

Feedback and results

Try the operation, change the status and continue working.

Add color accentsUse text or symbols so that people who don't discriminate by color can still see the error.Keep data and editing order clearAfter an erroneous submission, move it to the appropriate location and do not delete fields that were filled out correctly.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Check when the user has enough information

After correct correction, update the status; Don't let old errors persist until another submission.

EXAMPLES

Usage examples

Check when the user has enough information

“Email needs to be in the form name@example.com” attached right to the email box, not just at the top of the page.

Showing input error Flows

Step by step in flow

Start the task

Feedback and results

How to review

Check when the user has enough information

Usage examples

Check when the user has enough information

Find a checklist

No checklists found