Skip to main content

When should the error state on an input field disappear? [Resolved]

I've seen two types of behaviour circulating; one where the error state disappears as soon as you start typing a new input (so when the input field is in focus), and one where it stays until the input is 'accepted' (for example, a valid email format is typed).

I can imagine it is beneficial to keep the error state's context until the user has fixed their input, but my team has built it the other way around.

Which interaction is preferable and why?

Edit: Here's the error state I currently use: Error state of input field

Currently the built version removes the error state (and returns it to its normal state) as soon as it is in focus. I intended for the error state to stay until the input of the field had been 'corrected'.

Question Credit: Wanda
Question Reference
Asked July 11, 2019
Posted Under: UI UX
3 Answers

The error message should stay.

There is a design principle 'recognition rather than recall'. Meaning the user should not be forced to remember things but rather give the information (or options) needed to complete the task. Someone could argue that often the error is quite easy to understand like 'insert a valid email address' or the like. But it can also be more complex like password rules (well, they should actually be communicated before but just as an example). A user might need this reference while typing. Taking away this information is a pain for the user.

So it is better to show the error message up until the input is valid. The validation info should disapear as soon as the input is correct (do not wait until the 'lost focus' this would be confusing).

credit: BrunoH
Answered July 11, 2019

Great question, I partly agree with @BrunoH here.

The 'Recognition rather than recall' heuristic makes it easier for the users to remember what they did wrong. However, there is a 'bad' side to this. If the user is interrupted during the error correction process, for instance: They get a phone call, the doorbell rings etc. they might think the current input is wrong.

This is where the heuristic 'Visibility of system status' comes in to play, I believe the notification should change when a correct input has been given to something that confirms they did the right thing.

enter image description here

I've created an example with what I mean, if I got interrupted after changing the input I would see an error message. With the notification of the system status I would see that my input is correct.

As a final note, I would try to incorporate the previous error in the status text ('Recognition rather than recall'). So in my example I say 'is not taken' while the error message was 'username is taken'.

credit: Kevin M.
Answered July 11, 2019
Your Answer