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.

4 Answers 4


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 "[email protected]".

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

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!

  • 1
    However, that Bank of America password validation is awful, limiting a password to 20 characters, and not allowing spaces or other symbols should not be done. A password should be able to contain ANYTHING.
    – CaffGeek
    Commented Nov 10, 2011 at 22:04
  • +1 good answer. However, I'm not sure enough time passes between having typed all the letters of the password and hitting tab and moving to the next field. Commented Nov 10, 2011 at 22:40
  • @Chad I'll agree their limits (no spaces?!) are terrible, but the UX of helping you through the validation is great. Who came up with the idea of "invalid symbols" for a password?
    – Ben Brocka
    Commented Nov 10, 2011 at 22:57
  • 1
    Inversely - when signing up for slashdot - don't forget to check every character conforms to this Commented Nov 10, 2011 at 23:05
  • @RogerAttrill well that's what happens when Regex classes decide your input =p
    – Ben Brocka
    Commented Nov 10, 2011 at 23:41

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.


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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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