Especificacion UI Consolidada - MTS-WCH-001¶

Identificador: UI-MTS-WCH-001 Modulo Funcional: MTS-WCH-001 - Smartwatch Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Completado

1. Resumen Ejecutivo¶

1.1. Alcance¶

Este documento consolida la especificacion completa de interfaz de usuario para el modulo de Smartwatch (MTS-WCH-001). Cubre la integracion con Apple Watch (watchOS) y Wear OS, incluyendo complicaciones, notificaciones, registro rapido de tomas y eventos de salud.

NOTA CRITICA V1.0: MedTime soporta Apple Watch (watchOS 7+) y Wear OS (2.0+). Las funcionalidades varian por tier: Free (notificaciones basicas), Pro (complicaciones), Perfect (registro rapido eventos).

1.2. Metricas del Modulo¶

Metrica	Valor
Total de pantallas	6
Componentes unicos	14
User journeys documentados	3
Nivel WCAG	AA (adaptado a wearables)
Cobertura de accesibilidad	100%

1.3. Pantallas Incluidas¶

ID	Nombre	Prioridad	Estado
SCR-WCH-001	Complicaciones watchOS/WearOS	Alta	Especificado
SCR-WCH-002	Vista Recordatorio	Critica	Especificado
SCR-WCH-003	Confirmacion Rapida	Critica	Especificado
SCR-WCH-004	Sincronizacion	Media	Especificado
SCR-WCH-005	Configuracion Watch	Media	Especificado
SCR-WCH-006	Alertas de Emergencia	Alta	Especificado

2. User Journeys¶

2.1. Paciente - Confirmacion de Toma desde Notificacion¶

Persona: Carlos, 52 anos, hipertenso, usa Apple Watch.

Objetivo: Confirmar toma de medicamento sin sacar el telefono.

Flujo principal:

Apple Watch vibra con notificacion
Ver nombre del medicamento y hora
Tap en "Tomado"
Haptic de confirmacion
Complicacion se actualiza
Sincroniza con telefono en background

Tiempo objetivo: < 5 segundos

Puntos de friccion mitigados:

Botones grandes para facilitar tap
Confirmacion haptica inmediata
No requiere desbloqueo para confirmar

2.2. Paciente Pro - Consulta via Complicacion¶

Persona: Elena, 38 anos, tier Pro, revisa proximas tomas frecuentemente.

Objetivo: Ver proximos medicamentos desde la caratula del reloj.

Flujo principal:

Mirar caratula del reloj
Ver complicacion modular con proxima toma
Tap en complicacion para mas detalles
Ver lista de medicamentos del dia
Tap en medicamento especifico
Ver detalle con instrucciones

Tiempo objetivo: < 10 segundos

Restricciones de tier:

Complicaciones solo Pro/Perfect
Free solo notificaciones basicas

2.3. Paciente Perfect - Registro de Medicion desde Watch¶

Persona: Roberto, 60 anos, diabetico, tier Perfect.

Objetivo: Registrar glucosa directamente desde el reloj.

Flujo principal:

Notificacion de recordatorio de medicion
Tap "Registrar"
Girar corona digital para valor
Seleccionar momento (Ayuno/Pre/Post)
Tap "Guardar"
Haptic + indicador de color segun rango
Sincroniza con telefono

Tiempo objetivo: < 15 segundos

Feedback de valores:

Verde: valor normal
Amarillo: ligeramente fuera de rango
Rojo: valor critico (haptic intenso)

3. Arquitectura de Navegacion¶

3.1. Diagrama de Flujo¶

flowchart TD
    NOTIF[Notificacion Push] --> VIEW[SCR-WCH-002]
    COMPL[Complicacion Tap] --> LIST[Lista del Dia]

    VIEW --> CONFIRM[SCR-WCH-003]
    VIEW --> POSTPONE[Posponer Menu]
    VIEW --> DETAIL[Detalle Medicamento]

    CONFIRM --> HAPTIC[Haptic Confirmacion]
    HAPTIC --> UPDATE[Actualizar Complicacion]

    LIST --> DETAIL
    DETAIL --> CONFIRM

    POSTPONE --> SELECT[15/30/60 min]
    SELECT --> RESCHEDULE[Reprogramar Local]

    SETTINGS[SCR-WCH-005] --> PRIVACY[Modo Discreto]
    SETTINGS --> HAPTICS[Configurar Haptics]
    SETTINGS --> SYNC[SCR-WCH-004]

    ALERT[Valor Critico] --> EMERGENCY[SCR-WCH-006]
    EMERGENCY --> CONTACT_CALL[Llamar Emergencia]

3.2. Interacciones de Navegacion¶

Origen	Destino	Gesto	Condicion
Complicacion	Lista del dia	Tap	Pro/Perfect
Notificacion	SCR-WCH-002	Tap	Todos
SCR-WCH-002	SCR-WCH-003	Tap "Tomado"	Todos
Lista	Detalle	Tap item	Todos
SCR-WCH-005	SCR-WCH-004	Tap "Sincronizar"	Pro/Perfect

4. Especificacion de Pantallas¶

4.1. SCR-WCH-001: Complicaciones watchOS/WearOS¶

4.1.1. Descripcion¶

Indicadores en la caratula del reloj que muestran informacion de MedTime.

4.1.2. Variantes de Complicacion¶

Circular Pequena (2x2):

+-------+
|  3    |
|  (pill)|
+-------+

Muestra: Icono pastilla + contador pendientes
Tap: Abre lista del dia
Disponibilidad: Pro/Perfect

Modular Pequena (4x2):

+-----------+
| 10:00     |
| Metform.. |
+-----------+

Muestra: Hora proxima + nombre truncado
Tap: Abre detalle de ese medicamento
Disponibilidad: Pro/Perfect

Modular Grande (8x4):

+---------------------+
| 10:00 Metformina    |
| 12:00 Aspirina      |
+---------------------+

Muestra: Proximos 2 medicamentos
Tap: Abre lista del dia
Disponibilidad: Pro/Perfect

Gauge (Progreso):

+---------------------+
|  [========  ] 67%   |
|   HOY 4/6           |
+---------------------+

Muestra: Barra de progreso + completadas/total
Tap: Abre estadisticas
Disponibilidad: Pro/Perfect

4.1.3. Estados¶

Estado	Visual	Comportamiento
Sin pendientes	Checkmark verde	"Todo al dia"
Pendientes	Numero + pill icon	Color primary
Atrasado	Numero + rojo	Color error
Offline	Nube con barra	Datos locales

4.1.4. Especificaciones Tecnicas¶

watchOS (WidgetKit):

Familia	Minimo	Recomendado
circularSmall	OK	OK
modularSmall	OK	OK
modularLarge	OK	OK
graphicCircular	OK	OK

Wear OS (Tiles):

Tile Type	Soporte
Small	OK
Medium	OK
Large	OK

4.2. SCR-WCH-002: Vista Recordatorio¶

4.2.1. Descripcion¶

Notificacion interactiva que aparece al momento de tomar medicamento.

4.2.2. Layout¶

+---------------------------+
|    MEDICAMENTO            |
|                           |
|      Metformina           |
|        850 mg             |
|                           |
|   [Tomado]  [Posponer]    |
+---------------------------+

4.2.3. Elementos UI¶

Elemento	Especificacion
Titulo	"MEDICAMENTO" - SF Pro Bold 12pt / Roboto Bold
Nombre	Nombre comercial - SF Pro Medium 18pt
Dosis	Concentracion - SF Pro Regular 14pt
Boton Tomado	Primary button, 44pt height
Boton Posponer	Secondary button, 44pt height

4.2.4. Modo Discreto¶

+---------------------------+
|    RECORDATORIO           |
|                           |
|    Tienes una toma        |
|      pendiente            |
|                           |
|     [Ver]  [Posponer]     |
+---------------------------+

No muestra nombre del medicamento
Activable en configuracion
Tap "Ver" desbloquea detalles

4.2.5. Haptics¶

Accion	Patron watchOS	Patron Wear OS
Notificacion	notification	DEFAULT
Urgente	directionUp x2	HEAVY_CLICK x2
Confirmacion	success	CONFIRM

4.3. SCR-WCH-003: Confirmacion Rapida¶

4.3.1. Descripcion¶

Pantalla de feedback tras confirmar toma de medicamento.

4.3.2. Layout¶

+---------------------------+
|                           |
|          [check]          |
|                           |
|       Registrado          |
|                           |
|    Racha: 12 dias         |
+---------------------------+

4.3.3. Animacion¶

Fase	Duracion	Descripcion
1	0-200ms	Icono check aparece con scale
2	200-400ms	Texto "Registrado" fade in
3	400-600ms	Racha aparece
4	600-1500ms	Mantener visible
5	1500ms+	Auto-dismiss

4.3.4. Variantes por Contexto¶

Toma Normal:

Check verde
"Registrado"
Muestra racha si > 3 dias

Toma con Logro:

Animacion especial (confetti simple)
"Nueva racha: 7 dias!"
Haptic de celebracion

Medicion Registrada:

Check + indicador de color
Valor registrado: "115 mg/dL"
Estado: "Normal" / "Fuera de rango"

4.4. SCR-WCH-004: Sincronizacion¶

4.4.1. Descripcion¶

Estado de sincronizacion entre reloj y telefono.

4.4.2. Layout Estados¶

Sincronizando:

+---------------------------+
|    SINCRONIZANDO          |
|                           |
|      [spinner]            |
|                           |
|   3 pendientes            |
+---------------------------+

Sincronizado:

+---------------------------+
|    SINCRONIZADO           |
|                           |
|      [check]              |
|                           |
|   Hace 2 minutos          |
+---------------------------+

Sin Conexion:

+---------------------------+
|    SIN CONEXION           |
|                           |
|      [cloud-off]          |
|                           |
|   5 cambios pendientes    |
|   [Reintentar]            |
+---------------------------+

4.4.3. Indicadores de Estado¶

Estado	Icono	Color	Badge
Conectado	ninguno	-	-
Desconectado	cloud-slash	gray	-
Pendientes	cloud-arrow	blue	numero
Error	exclamation	red	!
Sincronizando	spinner	blue	-

4.5. SCR-WCH-005: Configuracion Watch¶

4.5.1. Descripcion¶

Ajustes especificos para la experiencia en smartwatch.

4.5.2. Layout¶

+---------------------------+
|  CONFIGURACION            |
+---------------------------+
|                           |
|  Modo discreto       [  ] |
|  Haptics             [on] |
|  Mostrar racha       [on] |
|                           |
|  [Sincronizar ahora]      |
|                           |
|  Ultima sync: 10:30       |
+---------------------------+

4.5.3. Opciones de Configuracion¶

Opcion	Tipo	Default	Descripcion
Modo discreto	Toggle	Off	Oculta nombres de medicamentos
Haptics	Toggle	On	Vibraciones de confirmacion
Mostrar racha	Toggle	On	Muestra racha en confirmacion
Solo vibracion	Toggle	Off	Sin texto en notificaciones

4.5.4. Sincronizacion con Telefono¶

Configuracion se sincroniza desde telefono
Cambios en reloj se reflejan en telefono
Ultima sincronizacion visible

4.6. SCR-WCH-006: Alertas de Emergencia¶

4.6.1. Descripcion¶

Alertas para valores criticos de mediciones de salud.

4.6.2. Layout Alerta Critica¶

+---------------------------+
|    !!! ALERTA !!!         |
|                           |
|    Glucosa Critica        |
|        245 mg/dL          |
|                           |
|  Considera buscar         |
|  atencion medica          |
|                           |
|  [Llamar Emergencia]      |
|  [He tomado accion]       |
+---------------------------+

4.6.3. Haptic Pattern¶

Fase	Duracion	Intensidad
1	200ms	Fuerte
2	100ms	Pausa
3	200ms	Fuerte
4	100ms	Pausa
5	200ms	Fuerte

Repite cada 5 segundos hasta interaccion.

4.6.4. Indicadores de Severidad¶

Nivel	Color	Haptic	Persistencia
Normal	Verde	Tap suave	Auto-dismiss
Leve	Amarillo	Tap doble	30 segundos
Moderado	Naranja	Vibracion corta	Requiere dismiss
Critico	Rojo	Patron intenso	Requiere accion

5. Componentes Utilizados¶

5.1. Componentes del Design System (Adaptados)¶

Componente	ID	Uso en Modulo
Watch Button	CMP-WCH-001	Acciones principales
Watch List	CMP-WCH-002	Lista de medicamentos
Watch Card	CMP-WCH-003	Detalle de item
Watch Progress	CMP-WCH-004	Gauge de progreso
Watch Toggle	CMP-WCH-005	Configuracion

5.2. Componentes Personalizados Watch¶

Componente	Descripcion	Pantalla
ComplicationView	Vistas para complicaciones	SCR-WCH-001
MedicationNotification	Notificacion interactiva	SCR-WCH-002
QuickConfirm	Animacion de confirmacion	SCR-WCH-003
SyncStatusView	Indicador de sincronizacion	SCR-WCH-004
CrownValuePicker	Selector con corona digital	SCR-WCH-006
EmergencyAlert	Alerta de valor critico	SCR-WCH-006

6. Accesibilidad para Wearables¶

6.1. Consideraciones Especiales¶

Aspecto	Implementacion
VoiceOver (watchOS)	Todos los elementos etiquetados
TalkBack (Wear OS)	Soporte completo
Tamano touch	Minimo 38x38pt (reloj)
Contraste	4.5:1 en todos los textos
Reducir movimiento	Animaciones simplificadas

6.2. Navegacion Accesible¶

Gesto	Accion
Tap	Seleccionar/Confirmar
Swipe horizontal	Navegar entre opciones
Swipe vertical	Scroll en listas
Corona digital	Ajustar valores/Scroll
Doble tap	Activar elemento enfocado

Elemento	Label
Complicacion	"MedTime: X medicamentos pendientes"
Boton Tomado	"Marcar como tomado"
Boton Posponer	"Posponer recordatorio"
Indicador Offline	"Sin conexion, X cambios pendientes"

7. Especificaciones por Plataforma¶

7.1. watchOS (Apple Watch)¶

Caracteristica	Soporte
watchOS minimo	7.0
SwiftUI	Si
WidgetKit	Si
Siri Shortcuts	Si
Always On Display	Si
Action Button (Ultra)	Si

Siri Shortcuts:

"Hey Siri, registra mi medicamento"
"Hey Siri, proxima toma"
"Hey Siri, racha de MedTime"

7.2. Wear OS¶

Caracteristica	Soporte
Wear OS minimo	2.0
Jetpack Compose	Si
Tiles	Si
Google Assistant	Si
Ambient Mode	Si

Google Assistant:

"Ok Google, registra mi medicamento"
"Ok Google, cual es mi proxima toma"

8. Estados de Error¶

8.1. Errores de Sincronizacion¶

Escenario	UI	Recuperacion
Telefono no disponible	Banner offline	Reintentar auto cada 5 min
Bluetooth desconectado	Icono + mensaje	Guia para reconectar
Error de sync	Toast	Reintentar manual

8.2. Errores de Notificacion¶

Error	Mensaje	Accion
Permisos denegados	"Habilita notificaciones"	Deep link a Settings
Limite iOS (64)	Silent rotation	Automatico

9. Metricas de UX¶

9.1. KPIs del Modulo¶

Metrica	Objetivo	Medicion
Tiempo confirmacion	< 5s	analytics
Uso de complicacion	> 40% usuarios Pro	analytics
Tasa offline exitoso	> 99%	analytics
Satisfaccion haptics	> 4.5/5	survey

9.2. Eventos de Analytics¶

Evento	Parametros
watch_notification_shown	medication_id, platform
watch_medication_confirmed	medication_id, source, offline
watch_complication_tapped	complication_type
watch_measurement_recorded	event_type, value_status
watch_sync_completed	changes_count, duration

10. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial - FASE 4 Platform

11. Aprobaciones¶

Rol	Nombre	Estado	Fecha
UX Lead	MobileUxUiDrone	Completado	2025-12-05
Watch Platform Lead	Pendiente	-	-
Product Owner	Pendiente	-	-

Documento generado por MobileUxUiDrone (Eight of Eight) "El reloj es la extension natural del paciente. Esta especificacion asegura que cada segundo cuente."

Especificacion UI Consolidada - MTS-WCH-001¶

1. Resumen Ejecutivo¶

1.1. Alcance¶

1.2. Metricas del Modulo¶

1.3. Pantallas Incluidas¶

2. User Journeys¶

2.1. Paciente - Confirmacion de Toma desde Notificacion¶

2.2. Paciente Pro - Consulta via Complicacion¶

2.3. Paciente Perfect - Registro de Medicion desde Watch¶

3. Arquitectura de Navegacion¶

3.1. Diagrama de Flujo¶

3.2. Interacciones de Navegacion¶

4. Especificacion de Pantallas¶

4.1. SCR-WCH-001: Complicaciones watchOS/WearOS¶

4.1.1. Descripcion¶

4.1.2. Variantes de Complicacion¶

4.1.3. Estados¶

4.1.4. Especificaciones Tecnicas¶

4.2. SCR-WCH-002: Vista Recordatorio¶

4.2.1. Descripcion¶

4.2.2. Layout¶

4.2.3. Elementos UI¶

4.2.4. Modo Discreto¶

4.2.5. Haptics¶

4.3. SCR-WCH-003: Confirmacion Rapida¶

4.3.1. Descripcion¶

4.3.2. Layout¶

4.3.3. Animacion¶

4.3.4. Variantes por Contexto¶

4.4. SCR-WCH-004: Sincronizacion¶

4.4.1. Descripcion¶

4.4.2. Layout Estados¶

4.4.3. Indicadores de Estado¶

4.5. SCR-WCH-005: Configuracion Watch¶

4.5.1. Descripcion¶

4.5.2. Layout¶

4.5.3. Opciones de Configuracion¶

4.5.4. Sincronizacion con Telefono¶

4.6. SCR-WCH-006: Alertas de Emergencia¶

4.6.1. Descripcion¶

4.6.2. Layout Alerta Critica¶

4.6.3. Haptic Pattern¶

4.6.4. Indicadores de Severidad¶

5. Componentes Utilizados¶

5.1. Componentes del Design System (Adaptados)¶

5.2. Componentes Personalizados Watch¶

6. Accesibilidad para Wearables¶

6.1. Consideraciones Especiales¶

6.2. Navegacion Accesible¶

6.3. Screen Reader Labels¶

7. Especificaciones por Plataforma¶

7.1. watchOS (Apple Watch)¶

7.2. Wear OS¶

8. Estados de Error¶

8.1. Errores de Sincronizacion¶

8.2. Errores de Notificacion¶

9. Metricas de UX¶

9.1. KPIs del Modulo¶

9.2. Eventos de Analytics¶

10. Historial de Cambios¶

11. Aprobaciones¶