Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Chat Health Coach

Health Coach -> Pantalla Principal

Propósito: Interfaz de chat con IA que entiende el contexto de salud del usuario
JTBD: “Quiero hablar con alguien que entienda mis resultados y me explique sin tecnicismos”
Ruta: /paciente/health-coach
Módulo: PAM-6


Features

# Feature Descripción Prioridad
1 Input de texto Campo de texto con placeholder contextual P0
2 Botón de voz Dictado por voz para enviar mensajes hablados P1
3 Respuesta IA Burbujas con texto + keyword chips interactivos P0
4 Chips de biomarcador Azul (#0f2fc7), navega a detalle del biomarcador P0
5 Chips de suplemento Verde (#10b981), muestra info del suplemento P1
6 Chips CTA Outlined, ejecuta acción (agendar, ver plan, etc.) P1
7 Contexto pre-cargado Si viene de alerta o biomarcador, auto-inicia conversación P1
8 Límite de IA Disclaimer de que no reemplaza al médico P0

States

Conversando

  • Visual: Burbujas alternas (usuario gris, IA blanca con chips)
  • Input: Activo con placeholder “Preguntale a tu Health Coach…”

IA Procesando

  • Visual: Typing indicator (3 puntos animados) en burbuja de IA
  • Copy: Indicador sutil, no bloquea el input
  • Duración esperada: 1-3 segundos

Error IA (Fallback)

  • Trigger: IA no puede responder (fuera de alcance o error del sistema)
  • Copy: “No puedo responder eso. Para medicamentos o diagnósticos, habla con tu médico.”
  • CTAs: [Agendar consulta] [Reformular pregunta]
  • Fallback: Respuestas pre-armadas L1 (FAQ) + L2 (reglas basicas)

Offline

  • Copy: “Necesitas conexión para chatear”
  • Subtitulo: “Puedes ver tus conversaciones anteriores mientras tanto.”
  • CTAs: [Ver historial] [Volver]

Datos Mostrados

Dato Objeto Propiedad Ejemplo
Mensaje usuario Chat texto “Que significa mi glucosa alta?”
Respuesta IA Chat respuesta “Tu glucosa está en 126 mg/dL…”
Chip biomarcador Biomarcador nombre Glucosa
Chip suplemento Suplemento nombre Omega 3
Chip CTA Acción label “Ver tu plan”
Disclaimer Sistema texto “No reemplaza la consulta médica”

Acciones

Acción Tipo Resultado
Enviar mensaje Primaria Envía texto, IA responde
Tap chip biomarcador Navegación Abre detalle del biomarcador
Tap chip CTA Navegación Navega a pantalla relevante
Dictado por voz Primaria Convierte audio a texto y envía
Cerrar chat Secundaria Guarda conversación en historial

  • Origen: Floating button (bottom-right) / CTA en alerta / Ajustes > Ayuda
  • Destino chip biomarcador: Detalle Resultado
  • Destino chip CTA: Pantalla contextual (plan, cita, resultados)
  • Back: Pantalla desde donde se abrió el chat