Undesigning the password strength indicator

Updated 30/12/2013

It’s a small unloved corner of the web but I’ve never seen a password strength indicator that I’m happy with. They all seem to be over-designed. A quick Google image search just returns huge amounts of ugliness, and a Dribbble search shows much the same but with more pixel-polish.

The standard design pattern is a bar underneath or to the right of the password input field that starts out short and red and gets longer and greener until as the password gets longer.

pw_indicator_ebay

Ebay’s password strength indicator

I have a few problems with this pattern:
1) It increases the perceived complexity of the registration form. This is likely to reduce the amount of people who even start to interact with your registration form. Passwords are a cause of fear and doubt—the last thing you want to remind a person of in a registration form is password-pain.
2) It takes up a good amount of space. Space is at a premium on mobile screens.
3) The acceptability of passwords is binary: either the password meets the rules the website has set or they don’t.

4) The length of a password doesn’t necessarily correlate with it’s security; “BCx3DsG” is more secure than “password” but shorter. In fact the password strength indicator shouldn’t be concerned with the strength of a password but rather whether the password meets the minimum standard chosen by the website. Perhaps that’s the whole problem: password strength indicators have been miss-named. We choose a minimum security level for a website’s password and then the user need is to understand if their chosen password matches our rules. Password acceptability indicators.

Redesigning password acceptability indicators

If we are designing password acceptability indicators we need to understand the rules that make the password acceptable. These rules generally have two factors:

  1. The length of the password. Commonly a password must be at least 6 or 8 characters.
  2. The type of characters that are required. Commonly a password must contain a mix of letters and numbers or special characters.

Some sites go further and prevent you from choosing common passwords such as “password”, “123456” or your name, but for most it’s a combination of the first two.1 These two factors have a fundamental difference (with masked passwords): the length of the password it visible, the mix of characters in a password is invisible. For the length of the password all the information we need is already contained in the basic password field, we just need some emphasis bringing it to the user’s attention. A simple line in the background will serve as a target the user must pass for it to be acceptable. Making the dots slightly larger and increasing their spacing helps.

The information about the mix of characters used in the password is not visible on the page as the password is masked.  so in order to provide the feedback we must add something to the page. Text instructions like “Add a number” or “Add a letter” is probably the simplest solution.  But we do have the rules that describe the acceptable password, so we can highlight ones that are not currently complied with without adding any new elements to the interface.

pw_indicator_1

It would be possible to show feedback on both factors at the same time. I think it’s preferable to show feedback about only one factor at a time—this feels like a simpler, quieter experience (user testing might suggest otherwise though). Until the user has typed in at least 8 characters I don’t think we need to prompt them to add a number or letter to meet our rules. It’d probably just feel a bit naggy if we did.

pw_indicator_3

If the password meets our criteria we can just show a tick  replace the rules text with “Pasword OK” and turn the dots green for feedback.

pw_indicator_2

That’s pretty much my current thinking on password strength indicators. I’m sure the design will evolve as it gets merged into the page design and goes through a visual design process and user testing. (Having written this has given me some ideas—I’ll update if I change the design.) Updated!

Why do I care about the minutiae of password creation? Registration forms are very often the start of a relationship with our users—optimising the form as far as possible will increase the chances that users will take the time to sign up. Once the user has signed up and started that relationship we have a much richer set of material with which to craft better experiences for them.

Notes: 1) Sony have quite complicated rules about their password acceptability—no doubt a response to the embarrassing hacking and leaking of their user data. The high lighting of the rules that your passwords meet is a nice feature but perhaps not intuitive on first use.

Sony's password strength indicator

Sony’s password strength indicator

Comments are closed