Skip to main content Skip to secondary navigation Accessibility Feedback

Password Usability

For the last few months, Luke Wroblewski has been advocating for more usable password fields:

Here’s how a typical password field works: you enter a character, it displays a “secure” response in the form of a •. What’s wrong with that, you may ask? Very simply put, there’s no way for you to check your work by seeing what you entered. Which turns out to be very useful when you’re forced to use a minimum amount of characters, some punctuation, and the birthdate of at least one French king for your password. So people often submit incorrect passwords and head into downward usability spirals.

The problem is even worse on mobile devices, where tiny buttons, fat thumbs, and a lack of tactile feedback make it even easier to type in the wrong thing.

A Solution #

The recommended solution? Give users the option of hiding or showing their password as they type. That’s what Luke does on his web and mobile app, Polar. Several others, including Microsoft, Amazon, and LinkedIn, have taken this approach as well.

A screenshot of the Polar app login screen

The team at Cloud Four wrote a handy little script for enabling this type of behavior. Unfortunately, it’s dependent on jQuery and comes pre-styled. That’s great if you want something plug-and-play, but it doesn’t give you as much flexibility as a developer.

Introducing X-Ray #

This is all a long winded way of introducing X-Ray, a framework-free, style-agnostic, progressively-enhanced script I wrote that lets users show and hide passwords.

A screenshot of X-Ray

You can turn any button or link into a password visibility toggle by adding an .x-ray class to it. Data attributes let you set which password field to toggle, and whether the password should be hidden or visible by default. You can change the toggle text/graphics based on whether or not the password is visible, too.

Modern HTML5 browsers get the enhanced experience, while older browsers receive a traditional field with a masked password.

Download X-Ray on Github.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests