Changing the login experience – Changing input text into a password

After having attending the San Francisco An Event Apart 2012, I was really influenced by what Luke W said about login system. As he mentioned, we regularly log somewhere throughout a single day. However, this comes with some frustration that we – developer/designer – know about but we never try to fix since it’s the “industry standard”.

Frustrations

The first frustration about login systems is password as nobody wants to remember them. On some websites, it’s a minimum of five characters, on some its a minimum of eight with a digit number, a capital number, can’t be similar to your old password and bla bla bla. It’s frustrating.

The second is that we don’t see what we type. How many time have you gone and typed your password and doubted yourself… what did you do ? You erased it all and started again!
On a mobile, Apple introduced a delay so that you can see your letter/digit before it turns into a circle. Well, that helps a bit but it still frustrating if you type fast.

Another frustration is when you go on a website thinking that you already have an account, you go through the process of putting your email/username, your password, press submit, and you discover that you actually don’t have an account. Now you have to create an account.

All of theses situation can cost money to a company. If your login system is not user-friendly and your customer gets frustrated, he/she may just give up. Imagine this with an e-commerce website having filled your cart and then getting frustrated with login to your account.

Solutions

Luke W suggested to directly show the password field as a text input and giving the user the option to hide the password. This make sense since most of the time, there’s no one over my shoulder to check my password. Showing the password as a text makes it easier for anyone to login. Using jquery, this can be done like this

<label>Password</label>
<span id="hidepassword">
    <input type="checkbox" id="passwordCheckbox"> 
    Hide password
</span>
<input type="text" name="password" class="span12" id="password" />

$('#passwordCheckbox').click(function() {
	if ($(this).is(':checked')) {
			$('#password').get(0).type = "password";
	} else {
			$('#password').get(0).type = 'text';
	}
});

The post Changing the login experience – Changing input text into a password appeared first on Coding Insight.