Password Strength Meter

Gmail

What

Give the user immediate feedback on the validity and strength of a new password while it is being typed.

Use when

The UI asks the user to choose a new password. This is quite common for site registrations. Your site or system cares about having strong passwords, and you want to actively help users choose good ones.

Why

Strong passwords protect both the individual user and the entire site, especially when the site handles sensitive information and/or social interactions. Weak passwords ought to be disallowed because they permit break-ins.

A Password Strength Meter gives immediate feedback to the user about his new password—is it strong enough or not? Does he need to make up a new one, and if so, with what characteristics (numbers, capital letters, etc.)? If your system is going to reject weak passwords, it’s usually best to do it instantly, not after the user has submitted the registration form.

How

While the user types his new password, or after keyboard focus leaves the text field, show an estimate of the password strength beside the text field. At minimum, display a text and/ or graphic label indicating a weak, medium, or strong password, and special wording to describe a too-short or invalid password. Colors help: red for unacceptable, green or blue for good, and some other color (often yellow) in between.

If you can, show additional text with specific advice on how to make a weak password better—a minimum length of eight characters (for instance), or the inclusion of numbers or capital letters. A user might get frustrated if he repeatedly fails to produce a valid password, so help him be successful.

Also, the form containing the password field should use Input Hints or other text to explain this beforehand. A short reminder of good password heuristics can be useful to users who need reminders, and if your system will actually reject weak passwords, you should warn the user about it before he finishes the form! Many systems require a minimum number of characters for a valid password, such as six or eight.

(Remember, never actually show a password, and don’t make suggestions of alternative passwords. General hints are all you can really give.)

An explanation of password security is beyond the scope of a UI pattern. There are excellent online and print references for this topic, however, should you need to understand it more deeply.

Examples

Blogger’s Password Strength Meter, shown below, displays five states, one of which (“Too short”) tells the user specifically how to fix the password—eight characters are required. The blue link puts up a window describing how to create a strong password, and there is an Input Hint (not shown) on the right side that tells the user about the eight-character minimum.

Blogger's five states

MSN shows only three states. It also uses an Input Hint to describe the minimum—”Six-character minimum with no spaces”—and offers a link to a more detailed explanation. This meter is visually more heavyweight than Blogger’s.

MSN's three states

Yahoo! offers specific, detailed password advice in two different Input Hints that appear when the password field receives input focus.

Yahoo! signup form

In other libraries

Password Strength Meter at UI-Patterns.com

Code to do password checking is available for JavaScript and other languages. Look online not just for the term password strength meter but also password meter, password checker, and other variations.