Mejores prácticas para el formulario de inicio de sesión

Utilice funciones de navegador multiplataforma para crear formularios de inicio de sesión que sean seguros, accesibles y fáciles de usar.

Sam Dutton

Si los usuarios alguna vez necesitan iniciar sesión en su sitio, entonces un buen diseño del formulario de inicio de sesión es fundamental. Esto es especialmente cierto para las personas con conexiones deficientes, en el móvil, con prisa o bajo estrés. Los formularios de inicio de sesión mal diseñados obtienen altas tasas de rebote. Cada rebote podría significar un usuario perdido y descontento, no solo una oportunidad de inicio de sesión perdida.

El siguiente es un ejemplo de un formulario de inicio de sesión simple que muestra todas las prácticas recomendadas:

Lista de verificación

• Utilice elementos HTML significativos: <form>, <input>, <label> y <button>.
• Etiquete cada entrada con una <label>.
• Utilice los atributos de los elementos para acceder a las funciones integradas del navegador: type, name, autocomplete, required.
• Otórgueles a los atributos de entrada name e id valores que no cambien entre cargas de página o implementaciones de sitios web.
• Coloque el inicio de sesión en su propio elemento <form>.
• Asegure el envío exitoso del formulario.
• Utilice autocomplete="new-password" e id="new-password" para ingresar la contraseña en un formulario de registro y para la nueva contraseña en un formulario de restablecimiento de contraseña.
• Utilice autocomplete="current-password" e id="current-password" para ingresar la contraseña de inicio de sesión.
• Proporcione la función Mostrar contraseña.
• Utilice aria-label y aria-describedby para las entradas de contraseñas.
• No duplique las entradas.
• Diseñe los formularios de manera que el teclado móvil no oculte las entradas o botones.
• Compruebe que los formularios se puedan usar en dispositivos móviles: use texto legible y verifique que las entradas y los botones sean lo suficientemente grandes para funcionar como objetivos táctiles.
• Mantenga la marca y el estilo en sus páginas de registro e inicio de sesión.
• Haga pruebas tanto en el campo como en el laboratorio: en su flujo de registro y de inicio de sesión cree análisis de página, análisis de interacción y mediciones de rendimiento centradas en el usuario.
• Haga pruebas en navegadores y dispositivos: el comportamiento del formulario varía significativamente entre plataformas.

Utilice HTML significativo

Utilice elementos creados para el trabajo: <form>, <label> y <button>. Estos habilitan la funcionalidad incorporada del navegador, mejoran la accesibilidad y agregan significado a su marcado.

Utilice <form>

Es posible que tenga la tentación de agrupar las entradas en un <div> y manejar el envío de datos de entrada únicamente con JavaScript. Por lo general, es mejor usar un elemento plano <form> a la antigua. Esto hace que su sitio sea accesible para lectores de pantalla y otros dispositivos de asistencia, habilita una variedad de funciones integradas del navegador, simplifica la creación de un inicio de sesión funcional básico para navegadores más antiguos y aún puede funcionar incluso si JavaScript falla.

Utilice <label>

Para etiquetar una entrada, use un elemento <label>.

<label for="email">Correo electrónico</label>
<input id="email" …>

Dos razones:

• Un toque o clic en una etiqueta mueve el foco hacia su entrada. Asocie una etiqueta con una entrada mediante el atributo for de la etiqueta con el atributo name o id de la entrada.
• Los lectores de pantalla anuncian el texto de la etiqueta cuando la etiqueta o la entrada de la etiqueta se enfocan.

No utilice los marcadores de posición como etiquetas de entrada. Es probable que las personas olviden cuál fue la entrada una vez que hayan comenzado a ingresar texto, especialmente si se distraen ("¿Estaba ingresando una dirección de correo electrónico, un número de teléfono o una identificación de cuenta?"). Hay muchos otros problemas potenciales con los marcadores de posición: consulte No utilice el atributo de marcador de posición y Los marcadores de posición en los campos de formulario son perjudiciales si no está convencido.

Probablemente sea mejor poner sus etiquetas encima de sus entradas. Esto permite un diseño coherente en dispositivos móviles y de escritorio, además, de acuerdo con la Investigación de Google sobre la IA, permite que los usuarios hagan un escaneo más rápido. Usted obtiene etiquetas y entradas de ancho completo, y no necesita ajustar la etiqueta y el ancho de la entrada para que se ajusten al texto de la etiqueta.

Abra el Glitch posición-de-etiqueta en un dispositivo móvil para verlo usted mismo.

Utilice <button>

Utilice el atributo <button> para los botones. Los elementos de botón proporcionan un comportamiento accesible y una funcionalidad de envío de formularios incorporada, además se pueden diseñar fácilmente. No tiene sentido usar un <div> o algún otro elemento que pretenda ser un botón.

Compruebe que el botón de envío indique lo que hace. Los ejemplos incluyen Crear una cuenta o Iniciar sesión, pero no Enviar o Iniciar.

Asegure el envío correcto del formulario

Ayude a que los administradores de contraseñas a comprendan que se ha enviado un formulario. Hay dos maneras de hacerlo:

• Navegar a una página diferente.
• Emular la navegación con History.pushState() o History.replaceState() y eliminar el formulario de contraseña.

Con una solicitud XMLHttpRequest o fetch, verifique que el inicio de sesión se informe correctamente en la respuesta, que se maneje al sacar el formulario del DOM y que se le señale el éxito al usuario.

Considere deshabilitar el botón Iniciar sesión una vez que el usuario lo haya tocado o haya hecho clic en él. Muchos usuarios hacen clic en los botones varias veces incluso en sitios que son rápidos y receptivos. Eso ralentiza las interacciones y aumenta la carga del servidor.

Por lo contrario, no desactive el envío de formularios a la espera de la entrada del usuario. Por ejemplo, no deshabilite el botón Iniciar sesión si los usuarios no han ingresado su PIN de cliente. Los usuarios pueden pasar por alto algo en el formulario, luego intentarán tocar repetidamente el botón Iniciar sesión (deshabilitado) y podrían pensar que no está funcionando. Como mínimo, si debe deshabilitar el envío de formularios, explíquele al usuario lo que falta cuando haga clic en el botón deshabilitado.

No duplique las entradas

Algunos sitios obligan a que los usuarios ingresen dos veces los correos electrónicos o contraseñas. Eso podría reducir los errores para algunos usuarios, pero genera un trabajo adicional para todos los usuarios y aumenta las tasas de abandono. Preguntar dos veces tampoco tiene sentido cuando los navegadores completan automáticamente las direcciones de correo electrónico o sugieren contraseñas seguras. Es mejor permitir que los usuarios confirmen su dirección de correo electrónico (deberán hacerlo de todos modos) y facilitarles el restablecimiento de su contraseña si es necesario.

Aproveche al máximo los atributos de los elementos

¡Aquí es donde realmente ocurre la magia! Los navegadores tienen varias funciones útiles integradas que usan los atributos de los elementos de entrada.

Mantenga las contraseñas privadas, pero permita que los usuarios las vean si quieren

Las entradas de contraseñas deben tener el atributo type="password" para ocultar el texto de la contraseña y ayudar a que el navegador comprenda que la entrada es para contraseñas. (Tenga en cuenta que los navegadores utilizan una variedad de técnicas para comprender los roles de entrada y decidir si ofrecer o no la posibilidad de guardar las contraseñas).

Debe agregar un ícono o botón Mostrar la contraseña para permitir que los usuarios verifiquen el texto que han ingresado, además no olvide agregar un enlace ¿Olvidó la contraseña? Consulte Habilitar la visualización de contraseñas.

Ofrezca el teclado adecuado a los usuarios de dispositivos móviles

Utilice <input type="email"> para brindarles a los usuarios de dispositivos móviles un teclado adecuado y habilitar la validación básica de direcciones de correo electrónico incorporada mediante el navegador… ¡No se requiere JavaScript!

Si necesita utilizar un número de teléfono en lugar de una dirección de correo electrónico, <input type="tel"> habilita un teclado telefónico en el móvil. También puede utilizar el atributo inputmode cuando sea necesario: inputmode="numeric" es ideal para números PIN. Puede encontrar más detalles en Todo lo que siempre quiso saber sobre el modo de entrada.

Evite que el teclado móvil obstruya el botón Iniciar sesión

Desafortunadamente, si no tiene cuidado, los teclados móviles pueden cubrir su formulario o, peor aún, obstruir parcialmente el botón Iniciar sesión. Los usuarios pueden darse por vencidos antes de darse cuenta de lo que ha sucedido.

Siempre que sea posible, evite esto al mostrar solo las entradas de correo electrónico, teléfono y contraseña, además del botón Iniciar sesión en la parte superior de la página de inicio de sesión. Ponga otro contenido debajo.

Pruebas en una variedad de dispositivos

Deberá realizar pruebas en una variedad de dispositivos para su público objetivo y realizar los ajustes necesarios. BrowserStack permite realizar pruebas gratuitas para proyectos de código abierto en una variedad de navegadores y dispositivos reales.

Considere usar dos páginas

Algunos sitios (incluidos Amazon y eBay) evitan el problema al solicitar el correo electrónico, el teléfono y la contraseña en dos páginas. Este enfoque también simplifica la experiencia: el usuario solo tiene la tarea de una cosa a la vez.

Idealmente, esto debería implementarse con un solo elemento <form>. Use JavaScript para mostrar inicialmente solo la entrada de correo electrónico, luego ocúltela y muestre la entrada de contraseña. Si debe obligar a que el usuario navegue a una nueva página entre el ingreso de su correo electrónico y la contraseña, el formulario en la segunda página debe tener un elemento de entrada oculto con el valor del correo electrónico, para ayudar a que los administradores de contraseñas almacenen el valor correcto. Un ejemplo de código se proporciona en Estilos de formulario de contraseña que Chromium entiende.

Ayude a que los usuarios eviten ingresar de nuevo los datos

Puede ayudar a que los navegadores almacenen los datos correctamente y que completen automáticamente las entradas, para que los usuarios no tengan que acordarse de ingresar los valores de correo electrónico y contraseña. Esto es particularmente importante en dispositivos móviles y es crucial para las entradas de correo electrónico, que obtienen tasas altas de abandono.

Hay dos partes en esto:

1. Los atributos autocomplete, name, id y type ayudan a que los navegadores comprendan el papel de las entradas, para almacenar datos que luego se pueden usar para llenar automáticamente los campos. Para permitir que los datos se almacenen para llenarlos automáticamente, los navegadores modernos también requieren que las entradas tengan un valor name o id estable (no generado aleatoriamente en cada carga de página o implementación del sitio) y que estén en un <formulario> con un botón submit.

2. El atributo autocomplete ayuda a que los navegadores completen automáticamente y de manera correcta las entradas mediante los datos almacenados.

Para las entradas de correo electrónico, use autocomplete="username", ya que los gestores de contraseñas en los navegadores modernos reconocen username, aunque debe usar type="email", además quizá desee usar id="email" y name="email".

Para las entradas de contraseña, use los valores autocomplete e id apropiados para ayudar a que los navegadores diferencien entre contraseñas nuevas y actuales.

Use autocomplete="new-password" e id="new-password" para una nueva contraseña

• Use autocomplete="new-password" e id="new-password" para ingresar la contraseña en un formulario de registro o la nueva contraseña en un formulario de cambio de contraseña.

Use autocomplete="current-password" e id="current-password" para una contraseña existente

• Use autocomplete="current-password" e id="current-password" para ingresar la contraseña en un formulario de inicio de sesión o para ingresar la contraseña anterior del usuario en un formulario de cambio de contraseña. Esto le indica al navegador que usted desea que use la contraseña actual que tiene almacenada para el sitio.

Para un formulario de registro:

<input type="password" autocomplete="new-password" id="new-password" …>

Para inicio de sesión:

<input type="password" autocomplete="current-password" id="current-password" …>

Admita los administradores de contraseñas

Los diferentes navegadores manejan el llenado automático del correo electrónico y la sugerencia de contraseñas de manera algo diferente, pero los efectos son muy parecidos. En Safari 11 y versiones superiores en equipos de escritorio, por ejemplo, se muestra el administrador de contraseñas y luego se usa la autenticación biométrica (reconocimiento de huellas dactilares o facial) si está disponible.

En equipos de escritorio, Chrome muestra sugerencias de correo electrónico, muestra el gestor de contraseñas y llena automáticamente la contraseña.

Los sistemas de llenado automático y de contraseñas del navegador no son sencillos. Los algoritmos para adivinar, almacenar y mostrar los valores no están estandarizados y varían de una plataforma a otra. Por ejemplo, como lo señaló Hidde de Vries: "El gestor de contraseñas de Firefox complementa su heurística con un sistema de recetas".

El documento Llenado automático: lo que los desarrolladores web deben saber, pero no saben tiene mucha más información sobre el uso de name y autocomplete. La especificación HTML enumera los 59 valores posibles.

Habilite la opción para que el navegador sugiera una contraseña segura

Los navegadores modernos utilizan la heurística para decidir cuándo mostrar la interfaz de usuario del gestor de contraseñas y sugerir una contraseña segura.

Así es como Safari lo hace en equipos de escritorio.

(La sugerencia de contraseñas únicas y fuertes ha estado disponible en Safari desde la versión 12.0).

La presencia de generadores de contraseñas incorporados en el navegador significa que los usuarios y desarrolladores no necesitan averiguar qué es una "contraseña segura". Dado que los navegadores pueden almacenar contraseñas de forma segura y llenarlas automáticamente según se necesite, no es necesario que los usuarios recuerden o ingresen contraseñas. Alentar a los usuarios a aprovechar los generadores de contraseñas integrados en el navegador también significa que es más probable que utilicen una contraseña única y segura en su sitio, y es menos probable que reutilicen una contraseña que podría verse comprometida en otro lugar.

Ayude a que los usuarios eviten pasar por alto entradas accidentalmente

Agregue el atributo required a los campos de correo electrónico y contraseña. Los navegadores modernos solicitan y establecen automáticamente el enfoque en los datos faltantes. ¡No se requiere JavaScript!

Diseñe para dedos y pulgares

El tamaño predeterminado del navegador para casi todo lo relacionado con los elementos de entrada y los botones es demasiado pequeño, especialmente en dispositivos móviles. Esto puede parecer obvio, pero es un problema común con los formularios de inicio de sesión en muchos sitios.

Compruebe que las entradas y los botones sean lo suficientemente grandes

El tamaño y el relleno predeterminados para las entradas y los botones es demasiado pequeño en equipos de escritorio e incluso peor en los móviles.

Según la Guía de accesibilidad de Android, el tamaño objetivo recomendado para los objetos de la pantalla táctil es de 7 a 10 mm. Las pautas de la interfaz de Apple sugieren 48x48 px, y el W3C sugiere al menos 44x44 píxeles CSS. Sobre esa base, agregue (al menos) alrededor de 15 px de relleno a los elementos de entrada y botones para dispositivos móviles, y alrededor de 10 px en dispositivos de escritorio. Pruebe esto con un dispositivo móvil real y un dedo o pulgar real. Debería estar en capacidad de tocar cómodamente cada una de sus entradas y botones.

La auditoría de Lighthouse Los objetivos táctiles no tienen el tamaño adecuado puede ayudarlo a automatizar el proceso de detección de elementos de entrada que son demasiado pequeños.

Diseñe para pulgares

Haga una búsqueda por objetivo táctil y verá muchas imágenes de dedos índices. Sin embargo, en el mundo real, muchas personas usan sus pulgares para interactuar con los teléfonos. Los pulgares son más grandes que los índices y el control es menos preciso. Razón de más para objetivos táctiles de tamaño adecuado.

Haga que el texto sea lo suficientemente grande

Al igual que con el tamaño y el relleno, el tamaño de fuente predeterminado del navegador para los elementos de entrada y los botones es demasiado pequeño, especialmente en dispositivos móviles.

Los navegadores de diferentes plataformas dimensionan las fuentes de manera diferente, por lo que es difícil especificar un tamaño de fuente en particular que funcione bien en todas partes. Una encuesta rápida de sitios web populares muestra tamaños de 13 a 16 píxeles en equipos escritorio: hacer coincidir ese tamaño físico es un buen punto mínimo para el texto en dispositivos móviles.

Esto significa que debe usar un tamaño de píxeles más grande en el dispositivo móvil: un tamaño de 16px en Chrome para equipos de escritorio es bastante legible, pero incluso con una buena visión es difícil leer 16px en Chrome para Android. Puede establecer diferentes tamaños de píxeles de fuente para diferentes tamaños de ventana gráfica mediante las consultas de medios. Un tamaño de 20px es adecuado en dispositivos móviles, pero debe probarlo con amigos o colegas que tengan problemas de visión.

La auditoría de Lighthouse El documento no usa tamaños de fuente legibles puede ayudarlo a automatizar el proceso de detección de texto que es demasiado pequeño.

Proporcione suficiente espacio entre las entradas

Agregue suficiente margen para que las entradas funcionen bien como objetivos táctiles. En otras palabras, apunte a aproximadamente un dedo de ancho de margen.

Verifique que sus entradas se puedan ver claramente

El estilo de borde predeterminado para las entradas hace que sean difíciles de ver. Son casi invisibles en algunas plataformas como Chrome para Android.

Además del relleno, agregue un borde: sobre un fondo blanco, una buena regla general es usar #ccc o uno más oscuro.

Utilice las funciones integradas del navegador para advertir sobre valores de entrada inválidos

Los navegadores tienen funciones integradas para realizar una validación de formulario básica para las entradas con un atributo type. Los navegadores advierten cuando se envía un formulario con un valor inválido y enfocan la entrada problemática.

Puede utilizar el selector CSS :invalid para resaltar los datos inválidos. Utilice :not(:placeholder-shown) para evitar la selección de entradas sin contenido.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Pruebe diferentes formas de resaltar las entradas con valores inválidos.

Utilice JavaScript cuando sea necesario

Alterne la visualización de contraseñas

Debe agregar un ícono o botón Mostrar contraseña para permitir que los usuarios verifiquen el texto que ingresaron. La usabilidad se ve afectada cuando los usuarios no pueden ver el texto que ingresaron. Actualmente no hay una forma incorporada de hacer esto, aunque hay planes de implementación. Deberá utilizar JavaScript en su lugar.

El siguiente código usa un botón de texto para agregar la funcionalidad Mostrar contraseña.

HTML:

<section>
  <label for="password">Contraseña</label>
  <button id="toggle-password" type="button" aria-label="Muestra la contraseña como texto plano. Advertencia: esto hará que se muestre su contraseña en la pantalla.">Mostrar contraseña</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Éste es el CSS para hacer que el botón luzca como texto sin formato:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* La consulta de medios no se muestra aquí. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Mostrar en la parte superior derecha del contenedor */
  position: absolute;
  top: 0;
  right: 0;
}

Y el JavaScript para mostrar la contraseña:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Ocultar contraseña';
    togglePasswordButton.setAttribute('aria-label',
      'Oculta la contraseña.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Mostrar contraseña';
    togglePasswordButton.setAttribute('aria-label',
      'Muestra la contraseña como texto plano. ' +
      'Advertencia: esto hará que se muestre su contraseña en la pantalla.');
  }
}

Éste es el resultado final:

Haga que las entradas de contraseña sean accesibles

Utilice aria-describedby para delinear las reglas de contraseñas al indicarle la ID del elemento que describe las restricciones. Los lectores de pantalla proporcionan el texto de la etiqueta, el tipo de entrada (contraseña) y luego la descripción.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Ocho o más caracteres con una combinación de letras, números y símbolos.</div>

Cuando agregue la funcionalidad Mostrar contraseña, asegúrese de incluir un atributo aria-label para advertir que se mostrará la contraseña. De lo contrario, los usuarios pueden revelar las contraseñas inadvertidamente.

<button id="toggle-password"
        aria-label="Muestra la contraseña como texto plano.
                    Advertencia: esto hará que se muestre su contraseña en la pantalla.">
  Mostrar contraseña
</button>

Puede ver ambas funciones ARIA en acción en el siguiente error:

El documento Crear formularios accesibles tiene más consejos para ayudar a que los formularios sean accesibles.

Validar en tiempo real y antes del envío

Los elementos y atributos del formulario HTML tienen funciones integradas para la validación básica, pero también debe usar JavaScript para realizar una validación más sólida durante el ingreso de datos por parte de los usuarios y cuando intentan enviar el formulario.

El paso 5 del laboratorio de códigos del formulario de inicio de sesión usa la API de validación de restricciones (que es ampliamente compatible) para agregar validación personalizada mediante la interfaz de usuario incorporada en el navegador para establecer el enfoque y mostrar los mensajes.

Obtenga más información en: Use JavaScript para una validación más compleja en tiempo real.

Análisis y RUM

"Lo que no se puede medir, no se puede mejorar" es particularmente cierto para los formularios de registro y de inicio de sesión. Necesita establecer metas, medir el éxito, mejorar su sitio y repetir.

Las pruebas de usabilidad de saldo pueden ser útiles para probar cambios, pero necesitará datos del mundo real para comprender realmente la manera en que los usuarios experimentan sus formularios de registro y de inicio de sesión:

• Análisis de páginas: vistas de páginas de registro e inicio de sesión, tasas de rebote y salidas.
• Análisis de interacción: embudos de objetivos (¿dónde abandonan los usuarios su inicio de sesión o flujo de inicio de sesión?) y eventos (¿qué acciones realizan los usuarios al interactuar con sus formularios?).
• Rendimiento del sitio web: mediciones centradas en el usuario (¿son sus formularios de registro e inicio de sesión lentos por algún motivo y, de ser así, cuál es la causa?).

Es posible que también desee considerar la implementación de pruebas A/B para probar diferentes enfoques para el registro y el inicio de sesión, además de los lanzamientos escalonados para validar los cambios en un subconjunto de usuarios antes de publicar los cambios para todos los usuarios.

Directrices generales

Una interfaz de usuario y una experiencia de usuario bien diseñadas pueden reducir el abandono del formulario de inicio de sesión:

• ¡Evite que los usuarios tengan que buscar el inicio de sesión! Coloque un enlace al formulario de inicio de sesión en la parte superior de la página, utilice un texto fácil de entender como Iniciar sesión, Crear cuenta o Registrarse.
• ¡Manténgalo enfocado! Los formularios de registro no son el lugar para distraer a las personas con ofertas y otras características del sitio.
• Minimice la complejidad del registro. Recopile otros datos del usuario (como direcciones o detalles de tarjetas de crédito) solo cuando los usuarios vean un beneficio claro para proporcionar esos datos.
• Antes de que los usuarios comiencen con su formulario de registro, deje en claro cuál es la propuesta de valor. ¿Cómo se benefician al registrarse? Ofrézcales a los usuarios incentivos concretos para completar el registro.
• Si es posible, permita que los usuarios se identifiquen con un número de teléfono móvil en lugar de una dirección de correo electrónico, ya que es posible que algunos usuarios no utilicen el correo electrónico.
• Facilite a los usuarios el restablecimiento de su contraseña y haga que el enlace "¿Olvidó su contraseña?" sea obvio.
• Enlace a los documentos de sus condiciones de servicio y política de privacidad: déjele claro a los usuarios desde el principio cómo protege sus datos.
• Incluya el logotipo y el nombre de su empresa u organización en sus páginas de registro e inicio de sesión, además verifique que el idioma, las fuentes y los estilos coincidan con el resto de su sitio. Algunos formularios no parecen pertenecer al mismo sitio que otro contenido, especialmente si tienen una URL significativamente diferente.

Siga aprendiendo

• Cree formas asombrosas
• Prácticas recomendadas para el diseño de formularios para dispositivos móviles
• Controles de formulario más capaces
• Crear formularios accesibles
• Optimización del flujo de inicio de sesión mediante la API de gestión de credenciales
• Verifique los números de teléfono en la web con la API de WebOTP

Foto de Meghan Schiereck en Unsplash.