Prácticas recomendadas para el formulario de registro

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

Sam Dutton

Si los usuarios alguna vez necesitan acceder a tu sitio, es fundamental que tengas un buen diseño del formulario de registro. Esto es particularmente evidente en el caso de personas con malas conexiones, dispositivos móviles, apuro o bajo estrés. Los formularios de registro mal diseñados obtienen porcentajes de rebote altos. Cada rebote podría implicar la pérdida de un usuario y su descontento, 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

Si puedes, evita el acceso

Antes de implementar un formulario de registro y pedirles a los usuarios que creen una cuenta en tu sitio, considera si es realmente necesario. Siempre que sea posible, evita usar funciones de control de acceso restringido para el usuario.

El mejor formulario de registro es ningún formulario de registro.

Cuando le pides a un usuario que cree una cuenta, te enfrentas a lo que está intentando lograr. Le estás pidiendo un favor y le estás pidiendo al usuario que te confíe datos personales. Cada contraseña y elemento de datos que almacenas tiene una "deuda de datos" de privacidad y seguridad, que se convierte en un costo y una responsabilidad para tu sitio.

Si el motivo principal por el que solicitas 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 menciona como uno de los principales motivos de abandono del carrito de compras. Debes establecer como predeterminada la confirmación de la compra como invitado.

Hacer que el acceso sea evidente

Deja en claro cómo crear una cuenta en tu sitio, por ejemplo, con el botón Acceder o Acceder en la parte superior derecha de la página. Evita utilizar un ícono ambiguo o una redacción imprecisa ("¡Sube a bordo!", "Únase a nosotros") y no oculte la información de acceso en un menú de navegación. El experto en usabilidad Steve Krug resumió este enfoque sobre la usabilidad de sitios web: ¡No me hagas pensar! Si necesitas convencer a otros miembros de tu equipo web, usa estadísticas para mostrar el impacto de diferentes opciones.

Dos capturas de pantalla de una maqueta de sitio web de comercio electrónico en un teléfono Android. El que está a la izquierda usa un ícono para el vínculo de acceso que es un poco ambiguo; el de la derecha simplemente dice "Acceder".
El acceso debe ser evidente. Un ícono puede ser ambiguo, pero el botón o vínculo Acceder es obvio.
Capturas de pantalla del acceso a Gmail: en una página, se muestra el botón Acceder cuando se hace clic en él para ir a un formulario que también tiene el vínculo Crear 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 el que se muestra aquí, Gmail muestra el vínculo Acceder y el botón Crear una cuenta.

Asegúrate de vincular las cuentas de los usuarios que se registran mediante un proveedor de identidad como Google, como Google, y que también se registran con correo electrónico y contraseña. Es fácil hacerlo 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. 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()}`);
}

Deja en claro cómo acceder a los detalles de la cuenta

Una vez que un usuario haya accedido, aclara cómo acceder a los detalles de la cuenta. En particular, haz que sea evidente cómo cambiar o restablecer contraseñas.

Cortar formularios desordenados

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

No distraigas a los usuarios para que no completen el registro.

Cuando te registres, pide el menor precio 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 comuniques y almacenes genera costos y responsabilidades.

No dupliques tus entradas solo para asegurarte de que los usuarios obtengan sus detalles de contacto correctamente. Eso ralentiza el autocompletado y no tiene sentido si los campos del formulario se autocompletan. En su lugar, envía un código de confirmación al usuario una vez que haya ingresado sus detalles de contacto y, una vez que responda, continúa con la creación de la cuenta. 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 un código a los usuarios cada vez que accedan a un dispositivo o navegador nuevo. Los 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

Sin importar el enfoque que adoptes con respecto a la identidad del usuario, deberás tomar una decisión cuidadosa acerca de la duración de la sesión, es decir, cuánto tiempo permanecerá conectado y qué podría causar que salgas de la sesión.

Considera si tus usuarios usan un dispositivo móvil o una computadora de escritorio, y si comparten contenido desde una computadora de escritorio o desde dispositivos.

Ayuda 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 a sugerir y almacenar contraseñas para que los usuarios no deban elegir, recordar ni escribir contraseñas. Los administradores de contraseñas funcionan bien en navegadores modernos, ya que sincronizan las cuentas en todos los dispositivos, en apps web y específicas de la plataforma y en dispositivos nuevos.

Esto hace que sea muy importante codificar los formularios de registro de forma correcta, en particular para usar los valores de autocompletado correctos. En los formularios de registro, usa autocomplete="new-password" para 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 name y id en los formularios de registro y acceso, para el elemento form, así como cualquier elemento input, select y textarea.

También debes usar el atributo type adecuado para proporcionar el teclado adecuado en dispositivos móviles y habilitar la validación básica integrada por parte del navegador. Para obtener más información, consulta las Prácticas recomendadas para los formularios de pagos y direcciones.

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, por lo que debes recomendarles a los usuarios que acepten las contraseñas seguras que sugieren los navegadores y administradores de navegadores de terceros.

Sin embargo, muchos usuarios desean 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 permitas contraseñas hackeadas

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

Una vez que el usuario ingresa una contraseña, debes comprobar que no sea una contraseña que ya esté hackeada. El sitio Have I Been Pwned proporciona una API para la comprobación de contraseñas. También puedes ejecutarla como un servicio por tu cuenta.

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

Si rechazas la contraseña que propone un usuario, indícale específicamente el motivo del rechazo. Muestra los problemas intercalados y explica cómo solucionarlos en cuanto el usuario ingrese un valor (no después de enviar el formulario de registro y tener que esperar una respuesta del servidor).

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

No prohibir el pegado de contraseñas

En algunos sitios, no se permite que se pegue texto en entradas de contraseñas.

Inhabilitar el pegado de contraseñas molesta a los usuarios, fomenta las contraseñas que son fáciles de recordar (y, por lo tanto, pueden ser más fáciles de vulnerar) y, según organizaciones como el Centro Nacional de Seguridad Cibernética del Reino Unido, realmente puede reducir la seguridad. Los usuarios solo se enteran de que no está permitido pegar después de intentar pegar su contraseña, por lo que no permitir el pegado de contraseñas no evita las vulnerabilidades del portapapeles.

Nunca almacenes ni transmitas contraseñas en texto sin formato

Asegúrate de usar sals y 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 manera 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 alienten a las personas a usar contraseñas poco 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 la cuenta y advertir a los usuarios. Si es posible, también debes vigilar si hay contraseñas hackeadas debido a violaciones de la seguridad de los datos.

También debes proporcionarles a los usuarios acceso al historial de acceso de sus cuentas para 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.

Facilitar el cambio o el restablecimiento de contraseñas

Deja en 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 deberás facilitarles a los usuarios el proceso de restablecer su contraseña si la olvidan. En Open Web Application Security Project, se proporciona orientación detallada sobre cómo manejar las contraseñas perdidas.

Para mantener tu empresa y tus usuarios seguros, es muy importante ayudarlos a cambiar su contraseña si descubren que se hackeó. Para facilitar este proceso, debes agregar una URL /.well-known/change-password a tu sitio que redireccione a la página de administración de contraseñas. Esto permite que los administradores de contraseñas lleven 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 estará disponible en otros navegadores. En Ayuda a los usuarios a cambiar las contraseñas con facilidad, agrega una URL conocida para cambiar las contraseñas, que explica cómo implementar esto.

También debes facilitar la eliminación de la cuenta a los usuarios si eso es lo que desean.

Ofrecer acceso mediante 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 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. Para los usuarios que crean una cuenta con acceso federado, no es necesario solicitar, comunicar ni almacenar contraseñas.

También puedes acceder a información adicional del perfil verificado 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 que tú no tienes que realizar la verificación tú mismo. El acceso federado también puede facilitar que los usuarios obtengan un dispositivo nuevo.

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

Simplifique el cambio de cuenta

Muchos usuarios comparten dispositivos y cambian de cuenta usando el mismo navegador. Independientemente de si los usuarios acceden al acceso federado o no, debes simplificar el cambio de cuentas.

Gmail, mostrando cambios de cuentas
Cambio de cuenta en Gmail.

Considera ofrecer autenticación de varios factores

La autenticación de varios factores implica asegurarse de que los usuarios proporcionen autenticación de más de una manera. Por ejemplo, además de exigir que el usuario establezca una contraseña, también puedes aplicar la verificación con un código de acceso único enviado por correo electrónico o un mensaje de texto SMS, o con un código único basado en la app, una llave de seguridad o un sensor de huellas dactilares. En las prácticas recomendadas para las OTP por SMS y en Habilita la autenticación sólida con WebAuthn, se explica cómo implementar la autenticación de varios factores.

Si tu sitio maneja información personal o sensible, debes ofrecer (o aplicar) la autenticación de varios factores.

Cuídate con los nombres de usuario

No insistas en un nombre de usuario a menos (o hasta) 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 un 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 injustificadas ni impidas que los usuarios actualicen su nombre 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.

Además, 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 del formulario puede variar, y las diferencias en el tamaño del viewport pueden causar problemas de diseño. BrowserStack permite realizar pruebas gratuitas para proyectos de código abierto en una variedad de dispositivos y navegadores.

Implementación de análisis y supervisión de usuarios reales

Necesitas datos de campo y datos de lab para comprender la experiencia de los usuarios con tus formularios de registro. Analytics y la supervisión real de usuarios (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 (o no) y cuánto tardan en completar el registro.

Con unos pequeños cambios, puede lograr una gran diferencia en los porcentajes de respuesta de los formularios de registro. Analytics y RUM te permiten optimizar y priorizar los cambios, y supervisar tu sitio para detectar problemas que las pruebas locales no exponen.

Sigue aprendiendo

Foto de @ecowarriorprincess en Unsplash.