passive detection of a mistake between two fields in a form

Question

I'm creating a password generator that derive password from personals informations. I need to help users detect any mistake on one of the two fields username and password.

For now, users have to click on the eye icon to reveal their password and check for any typo.

Default state

I want to make the detection of typo less obtrusive. So, I've redesign my UI to display a color in the left border of the form.

Correct input

When the user has finished to fill the username and password fields, the left border change color.

Incorrect input

If the user make a typo, the derivation is different, hence the color is different.

Testing

Our first test show that users don't understand that the color correspond to the combination of the two fields. They don't detect the error. Worse, they don't even see the color change.

Question

Does a better way exists to help our users to detect the mistake ? (e.g. color transition longer, blink, repositioning)

Answer 1

Even when you were talking about the color change, I still didn't notice it. The problem is, that color placement isn't associated with the action. It's kind of like the site's background color changing because you made errors with the form.

The issue: it's not where their eyes are looking. Users will not associate that response with the action because it's not close to where the action is performed. Think of the gestalt theory, where grouping elements together create an association. And that doesn't.

What I recommend is apply the color change either on the input fields itself, or close to it (a line on the top).

Always follow the user's eye flow, because if it doesn't, it will not be noticeable.