A little while back Jakob Nielsen wrote an article on usability with respect to password fields. His argument is that by masking password fields users do not receive any real feedback on their input which leads to possible password entry errors that remain unknown because the user has no means to check where in the password they entered the error occured. This leads users to creating less-complex passwords that will probably provide for fewer entry errors.
I would suggest rather that users utilize a program that stores passwords for them in an encrypted database. The user need only remember one password (the key of the encrypted database). This would then allow users to generate long, complicated and very random passwords that are unique to each account (and each web site). All the user need do is double-click on the web site entry in their password database and the password is copied onto the clipboard for a limited amount of time before being wiped clean. The benefits of such an arrangement are many and also allow the standard practice of masking password fields to continue without hindering the end-user's ability to use a given application. Usability, if anything, is increased (data-entry errors are removed) along with security. It's a win all around.
Many applications already exist that do this such as Password Safe and KeePass. Both use very sturdy encryption algorithms to protect your password database and both are very easy to use.
But, alas, it's up to the end-user to take the initiative to download and install such a program (preferably to a memory stick for portability) and learn how to use it. And not many users (from personal experience) are that motivated enough to take such initiative. Furthermore, what happens for those times where a user is either unable to load the application via a thumb drive (public terminals)? And, of course, if the end-user loses the password database file they will be locked out of all their systems. Not even all those with the motivation to install the use the program will also take the necessary steps to make backups regularly.
So maybe we're back at where we started. Then perhaps we should take another look at password fields and see if there is anything we can do.
We need password fields to provide feedback to the user, while at the same time protect the user from any over-the-shoulder spying. What can we do? Perhaps we can help the situation out a bit with a little bit of CSS.
What's happening here is the password input element has it's visibility property
set to "invisible". This hides the element, but we can still interact with (enter text into) it.
Should a user need to check what they've entered they merely hover their mouse cursor over
the element. I've also made teh contrast between the background and text color of the input box
very low to help protect the password when it is visible.
There are a few problems with this approach if we're focusing in on usability. Users with no mouse will be unable to view the password they're entering into the field. There's also a lack of feedback acknowledging that keystrokes are being registered by the input field. And the low-contrast color scheme will create problems for users with low-contrast sight issues.
We could always create a toggle switch to mask and umask passwords.
This would mask fields by default, but allow those with Javascript support
to unmask the field. Users without a mouse would be able to work with such a form as we
no longer rely on :hover CSS trickery. It's a simple Javascript solution.
There are far better, more comprehensive solutions out there which make use of Javascript.
I would like to instead focus on pure HTML/CSS solutions.
So what else could we try?
In this approach I've styled the input box in such a way that only one character at a time will appear in the box and even then only when the text box has focus. Once the cursor leaves the box the characters are no longer visible.
This is along the idea of the iPhone/Blackberry approach where only the last character you entered is displayed. This will work with non-mouse users and we don't have to worry about low-contrast sight users. I've doubled the font size a bit to make easier to use, but you could keep it a small font size if desired.
It's not perfect. Viewing your password one character at a time can be a bit odd. And if you use the arrow keys to go back to the start of your password then move forward you'll see that 1 1/2 characters appear in the box (a product of how the cursor position changes what's viewable in the text box).
Perhaps viewing 2 or even 3 characters at a time would make this a bit more usable.
There are some pure-CSS tricks, but each has its faults. If we believe javascript support is a viable option there are probably better, more accessible solutions. This is just a quick experiment to see what might be possible to help with the (perceived) problems with password masking. Play around with it a bit if this is something that interests you. I'm sure there's a solution that would keep most people happy, it just needs to be found.