Identidad

Ayuda a los usuarios a registrarse

El formulario de registro suele ser la primera interacción con un formulario de tu sitio web. Es fundamental contar con un buen diseño del formulario de registro, y un formulario seguro es fundamental.

Veamos un formulario de registro y cómo puedes ayudar a los usuarios a registrarse en tu sitio web.

Usa el formulario de registro como mínimo y muestra solo los controles del formulario requeridos para crear una cuenta. No dupliques los controles de tus formularios para ayudar a los usuarios a obtener los detalles de su cuenta correctamente. Envía un correo electrónico de confirmación en su lugar.

Ayuda a los usuarios a completar los detalles de su cuenta

Puedes ayudar a los usuarios a completar los detalles de su cuenta mediante el atributo autocomplete adecuado. Usa autocomplete="email" para el campo de correo electrónico y autocomplete="new-password" para el campo de contraseña nueva.

Obtén más información para completar controles de entrada automáticamente.

También puedes ayudar a los usuarios a ingresar una contraseña segura si ofreces una <button> para revelar la contraseña.
Obtén más información sobre el patrón revelar-contraseña.

Asegúrate de que tu formulario de registro sea seguro

Nunca almacenes ni transmitas contraseñas en texto sin formato. Asegúrate de usar sal y generar un hash para las contraseñas, y no intentes inventar tu propio algoritmo de hash.

Ofrece autenticación de varios factores, en especial si almacenas datos personales o sensibles. En las prácticas recomendadas para las OTP por SMS y en Cómo habilitar la autenticación sólida con WebAuthn, se explica cómo implementar la autenticación de varios factores.

Asegúrate de que los usuarios no usen contraseñas hackeadas. Por ejemplo, usa la API de Have I Been Pwned para detectar contraseñas hackeadas y sugerirles a los usuarios que completen una contraseña nueva o advertirles si las contraseñas se ven hackeadas.

Ayuda a los usuarios a acceder

Veamos cómo crear un formulario de acceso para garantizar que los usuarios puedan ingresar fácilmente a tu sitio web.

Haz que la ubicación de los botones de registro y acceso sea evidente. Asegúrate de que el formulario se pueda usar en dispositivos táctiles:

El tamaño del objetivo de presión de los botones es de al menos 48 px.
El font-size de los elementos del formulario debe ser lo suficientemente grande (20px es justo en los dispositivos móviles).
Hay suficiente espacio (margin) entre los controles del formulario y que las entradas sean lo suficientemente grandes (usa al menos padding: 15px en dispositivos móviles).

Ayuda a los usuarios a completar su correo electrónico y contraseña

Ayuda a los navegadores y los administradores de contraseñas a autocompletar los detalles de la cuenta. Usa autocomplete="email" para el campo de correo electrónico y autocomplete="current-password" para el campo de contraseña actual.

Para ayudar a los usuarios a completar manualmente los detalles de su cuenta, usa type="email" en el campo de correo electrónico para mostrar el teclado en pantalla adecuado en los dispositivos móviles.

Usa el atributo required en el campo de correo electrónico y contraseña para advertir sobre valores no válidos cuando el usuario envíe el formulario. Considera usar la validación en tiempo real para ayudar a los usuarios a corregir los datos no válidos en cuanto los ingresen, en lugar de esperar el envío del formulario.

Asegúrate de que los usuarios puedan ver la contraseña que ingresaron

El texto que completas para <input type="password"> se oculta de forma predeterminada a fin de respetar la privacidad de los usuarios. Muestra un <button> para activar o desactivar la visibilidad del texto ingresado a fin de ayudar a los usuarios a ingresar su contraseña.

Obtén más información sobre la implementación de un <button> de revelación de contraseña.

Asegúrate de que tus formularios de acceso y registro se puedan utilizar

Prueba tus formularios de acceso y registro periódicamente con personas reales para asegurarte de que la autenticación funciona como se espera. Usa estadísticas y la medición de usuarios reales (RUM) para recopilar datos de campo y herramientas como Lighthouse y PageSpeed Insights para ejecutar pruebas por tu cuenta. Obtén más información sobre las pruebas de usabilidad y la recopilación de datos de estadísticas.

Asegúrate de que tus formularios funcionen en distintos navegadores y plataformas. Prueba tu formulario en diferentes tamaños de pantalla con el teclado solamente o con un lector de pantalla como VoiceOver en Mac o NVDA en Windows.

Ayuda a los usuarios a cambiar la configuración de su cuenta

Asegúrate de que los usuarios puedan cambiar todos los parámetros de configuración de la cuenta, incluidas las direcciones de correo electrónico, las contraseñas y los nombres de usuario.

Indica los datos que almacenas y ayuda a los usuarios a descargar sus datos personales. Asegúrate de que los usuarios puedan borrar su cuenta si eso es lo que desean. Este tipo de funciones de administración de cuentas pueden ser un requisito legal en algunas regiones.

Asegúrate de que los usuarios puedan actualizar sus contraseñas

Facilita a los usuarios la actualización de sus contraseñas.

Solicita a los usuarios la contraseña actual antes de cambiarla y envía un correo electrónico sobre el cambio con la opción de revertir y bloquear la cuenta.

Agrega la opción de solicitar una contraseña nueva y considera proporcionar una URL .well-known para hacerlo.