Diseño de inicio de sesión y registro móvil: un paso de creación de cuenta claro

Elija el momento en que una cuenta se vuelve útil

Comience con el trabajo que la persona vino a hacer. Si la experiencia principal puede funcionar sin una cuenta, permita que las personas exploren primero y soliciten el inicio de sesión cuando lleguen a una función que necesite preferencias guardadas, acceso entre dispositivos, colaboración o una transacción. Las Pautas de interfaz humana de Apple recomiendan retrasar el inicio de sesión cuando sea posible y explicar el beneficio cuando se requiere una cuenta.

Un aviso contextual es más fácil de entender que un muro de tiempo de lanzamiento. Por ejemplo, una aplicación de lectura podría permitirle a alguien buscar títulos y luego pedirle que cree una cuenta cuando decida sincronizar una lista de lectura. Si la creación de una cuenta es esencial desde el principio, diga por qué antes de presentar los campos. Mantenga la explicación concreta y proporcionada: "Crea una cuenta para guardar tus proyectos y abrirlos en otro dispositivo" es más útil que "Únete a nuestra comunidad".

• Separe la información requerida de los detalles del perfil opcionales.
• Para el pago como invitado o una tarea única, considere si la creación de la cuenta puede esperar hasta que se entregue el valor inmediato.
• Una vez que la autenticación sea exitosa, lleve a las personas a la acción que pretendían completar.

Haga que las opciones de inicio de sesión sean claras y reconocibles

Una persona debería poder saber si está creando una cuenta o volviendo a una. Asigne etiquetas distintas a las dos rutas, mantenga la acción principal visualmente clara y coloque métodos alternativos donde puedan compararse sin abrumar la pantalla. Utilice nombres de proveedores y tratamientos de botones aprobados por la plataforma cuando sea relevante; una etiqueta genérica de "Continuar" por sí sola no explica lo que sucede a continuación.

Ofrezca sólo métodos que el producto admita y pueda mantener. El correo electrónico, una clave de acceso o una opción de identidad de plataforma pueden adaptarse a diferentes audiencias. Preséntelos como opciones, no como una afirmación de que un método es universalmente más fácil o seguro. Explique cualquier información adicional requerida.

Es posible que los usuarios recurrentes no recuerden su método de inicio de sesión. Haga que la recuperación y el inicio de sesión alternativo sean visibles y explique qué hacer si un correo electrónico está asociado con un método diferente. La orientación para vincular cuentas puede ayudar a las personas a conservar el acceso a una cuenta existente.

Mantenga los formularios enfocados y compatibles con las herramientas de las personas

Solicite solo los campos necesarios para crear o acceder a la cuenta. Utilice etiquetas persistentes en lugar de depender del texto de marcador de posición como única etiqueta, elija un tipo de entrada y un teclado adecuados y deje clara la siguiente acción. Si el registro necesita varios datos, agrupe los campos relacionados y posponga las preferencias opcionales hasta que la persona llegue al producto.

La autenticación debería funcionar con administradores de contraseñas y autocompletar. Utilice nombres de campo y semántica estándar y evite comportamientos personalizados que impidan el llenado de credenciales. No bloquee el pegado de contraseñas: las personas pueden usar un administrador de contraseñas u otra herramienta. La guía WCAG exige que los navegadores y los administradores de contraseñas de terceros completen los campos de inicio de sesión.

El comportamiento puede variar según los dispositivos y administradores de contraseñas, así que verifique el flujo en las plataformas compatibles y permita la corrección manual. Después de un intento fallido, conserve los valores útiles no confidenciales, como una dirección de correo electrónico, cuando sea práctico.

• Utilice una etiqueta visible como "Dirección de correo electrónico" y una etiqueta de contraseña clara.
• Permitir que las personas revelen o verifiquen una contraseña cuando sea apropiado, sin que ese control sea la única forma de corregir la entrada.
• Mantenga el botón principal cerca de los campos y asígnele una etiqueta específica de la acción, como "Crear cuenta" o "Iniciar sesión".

Diseña los errores, la recuperación y las visitas posteriores

Un error útil identifica el campo afectado o el paso fallido en el texto y le indica a la persona cómo continuar. "Algo salió mal" no es suficiente cuando un formato de correo electrónico no es válido o un campo está vacío. El Criterio de Conformidad 3.3.1 de las WCAG 2.2 requiere que los errores de entrada detectados se identifiquen y describan en texto; El color o un icono no deben transmitir el mensaje por sí solos.

Utilice un lenguaje neutro y coloque las indicaciones específicas junto al campo correspondiente. Por ejemplo, un ejemplo hipotético de texto para una dirección con formato incorrecto podría decir: "Ingrese una dirección de correo electrónico en el formato [email protected]". Si no se puede iniciar sesión, un mensaje podría decir: "No pudimos iniciar sesión con esos detalles. Verifique su correo electrónico y contraseña, o restablezca su contraseña". Evite exponer información confidencial de la cuenta en mensajes de error; elija una redacción que se ajuste a las necesidades de privacidad y prevención de abusos del producto.

Explique qué sucede después de que alguien solicita un reinicio, proporcione una forma de volver a iniciar sesión y ayude a las personas a encontrar el método que usaron antes. En visitas posteriores, muestre claramente el estado de inicio de sesión y proporcione una ruta a la configuración de la cuenta, el cierre de sesión y la ayuda. Si se pueden crear cuentas en la aplicación, facilite la localización de la eliminación de cuentas.

• Asocie un error con el campo que describe y hágalo perceptible sin color únicamente.
• Mantenga las acciones de recuperación cerca del formulario de inicio de sesión y evite que los usuarios se reinicien innecesariamente.
• Revise los estados de primer uso y de usuario recurrente, incluidas las direcciones de correo electrónico modificadas y los métodos de inicio de sesión no disponibles.

Una revisión práctica del flujo de cuentas

Camine a través del flujo como una persona nueva, una persona que regresa y alguien que recupera el acceso. Consulta las pantallas en contexto. La biblioteca de patrones móviles puede ayudar a los equipos a comparar cómo los formularios organizan entradas, etiquetas y acciones.

• ¿Pueden las personas alcanzar un valor útil del producto antes de iniciar sesión cuando la cuenta no es esencial?
• ¿La pantalla explica por qué se necesita una cuenta y qué información se requiere?
• ¿Puede una persona distinguir entre registro, inicio de sesión, métodos alternativos y recuperación de cuenta?
• ¿Las etiquetas de los campos permanecen visibles y se pueden autocompletar y pegar las credenciales?
• ¿Los errores nombran el problema en texto, conservan información útil y sugieren el siguiente paso?
• Después del éxito, ¿la persona regresa a la tarea que comenzó?