Prácticas recomendadas para el formulario de registro

Ayude a que sus usuarios se registren, inicien sesión y administren los detalles de su cuenta con un mínimo de esfuerzo.

Sam Dutton

Si los usuarios alguna vez necesitan iniciar sesión en su sitio, entonces un buen diseño del formulario de registro es fundamental. Esto es especialmente cierto para las personas con malas conexiones, en el móvil, con prisa o bajo estrés. Los formularios de registro mal diseñados obtienen altas tasas de rebote. Cada rebote podría significar un usuario perdido y 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 Verificación

Evite el inicio de sesión si puede

Antes de implementar un formulario de registro y pedirles a los usuarios que creen una cuenta en su sitio, considere si realmente lo necesita. Siempre que sea posible, debe evitar las funciones de activación detrás del inicio de sesión.

¡El mejor formulario de registro es no tener ninguno!

Al pedirle a un usuario que cree una cuenta, usted se interpone entre el usuario y lo que él intenta lograr. Usted está pidiendo un favor y le está pidiendo al usuario que le confíe sus datos personales. Cada contraseña y elemento de datos que almacena conlleva una "deuda de datos" de privacidad y seguridad, lo que se convierte en un costo y una responsabilidad para su sitio.

Si la razón principal por la que solicita a los usuarios que creen una cuenta es para guardar información entre navegaciones o sesiones de navegación, considere usar el almacenamiento del lado del cliente. Para los sitios de compras, obligar a los usuarios a crear una cuenta para realizar una compra se cita como una de las principales razones para el abandono del carrito de compras. Debería hacer que el pago como invitado sea el predeterminado.

Haga que el inicio de sesión sea obvio

Haga que sea obvio cómo crear una cuenta en su sitio, por ejemplo, con un botón Iniciar sesión o Regístrese en la parte superior derecha de la página. Evite el uso de un icono ambiguo o palabras vagas ("¡Suba a bordo!", "Únase a nosotros") y no oculte el inicio de sesión en un menú de navegación. El experto en usabilidad Steve Krug resumió este enfoque de usabilidad del sitio web: ¡No me haga pensar! Si necesita convencer a otros miembros de su equipo web, utilice los análisis para mostrar el impacto de las diferentes opciones.

Dos capturas de pantalla de una maqueta de un sitio web de comercio electrónico visto en un teléfono Android. La de la izquierda usa un icono para el enlace de inicio de sesión que es algo ambiguo uno a la derecha simplemente dice 'Iniciar sesión'
Haga que el inicio de sesión sea obvio. Un icono puede ser ambiguo, pero un botón o enlace Iniciar sesión es obvio.
Capturas de pantalla del inicio de sesión para Gmail: una página, que muestra el botón Iniciar sesión, cuando se hace clic en el formulario que también tiene un enlace Crear una cuenta.
La página de inicio de sesión de Gmail tiene un enlace para crear una cuenta.
En tamaños de ventana más grandes que los que se muestran aquí, Gmail muestra un enlace Iniciar sesión y un botón Crear una cuenta.

Asegúrese 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 mediante correo electrónico y contraseña. Eso es fácil de hacer si puede 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 siguiente código muestra cómo acceder a los datos de correo electrónico de un usuario con inicio de sesión de Google.

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

Una vez que un usuario haya iniciado sesión, aclare cómo acceder a los detalles de la cuenta. En particular, haga que sea obvio cómo cambiar o restablecer las contraseñas.

Elimina el desorden

En el flujo de registro, su trabajo es minimizar la complejidad y mantener al usuario enfocado. Elimine el desorden. ¡Este no es el momento de distracciones y tentaciones!

No distraiga a los usuarios mientras completan el registro.

Durante el registro, solicite lo menos posible. Recopile datos de usuario adicionales (como nombre y dirección) solo cuando sea necesario y cuando el usuario vea un beneficio claro al proporcionar esos datos. Tenga en cuenta que cada elemento de datos que comunique y almacene implica un costo y una responsabilidad.

No duplique sus entradas solo para asegurar de que los usuarios ingresen sus datos de contacto correctamente. Eso ralentiza la finalización del formulario y no tiene sentido si los campos del formulario se llenan automáticamente. En su lugar, envíele al usuario un código de confirmación una vez que haya ingresado sus datos de contacto, luego siga con la creación de la cuenta una vez que el usuario responda. Este es un patrón de registro común: los usuarios están acostumbrados.

Es posible que desee considerar el inicio de sesión sin contraseña al enviarle a los usuarios un código cada vez que inician sesión en un nuevo dispositivo o navegador. Sitios como Slack y Medium usan una versión de esto.

Inicio de sesión sin contraseña en medium.com.

Al igual que con el inicio de sesión federado, esto tiene la ventaja adicional de no tener que administrar las contraseñas de los usuarios.

Considere la duración de la sesión

Cualquiera que sea el enfoque que adopte para la identidad del usuario, deberá tomar una decisión cuidadosa sobre la duración de la sesión: cuánto tiempo permanece el usuario conectado y qué puede hacer que usted le cierre la sesión.

Considere si sus usuarios están en dispositivos móviles o de escritorio, y si están en equipos de escritorio o dispositivos compartidos.

Ayude a que los administradores de contraseñas sugieran y almacenen contraseñas de forma segura

Puede ayudar a que los administradores de contraseñas de navegadores integrados y de terceros sugieran y almacenen contraseñas, de modo que los usuarios no tengan que elegir, recordar o escribir contraseñas ellos mismos. Los administradores de contraseñas funcionan bien en los navegadores modernos, al sincronizar las cuentas en todos los dispositivos, en aplicaciones web, las específicas de la plataforma y en dispositivos nuevos.

Esto hace que sea extremadamente importante codificar los formularios de registro correctamente, en particular para usar los valores correctos de autocompletar. Para los formularios de registro utilice autocomplete="new-password" para las nuevas contraseñas y agregue los valores correctos de autocompletar a otros campos de formulario siempre que sea posible, como autocomplete="email" y autocomplete="tel". También puede ayudar a los administradores de contraseñas mediante el uso de diferentes valores name e id en los formularios de registro y de inicio de sesión, para el elemento form en sí, así como también cualquier elemento input, select y textarea.

También debe usar el atributo type apropiado para proporcionar el teclado correcto en el dispositivo móvil y habilitar la validación básica incorporada por parte del navegador. Puede obtener más información en el documento Prácticas recomendadas para formulario de pago y dirección.

Verifique que los usuarios ingresen contraseñas seguras

Permitir que los administradores de contraseñas sugieran contraseñas es la mejor opción, además debe alentar a los usuarios para que acepten las contraseñas seguras sugeridas por los navegadores y administradores de navegadores de terceros.

Sin embargo, muchos usuarios desean ingresar sus propias contraseñas, por lo que debe implementar reglas para la seguridad de las contraseñas. El Instituto Nacional de Estándares y Tecnología de los Estados Unidos explica cómo evitar las contraseñas inseguras.

No permita contraseñas comprometidas

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

Una vez que un usuario ha ingresado una contraseña, debe verificar que no sea una contraseña que ya se haya comprometido. El sitio Have I Been Pwned proporciona una API para la verificación de contraseñas o puede ejecutarlo usted mismo como un servicio.

El Administrador de contraseñas de Google también le permite verificar si alguna de sus contraseñas existentes se ha visto comprometida.

Si rechaza la contraseña que propone un usuario, dígale específicamente por qué se rechazó. Muestre los problemas en línea y explique cómo solucionarlos, 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 su servidor.

Sea claro respecto a por qué se rechaza una contraseña.

No prohíba el pegado de contraseñas

Algunos sitios no permiten que se pegue texto en las entradas de contraseña.

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

Nunca almacene ni transmita contraseñas en texto sin formato

Asegúrese de utilizar el hash con sal para las contraseñas, además ¡no intente inventar su propio algoritmo de hash!

No fuerce las actualizaciones de contraseña

No obligue a que los usuarios actualicen sus contraseñas de forma arbitraria.

Forzar la actualización de contraseñas puede resultar costoso para los departamentos de TI, molesta a los usuarios y no tiene mucho impacto sobre la seguridad. También es probable que fomente que las personas utilicen contraseñas fáciles de recordar inseguras o que mantengan un registro físico de las contraseñas.

En lugar de forzar las actualizaciones de contraseñas, debe controlar la actividad inusual de la cuenta y advertirles a los usuarios. Si es posible, también debe controlar las contraseñas que se vean comprometidas debido a violaciones de datos.

También debe proporcionarles a sus usuarios acceso al historial de inicio de sesión de su cuenta, para mostrarles dónde y cuándo ocurrió un inicio de sesión.

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

Simplifique el cambio o restablecimiento de contraseñas

Indíqueles 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 debe facilitarles a los usuarios el restablecimiento de su contraseña si la olvidan. El Proyecto de seguridad de aplicaciones web de fuente abierta proporciona una guía detallada sobre cómo manejar las contraseñas perdidas.

Para mantener su negocio y sus usuarios seguros, es especialmente importante ayudar a que los usuarios a cambien su contraseña si descubren que se ha comprometido. Para facilitar esto, debe agregar una URL /.well-known/change-password en su sitio que redirija hacia su página de administración de contraseñas. Esto permite que los administradores de contraseñas dirijan a sus usuarios directamente a la página donde pueden cambiar la contraseña de su sitio. Esta función ahora está implementada en Safari, Chrome y llegará a otros navegadores. El documento Ayude a que los usuarios cambien las contraseñas fácilmente al agregar una URL conocida para cambiar las contraseñas explica cómo implementar esto.

También debe facilitarles a los usuarios la eliminación de su cuenta si eso es lo que quieren.

Ofrezca acceso a través de proveedores de identidad de terceros

Muchos usuarios prefieren iniciar sesión en sitios web mediante una dirección de correo electrónico y un formulario de registro de contraseña. Sin embargo, también debe permitir que los usuarios inicien sesión a través de un proveedor de identidad externo, también conocido como inicio de sesión federado.

Página de inicio de sesión de WordPress
Página de inicio de sesión de WordPress, con opciones de inicio de sesión de Google y Apple.

Este enfoque tiene varias ventajas. Para los usuarios que crean una cuenta mediante el inicio de sesión federado, no es necesario que soliciten, comuniquen o almacenen las contraseñas.

También puede acceder a la información de perfil verificada y 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 usted no necesita hacer la verificación usted mismo. El inicio de sesión federado también puede facilitarles mucho las cosas a los usuarios cuando obtienen un nuevo dispositivo.

el documento Integración del inicio de sesión de Google en su aplicación web explica cómo agregar un inicio de sesión federado a sus opciones de registro. Hay muchas otras plataformas de identidad disponibles.

Simplifique el cambio de cuenta

Muchos usuarios comparten dispositivos e intercambian cuentas mediante el mismo navegador. Ya sea que los usuarios accedan al inicio de sesión federado o no, debe simplificar el cambio de cuenta.

Se muestra un cambio de cuenta en Gmail
Cambio de cuenta en Gmail.

Considere ofrecer autenticación multifactor

La autenticación multifactor significa garantizar que los usuarios proporcionen autenticación en más de una forma. Por ejemplo, además de pedirle al usuario que establezca una contraseña, también puede hacer cumplir la verificación mediante un código de acceso único enviado por correo electrónico o un mensaje de texto SMS, o mediante un código único basado en la aplicación, una clave de seguridad o un sensor de huellas dactilares. Los documentos Prácticas recomendadas de SMS OTP y Habilitación de la autenticación robusta con WebAuthn explican cómo implementar la autenticación multifactor.

Sin duda, debe ofrecer (o hacer cumplir) la autenticación multifactor si su sitio maneja información personal o confidencial.

Tenga cuidado con los nombres de usuario

No insista en un nombre de usuario a menos (o hasta) que lo necesite. Permita que los usuarios se registren e inicien sesión solo con una dirección de correo electrónico (o número de teléfono) y una contraseña, o un inicio de sesión federado si lo prefieren. No los obligue a elegir y recordar un nombre de usuario.

Si su sitio requiere nombres de usuario, no les imponga reglas irrazonables y no impida que los usuarios actualicen su nombre de usuario. En su backend, debe generar una identificación única para cada cuenta de usuario, no un identificador basado en datos personales como el nombre de usuario.

También asegúrese de utilizar autocomplete="username" para los nombres de usuario.

Haga pruebas en una variedad de dispositivos, plataformas, navegadores y versiones

Haga pruebas de los formularios de registro en las plataformas más comunes para sus usuarios. La funcionalidad del elemento 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.

Implemente el análisis y monitoreo de usuarios reales

Necesita datos de campo, así como también datos de laboratorio para comprender cómo los usuarios experimentan sus formularios de registro. Los análisis y el monitoreo real de usuarios (RUM) proporcionan datos para la experiencia real de sus usuarios, como cuánto tiempo tardan en cargarse las páginas de registro, con qué componentes de la interfaz de usuario interactúan (o no) los usuarios y cuánto tardan los usuarios en completar el registro.

Los pequeños cambios pueden marcar una gran diferencia en las tasas de finalización de los formularios de registro. Los análisis y el RUM le permiten optimizar y priorizar cambios, además de monitorear su sitio en busca de problemas que no queden expuestos por las pruebas locales.

Siga aprendiendo

Foto de @ecowarriorprincess en Unsplash.