When I want to subscribe myself for a newsletter, website, online application or want to sign in, I need to put in my password. This is the easiest way to protect websites/applications and it works, but what I really don’t understand is why passwords appear as dots in the textfield.

To me this is against the basics of user friendlyness because people need to see a clear result of their action, eg. a keystroke. This way you can’t know which dot represents which character (unless you start to count), so there is a possibility that you made a typo in the password. Of course this can be simply overcome with a second textfield which checks if both passwords are the same, but what happens if you copied the first password and paste it in the second textfield? Your subscription is send of for confirmation with the wrong password.

It’s been encouraged to make your passwords longer (8-16 characters) and to use combinations of different characters (abc – 123 – ?!), otherwise the form will not be send away. These kind of demands make it even more difficult to avoid typos. Although I understand that you can’t put just anything in the textfield and you should think this over carefully, that doesn’t mean it can’t be done in a user friendly manner.

The more I think about it, the more I wonder why and when these dots appeared for the first time… I guess it was in the ’90 when only one person had a pc and had to share it with the rest of the village. Whenever the user switched the power on, the others were watching as well, out of curiosity. Back then they had to find a way to scramble the password while typing it into the textfield to keep it a secret. All stupidity aside, this could have been a nice story, no?

The obvious reason why we still set the password field as dots, is security… we didn’t want people to have a peek in the ’90 and we still don’t allow it now. The computers are getting smaller with the year and what started out as a computer for the entire village is now a small electronic device inside your pocket. The pc has never been more personal than now, making the peeking-over-your-shoulder story less likely.

The solution

The easiest solution would be to change the textfield to ‘text’ instead of ‘password’. As I can imagine that this solution is too much for many developpers I have another suggestion found on the website of dynamicdrive.com. For this solution you can keep your textfield as dots but you include a small button next to this textfield saying “switch to text”. With the help of javascript you can change the state of your textfield from ‘password’ to ‘text’, meaning from dots to normal text. This way you can check your password before submitting the form and you don’t need a second password field.

This solutions seems to work just fine but it has its flaws. First of all it requires an extra click from the user which can be annoying for those who go through forms with the tab key. Secondly, what if you checked your password by pushing the button and forgot to change it back to password mode?

For this reason I came up with another idea, no unnecessary clicks and easier to go through the form. The status of the text field is set to ‘password’, but once you enter it with the tab key or mouse click the status is changed to ‘text’ which makes your password readable. When you leave the text field, the status is changed back to ‘password’, making your password again unreadable. Unfortunately, after two days of coding I still didn’t get the result I was hoping for. After searching on the web I’ve found an example made by viget.com.

I would have liked to put the example in this post but it was conflicting with the current version of jquery.

I’ve tried the code in different browsers and it works in Internet Explorer (6,7 and 8), Firefox, Safari and Google Chrome. Special thanks to the people of viget.com

UPDATE

I’ve been looking into free online mail applications and found mailchimp as a nice solution. Apparently mailchimp is using the second solution for the password-in-dots story. Have a look at the image below.

Mailchimp prompts the user to fill in their password only once. With the help of a little checkbox, you can quicly unveil the password to check it for possible typo’s.