Telling users passwords don't match and aren't strong enough
I have two functions in my user registration form
- One checks the password and confirmed password are the same.
- The other checks if the password is strong enough.
I have two presentation related questions
- What words should I use if the passwords don't match or isn't strong enough? I have a text field beside the first password which is initially empty but gets updated as each character is typed in (I can add a second text field beside the confirm password part).
- When and in what order should the functions be called? For example if I only call the passwords match function on the confirm password section then if the user goes back and changes the first password things will get messed up. If I call the passwords match function at the first time the user types in the password then it will override the message about the password not being strong enough or the strong enough password will override the "password don't match" message.
The function that checks if the password is strong enough is real simple, just to prevent "123" and password. In the future I'd like to make an option to unmask the password and only have one field and no confirm.
I find progress-bar-like indicators of password strength a very nice feature. (The bar is updated with every character.) They're often color coded and red until the strength has a value of "strong" at which point they turn green, indicating it's acceptably strong. But there should be something besides the color change to indicate that it's acceptable.
Keep it simple:
- As the user types into the first textfield, have a strength indicator near by telling the user if their password is strong that updates as they type. Don't enable the confirm field until they have entered a password that meets your requirements.
- When they tab into the second field to confirm, have a label next to it that updates as they type saying whether the passwords match.
- If the user goes back to the first text field and makes a change, blank out the confirm textfield and make them enter the whole thing all over again.
Your end goal of eventually having an unmasked single field is a good one. I left them unmasked in the diagram below for the sake of demonstration.
The key take away is: focus your user on one task at a time, and validate once the user has completed that task and then move them to the next step in the workflow. Give real time information about their status in that step in the workflow.
In the Entered Password part I notice you have "Password doesn't match". When should that appear (as opposed to being blank)? For example, after the first character in the Confirm Password is typed or when focus is put to the element?
It could be either. One option is to just display "Password doesn't match" as soon as they focus on the textfield. Another is to have it say "Please re-enter your password" when the second textfield is enabled and then as soon as they enter a char switch to "Password doesn't match"
In regards to the second option don't you think it's kind of redundant to have "Please re-enter your password" and above the text field say "Confirm password"?
One option for the "don't match" warning would be to show nothing so long as what the user has typed so far in the second field matches the _beginning_ of what's in the first field. In "normal use" this would prevent a premature "don't match" warning (leading to an exasperated "_I know they don't match, I haven't finished typing!_" reaction in many users).