Identidad

Ayuda a los usuarios a registrarse

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

Observa un formulario de registro para saber cómo puedes ayudar a los usuarios a registrarse en tu sitio web.

Mantén el formulario de registro al mínimo y solo muestra los controles de formulario necesarios para crear una cuenta. No dupliques los controles de formulario para ayudar a los usuarios a ingresar correctamente los detalles de su cuenta. En su lugar, envía un correo electrónico de confirmación.

Detalles de la cuenta

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

Obtén más información para autocompletar controles de entrada.

También puedes ayudar a los usuarios a ingresar una contraseña segura ofreciéndoles un <button> para mostrar la contraseña. Obtén más información sobre el patrón de revelación de contraseña.

Protege tu formulario de registro

Nunca almacenes ni transmitas contraseñas en texto sin formato. Asegúrate de agregar 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 Prácticas recomendadas para las OTP por SMS y 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 vulneradas. Por ejemplo, usa la API de Have I Been Pwned para detectar contraseñas vulneradas y sugerir a los usuarios que completen una nueva contraseña diferente, o bien adviérteles si su contraseña se ve comprometida.

Ayuda a los usuarios a acceder

Consulta cómo crear un formulario de acceso para garantizar que los usuarios puedan acceder a tu sitio web.

Haz que la ubicación de los botones para registrarse y acceder sea obvia. Asegúrate de que tu formulario se pueda usar en dispositivos táctiles:

  • El tamaño del objetivo de toque de los botones es de al menos 48 px.
  • El font-size de los elementos del formulario es lo suficientemente grande (20px es adecuado en dispositivos móviles).
  • Hay suficiente espacio (margin) entre los controles de formulario y las entradas son 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 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 un campo de contraseña actual.

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

Usa el atributo required para los campos de correo electrónico y contraseña, de modo que puedas 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 ingresan, en lugar de esperar a que envíen el formulario.

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

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

Obtén más información para implementar un botón de mostrar contraseña <button>.

Asegúrate de que tus formularios de acceso y registro sean utilizables

Prueba tus formularios de acceso y registro con personas reales de forma periódica para asegurarte de que la autenticación funcione según lo esperado. 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 para probar la facilidad de uso y recopilar datos de análisis.

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

Ayuda a los usuarios a cambiar la configuración de sus cuentas

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 de forma transparente qué datos almacenas y ayuda a los usuarios a descargar todos sus datos personales en cualquier momento. Asegúrate de que los usuarios puedan borrar su cuenta si así lo desean. Es posible que las funciones de administración de cuentas como estas sean un requisito legal en algunas regiones.

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

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

Pedirles a los usuarios la contraseña actual antes de cambiarla y enviar un correo electrónico sobre el cambio de contraseña con la opción para revertir y bloquear la cuenta

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

Recursos