Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Nivel de Salud

Progreso → Detalle Score (L2)

Propósito: Desglosar el Health Score en 6 dominios para entender que impulsa el resultado.
JTBD: Explorar mi salud sin sentirme abrumado
Ruta: /paciente/progreso/nivel-salud
Módulo: PAM-3


Features

# Feature Descripción Prioridad
1 Score principal Gauge 0-100, color por zona (rojo <50, azul 50-79, verde 80+) P0
2 6 dominios desglose Metabólico, cardiovascular, hormonal, inflamatorio, hepatico, renal P0
3 Tendencia 90 días Sparkline con 7 puntos historicos, delta vs ciclo anterior P1
4 Comparación ciclo Barra ciclo 1 vs ciclo 2, mejora/deterioro por dominio P1
5 CTA dominio Tap dominio → lista de biomarcadores de ese dominio P0

States

Loading

  • Visual: Skeleton gauge circular + 6 barras horizontales shimmer
  • Copy: “Analizando tu nivel…”

Loaded (Normal)

  • Datos: Score 85, 6 dominios con % individual, tendencia ascendente

Empty

  • Trigger: Solo 1 ciclo completado (sin comparación)
  • Copy: “Completa tu segundo ciclo para ver comparaciones”
  • CTA: Ver mi plan → /paciente/plan

Error

  • Copy: “No pudimos calcular tu nivel de salud”
  • CTA: Reintentar

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Score total HealthScore valor_actual 85/100
Dominio metabólico Dominio score, nombre 78 Metabólico
Dominio cardiovascular Dominio score, nombre 91 Cardiovascular
Tendencia HealthScore histórico[] [68, 71, 74, 78, 80, 83, 85]
Meta HealthScore meta 95

Acciones

Acción Tipo Resultado
Tap dominio Navegación → Lista biomarcadores filtrada por dominio
Tap tendencia Interacción Tooltip con valor y fecha
Toggle ciclo comparación Filtro Alterna entre ciclo 1 y ciclo 2

  • Viene de: Progreso Overview (hero card)
  • Va a: Exámenes Lista (filtrada por dominio), Detalle Biomarcador
  • Back: Progreso Overview