Prácticas recomendadas para el formulario de registro

Ayuda a tus usuarios a registrarse, acceder y administrar los detalles de su cuenta con la menor cantidad de inconvenientes posible.

Sam Dutton

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

A continuación, se muestra un ejemplo de un formulario de registro muy simple que demuestra todas las prácticas recomendadas:

Lista de tareas

Evita acceder si puedes

Antes de implementar un formulario de registro y pedir a los usuarios que creen una cuenta en tu sitio, considera si realmente lo necesitas. Siempre que sea posible, debes evitar restringir el acceso a las funciones con un inicio de sesión.

El mejor formulario de registro es el que no existe.

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 solicitas que confíe en ti con sus datos personales. Cada contraseña y elemento de datos que almacenas genera 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 exploración, considera usar el almacenamiento del cliente. En el caso de los sitios de compras, se menciona que obligar a los usuarios a crear una cuenta para realizar una compra es un motivo importante por el que se abandonan los carritos de compras. Debes establecer la compra como invitado como opción predeterminada.

Haz que el acceso sea evidente

Haz que sea obvio cómo crear una cuenta en tu sitio, por ejemplo, con un botón de Acceder o Ingresar en la parte superior derecha de la página. Evita usar un ícono ambiguo o una redacción vaga ("¡Súbete a bordo!", "Únete a nosotros") y no ocultes el acceso en un menú de navegación. El experto en usabilidad Steve Krug resumió este enfoque de la usabilidad del sitio web de la siguiente manera: ¡No me hagas pensar! Si necesitas convencer a otros miembros de tu equipo web, usa Analytics para mostrar el impacto de las diferentes opciones.

Dos capturas de pantalla de un sitio web de comercio electrónico simulado que se ve en un teléfono Android. El de la izquierda usa un ícono para el vínculo de acceso que es algo 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 de acceso es obvio.
Capturas de pantalla del acceso a Gmail: una página que muestra el botón Acceder, que, cuando se hace clic en él, lleva a un formulario que también tiene un vínculo para crear una cuenta.
La página de acceso a 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 registren con un proveedor de identidad, como Google, y que también se registren con un correo electrónico y una contraseña. Esto es sencillo si puedes acceder a la dirección de correo electrónico de un usuario desde los datos del perfil del proveedor de identidad y hacer coincidir las dos cuentas. El código que se muestra aquí indica 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()}`);
}

Haz que sea obvio cómo acceder a los detalles de la cuenta

Una vez que el usuario haya accedido, indícale claramente cómo acceder a los detalles de la cuenta. En particular, debe ser obvio cómo cambiar o restablecer contraseñas.

Elimina el desorden del formulario

En el flujo de registro, tu trabajo es minimizar la complejidad y mantener al usuario concentrado. Olvídate del desorden. ¡Este no es el momento de distracciones ni tentaciones!

No distraigas a los usuarios para que completen el registro.

En el registro, pide la menor cantidad de información 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 por proporcionar esos datos. Ten en cuenta que cada elemento de datos que comuniques y almacenes genera costos y responsabilidades.

No dupliques tus entradas solo para asegurarte de que los usuarios ingresen correctamente sus detalles de contacto. Esto ralentiza el proceso de completar formularios y no tiene sentido si los campos se completan automáticamente. En cambio, envíale un código de confirmación al usuario una vez que haya ingresado sus datos de contacto y, luego, continúa con la creación de la cuenta cuando responda. Este es un patrón de registro común, por lo que los usuarios están acostumbrados a él.

Puedes considerar el acceso sin contraseña enviando 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 este.

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.

Considera la duración de la sesión

Cualquiera sea el enfoque que adoptes para la identidad del usuario, deberás tomar una decisión cuidadosa sobre la duración de la sesión: cuánto tiempo permanece conectado el usuario y qué podría hacer que se cierre su sesión.

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

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

Puedes ayudar a los administradores de contraseñas integrados y de terceros del navegador a sugerir y almacenar 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 los navegadores modernos, ya que sincronizan las cuentas en todos los dispositivos, en las apps web y específicas de la plataforma, y en los dispositivos nuevos.

Por lo tanto, es muy importante codificar los formularios de registro correctamente, en particular, usar los valores de autocompletado correctos. En los formularios de registro, usa autocomplete="new-password" para las contraseñas nuevas y agrega valores de autocompletar 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 básica integrada del navegador. Puedes obtener más información en Prácticas recomendadas para el formulario de pago y dirección.

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

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

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 las contraseñas no seguras.

No permitir contraseñas hackeadas

Cualquiera sea la regla que elijas para las contraseñas, nunca debes permitir contraseñas que se hayan expuesto en violaciones de seguridad.

Una vez que el usuario ingresa una contraseña, debes verificar que no sea una contraseña que ya se haya vulnerado. El sitio Have I Been Pwned proporciona una API para la verificación de contraseñas, o bien puedes ejecutarla como un servicio por tu cuenta.

El Administrador de contraseñas de Google también te permite verificar si alguna de tus contraseñas existentes se vio comprometida.

Si rechazas la contraseña que propone un usuario, indícale específicamente el motivo del rechazo. Mostrar los problemas intercalados y explicar cómo corregirlos, tan pronto como el usuario haya ingresado un valor, no después de que haya enviado el formulario de registro y haya tenido que esperar una respuesta de tu servidor.

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

No prohibir el pegado de contraseñas

Algunos sitios no permiten pegar texto en los campos de contraseña.

No permitir que se peguen contraseñas molesta a los usuarios, fomenta el uso de contraseñas fáciles de recordar (y, por lo tanto, más fáciles de vulnerar) y, según organizaciones como el Centro Nacional de Seguridad Cibernética del Reino Unido, en realidad 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 permitir pegar contraseñas no evita las vulnerabilidades del portapapeles.

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.

No forzar actualizaciones de contraseñas

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 incentive a las personas a usar contraseñas no seguras y fáciles de recordar, o a mantener un registro físico de las contraseñas.

En lugar de forzar las actualizaciones de contraseñas, debes supervisar la actividad inusual de las cuentas 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 proporcionar a los usuarios acceso al historial de acceso a su cuenta, en el que se muestre 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

Haz que sea obvio para 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 facilitarles a los usuarios la opción de restablecer su contraseña si la olvidan. El Open Web Application Security Project proporciona orientación detallada sobre cómo controlar las contraseñas perdidas.

Para proteger tu empresa y a tus usuarios, es especialmente importante ayudarlos a cambiar su contraseña si descubren que se vio comprometida. Para que esto sea más fácil, 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 tus usuarios directamente a la página en la que pueden cambiar la contraseña de tu sitio. Esta función ya se implementó en Safari y Chrome, y pronto estará disponible en otros navegadores. Ayuda a los usuarios a cambiar contraseñas fácilmente agregando una URL conocida para cambiar contraseñas explica cómo implementar esta función.

También debes facilitarles a los usuarios la eliminación de sus cuentas si así lo desean.

Ofrecer acceso con proveedores de identidad de terceros

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

La 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. Para los usuarios que crean una cuenta con acceso federado, no es necesario que pidas, comuniques ni almacenes contraseñas.

También es posible que puedas acceder a información adicional verificada del perfil desde el acceso federado, como una dirección de correo electrónico, lo que significa que el usuario no tiene que ingresar esos datos y tú no necesitas realizar la verificación por tu cuenta. El acceso federado también puede facilitarles mucho las cosas a los usuarios cuando obtienen un dispositivo nuevo.

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

Simplifica el cambio de cuentas

Muchos usuarios comparten dispositivos y cambian de cuenta con el mismo navegador. Independientemente de si los usuarios acceden al inicio de sesión federado o no, debes facilitar el cambio de cuenta.

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

Considera ofrecer la autenticación de varios factores

La autenticación de varios factores significa garantizar que los usuarios proporcionen la autenticación de más de una manera. Por ejemplo, además de solicitarle al usuario que establezca una contraseña, también puedes aplicar la verificación con un código de un solo uso enviado por correo electrónico o mensaje de texto SMS, o bien con un código de un solo uso basado en una app, una llave de seguridad o un sensor de huellas dactilares. 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.

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

Ten cuidado con los nombres de usuario

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

Si tu sitio requiere nombres de usuario, no les impongas reglas poco razonables ni impidas que los usuarios actualicen sus nombres de usuario. 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.

También asegúrate de usar autocomplete="username" para los nombres de usuario.

Realiza pruebas 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 de la ventana gráfica pueden causar problemas de diseño. BrowserStack permite realizar pruebas gratuitas para proyectos de código abierto en una variedad de dispositivos y navegadores.

Implementa estadísticas y Real User Monitoring

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

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

Sigue aprendiendo

Foto de @ecowarriorprincess en Unsplash.