Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Comparación de Mediciones

Laboratorios -> Nivel 2: Antes vs Después

Propósito: Comparar dos mediciones lado a lado para detectar cambios reales
JTBD: “Quiero saber si realmente mejore o empeore entre mis exámenes”
Ruta: /paciente/laboratorio/comparación
Módulo: PAM-4


Features

# Feature Descripción Prioridad
1 Selector de fechas Dropdown para elegir medición 1 y medición 2 P0
2 Tabla comparativa Biomarcador, valor antes, valor después, delta, badge RCV P0
3 Badge RCV Indica si el cambio es estadisticamente real o variabilidad P1
4 Resumen de cambios “3 mejoraron, 1 empeoro, 4 estables” P1
5 Descargar PDF Genera reporte de comparación para el médico P2

States

Una Sola Medición

  • Trigger: Solo existe una fecha de resultados
  • Copy: “Necesitas al menos dos mediciones para comparar”
  • Subtitulo: “Cuando tengas tu próximo examen, podras ver tu progreso aquí.”
  • CTA: [Volver a resultados]

Comparando

  • Visual: Tabla con biomarcadores, columnas Antes / Después / Delta
  • Ejemplo:
    • Glucosa: 126 -> 98 (-22%) [Cambio real]
    • Colesterol: 245 -> 238 (-3%) [Variabilidad normal]
    • Vitamina D: 18 -> 32 (+78%) [Cambio real]

Cargando

  • Visual: Skeleton shimmer en tabla comparativa
  • Copy: “Comparando tus mediciones…”

Datos Mostrados

Dato Objeto Propiedad Ejemplo
Fecha medición 1 Medición fecha 15 Dic, 2025
Fecha medición 2 Medición fecha 15 Mar, 2026
Biomarcador Biomarcador nombre Glucosa
Valor antes Biomarcador valor_anterior 126 mg/dL
Valor después Biomarcador valor_actual 98 mg/dL
Delta porcentual Biomarcador delta -22%
Es cambio real Biomarcador rcv_significativo Si
Total mejoraron Resumen mejoraron 3

Acciones

Acción Tipo Resultado
Cambiar fecha 1 Filtro Recalcula comparación
Cambiar fecha 2 Filtro Recalcula comparación
Tap biomarcador Navegación Abre detalle del biomarcador
Descargar PDF Secundaria Genera y descarga reporte

  • Origen: Lista de Resultados > botón “Comparar”
  • Destino tap biomarcador: Detalle Resultado
  • Back: Lista de Resultados