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.
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.
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.