Design
Pantallas
Para qué

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

Audiencia

Diseño e ingeniería.

Datos Personales

Onboarding --> Step 1 (Pantalla 2 de 8)

Propósito: Recopilar el perfil demográfico básico del usuario para calibrar el engine.
JTBD: “Quiero saber si estoy enfermandome antes de síntomas”
Ruta: /onboarding/datos-personales
Módulo: PAM-4


Features

# Feature Descripción Prioridad
1 Nombre completo Prellenado desde registro, editable P0
2 Fecha de nacimiento Date picker, validación >18 años P0
3 Sexo biológico Selector: Femenino / Masculino / Intersex P0
4 Ciudad Autocomplete con ciudades de Colombia P0
5 Peso y estatura Inputs numericos con unidades (kg, cm) P0
6 EPS Selector de EPS activa (opcional) P1
7 Progress bar Step 1 de 6, barra de progreso arriba P0

States

Loading

  • Visual: Skeleton shimmer en campos de formulario (300ms)
  • Duración: <500ms
  • Copy: “Cargando…”

Loaded (Normal)

  • Visual: Formulario con campos agrupados, nombre prellenado, progress bar 1/6
  • Datos: Nombre del registro, ciudad por geolocalización si permite

Empty

  • Trigger: Campos sin llenar
  • Visual: Placeholders descriptivos en cada campo
  • Copy: “Cuentanos sobre ti”
  • CTA: [Siguiente] (deshabilitado hasta campos requeridos completos)

Error

  • Trigger: Edad <18, peso fuera de rango, campo vacio
  • Copy: “Debes ser mayor de 18 años” / “Ingresa un peso válido” / “Este campo es obligatorio”
  • CTA: Campo con borde rojo + mensaje inline

Datos Mostrados

Dato Objeto OOUX Propiedad Ejemplo
Nombre Paciente nombre María Lopez
Fecha nacimiento Paciente fecha_nacimiento 15/03/1988
Sexo Paciente sexo Femenino
Ciudad Paciente ciudad Medellín
Peso Paciente peso 62 kg
Estatura Paciente estatura 165 cm
EPS Paciente eps Sura

Acciones

Acción Tipo Resultado
Llenar campos Input texto/select/date Validación en tiempo real
Siguiente Tap botón Guarda datos, navega a Step 2
Seleccionar ciudad Autocomplete Lista filtrada de ciudades colombianas

  • Viene de: Welcome (Step 0)
  • Va a: Historial Médico (Step 2)
  • Back: /onboarding (Welcome)