Password Strength Indicators: Make Them Useful and Accessible

So the time has come for your company or client to add a password strength indicator. How do you do this in a useful and accessible way? Here are some ideas to get you started.

1. Show a Progress Bar

Indicators that display a progress bar are visually helpful. Since requirements for what constitutes a solid password vary widely from site to site, it is helpful to have the progress bar reflect how well folks are doing. I feel like a password ninja when I hit the end of the bar.

2. Label All The Things

So having an indicator  progress bar is awesome, but for folks who are using screen readers, they’re completely useless unless you label them. Also, color coding your indicator is fun, but if your site or product is used internationally, keep in mind that colors vary widely in meaning. Give your indicator some easily understood labels. We went with Very Weak, Weak, Fair, Strong, & Very Strong, and they seem to get the job done.

3. Use Your Words

You know what is terrible? Trying to register on a website and having it tell you your password isn’t strong enough, but having absolutely no idea at all what they are looking for. Give your users a hand, and give them some examples! We call this inline UA in our products, just a little line of text to give them a boost before they fill out the form field, rather than waiting for them to hit an error or alert and get frustrated.

4. Get Rid of Cryptic Errors and Alerts

“Your password isn’t strong enough” is NOT a helpful error message. Telling that them they can’t enter sequences, or repeating numbers, or they have to have a capital letter and special character IS helpful. Fill your alerts and errors with useful applicable information!

5. Let’s Get Started!

Here’s a snazzy jQuery password strength indicator that you can play with. Enjoy!

*Full credit goes to Sara Hardy @snh9905 for finding this gem, which was created by @matoilic and lives on @github!

3 thoughts on “Password Strength Indicators: Make Them Useful and Accessible

  1. Error message errors:

    In many web applications, there is a false assumption that all of the users are already experts. In many situations, the placement of a simple bit of embedded assistance will help the novice and intermediate users know exactly what to do. Have you ever, for example, tried to sign up for something where you enter a new password, only to get an error message that claims that your password is invalid? The error message explains that the password must contain a number, or a special symbol $%^#&~! The best error message is one you do not have to display! Do your best to provide the labels and/or other information to your end-users so that they can get things right the first time. Working with a technical writer and usability engineers, the text will be more clear and actionable.

    1. Exactly! It’s the worst! We call it “inline UA” in our organization, and it makes our users happy! They know before they even begin filling out the form exactly what we’re looking for. It makes a giant difference in customer satisfaction when you consider their perspective as you add the little big details to your designs!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s