Prácticas recomendadas para el formulario de registro

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

Sam Dutton

Si en algún momento los usuarios necesitan acceder a su sitio, recomendamos tener un buen diseño de formulario de registro fundamental. Esto es especialmente cierto para las personas con conexiones deficientes, en dispositivos móviles, en apurado o bajo estrés. Los formularios de registro mal diseñados tienen porcentajes de rebote altos. Cada rebote podría significar la pérdida y el descontento del usuario, no solo una pérdida de registro. oportunidades.

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

Lista de tareas

Si puedes, evita acceder a tu cuenta

Antes de implementar un formulario de registro y pedirles a los usuarios que creen una cuenta en tu sitio, considera lo siguiente: si realmente lo necesitas. Siempre que sea posible, evita usar funciones de acceso restringido con fines de acceso.

El mejor formulario de registro no es un formulario de registro.

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

Si la principal razón por la que solicitas a los usuarios que creen una cuenta es para guardar información entre las navegaciones o de navegación, considera usar el almacenamiento del cliente en su lugar. Para compras de sitio web, obligar a los usuarios a crear una cuenta para realizar una compra se menciona como una de las principales razones para realizar compras. que abandonan el carrito. Debes establecer como predeterminada la confirmación de la compra como invitado.

Haz que el acceso sea evidente

Demuestra cómo crear una cuenta en tu sitio, por ejemplo, con Acceder o Acceder. en la parte superior derecha de la página. Evita usar un ícono ambiguo o una redacción vaga ("¡Únete!, “Unirse”) y no oculte la información de acceso en el menú de navegación. El experto en usabilidad Steve Krug, resumió este enfoque sobre la usabilidad del sitio web: ¡No me hagas pensar! Si necesitas convencer a otros miembros de tu equipo web, usa las estadísticas para mostrar el impacto de los distintos opciones de estado.

Se ven dos capturas de pantalla de una simulación del sitio web de comercio electrónico 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 solo dice "Acceder".
Haz que el acceso sea evidente. Un icono puede ser ambiguo, pero un signo in o vínculo es obvio.
Capturas de pantalla del acceso a Gmail: una página, en la que se muestra el botón Acceder, cuando se hace clic en los clientes potenciales al 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 ventanas de mayor tamaño que las que se muestran aquí, Gmail muestra el vínculo Acceder y la opción Crear un en el botón de la cuenta.

Asegúrate de vincular las cuentas de los usuarios que se registren con un proveedor de identidad, como Google, y que te registras 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. de los datos del perfil del proveedor de identidad y coincidan con 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()}`);
}

Aclarar cómo acceder a los detalles de la cuenta

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

Cortar el desorden del formulario

En el flujo de registro, tu trabajo es minimizar la complejidad y mantener la concentración del usuario. Olvídate del desorden. Este no es el momento para las distracciones y las tentaciones.

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

Cuando te registres, pide lo menos posible. Recopilar datos adicionales del usuario (como el nombre y la dirección) solo cuando lo necesitas y cuando el usuario vea un beneficio claro al proporcionar esos datos. Recuerda que cada elemento de datos que comunique y almacene genere costos y responsabilidades.

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

Se recomienda considerar el acceso sin contraseña enviando un código a los usuarios cada vez que accedan. un nuevo dispositivo o navegador. Sitios como Slack y Medium usan una versión de esta función.

.
Accede a medium.com sin contraseñas.

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

Considera la duración de la sesión

Sea cual sea el enfoque que adoptes con respecto a la identidad del usuario, deberás tomar una decisión cuidadosa sobre la Duración: cuánto tiempo permanece conectado el usuario y qué puede llevar a que usted salga de su cuenta.

Determina si los usuarios utilizan un dispositivo móvil o una computadora de escritorio, comparten en su escritorio o en 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 de terceros y del navegador integrado a sugerir y almacenar contraseñas para que los usuarios no necesitan elegir, recordar ni escribir contraseñas por su cuenta. Los administradores de contraseñas funcionan bien en navegadores modernos, sincronización de cuentas entre dispositivos, aplicaciones web y específicas de la plataforma, y para dispositivos nuevos.

Por eso, es muy importante codificar correctamente los formularios de registro, sobre todo el uso de las herramientas Autocomplete. En los formularios de registro, usa autocomplete="new-password" para obtener contraseñas nuevas y agrega corregir los valores de autocompletar en 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 name y id. valores en los formularios de registro y acceso para el elemento form, así como cualquier input, select y textarea.

También debes usar el atributo type adecuado para proporcionar el teclado correcto en el dispositivo móvil y habilitar la validación básica integrada por el navegador. Obtén más información en el artículo Prácticas recomendadas para el formulario de pago y dirección.

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

Permitir que los administradores de contraseñas sugieran contraseñas es la mejor opción y se recomienda que los usuarios acepten 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 contraseñas. la potencia de los datos. 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

Independientemente de las reglas que elijas para las contraseñas, nunca debes permitir las contraseñas que estén expuestas en violaciones de la seguridad.

Cuando un usuario ingresa una contraseña, debes comprobar que no sea una contraseña que ya se haya ingresado vulnerar con facilidad. El sitio Has I Been Pwned proporciona una API para contraseñas. verificar o ejecutarlo como un servicio.

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

Si rechazas la contraseña que propone el usuario, indícale específicamente el motivo. Muestra los problemas intercalados y explica cómo solucionarlos, tan pronto como el usuario ingresa un valor, no después de que haya enviado el formulario de registro y haya tenido que espera una respuesta del servidor.

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

No prohibir que se pegue con contraseña

Algunos sitios no permiten que se pegue texto en las contraseñas.

No permitir el pegado de contraseñas molesta a los usuarios, fomenta contraseñas que sean fáciles de recordar (y, por lo tanto, que puede ser más fácil de vulnerar) y, según organizaciones como el equipo Cyber Security Centre, en realidad puede reducir la seguridad. Los usuarios solo se dan cuenta de que no está permitido pegar después de que intentan pegar su contraseña. Rechazar el pegado de la contraseña no evita las vulnerabilidades del portapapeles.

Nunca almacenes ni transmitas contraseñas en texto sin formato

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

No forzar las actualizaciones de contraseñas

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

Forzar las actualizaciones de las contraseñas puede ser costoso para los departamentos de TI y molestar a los usuarios, y no tiene mucho que hacer, en la seguridad. También es probable que motive a las personas usar contraseñas no seguras memorables o 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 deberías supervisar las contraseñas hackeadas por violaciones de la seguridad de los datos.

También debes brindar a tus usuarios acceso al historial de acceso a sus cuentas, y mostrarles dónde y el momento de acceso.

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

Facilita el cambio o el restablecimiento de contraseñas

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

Por supuesto, también debe facilitar que los usuarios restablezcan su contraseña si la olvidan. Open Web Application Security Project proporciona orientación detallada sobre cómo controlar las pérdidas y contraseñas.

Para mantener la seguridad de tu empresa y la de los usuarios, es muy importante ayudar a los usuarios a cambiar sus si descubren que la hackearon. Para facilitar este proceso, /.well-known/change-password URL de tu que te redirecciona a la página de administración de contraseñas. Permite que los administradores de contraseñas naveguen los usuarios directamente a la página donde pueden cambiar la contraseña de tu sitio. Esta función es ahora se implementa en Safari y Chrome, y estará disponible en otros navegadores. Ayuda a los usuarios a cambiar las contraseñas fácilmente agregando una URL conocida para cambiar contraseñas explica cómo implementar esto.

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

Ofrece acceso a través de proveedores de identidad externos

Muchos usuarios prefieren acceder a 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 las opciones de acceso de Google y Apple.

Este enfoque tiene varias ventajas. Para los usuarios que crean una cuenta con acceso federado, puedes no necesitan solicitar, comunicarse ni almacenar contraseñas.

También es posible que tenga acceso a información adicional del perfil verificado desde el acceso federado, como como una dirección de correo electrónico, lo que significa que el usuario no tiene que ingresar esos datos y tú no tienes que la verificación por tu cuenta. El acceso federado también puede facilitar mucho a los usuarios cuando obtienen una dispositivo nuevo.

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

Simplifica el cambio de cuentas

Muchos usuarios comparten dispositivos y cambian de una cuenta a otra usando el mismo navegador. Si los usuarios acceden un acceso federado o no, deberías simplificar el cambio de cuentas.

Gmail, mostrando el cambio de cuenta
Cómo cambiar de cuenta en Gmail.

Considera ofrecer la autenticación de varios factores

La autenticación de varios factores implica garantizar que los usuarios proporcionen la autenticación de más de una manera. Además de exigir al usuario que establezca una contraseña, podrías aplicar de manera forzosa la verificación mediante una contraseña de un solo uso que se envía por correo electrónico o un mensaje de texto SMS, o bien mediante una contraseña de un solo uso código, llave de seguridad o sensor de huellas dactilares. Prácticas recomendadas para las OTP por SMS y Cómo habilitar una autenticación sólida con WebAuthn te explicaremos cómo implementar la autenticación de varios factores.

Por supuesto, debe ofrecer (o aplicar) la autenticación de varios factores si su sitio administra datos personales o información sensible.

Ten cuidado con los nombres de usuario

No insistas en un nombre de usuario a menos (o hasta que) lo necesites. Permitir 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 bien el acceso federado si así lo prefieren. No los obligues a elegir y recordar un nombre de usuario.

Si tu sitio requiere nombres de usuario, no impongas reglas injustificadas sobre ellos y no detengas a los usuarios para que no 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 un nombre de usuario.

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

Haz pruebas en una gran 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 vista del puerto pueden causar problemas de diseño. BrowserStack permite realizar pruebas gratuitas para proyectos de código abierto en una gran variedad de dispositivos y navegadores.

Implementar análisis y supervisión de usuarios reales

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

Con pequeños cambios, pueden marcar 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 se expusieron a través de pruebas locales.

Sigue aprendiendo

Foto de @ecowarriorprincess en Unsplash