Best method of rating passwords

Question

I'm creating a webpage which has user accounts and I'd like input on the best way of rating the user's password.

There are four ways to rate passwords which I have encountered:

1. Rate the password as it is typed having it constantly update every time the text is chagned
2. Rate the password after the user moves the focus off of the textbox
3. Rate the password after the submit button is clicked (but then feedback is impossible unless there is an error)
4. Rate the password after the user clicks a button which has the sole purpose of updating the rating or checking if the password is acceptable (but that's an extra click)

I've always found it annoying seeing red errors to the right of the textbox as I'm entering in the first few characters of my desired password. But going back to change a field I've moved off of already is also annoying.

Answer 1

The reason instant validation is popular is because it minimizes errors, frustration and task time. Luke Wroblewski of A List Apart also performed a great analysis and usability study on inline validation. They call the "mid-typing" style of validation the "while" method and found users were frustrated when the "while" method was used on long, open ended forms, but found a time-delayed variant was helpful for username and password fields. This meant the validation message showed up a little bit after they stopped typing, to avoid the instant error message you speak of.

For username and password questions, we used the “while” method with a short delay in each version we tested. Our early prototyping work revealed this method made the most sense for questions with strict boundaries, such as the set of usernames currently available or the required formatting for a secure password.

Usually we wait until a user has clicked out of a field to validate, but passwords are special, as they're often to-the-letter validated, and one of the most common requirements for a password strength test is "add more characters". Making me lose focus on the field is a pain! In addition, unlike other fields the password is hidden, so if you have to edit it, you probably have to clear out the whole field, rather than clicking inside your email address to correct "johngmail.com" to "john@gmail.com".

Bank of America has a great example of how to do password ratings (note that I don't agree with their limits for passwords):

The validation popup shows up while you're in the field, and instantly lets you know when your password is okay, and when you've met each condition. Trial and error without all the extra clicking!

Answer 2

It's nice to see immediate feedback, but not false failures.

One common pattern with required form fields is to maybe indicate they're required by a small star or "(Required)", but not actually highlight with red highlighting / big "Required" message until validation time, which only happens after you unfocus the control. So if you tab through the field without entering it, only then does it show the validation failure message.

You could do the same with the password field. Don't show anything, until the password is good enough to pass validation, and then show "OK" or "Strength: Good/strong/whatever". Once it's good enough, the validation happens on every key press so if you backspace, for example, it may now show a validation failure. If the user tabs through the field without entering, it can also show the failure validation.

Answer 3

I think you can take advantage of the fact that password fields usually come in pairs (password + repeat). By the time you move to the repeat you can already display the warning. so you can do something like let the user type the password; if it's weak show a tooltip that responds to keyboard input and says "this password is really weak - continue?", and if the user hits Ok you can move on.

Answer 4

To directly answer your question, #1 is the best option as it lets the user know when they have met the awesome password level, which is in theory the point. To address your point of well don't flash red when it isn't an error yet (I leave the field and you wont let me submit this if I don't fix it) then don't display the weak text in color, just leave it gray as help text might be, or present it as help text that says, it would be more secure to include a special character (Tell Me More). Reward me with color once I pass the magical strong password threshold instead of punishing me with the error.

You can then turn the weak text to red after I leave the field to reinforce that I should really change my behavior of using "god" as my password. You can either reduce this back to gray once I click in, or wait till I fix the error.

I would follow this all up with a question of my own though. Why are you rating the users password? If i use P@ssword1 its still a horrible password but most raters will say that's a strong password. None of these items increase security and in some cases, if you make me cause the password to be to complex I end up writing it down.

With current malware etc. password complexity isn't a great deterrent when the browser itself is infected and keylogging everything or allowing the browser to be remotely driven. None of which needs to be a targeted attack when it simply messages the hacker when you start logging into your bank. (Zeus, Spy Eye)

If your looking to improve user behavior, you would be better off checking for the top 20 commonly used passwords and their variations using special characters and nay saying those rather than blindly deciding that This!smypassword is a secure password because it is log enough, includes upper and lower case characters and a special character.

Just my thoughts on the matter.