Especificacion UI Consolidada - MTS-OFF-001¶

Identificador: UI-MTS-OFF-001 Modulo Funcional: MTS-OFF-001 - Modo Offline 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 Modo Offline (MTS-OFF-001). Define los indicadores visuales, pantallas de estado de sincronizacion, manejo de conflictos y configuracion offline. El tier Free opera 100% local, mientras que Pro/Perfect sincronizan con la nube.

NOTA CRITICA V1.0: MedTime funciona completamente offline. El tier Free opera 100% local sin sincronizacion cloud. Pro/Perfect sincronizan cuando hay conexion disponible.

1.2. Metricas del Modulo¶

Metrica	Valor
Total de pantallas	4
Componentes unicos	8
User journeys documentados	2
Nivel WCAG	AA
Cobertura de accesibilidad	100%

1.3. Pantallas Incluidas¶

ID	Nombre	Prioridad	Estado
SCR-OFF-001	Indicador Offline	Critica	Especificado
SCR-OFF-002	Cola de Sincronizacion	Alta	Especificado
SCR-OFF-003	Resolucion de Conflictos	Alta	Especificado
SCR-OFF-004	Configuracion Offline	Media	Especificado

2. User Journeys¶

2.1. Paciente Pro - Dia Sin Conexion¶

Persona: Jorge, 42 anos, tier Pro, trabaja en zona rural sin senal.

Objetivo: Usar MedTime todo el dia sin conexion y sincronizar al volver a casa.

Flujo principal:

Sale de casa por la manana (con conexion)
App sincroniza automaticamente
Llega a zona sin cobertura
Ve indicador offline en header
Recibe alertas normalmente (locales)
Confirma tomas durante el dia
Ve badge "5 pendientes de sync"
Vuelve a zona con conexion
Indicador cambia a "Sincronizando"
Badge desaparece, datos sincronizados

Tiempo objetivo sync: < 5 segundos al reconectar

Puntos de friccion mitigados:

Indicador sutil, no intrusivo
Sin popups de error por falta de conexion
Sincronizacion automatica en background

2.2. Paciente Free - Operacion 100% Local¶

Persona: Carmen, 68 anos, tier Free, no confía en la nube.

Objetivo: Usar MedTime completamente local con backups manuales.

Flujo principal:

Usa app diariamente sin internet
Todos los datos permanecen en el dispositivo
Recibe recordatorio mensual de backup
Exporta archivo .medtime a iCloud personal
Datos seguros sin sincronizacion cloud

Tiempo objetivo: N/A (no hay sync)

Consideraciones:

Sin indicador offline (siempre local)
Enfasis en backups manuales
Datos nunca salen del dispositivo (excepto backup manual)

3. Arquitectura de Indicadores¶

3.1. Jerarquia de Estados¶

stateDiagram-v2
    [*] --> Online: App inicia con conexion
    [*] --> Offline: App inicia sin conexion

    Online --> Offline: Pierde conexion
    Offline --> Sincronizando: Recupera conexion
    Sincronizando --> Online: Sync completa
    Sincronizando --> Conflicto: Detecta conflicto
    Conflicto --> Sincronizando: Usuario resuelve
    Sincronizando --> Error: Sync falla
    Error --> Sincronizando: Reintentar

3.2. Estados por Tier¶

Estado	Free	Pro	Perfect
Online	N/A (siempre local)	Indicador verde	Indicador verde
Offline	N/A	Indicador gris	Indicador gris
Sincronizando	N/A	Indicador azul animado	Indicador azul animado
Pendientes	N/A	Badge numerico	Badge numerico
Error	N/A	Indicador amarillo	Indicador amarillo
Conflicto	N/A	Indicador rojo	Indicador rojo

4. Especificacion de Pantallas¶

4.1. SCR-OFF-001: Indicador Offline¶

4.1.1. Descripcion¶

Indicador persistente en el header que muestra el estado de conexion y sincronizacion.

4.1.2. Posicion¶

Ubicacion: Top App Bar, trailing edge
Tamano: 24x24dp icono + badge opcional
Z-index: Siempre visible sobre scroll

4.1.3. Variantes Visuales¶

Online (Conectado):

[cloud-check] (verde, opacity 0.6)

Icono: Cloud con checkmark
Color: Success (#4CAF50)
Opacity: 0.6 (no distrae)
Tap: Muestra tooltip "Sincronizado"

Offline (Sin conexion):

[cloud-slash] (gris)

Icono: Cloud con linea diagonal
Color: Neutral (#9E9E9E)
Animation: Ninguna
Tap: Muestra tooltip "Sin conexion - Datos locales"

Sincronizando:

[cloud-arrow-up] (azul, rotando)

Icono: Cloud con flecha arriba
Color: Primary (#2196F3)
Animation: Rotacion suave 360deg/2s
Tap: Abre SCR-OFF-002

Pendientes:

[cloud-arrow-up] + [3] (badge)

Icono: Cloud con flecha
Badge: Numero en circulo rojo
Tap: Abre SCR-OFF-002

Error de Sync:

[cloud-exclamation] (amarillo)

Icono: Cloud con exclamacion
Color: Warning (#FFC107)
Animation: Ninguna
Tap: Abre SCR-OFF-002 con detalle de error

4.1.4. Comportamiento por Tier¶

Tier	Indicador Visible	Estados
Free	No	N/A (100% local)
Pro	Si	Todos los estados
Perfect	Si	Todos los estados

4.2. SCR-OFF-002: Cola de Sincronizacion¶

4.2.1. Descripcion¶

Pantalla que muestra los cambios pendientes de sincronizar y el estado de la cola.

4.2.2. Layout¶

+-------------------------------------+
| < Cola de Sincronizacion            |
+-------------------------------------+
|                                     |
|  ESTADO                             |
|  +-------------------------------+  |
|  |  [cloud-sync]                 |  |
|  |  Sincronizando...             |  |
|  |  3 de 5 cambios               |  |
|  |  [===========      ]          |  |
|  +-------------------------------+  |
|                                     |
|  CAMBIOS PENDIENTES (2)             |
|  +-------------------------------+  |
|  | [pill] Metformina             |  |
|  | Toma registrada - 10:30       |  |
|  | [clock] Hace 2 horas          |  |
|  +-------------------------------+  |
|  +-------------------------------+  |
|  | [pill] Aspirina               |  |
|  | Toma registrada - 14:00       |  |
|  | [clock] Hace 45 minutos       |  |
|  +-------------------------------+  |
|                                     |
|  SINCRONIZADOS HOY (5)        [v]   |
|                                     |
+-------------------------------------+

4.2.3. Componentes¶

Elemento	Especificacion
Status Card	Background surface, corner radius 12dp
Progress Bar	Height 4dp, animated
Pending Item	Card con icono, titulo, timestamp
Completed Section	Collapsible, default collapsed

4.2.4. Estados del Card de Estado¶

Sincronizando:

+-------------------------------+
|  [spinner] Sincronizando...   |
|  3 de 5 cambios               |
|  [===========      ]          |
+-------------------------------+

Sin Conexion:

+-------------------------------+
|  [cloud-off] Sin conexion     |
|  5 cambios esperando          |
|  Se sincronizaran al          |
|  reconectar                   |
+-------------------------------+

Todo Sincronizado:

+-------------------------------+
|  [check-circle] Al dia        |
|  Ultima sync: hace 2 min      |
+-------------------------------+

Error:

+-------------------------------+
|  [warning] Error de sync      |
|  No se pudo conectar          |
|                               |
|  [Reintentar]  [Ver detalles] |
+-------------------------------+

4.2.5. Acciones¶

Accion	Trigger	Resultado
Reintentar	Tap en boton	Fuerza sync inmediato
Ver detalles	Tap en error	Muestra dialog con error tecnico
Cancelar cambio	Swipe left	Confirma y elimina de cola

4.3. SCR-OFF-003: Resolucion de Conflictos¶

4.3.1. Descripcion¶

Pantalla para resolver conflictos cuando el mismo dato fue modificado offline y en otro dispositivo.

4.3.2. Layout¶

+-------------------------------------+
| < Resolver Conflicto                |
+-------------------------------------+
|                                     |
|  [warning] Cambio en Conflicto      |
|                                     |
|  El mismo dato fue modificado en    |
|  dos lugares diferentes.            |
|                                     |
|  +---------------------------------+|
|  | VERSION LOCAL                   ||
|  | Metformina - Omitida            ||
|  | Hoy 10:30 AM                    ||
|  | Desde: Este dispositivo         ||
|  |                       [Usar]    ||
|  +---------------------------------+|
|                                     |
|  +---------------------------------+|
|  | VERSION SERVIDOR                ||
|  | Metformina - Tomada             ||
|  | Hoy 10:35 AM                    ||
|  | Desde: iPhone de Juan           ||
|  |                       [Usar]    ||
|  +---------------------------------+|
|                                     |
|  O bien:                            |
|  [     Descartar ambos     ]        |
|                                     |
+-------------------------------------+

4.3.3. Informacion Mostrada¶

Campo	Descripcion
Tipo de dato	Medicamento, Toma, Configuracion
Valor local	Dato como esta en este dispositivo
Valor remoto	Dato como esta en el servidor
Timestamp local	Cuando se hizo el cambio local
Timestamp remoto	Cuando se hizo el cambio remoto
Origen	Nombre del dispositivo origen

4.3.4. Opciones de Resolucion¶

Opcion	Descripcion	Resultado
Usar local	Mantiene version de este dispositivo	Sobrescribe servidor
Usar servidor	Mantiene version del servidor	Sobrescribe local
Descartar ambos	Elimina el cambio	Vuelve a estado anterior

4.3.5. Flujo de Resolucion¶

flowchart TD
    A[Conflicto detectado] --> B[Notificacion al usuario]
    B --> C[Abrir SCR-OFF-003]
    C --> D{Usuario elige}

    D -->|Usar local| E[Enviar local a servidor]
    D -->|Usar servidor| F[Aplicar remoto localmente]
    D -->|Descartar| G[Revertir a ultimo sync]

    E --> H[Marcar conflicto resuelto]
    F --> H
    G --> H

    H --> I[Continuar sincronizacion]

4.4. SCR-OFF-004: Configuracion Offline¶

4.4.1. Descripcion¶

Pantalla de configuracion para comportamiento offline y sincronizacion.

4.4.2. Layout¶

+-------------------------------------+
| < Configuracion Offline             |
+-------------------------------------+
|                                     |
|  SINCRONIZACION (Pro/Perfect)       |
|  +-------------------------------+  |
|  | Sync automatico         [on]  |  |
|  | Solo con WiFi           [off] |  |
|  | Sync en background      [on]  |  |
|  +-------------------------------+  |
|                                     |
|  DATOS LOCALES                      |
|  +-------------------------------+  |
|  | Espacio usado         45 MB   |  |
|  | Datos pendientes      3       |  |
|  |                               |  |
|  | [Limpiar cache]               |  |
|  +-------------------------------+  |
|                                     |
|  ALERTAS OFFLINE                    |
|  +-------------------------------+  |
|  | Alertas pre-cargadas          |  |
|  | Proximos 7 dias      [check]  |  |
|  |                               |  |
|  | Ultima actualizacion:         |  |
|  | Hoy 08:30 AM                  |  |
|  +-------------------------------+  |
|                                     |
|  BACKUP LOCAL (Free)                |
|  +-------------------------------+  |
|  | Ultimo backup: 15 Nov 2025    |  |
|  |                               |  |
|  | [Crear backup ahora]          |  |
|  | [Restaurar backup]            |  |
|  +-------------------------------+  |
|                                     |
+-------------------------------------+

4.4.3. Opciones por Tier¶

Opcion	Free	Pro	Perfect
Sync automatico	N/A	Si	Si
Solo con WiFi	N/A	Si	Si
Sync en background	N/A	Si	Si
Espacio usado	Si	Si	Si
Limpiar cache	Si	Si	Si
Alertas pre-cargadas	Si	Si	Si
Backup local	Si	N/A (cloud)	N/A (cloud)

4.4.4. Acciones¶

Accion	Descripcion	Confirmacion
Limpiar cache	Elimina datos temporales	Dialog de confirmacion
Crear backup	Genera archivo .medtime	Selector de destino
Restaurar backup	Importa archivo .medtime	Dialog con advertencias
Forzar sync	Sincroniza inmediatamente	Sin confirmacion

5. Componentes Utilizados¶

5.1. Componentes del Design System¶

Componente	ID	Uso en Modulo
Top App Bar	CMP-NAV-002	Header con indicador
Status Card	CMP-DAT-003	Estado de sync
List Item	CMP-DAT-001	Items en cola
Progress Bar	CMP-FBK-005	Progreso de sync
Toggle	CMP-INP-002	Configuraciones
Dialog	CMP-FBK-002	Confirmaciones
Banner	CMP-FBK-004	Alertas de estado

5.2. Componentes Personalizados¶

Componente	Descripcion	Pantalla
SyncIndicator	Icono animado de estado	SCR-OFF-001
PendingBadge	Badge numerico sobre icono	SCR-OFF-001
SyncQueueItem	Card para item en cola	SCR-OFF-002
ConflictCard	Card con comparacion lado a lado	SCR-OFF-003
StorageBar	Barra de uso de espacio	SCR-OFF-004

6. Accesibilidad¶

Elemento	Label
Indicador Online	"Conectado, datos sincronizados"
Indicador Offline	"Sin conexion, usando datos locales"
Indicador Pendientes	"X cambios pendientes de sincronizar"
Indicador Error	"Error de sincronizacion, toca para ver detalles"
Boton Reintentar	"Reintentar sincronizacion"

6.2. Anuncios Dinamicos¶

Evento	Anuncio
Conexion perdida	"Conexion perdida, modo offline activado"
Conexion recuperada	"Conexion recuperada, sincronizando"
Sync completada	"Sincronizacion completada"
Conflicto detectado	"Conflicto detectado, requiere atencion"

7. Estados de Error¶

7.1. Errores de Sincronizacion¶

Error	Mensaje Usuario	Accion
Timeout	"No se pudo conectar"	Reintentar automatico en 5 min
Auth expired	"Sesion expirada"	Redirigir a login
Server error	"Error del servidor"	Reintentar manual
Conflicto	"Cambio en conflicto"	Abrir resolucion

7.2. Errores de Datos Locales¶

Error	Mensaje Usuario	Accion
DB corrupta	"Error en datos locales"	Restaurar de backup o cloud
Espacio lleno	"Espacio insuficiente"	Sugerir limpiar cache
Backup invalido	"Archivo no valido"	Mostrar requisitos

8. Metricas de UX¶

8.1. KPIs del Modulo¶

Metrica	Objetivo	Medicion
Tiempo sync promedio	< 5s	analytics
Tasa conflictos	< 1%	analytics
Resolucion conflictos	> 95% exitosa	analytics
Uso offline	> 50% usuarios	analytics

8.2. Eventos de Analytics¶

Evento	Parametros
offline_mode_entered	tier, pending_count
sync_completed	duration, items_synced
conflict_detected	entity_type
conflict_resolved	resolution_type
backup_created	size_mb, destination

9. Historial de Cambios¶

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

10. Aprobaciones¶

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

Documento generado por MobileUxUiDrone (Eight of Eight) "La conectividad es efimera, pero la confiabilidad es permanente. Esta especificacion garantiza que MedTime nunca falle al paciente."