Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Recuperar Acceso

Auth --> Pantalla 4 de 5

Propósito: El usuario solicita un enlace de recuperación cuando no puede acceder a su cuenta.
JTBD: “Cuando quiero acceder a mi salud, quiero entrar rápido y seguro”
Ruta: /forgot-password
Módulo: PAM-2


Features

# Feature Descripción Prioridad
1 Input email Campo para el correo registrado P0
2 Enviar enlace Botón que dispara el magic link de recuperación P0
3 Confirmación enviado Pantalla de confirmación post-envió P0
4 Link a login Volver al login si recuerda sus datos P1

States

Loading

  • Visual: Skeleton en campo email y botón (300ms)
  • Duración: <500ms
  • Copy: “Cargando…”

Loaded (Normal)

  • Visual: Campo email centrado + botón “Enviar enlace” + copy explicativo
  • Datos: Ninguno precargado

Empty

  • Trigger: Pantalla recien cargada
  • Visual: Campo email vacio con foco automático
  • Copy: “Ingresa tu correo y te enviaremos un enlace para recuperar tu acceso.”
  • CTA: [Enviar enlace]

Error

  • Trigger: Email no registrado, formato inválido
  • Copy: “No encontramos una cuenta con ese correo.” / “Ingresa un correo válido.”
  • CTA: [Crear cuenta] / [Reintentar]

Enlace Enviado

  • Trigger: Email enviado exitosamente
  • Visual: Ilustración de correo + mensaje de confirmación
  • Copy: “Revisa tu correo. Te enviamos un enlace para recuperar tu acceso.”
  • CTA: [Volver al inicio de sesión]

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Email ingresado Paciente email maria@ejemplo.com

Acciones

Acción Tipo Resultado
Ingresar email Input texto Válida formato en tiempo real
Enviar enlace Tap botón Envía magic link --> estado “Enlace Enviado”
Volver a login Tap link Navega a /login
Crear cuenta Tap link (en error) Navega a /registro

  • Viene de: Login (link “Olvidaste tu acceso?”)
  • Va a: Login (después de enviar enlace), Registro (si no tiene cuenta)
  • Back: /login