Problems while typing the password if user cannot see it:
- user should check if CAPSLOCK is disabled
- user should check current keyboard language
- user should see last typed letter if user was interrupted while typing the password
Solution: unmask the password field. You may use Easy-to-use WordPress plugin to unmask password field.
It would be easier to ask for a user's password only once during registration.
The problem: The user could make a mistake while typing the password once because of hiding letters.
The solution: The user could have a toggle button for showing or hiding the password.
Working example with toggling the visibility of the password. This approach could be used on the registration or login page.
Are there any benefits to asking a user's password twice during registration vs just not masking the password? Why would you ask twice?
P.S. Jakob Nielsen about unmasking the password:
- Users make more errors when they can't see what they're typing while filling in a form. They therefore feel less confident. This double degradation of the user experience means that people are more likely to give up and never log in to your site at all, leading to lost business. (Or, in the case of intranets, increased support calls.)
- The more uncertain users feel about typing passwords, the more likely they are to (a) employ overly simple passwords and/or (b) copy-paste passwords from a file on their computer. Both behaviors lead to a true loss of security.
Update: I created a WordPress plugin which unmasks the password field. So you may use it if you want to.
Update 2: WordPress.com use same technique to show and hide password.
Update 3: Internet Explorer 10 added a toggle password visibility icon. It looks like this:
Update 4: Article about unmask password on smashingmagazine.
Code:
$(function() {
$('.password-toggle').click(function() {
if ($(this).find('.icon').hasClass('icon-eye-close')) {
$(this).find('.icon').addClass('icon-eye-open').removeClass('icon-eye-close');
$('.password').prop('type', 'text');
} else {
$(this).find('.icon').addClass('icon-eye-close').removeClass('icon-eye-open');
$('.password').prop('type', 'password');
}
});
});
html:
<form class="well form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label text-right" for="input_username">Username</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="input_username">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label text-right" for="input_password">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control password" id="input_password" value="$ecReT-p@s$">
<span class="btn btn-default password-toggle" title="show or hide the password"><i class="icon icon-eye-open"></i> show or hide the password</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<input type="submit" class="btn btn-default" value="log in" />
</div>
</div>
</form>
Update 5: Unmask password field on focus and hide password on blur:
sfiddle.net/webvitaly/P68v9/
<p>click inside the text input to unmask the password:</p> <input type="password" onfocus="this.type='text'" onclick="this.type='text'" onblur="this.type='password'" value="p@s$w0rd"/>