Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Detalle Biomarcador

Progreso → Bottom Sheet (L3)

Propósito: Mostrar contexto completo de un biomarcador: rango, tendencia, riesgo y qué hacer.
JTBD: Explorar mi salud sin sentirme abrumado
Ruta: /paciente/progreso/exámenes/:id (bottom sheet)
Módulo: PAM-3


Features

# Feature Descripción Prioridad
1 Barra de rango 3 zonas con marcador actual, harm anchor visible P0
2 Gráfico 90 días Line chart con valor por ciclo, área de rango óptimo sombreada P0
3 Riesgo cardiovascular Badge RCV si aplica: “Este valor impacta tu riesgo cardiovascular” P1
4 Qué hacer 1-2 recomendaciones concretas basadas en el valor P0
5 Evidencia Link a explicación simple de por qué importa este marcador P2

States

Loading

  • Visual: Skeleton: barra + chart área + 2 líneas texto shimmer
  • Copy: “Cargando detalle…”

Loaded (Normal)

  • Datos: Valor, rango, chart, recomendaciones, RCV si aplica

Sin Historial

  • Trigger: Solo 1 medición (primer ciclo)
  • Copy: “Con tu próximo ciclo veremos como evoluciona”

Error

  • Copy: “No pudimos cargar este examen”
  • CTA: Reintentar

Valor en Atención

  • Trigger: Biomarcador fuera de rango óptimo
  • Copy: “Tu plan ya incluye acciones para mejorar este valor”
  • CTA: Ver mi plan → /paciente/plan

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre Biomarcador nombre Glucosa en ayunas
Valor Biomarcador valor, unidad 98 mg/dL
Rango óptimo Biomarcador rango_min, rango_max 70-100 mg/dL
Harm anchor Biomarcador harm_threshold >126 mg/dL
Histórico Biomarcador histórico[] [115, 105, 98]
RCV Biomarcador impacta_rcv true
Recomendación Recomendación texto “Mantener actividad física regular”

Acciones

Acción Tipo Resultado
Swipe down Cerrar Cierra bottom sheet
Tap “Qué hacer” CTA Navegación → Plan del dia o Health Coach
Tap evidencia Modal Explicación del biomarcador

  • Viene de: Exámenes Lista, Nivel de Salud (vía dominio), Trayectoria (vía ciclo)
  • Va a: Plan del Dia, Health Coach Chat
  • Back: Pantalla anterior (cierra bottom sheet)