UXcellence Exploring excellent user experience

Quick Fix: Hide and Show Passwords to Reduce Login Problems

The user experience starts (and often ends) with the registration and login process on most sites. The more obstacles present in those flows, the less your users will be able to discover the rest of your site or product. Therefore, every moment spent smoothing out the login and registration flow is worth its weight in gold.

Passwords are probably the single most common frustration with any basic account system. Nearly every new system requires a username and password, and yet they all have different rules for what’s acceptable. So users often end up with passwords they don’t remember or typos because the field is obscured.

Showing a user’s password can help to alleviate typos, both in registration and in logging in. To keep it secure, you can add a toggle that allows your user to view their password in plain text. Leave the password obscured by default to place the choice of showing the password on your user.

This technique requires a little bit of Javascript or jQuery, but is relatively easy to implement.

jQuery method

HTML

You simply need a password field with an id="password".

<input id="password" type="password" name="password" />

jQuery

This jQuery will find your input above and add a link below it to create the toggle. The link will have the text “Show password” with a longer explanation in the title and a class of show-plain. The link will switch text and class as the input is toggled back and forth between password and plain text. This way you can style the link differently depending on its state.

$(document).ready(function () {  
  // Initialize the show/hide toggle (so non-JS users don't see it)
  (function($) {
    $('#password').each(function(val) {
      var input = $(this);
      $("<a>").text("Show password").addClass("show-plain").attr({
        title: "Show your password in plain text",
        href: "#"
      }).insertAfter(input);
    });
  })(jQuery);
  $(".show-plain").live("click", function() {
      //cache selector
      var input = $(this).prev();
      //create new text input
      $("<input>").attr({
        id: input.attr("id"),
        type: "text",
        name: input.attr("name")
      }).val(input.val())
        .addClass(input.attr("class"))
        .insertAfter(input.prev());
      input.remove();
      //change link text and attributes
      $(this).text("Hide password").removeClass("show-plain")
        .addClass("show-hidden").attr({
        title: "Hide your password"
      });
      //stop link being followed
      return false;
  });
  $(".show-hidden").live("click", function() {
      //cache selector
      var input = $(this).prev();
      //create new password input
      $("<input>").attr({
        id: input.attr("id"),
        type: "password",
        name: input.attr("name")
      }).val(input.val())
        .addClass(input.attr("class"))
        .insertAfter(input.prev());
      input.remove();
      //change link text and attributes
      $(this).text("Show password").removeClass("show-hidden")
        .addClass("show-plain").attr({
        title: "Show the password in plain text"
      });
      //stop link being followed
      return false;
  });
});

CSS

.show-plain, .show-hidden {
  display: block;
  padding: 4px 0 4px 24px;
  background-position: center left;
  background-repeat: no-repeat;
}
.show-plain { background-image: url(show-icon.png); }
.show-hidden { background-image: url(hide-icon.png); }

Result

An example of password masking at work

Considerations:

  • Don’t leave the password visible by default. Always let the user specify whether to show or hide their password.
  • This technique can also replace the method of using two password fields to verify a password during registration.
  • Never have this toggle on a field where the password (or other sensitive data) is prefilled from your database. (Malicious users could navigate to this page while the user is away from their computer and use the toggle to discover the data.)
  • Consider turning autocomplete="off" on a password field if you use a password toggle. (To prevent the above situation where a malicious user goes to a site while the user is away from their computer. Users often save their login info to have their browser prefill them.) Doing this, of course, could frustrate those users who do rely on their browser to prefill login info so understand the costs and weigh them before deciding one way or the other.
Like this? Please share: