Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Proyecciones

Progreso → Escenarios Futuros (L2)

Propósito: Mostrar 4 escenarios proyectados con variables interactivas e intervalos de confianza.
JTBD: Explorar mi salud sin sentirme abrumado
Ruta: /paciente/progreso/proyecciones
Módulo: PAM-3


Features

# Feature Descripción Prioridad
1 4 escenarios Óptimo, Bueno, Regular, Riesgo con probabilidad % P0
2 Variables interactivas Sliders: adherencia, ejercicio, nutrición — recalcula en tiempo real P1
3 Gráficos con IC Line chart a 5 años con banda de intervalo de confianza P1
4 Escenario destacado El más probable resaltado con bg-[#0f2fc7] P0
5 CTA acción “Mejorar mi escenario” → Plan P0

States

Loading

  • Visual: Skeleton: 4 cards horizontales + área de gráfico shimmer
  • Copy: “Calculando tus proyecciones…”

Loaded (Normal)

  • Datos: 4 escenarios, escenario actual “Bueno” 72%, gráficos por variable

Empty

  • Trigger: Menos de 2 ciclos de datos
  • Copy: “Necesitamos más datos para proyectar tu futuro de salud”
  • CTA: Completar ciclo actual → /paciente/plan

Error

  • Copy: “No pudimos generar tus proyecciones”
  • CTA: Reintentar

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Escenario nombre Proyección nombre Bueno
Probabilidad Proyección probabilidad 72%
Score proyectado Proyección score_5y 91
IC inferior Proyección ic_low 85
IC superior Proyección ic_high 96
Variable adherencia Variable valor_actual 83%

Acciones

Acción Tipo Resultado
Mover slider variable Interacción Recalcula escenarios en tiempo real
Tap escenario Selección Muestra detalle del escenario en gráfico
Tap “Mejorar mi escenario” Navegación → Mi Plan

  • Viene de: Progreso Overview (card proyección)
  • Va a: Plan Completo, Plan del Dia
  • Back: Progreso Overview