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.

current design

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.

empty form

Correct input

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

valid state

Incorrect input

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

Incorrect input


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.


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

  • I know red green color-blind is an issue, but in general dark-blue/gray is not a color associated with error so I am not surprised they don't detect the error. – DasBeasto Mar 24 '16 at 17:45
  • 1
    @DasBeasto color depends on the two fields, this is unique to each user, and we don't store user's information. It's green and dark/blue for me, but to another user, that is a different color – Guillaume Vincent Mar 24 '16 at 17:47

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.