Hace unos meses, a raíz de un de un artículo de Jakob Nielsen, comentaba la posibilidad de hacer más usables los formularios de login mediante un checkbox para mostrar y ocultar la contraseña.

Y aunque la idea no me parecía descabellada, pasó de largo por mi cabeza como tantas y tantas cosas que vemos al día por Internet.

Sin embargo, después de tener la posibilidad utilizar un móvil para conectarme a Internet, me doy cuenta de cuan engorroso puede llegar a ser meter nuestra contraseña utilizando el teclado del móvil, y lo frustrante que es no saber si lo que has introducido es la contraseña correcta.

El resultado de todo esto es un pequeño script en jQuery que nos permite mostrar y ocultar el valor de un input de tipo password.

DEMO | DESCARGAR EJEMPLO

Más info, después del salto

La forma de hacerlo es muy sencilla. Simplemente creamos un input de tipo “text” donde copiaremos lo que se escriba en el password, y viceversa. Mediante el checkbox, mostraremos u ocultaremos ese input con la contraseña “legible”.

Mediante el HTML, creamos el típico formulario de login, con sus campos usuario y contraseña:

<form action="#">
     <fieldset>
          <p>
               <label for="user">Usuario</label>
               <input type="text" id="user" />
          </p>
          <p>
               <label for="password-hide">Contraseña</label>
               <input type="password" id="password-hide" />
          </p>
          <p>
               <input type="submit" id="send" value="Enviar" />
          </p>
     </fieldset>
</form>

Con jQuery hacemos el resto.

jQuery(document).ready(function() {
     var passwText = jQuery('#password-hide');

     // Creamos el input que contendrá la contraseña "visible"
     // y el checkbox
     passwText.after('<span class="showpass"><input type="text" id="password-show" /><input type="checkbox" id="toogle-check"/><label for="toogle-check">Mostrar Contraseña</label></span >');
     var toogCheck = jQuery('#toogle-check');
     var inputText = jQuery('#password-show');

     inputText.hide();

     // Recogemos los caracteres introducidos como contraseña
     // y los compiamos al otro campo
     inputText.keyup(function() { passwText.attr('value', inputText.attr('value')); });
     passwText.keyup(function() { inputText.attr('value', passwText.attr('value')); });

     // Click sobre el checkbox
     $(toogCheck).click(function() {
          if( toogCheck.is(':checked') ) {
               inputText.show(); passwText.hide();
          } else {
               inputText.hide(); passwText.show();
          }
     });
});

Creamos el campo que contendrá la contraseña visible (#password-show) y el checkbox que los habilitará. Es necesario crearlos con jQuery, ya que si el usuario no tiene activado javascript en su navegador, no le aparecerán campos inservibles en el formulario de login que le puedan confundir.

Con el evento keyup de jQuery, recogeremos los caracteres de la contraseña para tener exactamente igual ambos campos (#password-hide y #password-show). Mapeamos el evento keyup de los dos input, ya que el usuario también puede introducir su contraseña en “modo visible”.

Por último, con el evento click controlamos el checkbox, para mostrar el “input password”, o el “input text”.

DEMO | DESCARGAR EJEMPLO

Así de rotundo se muestra Jakob Nielsen (uno de los mayores expertos en usabilidad web) en su último artículo publicado en su web.

Una de las pocas cosas que no han variado en internet durante toda su existencia, es la “ofuscación” de las contraseñas en los formularios de registro y login. Es más, me atrevería a decir que en el software en general e incluso en otros escenarios, como los cajeros automáticos, ha sido siempre igual.

La razón cae por su propio peso: seguridad. El objetivo de utilizar esta técnica es evitar posibles “espías” que se encuentran detrás nuestro a la hora de introducir una contraseña.

Sin embargo, si pensamos en ello, tal y como comenta Nielsen, un entrenado criminal tan solo debería fijarse en las teclas que presionamos para conocer nuestra contraseña.

Pero, ¿porqué deberíamos dejar de usar esta técnica? Nielsen intenta convencernos con dos arguementos:

1. Los usuarios comenten más errores cuando no pueden ver que están escribiendo, y eso les hace sentirse menos seguros. Esta degradación de la experiencia de usuario provoca que este sea menos receptivo a la hora de loguearse en nuestra web, pudiendo perder cuota de mercado en sitios comerciales, o en caso de intranets, que aumenten las llamadas al soporte técnico.
2. Al sentirse inseguros escribiendo sus contraseñas, muchos usuarios optarán por contraseñas más simples, o directamente por copiar-pegar desde un archivo con todas las contraseñas. En ambos casos, realmente sí que se reduce la seguridad.

Además, la ofuscación de contraseñas puede crear un grave problema de usabilidad en dispositivos móviles con teclados físicos, donde debemos realizar varias pulsaciones en una misma tecla para obtener el carácter deseado.

Sin embargo Nielsen es realista y reconoce que, en algunos casos, puede ser conveniente ofuscar la entrada de nuestras contraseñas. Utilizar wi-fi sitios públicos, donde realmente no sabemos quien puede estar mirando, podría ser uno de los escenarios problemáticos.

Su solución es simple: ofrecer un checkbox para poder activar y/o desactivar la ocultación de la contraseña. Y en sitios donde la seguridad deba primar (bancos online, etc…) este debe estar activado por defecto.

Como siempre, Nielsen no deja indiferente a nadie.

¿Crees que realmente la sensación de comodidad al ver lo que escribes, supera a la posible sensación de “falta de seguridad” que puede surgir?

¿Tanto se ofusca un usuario cuando se equivoca de contraseña como para dejar por imposible el login?

Personalmente, creo que la balanza no se inclina tanto a favor de la usabilidad como para Nielsen, sin embargo la opción del checkbox no me parece del todo mala.

Artículo original | Stop Password Masking

Vía | @vladocar