Design
Pantallas
Para qué

Especificación detallada de cada pantalla: datos mostrados, estados, acciones disponibles y navegación.

Audiencia

Diseño e ingeniería.

Login

Auth --> Pantalla 1 de 5

Propósito: El usuario accede a su cuenta de forma rápida y segura.
JTBD: “Cuando quiero acceder a mi salud, quiero entrar rápido y seguro”
Ruta: /login
Módulo: PAM-2

Features

# Feature Descripción Prioridad
1 Email + magic link Ingresa email, recibe link al correo (sin contraseña) P0
2 Inicio de sesión social OAuth con proveedores sociales P0
3 Biometrico Autenticación biometrica (rostro / huella) para sesiones activas P0
4 Recordar dispositivo Token persistente en dispositivos de confianza P1
5 Link a registro CTA para nuevos usuarios con código de invitación P0
6 Link a forgot password Recuperar acceso si hay problemas P1

States

Loading

  • Visual: Skeleton shimmer en formulario (500ms primera carga)
  • Duración: <800ms
  • Copy: “Cargando…”

Loaded (Normal)

  • Visual: Campo email centrado, botones de inicio de sesión social debajo, biometrico arriba si sesión previa
  • Datos: Último email usado (localStorage), estado de sesión

Empty

  • Trigger: Primera visita, sin sesión previa
  • Visual: Formulario limpio, foco automático en campo email
  • Copy: “Inicia sesión en ADEN”
  • CTA: [Crear cuenta] --> /registro

Error

  • Trigger: Email no registrado, link expirado, cuenta bloqueada
  • Copy: “No encontramos una cuenta con ese email” / “Este enlace ya expiró” / “Tu cuenta está bloqueada temporalmente”
  • CTA: [Reenviar enlace] / [Crear cuenta] / [Contactar soporte]

Cuenta Bloqueada

  • Trigger: 5 intentos fallidos
  • Visual: Mensaje de bloqueo con timer de 15 minutos
  • Copy: “Tu cuenta está bloqueada temporalmente. Intenta en 15 minutos.”
  • CTA: [Contactar soporte]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Email Paciente email maria@ejemplo.com
Último login Sesión last_login Hace 2 días

Acciones

Acción Tipo Resultado
Ingresar email Input + Tap “Enviar código” Envía magic link al correo
Inicio de sesión social Tap botón proveedor social OAuth flow --> dashboard o registro
Biometrico Prompt biometrico Autenticación directa --> dashboard
Crear cuenta Tap link Navega a /registro
Olvidaste contraseña Tap link Navega a /forgot-password
  • Viene de: Apertura de app, deep link, sesión expirada
  • Va a: Dashboard (login exitoso), Registro (nueva cuenta), Forgot Password, Onboarding (primera vez)
  • Back: Cierra la app