Prácticas recomendadas para el formulario de registro

Ayuda a los usuarios a registrarse, acceder y administrar los detalles de sus cuentas con el mínimo esfuerzo.

Sam Dutton

Si los usuarios alguna vez necesitan acceder a tu sitio, es fundamental que el diseño del formulario de registro sea bueno. Esto es especialmente cierto para las personas con conexiones deficientes, que usan dispositivos móviles, están apuradas o bajo estrés. Los formularios de registro mal diseñados tienen porcentajes de rebote altos. Cada rebote podría significar un usuario perdido y disconforme, no solo una oportunidad de registro perdida.

Este es un ejemplo de un formulario de registro muy simple que demuestra todas las prácticas recomendadas:

Lista de tareas

Evita acceder si es posible

Antes de implementar un formulario de registro y pedirles a los usuarios que creen una cuenta en tu sitio, considera si realmente es necesario. Siempre que sea posible, evita restringir las funciones detrás del acceso.

El mejor formulario de registro es no tener uno.

Cuando le pides a un usuario que cree una cuenta, te interpones entre él y lo que intenta lograr. Le estás pidiendo un favor al usuario y le estás pidiendo que confíe en ti con sus datos personales. Cada contraseña y elemento de datos que almacenas conlleva una "deuda de datos" de privacidad y seguridad, lo que se convierte en un costo y una responsabilidad para tu sitio.

Si el motivo principal por el que les pides a los usuarios que creen una cuenta es para guardar información entre navegaciones o sesiones de navegación, considera usar el almacenamiento del cliente. En el caso de los sitios de compras, obligar a los usuarios a crear una cuenta para realizar una compra se cita como un motivo importante para el abandono del carrito de compras. Debes establecer la opción de comprar como invitado como la opción predeterminada.

Haz que el acceso sea obvio

Explica claramente cómo crear una cuenta en tu sitio, por ejemplo, con un botón Login o Acceder en la parte superior derecha de la página. Evita usar un ícono ambiguo o una redacción vaga ("¡Únete!", "Únete a nosotros") y no ocultes el acceso en un menú de navegación. El experto en usabilidad Steve Krug resumió este enfoque de usabilidad de sitios web de la siguiente manera: ¡No me hagas pensar! Si necesitas convencer a otras personas de tu equipo web, usa las estadísticas para mostrar el impacto de las diferentes opciones.

Dos capturas de pantalla de una maqueta de sitio web de comercio electrónico que se ve en un teléfono Android. El de la izquierda usa un ícono para el vínculo de acceso que es un poco ambiguo; el de la derecha simplemente dice "Acceder".
Haz que el acceso sea obvio. Un ícono puede ser ambiguo, pero un botón o vínculo para Acceder es obvio.
Capturas de pantalla del acceso a Gmail: una página que muestra el botón Acceder. Cuando se hace clic en él, se dirige a un formulario que también tiene un vínculo para crear una cuenta.
La página de acceso de Gmail tiene un vínculo para crear una cuenta.
En tamaños de ventana más grandes que los que se muestran aquí, Gmail muestra un vínculo Acceder y un botón Crear una cuenta.

Asegúrate de vincular las cuentas de los usuarios que se registran a través de un proveedor de identidad, como Google, y que también se registran con correo electrónico y contraseña. Esto es fácil de hacer si puedes acceder a la dirección de correo electrónico de un usuario desde los datos de perfil del proveedor de identidad y hacer coincidir las dos cuentas. En el siguiente código, se muestra cómo acceder a los datos de correo electrónico de un usuario de Acceso con Google.

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Explica claramente cómo acceder a los detalles de la cuenta

Una vez que un usuario haya accedido, deja en claro cómo acceder a los detalles de la cuenta. En particular, explica de forma clara cómo cambiar o restablecer contraseñas.

Reduce el desorden del formulario

En el flujo de registro, tu tarea es minimizar la complejidad y mantener la atención del usuario. Reduce el desorden. No es momento de distracciones ni tentaciones.

No distraigas a los usuarios para que completen el registro.

Durante el registro, pide lo menos posible. Recopila datos adicionales del usuario (como el nombre y la dirección) solo cuando sea necesario y cuando el usuario vea un beneficio claro de proporcionar esos datos. Ten en cuenta que cada elemento de datos que comunicas y almacenas genera costos y responsabilidades.

No dupliques las entradas solo para asegurarte de que los usuarios obtengan sus detalles de contacto correctos. Eso ralentiza la finalización del formulario y no tiene sentido si los campos del formulario se completan automáticamente. En su lugar, envía un código de confirmación al usuario una vez que haya ingresado sus detalles de contacto y, luego, continúa con la creación de la cuenta una vez que responda. Este es un patrón de registro común: los usuarios están acostumbrados a él.

Te recomendamos que consideres el acceso sin contraseña. Para ello, envía a los usuarios un código cada vez que accedan en un dispositivo o navegador nuevo. Sitios como Slack y Medium usan una versión de esto.

Acceso sin contraseña en medium.com.

Al igual que con el acceso federado, esto tiene el beneficio adicional de que no tienes que administrar las contraseñas de los usuarios.

Ten en cuenta la duración de la sesión

Independientemente del enfoque que adoptes para la identidad del usuario, deberás tomar una decisión cuidadosa sobre la duración de la sesión: durante cuánto tiempo el usuario permanece en su cuenta y qué podría hacer que salga de ella.

Ten en cuenta si tus usuarios utilizan dispositivos móviles o computadoras, y si comparten contenido en computadoras o dispositivos.

Ayuda a los administradores de contraseñas a sugerir y almacenar contraseñas de forma segura

Puedes ayudar a que los administradores de contraseñas integrados y de terceros sugieran y almacenen contraseñas, de modo que los usuarios no tengan que elegir, recordar ni escribir contraseñas por su cuenta. Los administradores de contraseñas funcionan bien en navegadores modernos, sincronizan cuentas en todos los dispositivos, en apps web y específicas de la plataforma, y en dispositivos nuevos.

Por lo tanto, es muy importante codificar correctamente los formularios de registro, en particular, para usar los valores correctos de autocompletado. En el caso de los formularios de registro, usa autocomplete="new-password" para las contraseñas nuevas y agrega valores de autocompletado correctos a otros campos del formulario siempre que sea posible, como autocomplete="email" y autocomplete="tel". También puedes ayudar a los administradores de contraseñas usando diferentes valores de name y id en los formularios de registro y acceso, para el elemento form en sí, así como para cualquier elemento input, select y textarea.

También debes usar el atributo type adecuado para proporcionar el teclado correcto en dispositivos móviles y habilitar la validación integrada básica del navegador. Obtén más información en Prácticas recomendadas para los formularios de pago y dirección.

Asegúrate de que los usuarios ingresen contraseñas seguras

La mejor opción es habilitar los administradores de contraseñas para que sugieran contraseñas, y debes alentar a los usuarios a aceptar las contraseñas seguras que sugieren los navegadores y los administradores de navegadores externos.

Sin embargo, muchos usuarios quieren ingresar sus propias contraseñas, por lo que debes implementar reglas para la seguridad de las contraseñas. El Instituto Nacional de Estándares y Tecnología de EE.UU. explica cómo evitar contraseñas no seguras.

No permitir contraseñas hackeadas

Independientemente de las reglas que elijas para las contraseñas, nunca debes permitir contraseñas que se hayan expuesto en violaciones de seguridad.

Una vez que un usuario ingresa una contraseña, debes verificar que no sea una contraseña que ya esté comprometida. El sitio Have I Been Pwned proporciona una API para verificar contraseñas, o bien puedes ejecutarla como servicio.

El Administrador de contraseñas de Google también te permite comprobar si se hackeó alguna de tus contraseñas existentes.

Si rechazas la contraseña que propone un usuario, indícale específicamente por qué se rechazó. Muestra los problemas intercalados y explica cómo solucionarlos, tan pronto como el usuario ingrese un valor, no después de que envíe el formulario de registro y tenga que esperar una respuesta de tu servidor.

Especifica claramente por qué se rechaza una contraseña.

No prohibir el pegado de contraseñas

Algunos sitios no permiten que se pegue texto en los campos de contraseña.

No permitir que se peguen contraseñas molesta a los usuarios, fomenta contraseñas fáciles de recordar (y, por lo tanto, más vulnerables) y, según organizaciones como el Centro Nacional de Seguridad Cibernética del Reino Unido, puede reducir la seguridad. Los usuarios solo se dan cuenta de que no se permite pegar después de intentar pegar su contraseña, por lo que no se evitan las vulnerabilidades del portapapeles.

Nunca almacenes ni transmitas contraseñas en texto sin formato

Asegúrate de salar y generar un hash de las contraseñas y no intentes inventar tu propio algoritmo de hash.

No forzar actualizaciones de contraseña

No obligues a los usuarios a actualizar sus contraseñas de forma arbitraria.

Forzar las actualizaciones de contraseñas puede ser costoso para los departamentos de TI, molesto para los usuarios y no tiene mucho impacto en la seguridad. También es probable que anime a las personas a usar contraseñas memorables no seguras o a mantener un registro físico de las contraseñas.

En lugar de forzar las actualizaciones de contraseñas, debes supervisar si hay actividad inusual en la cuenta y advertir a los usuarios. Si es posible, también debes supervisar las contraseñas que se vean comprometidas debido a violaciones de la seguridad de los datos.

También debes proporcionarles a los usuarios acceso al historial de acceso de sus cuentas, y mostrarles dónde y cuándo se produjo un acceso.

Página de actividad de la cuenta de Gmail
Página de actividad de la cuenta de Gmail.

Facilita el cambio o restablecimiento de contraseñas

Deja claro a los usuarios dónde y cómo actualizar la contraseña de su cuenta. En algunos sitios, es sorprendentemente difícil.

Por supuesto, también debes facilitar que los usuarios restablezcan su contraseña si la olvidan. El proyecto Open Web Application Security proporciona orientación detallada sobre cómo manejar contraseñas perdidas.

Para proteger tu empresa y a los usuarios, es muy importante ayudarlos a cambiar su contraseña si descubren que se vio comprometida. Para facilitar este proceso, debes agregar una URL de /.well-known/change-password a tu sitio que redireccione a tu página de administración de contraseñas. Esto permite que los administradores de contraseñas dirijan a los usuarios directamente a la página en la que pueden cambiar la contraseña de tu sitio. Esta función ahora se implementó en Safari y Chrome, y se lanzará en otros navegadores. En Cómo ayudar a los usuarios a cambiar contraseñas fácilmente agregando una URL conocida para cambiar contraseñas, se explica cómo implementar esta función.

También debes facilitarles a los usuarios la eliminación de sus cuentas si eso es lo que quieren.

Ofrece acceso a través de proveedores de identidad externos

Muchos usuarios prefieren acceder a los sitios web con una dirección de correo electrónico y un formulario de registro de contraseña. Sin embargo, también debes permitir que los usuarios accedan a través de un proveedor de identidad de terceros, también conocido como acceso federado.

Página de acceso de WordPress
Página de acceso de WordPress, con opciones de acceso de Google y Apple.

Este enfoque tiene varias ventajas. En el caso de los usuarios que crean una cuenta con el acceso federado, no es necesario solicitar contraseñas, comunicarlas ni almacenarlas.

Es posible que también puedas acceder a información de perfil verificada adicional desde el inicio de sesión federado, como una dirección de correo electrónico, lo que significa que el usuario no tiene que ingresar esos datos y que no necesitas hacer la verificación por tu cuenta. El acceso federado también puede facilitar mucho el acceso de los usuarios cuando adquieren un dispositivo nuevo.

En Cómo integrar el Acceso con Google en tu app web, se explica cómo agregar el acceso federado a tus opciones de registro. Hay muchas otras plataformas de identidad disponibles.

Simplifica el cambio de cuenta

Muchos usuarios comparten dispositivos y cambian de cuenta con el mismo navegador. Ya sea que los usuarios accedan al acceso federado o no, debes simplificar el cambio de cuenta.

Gmail, que muestra el cambio de cuenta
Cambio de cuenta en Gmail.

Considera ofrecer autenticación de varios factores

La autenticación de varios factores implica garantizar que los usuarios proporcionen autenticación de más de una manera. Por ejemplo, además de exigir que el usuario configure una contraseña, también puedes aplicar la verificación con una contraseña de un solo uso que se envía por correo electrónico o mensaje SMS, o con un código de un solo uso basado en la app, una llave de seguridad o un sensor de huellas dactilares. En Prácticas recomendadas para la OTP por SMS y Cómo habilitar la autenticación reforzada con WebAuthn, se explica cómo implementar la autenticación de varios factores.

Sin duda, debes ofrecer (o aplicar) la autenticación de varios factores si tu sitio controla información personal o sensible.

Ten cuidado con los nombres de usuario

No insistas en un nombre de usuario, a menos que (o hasta que) lo necesites. Permite que los usuarios se registren y accedan con solo una dirección de correo electrónico (o un número de teléfono) y una contraseña, o con el acceso federado si lo prefieren. No lo obligues a elegir y recordar un nombre de usuario.

Si tu sitio requiere nombres de usuario, no les impongas reglas irracionales ni impidas que los usuarios los actualicen. En tu backend, debes generar un ID único para cada cuenta de usuario, no un identificador basado en datos personales, como el nombre de usuario.

Además, asegúrate de usar autocomplete="username" para los nombres de usuario.

Prueba en una variedad de dispositivos, plataformas, navegadores y versiones

Prueba los formularios de registro en las plataformas más comunes para tus usuarios. La funcionalidad de los elementos de formulario puede variar, y las diferencias en el tamaño del viewport pueden causar problemas de diseño. BrowserStack permite pruebas gratuitas para proyectos de código abierto en una variedad de dispositivos y navegadores.

Implementa estadísticas y supervisión de usuarios reales

Necesitas datos de campo y de lab para comprender cómo experimentan los usuarios tus formularios de registro. Analytics y la supervisión de usuarios reales (RUM) proporcionan datos sobre la experiencia real de tus usuarios, como cuánto tiempo tardan en cargarse las páginas de registro, con qué componentes de la IU interactúan los usuarios (o no) y cuánto tiempo tardan en completar el registro.

Los cambios pequeños pueden marcar una gran diferencia en los porcentajes de finalización de los formularios de registro. Analytics y RUM te permiten optimizar y priorizar los cambios, y supervisar tu sitio en busca de problemas que no se exponen en las pruebas locales.

Sigue aprendiendo

Foto de @ecowarriorprincess en Unsplash.