Saltar a contenido

Especificacion UI Consolidada - MTS-WDG-001

Identificador: UI-MTS-WDG-001 Modulo Funcional: MTS-WDG-001 - Widgets 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 Widgets (MTS-WDG-001). Cubre widgets de pantalla de inicio para iOS (WidgetKit) y Android (Glance/App Widgets), incluyendo widgets de medicamentos, adherencia y eventos de salud.

NOTA CRITICA V1.0: Widgets disponibles en iOS 14+ y Android 8+. Tier Free tiene widgets basicos, Pro/Perfect incluyen personalizacion y widgets de eventos de salud.

1.2. Metricas del Modulo

Metrica Valor
Total de pantallas 4
Variantes de widget 9
User journeys documentados 2
Nivel WCAG AA
Cobertura de accesibilidad 100%

1.3. Pantallas/Widgets Incluidos

ID Nombre Prioridad Estado
SCR-WDG-001 Widget Proxima Toma (S/M/L) Critica Especificado
SCR-WDG-002 Widget Adherencia Alta Especificado
SCR-WDG-003 Widget Acceso Rapido Media Especificado
SCR-WDG-004 Configuracion Widgets Media Especificado

2. User Journeys

2.1. Paciente - Consulta Rapida desde Home

Persona: Laura, 35 anos, multitarea, revisa proximas tomas frecuentemente.

Objetivo: Ver proximos medicamentos sin abrir la app.

Flujo principal:

  1. Desbloquear telefono
  2. Ver widget mediano en home screen
  3. Leer proximas 3 tomas con horas
  4. Si necesita mas detalle, tap en widget
  5. App abre en vista del dia

Tiempo objetivo: < 2 segundos (solo mirar)

Puntos de friccion mitigados:

  • Informacion visible sin interaccion
  • Actualizacion automatica cada 15 min
  • Tap lleva al contexto correcto

2.2. Paciente Pro - Marcar Tomado desde Widget

Persona: Miguel, 48 anos, tier Pro, prefiere acciones rapidas.

Objetivo: Confirmar toma sin abrir la app completa.

Flujo principal:

  1. Ver notificacion de recordatorio
  2. Ver widget grande con lista del dia
  3. Tap en el medicamento especifico
  4. Widget muestra confirmacion inline
  5. Check aparece junto al medicamento
  6. Widget se actualiza inmediatamente

Tiempo objetivo: < 5 segundos

Restricciones:

  • Accion rapida solo en widgets mediano/grande
  • Requiere tier Pro o Perfect

3. Catalogo de Widgets

3.1. SCR-WDG-001: Widget Proxima Toma

3.1.1. Variante Pequena (Small - 2x2)

Layout:

+-----------------+
|  Metformina     |
|                 |
|    10:00 AM     |
|                 |
|  [En 45 min]    |
+-----------------+

Especificaciones:

Elemento Especificacion
Nombre SF Pro Medium 14pt / Roboto Medium
Hora SF Pro Bold 18pt / Roboto Bold
Countdown SF Pro Regular 12pt, color secondary
Icono Pill icon 16x16, leading
Padding 12pt all sides

Estados:

Estado Visual
Normal Fondo surface, texto primary
Proximo (< 30 min) Fondo primary-light, texto primary
Vencido Fondo error-light, texto error
Todo completado Check icon, "Todo al dia"

Interaccion:

  • Tap: Abre app en detalle del medicamento

3.1.2. Variante Mediana (Medium - 4x2)

Layout:

+-------------------------------------+
|  PROXIMAS TOMAS                     |
|------------------------------------|
|  [pill] Metformina         10:00 AM |
|  [pill] Aspirina           12:00 PM |
|  [pill] Omeprazol          02:00 PM |
+-------------------------------------+

Especificaciones:

Elemento Especificacion
Header SF Pro Bold 12pt, all caps
Items SF Pro Regular 14pt
Hora SF Pro Medium 14pt, trailing
Row height 32pt
Max items 3

Interaccion:

  • Tap en item: Marcar como tomado (Pro/Perfect)
  • Tap en header: Abre lista del dia

3.1.3. Variante Grande (Large - 4x4)

Layout:

+-------------------------------------+
|  MEDICAMENTOS HOY           Dic 5   |
|------------------------------------|
|                                     |
|  [check] 07:00  Metformina 850mg    |
|  [check] 07:00  Omeprazol 20mg      |
|  [check] 12:00  Aspirina 100mg      |
|  [empty] 19:00  Metformina 850mg    |
|  [empty] 22:00  Atorvastatina 20mg  |
|                                     |
|-------------------------------------|
|  Racha: 12 dias      Hoy: 60%       |
+-------------------------------------+

Especificaciones:

Elemento Especificacion
Header SF Pro Bold 14pt
Fecha SF Pro Regular 14pt, trailing
Items SF Pro Regular 13pt
Hora SF Pro Medium 13pt, monospace
Footer SF Pro Regular 12pt, color secondary
Max items 6
Checkmark 16x16, color success
Empty circle 16x16, color outline

Interaccion:

  • Tap en item pendiente: Marcar como tomado (Pro/Perfect)
  • Tap en item completado: Sin accion
  • Tap en footer: Abre estadisticas

3.2. SCR-WDG-002: Widget Adherencia

3.2.1. Variante Pequena (Racha)

Layout:

+-----------------+
|       [fire]    |
|                 |
|       12        |
|      dias       |
|                 |
+-----------------+

Especificaciones:

Elemento Especificacion
Icono Fire emoji o custom icon 24x24
Numero SF Pro Bold 36pt
Label SF Pro Regular 12pt

Estados:

Racha Color Icono
1-6 dias Gris
7-13 dias Amarillo
14-29 dias Naranja
30+ dias Rojo/Dorado

3.2.2. Variante Mediana (Progreso)

Layout:

+-------------------------------------+
|  HOY                        75%     |
|------------------------------------|
|  [============================    ] |
|                                     |
|  [check] 6 tomados    [empty] 2 pen |
+-------------------------------------+

Especificaciones:

Elemento Especificacion
Titulo SF Pro Bold 14pt
Porcentaje SF Pro Bold 18pt
Progress bar 8pt height, corner radius 4pt
Counters SF Pro Regular 12pt

3.3. SCR-WDG-003: Widget Acceso Rapido

3.3.1. Layout

Variante Grid (2x2):

+-----------------+
| [+]     [scan]  |
| Nueva   OCR     |
|                 |
| [pill]  [cal]   |
| Meds    Hoy     |
+-----------------+

Especificaciones:

Elemento Especificacion
Icono 24x24, color primary
Label SF Pro Regular 10pt
Touch target 44x44pt minimo
Grid 2x2 con 8pt gap

Acciones:

Boton Destino
Nueva Agregar medicamento
OCR Camara para escanear receta
Meds Lista de medicamentos
Hoy Vista del dia

3.4. SCR-WDG-004: Configuracion Widgets

3.4.1. Descripcion

Pantalla in-app para configurar widgets antes de agregarlos.

3.4.2. Layout

+-------------------------------------+
| < Configurar Widget                 |
+-------------------------------------+
|                                     |
|  [Preview del widget]               |
|                                     |
|-------------------------------------|
|  TIPO DE WIDGET                     |
|  [v] Proxima toma                   |
|  [ ] Adherencia                     |
|  [ ] Acceso rapido                  |
|-------------------------------------|
|  APARIENCIA                         |
|  Tema:  [Sistema v]                 |
|  Color: [Primary v] (Pro)           |
|-------------------------------------|
|  CONTENIDO                          |
|  Mostrar racha     [on]             |
|  Modo discreto     [off]            |
|-------------------------------------|
|                                     |
|  [Agregar a pantalla inicio]        |
+-------------------------------------+

3.4.3. Opciones por Tier

Opcion Free Pro Perfect
Tipo de widget Todos Todos Todos
Tema Sistema Sistema + 4 Todos (12+)
Color personalizado No Si Si
Transparencia No Si Si
Widgets desbloqueables No Nivel 4+ Nivel 4+

4. Widgets de Eventos de Salud (Pro/Perfect)

4.1. Widget Ultima Medicion (Pequeno)

Layout:

+---------------------+
|  Glucosa    10:30am |
|      115            |
|     mg/dL           |
|   [En rango]        |
+---------------------+

Estados por Valor:

Estado Color Badge
Normal Verde "En rango"
Leve Amarillo "Ligeramente alto/bajo"
Fuera de rango Naranja "Fuera de rango"
Critico Rojo "Atencion"

4.2. Widget Mediciones del Dia (Mediano)

Layout:

+------------------------------------------+
|  Mis Mediciones              [+]         |
|------------------------------------------|
|  Glucosa: 115 mg/dL   10:30am   [green]  |
|  Presion: 125/82      08:15am   [green]  |
|  Peso:    72.5 kg     07:00am            |
+------------------------------------------+

Interaccion:

  • Tap [+]: Abre selector de tipo de medicion
  • Tap en medicion: Abre historial de ese tipo

4.3. Widget Dashboard Salud (Grande)

Layout:

+------------------------------------------+
|  Eventos de Salud                 Dic 5  |
|------------------------------------------|
|  MEDICIONES HOY                          |
|  Glucosa: 115 mg/dL  [===|====] Normal   |
|  Presion: 125/82     [====|===] Leve+    |
|------------------------------------------|
|  TRATAMIENTOS HOY                        |
|  [X] 07:00 Curacion pierna              |
|  [ ] 14:00 Dialisis                     |
|  [ ] 20:00 Insulina                     |
|------------------------------------------|
|  Racha: 12 dias        Adherencia: 94%  |
+------------------------------------------+

5. Plataformas Especificas

5.1. iOS (WidgetKit)

5.1.1. Familias Soportadas

Familia Soporte Notas
systemSmall Si 2x2
systemMedium Si 4x2
systemLarge Si 4x4
accessoryCircular Si Lock screen (iOS 16+)
accessoryRectangular Si Lock screen (iOS 16+)
accessoryInline Si Lock screen (iOS 16+)

5.1.2. Widget de Pantalla de Bloqueo (iOS 16+)

accessoryInline:

[pill] 10:00 Metformina

accessoryCircular:

  +---+
  | 3 |
  +---+

accessoryRectangular:

+------------------+
| Proxima: 10:00   |
| Metformina 850mg |
+------------------+

5.1.3. Timeline Configuration

Aspecto Valor
Refresh policy .atEnd (al terminar timeline)
Timeline entries Proximas 6 horas
Background refresh Si (iOS managed)

5.2. Android (Glance/App Widgets)

5.2.1. Tamanos Soportados

Tamano Grid Dimensiones
Small 2x2 110x110 dp
Medium 4x2 250x110 dp
Large 4x4 250x250 dp

5.2.2. Redimensionamiento

Propiedad Valor
minWidth 110dp
minHeight 110dp
minResizeWidth 110dp
minResizeHeight 110dp
resizeMode horizontal + vertical

5.2.3. Update Policy

Aspecto Valor
updatePeriodMillis 1800000 (30 min)
WorkManager Para updates precisos
AlarmManager Para recordatorios

6. Privacidad en Widgets

6.1. Modo Discreto

Widget Normal:

+-------------------------------------+
|  PROXIMAS TOMAS                     |
|------------------------------------|
|  [pill] Metformina         10:00 AM |
|  [pill] Aspirina           12:00 PM |
+-------------------------------------+

Widget Discreto:

+-------------------------------------+
|  PROXIMAS                           |
|------------------------------------|
|  [pill] ********           10:00 AM |
|  [pill] ********           12:00 PM |
+-------------------------------------+

6.2. Ocultar en Bloqueo

Configuracion Comportamiento
Mostrar siempre Widget visible bloqueado/desbloqueado
Ocultar contenido Widget muestra "Desbloquear para ver"
Ocultar widget Widget no visible cuando bloqueado

7. Accesibilidad

7.1. VoiceOver/TalkBack Labels

Elemento Label
Widget pequeno "MedTime: Proxima toma Metformina a las 10:00 AM, en 45 minutos"
Widget mediano "MedTime: 3 proximas tomas, primera Metformina a las 10:00"
Item completado "Metformina 850mg, tomado a las 7:00, completado"
Item pendiente "Metformina 850mg, programado para las 19:00, pendiente"

7.2. Contraste

Elemento Ratio Requerido Verificado
Texto header 4.5:1 OK
Texto contenido 4.5:1 OK
Iconos 3:1 OK
Progress bar 3:1 OK

8. Estados de Error

8.1. Widget Sin Datos

+-----------------+
|                 |
|  [empty box]    |
|                 |
|  Sin datos      |
|  Abre la app    |
+-----------------+

8.2. Widget Error de Carga

+-----------------+
|                 |
|  [warning]      |
|                 |
|  Error          |
|  Tap para       |
|  reintentar     |
+-----------------+

9. Metricas de UX

9.1. KPIs del Modulo

Metrica Objetivo Medicion
Adopcion widgets > 30% usuarios analytics
Accion desde widget > 20% tomas analytics
Satisfaccion > 4.2/5 survey

9.2. Eventos de Analytics

Evento Parametros
widget_added size, type, platform
widget_tapped size, type, action
widget_action_quick medication_id, result
widget_configured options

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
iOS Lead Pendiente - -
Android Lead Pendiente - -

Documento generado por MobileUxUiDrone (Eight of Eight) "Los widgets son ventanas a la salud del paciente. Esta especificacion asegura que cada pixel informe y empodere."