Autenticación
Descripción general
El patrón de autenticación le permite a un usuario obtener acceso a su portal de clientes ingresando su dirección de correo electrónico y contraseña.
Cuándo se debe utilizar
- Al autenticar las credenciales de un usuario.
- Cuando un usuario debe iniciar sesión en su portal por primera vez.
- Cuando un usuario cierra la sesión voluntariamente o esta se cerró debido a inactividad y necesita volver a iniciar sesión.
Anatomía
- Título y subtítulo: Título h1 con un subtítulo opcional que muestra información adicional. Utilice “Iniciar sesión” en lugar de “Ingresar”.
- Dirección de correo electrónico: Permite al usuario ingresar la dirección de correo electrónico asociada a su portal. Un rótulo alternativo para este campo es “Nombre de usuario”.
- Contraseña: Permite al usuario ingresar la contraseña de su portal. Por razones de seguridad, las contraseñas no se muestran como entradas del usuario.
- Enlace “¿Olvidó su contraseña?”: Lleva al usuario a una página de restablecimiento de contraseña.
- Recordar mi correo electrónico (opcional): Guarda la dirección de correo electrónico del usuario y presenta un campo completo en el siguiente intento de inicio de sesión.
- Botón de inicio de sesión: Inicia la sesión del usuario en el portal.
- Enlace de registro: Lleva al usuario a una página donde puede crear una cuenta nueva. Use “Registrarse” en lugar de “Crear cuenta”.
- ¿Necesita ayuda? (opcional): Enlace de ayuda para los usuarios que tienen problemas para iniciar sesión.
Pautas generales
Validación y errores
- Utilice errores integrados para abordar problemas específicos antes de que el usuario pueda avanzar.
- Los campos de entrada de dirección de correo electrónico y contraseña no se validan hasta que el usuario haga clic en el botón de inicio de sesión.
- Los mensajes de error deben ser claros, concisos y útiles. Explique el problema y proporcione la información necesaria para que el usuario solucione el error.
Creación de contraseñas y administrador de contraseñas
- Los requisitos para las contraseñas deben estar visibles en el momento en que el usuario cree la contraseña. Indique los requisitos para las contraseñas de manera clara y asegúrese de que el usuario pueda verlos todo el tiempo que el campo esté seleccionado.
- Si puede reducir de manera adecuada algunas de las restricciones técnicas, tendrá menos texto para mostrar y menos reglas para que el usuario procese, lo que hará que la creación de la contraseña sea más rápida.
Fuente: Nielsen Norman Group
Desarrollo
Permita lo siguiente:
- que los administradores de contraseñas tengan acceso al campo de entrada;
- que las funciones de autorrelleno respondan en el campo de contraseña;
- que los usuarios hagan visible la contraseña.
Contenido
Pautas generales de redacción
- En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
- Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
- Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
- Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
- Las palabras y las oraciones deben ser breves.
Marcado de campos obligatorios en los formularios de inicio de sesión
Está bien omitir el asterisco que indica obligatoriedad (*) en los formularios de inicio de sesión. La mayoría de los usuarios han completado ya muchos formularios de inicio de sesión y saben que, para iniciar sesión, debe ingresar un correo electrónico o nombre de usuario y una contraseña.
Sin embargo, es peligroso no marcar los campos obligatorios en un formulario de registro. Si su formulario de registro incluye más campos que los de nombre de usuario y contraseña, marque todos los campos obligatorios (incluidos los de nombre de usuario y contraseña).
Fuente: Nielsen Norman Group
Iniciar sesión e inicio de sesión
No confunda la acción “iniciar sesión” (log in) con la frase sustantiva “inicio de sesión” (login).
En inglés, log in es una frase verbal de dos palabras.
Cuando se hace referencia a la página o proceso, se convierte en una palabra (login): página de inicio de sesión o proceso de inicio de sesión.
Para obtener una lista de términos comunes de la interfaz de usuario y rótulos de acción recomendados para el contenido de la interfaz de usuario de Guidewire, consulte la página de terminología de acciones comunes de Jutro.
Capacidad de ser responsive
En los dispositivos móviles, el patrón de autenticación cubre toda la pantalla.
Tematización
De forma predeterminada, los temas y la marca coinciden con los de la aplicación, a menos que se invaliden.
Los patrones pueden adoptar ciertos temas para cumplir con los requisitos específicos de la marca y las necesidades del cliente. Esto incluye elementos visuales como colores, tipografía, íconos, botones y otros componentes o elementos gráficos.
Más información sobre la tematización con tokens de diseño
Investigación que lo avala
La investigación para este patrón consistió en un análisis competitivo. El análisis competitivo es una técnica de investigación que se utiliza para comparar y entender en qué están trabajando otros en el mismo campo. Los diseñadores de UX analizaron los patrones de otras bibliotecas de diseño. Buscaron fortalezas y debilidades relativas, tendencias y diferencias. Los diseñadores utilizaron esa información, encontraron puntos en común y crearon un patrón basado en esas prácticas frecuentes.
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.