Especificacion UI Consolidada - MTS-ADH-001
Identificador: UI-MTS-ADH-001
Modulo Funcional: MTS-ADH-001 - Motor de Adherencia
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Completado
FASE: 2 - Value
1. Resumen Ejecutivo
1.1. Alcance
Este documento consolida la especificacion completa de interfaz de usuario para el modulo Motor de Adherencia (MTS-ADH-001), que permite a pacientes y cuidadores visualizar, analizar y mejorar el cumplimiento del tratamiento.
1.2. Metricas del Modulo
| Metrica |
Valor |
| Total de pantallas |
10 |
| Componentes nuevos |
22 |
| User journeys documentados |
2 |
| Nivel WCAG |
AA |
| Cobertura de accesibilidad |
100% |
1.3. Pantallas Incluidas
| ID |
Nombre |
Prioridad |
Estado |
| SCR-ADH-001 |
Dashboard de Adherencia |
Alta |
Especificado |
| SCR-ADH-002 |
Adherencia por Medicamento |
Alta |
Especificado |
| SCR-ADH-003 |
Tendencias Semanales/Mensuales |
Media |
Especificado |
| SCR-ADH-004 |
Patrones por Dia/Hora |
Media |
Especificado |
| SCR-ADH-005 |
Reportar Anomalia |
Alta |
Especificado |
| SCR-ADH-006 |
Detalle de Dia Especifico |
Media |
Especificado |
| SCR-ADH-007 |
Insights y Recomendaciones |
Media |
Especificado |
| SCR-ADH-008 |
Comparativa Historica |
Baja |
Especificado |
| SCR-ADH-009 |
Logros de Adherencia |
Media |
Especificado |
| SCR-ADH-010 |
Reporte para Medico |
Alta |
Especificado |
2. User Journeys
2.1. Paciente Independiente (PI) - Revisar mi Adherencia
Persona: Paciente adulto que monitorea su propio cumplimiento.
Objetivo: Entender patrones de adherencia y mejorar cumplimiento.
Flujo principal:
- Abrir app -> Tab Estadisticas
- Ver dashboard con porcentaje circular
- Identificar racha actual
- Tap en dia con omision
- Ver detalle del dia
- Revisar insights personalizados
- Aplicar sugerencia de mejora
Tiempo objetivo: < 1 minuto para consulta rapida
Puntos de friccion mitigados:
- Porcentaje circular inmediatamente visible
- Colores semanticos facilitan interpretacion
- Insights proactivos reducen analisis manual
2.2. Cuidador Responsable (CR) - Revisar Adherencia de Dependiente
Persona: Familiar que supervisa adherencia de un dependiente.
Objetivo: Monitorear cumplimiento y generar reportes para medico.
Flujo principal:
- Seleccionar perfil de dependiente
- Tab Estadisticas -> Dashboard
- Revisar adherencia por medicamento
- Identificar medicamentos problematicos
- Generar reporte PDF
- Compartir con medico via WhatsApp/email
Restricciones:
- Solo lectura por defecto
- Reportar anomalia configurable
- Configuracion bloqueada
3. Arquitectura de Navegacion
3.1. Diagrama de Flujo
flowchart TD
HOME[Bottom Nav: Estadisticas] --> DASH[SCR-ADH-001]
DASH -->|Tab| BYMED[SCR-ADH-002]
DASH -->|Tab| TRENDS[SCR-ADH-003]
DASH -->|Ver patrones| PATTERNS[SCR-ADH-004]
DASH -->|Ver insights| INSIGHTS[SCR-ADH-007]
DASH -->|Ver logros| ACHIEVE[SCR-ADH-009]
DASH -->|Generar reporte| REPORT[SCR-ADH-010]
DASH -->|Tap dia| DAYDET[SCR-ADH-006]
BYMED -->|Reportar problema| ANOMALY[SCR-ADH-005]
BYMED -->|Tap medicamento| DAYDET
TRENDS -->|Comparar| COMPARE[SCR-ADH-008]
TRENDS -->|Tap punto| DAYDET
PATTERNS -->|Tap celda| DAYDET
DAYDET -->|Reportar| ANOMALY
3.2. Deep Links
| Ruta |
Destino |
medtime://adherence |
Dashboard |
medtime://adherence/day/{date} |
Detalle dia |
medtime://adherence/medication/{id} |
Por medicamento |
medtime://adherence/insights |
Insights |
medtime://adherence/achievements |
Logros |
medtime://adherence/report |
Generar reporte |
4. Componentes Utilizados
4.1. Componentes del Design System
| Componente |
ID |
Uso en Modulo |
| Bottom Navigation |
CMP-NAV-001 |
Navegacion principal |
| Top App Bar |
CMP-NAV-002 |
Todas las pantallas |
| Tab Bar |
CMP-NAV-003 |
SCR-ADH-001 |
| Dropdown Select |
CMP-INP-006 |
Period selectors |
| Checkbox |
CMP-INP-007 |
SCR-ADH-010 |
| Segmented Control |
CMP-INP-009 |
Severity, formats |
| Text Area |
CMP-INP-010 |
SCR-ADH-005 |
| Primary Button |
CMP-BTN-001 |
CTAs |
| Snackbar |
CMP-FBK-001 |
Feedback |
| Dialog |
CMP-FBK-002 |
Confirmaciones |
| Bottom Sheet |
CMP-FBK-003 |
Modals |
| Banner |
CMP-FBK-004 |
Warnings |
| Badge |
CMP-DAT-002 |
Alertas |
4.2. Componentes Nuevos (22 totales)
| Componente |
ID |
Descripcion |
Pantalla |
| AdherenceCircle |
CMP-ADH-001 |
Circulo de porcentaje animado |
SCR-ADH-001 |
| StreakCard |
CMP-ADH-002 |
Card de racha con fuego |
SCR-ADH-001 |
| WeeklyCalendar |
CMP-ADH-003 |
Calendario semanal con barras |
SCR-ADH-001 |
| InsightCard |
CMP-ADH-004 |
Card de insight compacta |
SCR-ADH-001 |
| MedicationAdherenceRow |
CMP-ADH-005 |
Row expandible por med |
SCR-ADH-002 |
| HorizontalProgressBar |
CMP-ADH-006 |
Barra de progreso horizontal |
SCR-ADH-002 |
| AdherenceLineChart |
CMP-ADH-007 |
Grafico de linea temporal |
SCR-ADH-003 |
| TrendSummaryCard |
CMP-ADH-008 |
Resumen de tendencia |
SCR-ADH-003 |
| AdherenceHeatmap |
CMP-ADH-009 |
Heatmap dia/hora |
SCR-ADH-004 |
| PatternCard |
CMP-ADH-010 |
Card de patron detectado |
SCR-ADH-004 |
| ProblemTypeSelector |
CMP-ADH-011 |
Selector de tipo problema |
SCR-ADH-005 |
| DaySummaryCard |
CMP-ADH-012 |
Resumen de dia |
SCR-ADH-006 |
| DoseTimeline |
CMP-ADH-013 |
Timeline de dosis |
SCR-ADH-006 |
| InsightCardExpanded |
CMP-ADH-014 |
Insight expandido |
SCR-ADH-007 |
| DualPeriodSelector |
CMP-ADH-015 |
Selector doble de periodo |
SCR-ADH-008 |
| ComparisonCircles |
CMP-ADH-016 |
Circulos comparativos |
SCR-ADH-008 |
| ComparisonBar |
CMP-ADH-017 |
Barras comparativas |
SCR-ADH-008 |
| StreakHero |
CMP-ADH-018 |
Hero de racha |
SCR-ADH-009 |
| BadgeGrid |
CMP-ADH-019 |
Grid de badges |
SCR-ADH-009 |
| BadgeItem |
CMP-ADH-020 |
Item de badge |
SCR-ADH-009 |
| AchievementModal |
CMP-ADH-021 |
Modal de logro |
SCR-ADH-009 |
| PDFPreview |
CMP-ADH-022 |
Preview de PDF |
SCR-ADH-010 |
5. Auditoria de Accesibilidad WCAG 2.1 AA
5.1. Resumen de Cumplimiento
| Principio |
Estado |
Notas |
| Perceptible |
CUMPLE |
Colores + iconos + texto siempre |
| Operable |
CUMPLE |
Touch targets 44dp+, teclado completo |
| Comprensible |
CUMPLE |
Graficos con alternativas tabulares |
| Robusto |
CUMPLE |
Semantica correcta |
5.2. Consideraciones Especiales
5.2.1. Graficos y Visualizaciones
- Todos los graficos tienen representacion tabular alternativa
- Heatmap accesible via tabla con headers
- Colores nunca son unico indicador
5.2.2. Animaciones
- Circulo de adherencia respeta prefers-reduced-motion
- Fuego de racha puede ser estatico
- Transiciones < 100ms si movimiento reducido
5.2.3. Screen Reader
- Anuncios contextuales para cambios de estado
- Labels descriptivos para todos los elementos interactivos
- Orden de foco logico documentado
5.3. Checklist por Pantalla
| Pantalla |
Touch Targets |
Contraste |
Screen Reader |
Focus Order |
| SCR-ADH-001 |
OK |
OK |
OK |
OK |
| SCR-ADH-002 |
OK |
OK |
OK |
OK |
| SCR-ADH-003 |
OK |
OK |
OK |
OK |
| SCR-ADH-004 |
OK |
OK |
OK |
OK |
| SCR-ADH-005 |
OK |
OK |
OK |
OK |
| SCR-ADH-006 |
OK |
OK |
OK |
OK |
| SCR-ADH-007 |
OK |
OK |
OK |
OK |
| SCR-ADH-008 |
OK |
OK |
OK |
OK |
| SCR-ADH-009 |
OK |
OK |
OK |
OK |
| SCR-ADH-010 |
OK |
OK |
OK |
OK |
6. Responsive Design
6.1. Breakpoints
| Ancho |
Adaptacion |
| < 360dp |
Compacto, circulos menores |
| 360-600dp |
Mobile standard |
| 600-840dp |
Tablet portrait |
| > 840dp |
Tablet landscape |
6.2. Adaptaciones por Breakpoint
| Pantalla |
Mobile |
Tablet |
| SCR-ADH-001 |
Vertical scroll |
Dashboard en grid |
| SCR-ADH-002 |
Cards apiladas |
Grid 2 columnas |
| SCR-ADH-004 |
Heatmap scroll |
Heatmap completo |
| SCR-ADH-009 |
Badge grid 4 cols |
Badge grid 6 cols |
7. Estados de Error
7.1. Errores de Datos
| Escenario |
UI |
| Datos insuficientes |
Empty state + progreso |
| Error de calculo |
Error card + reintentar |
| Sin conexion |
Banner offline + cache |
| Campo |
Mensaje |
| Descripcion vacia |
"Describe el problema" |
| Severidad no seleccionada |
"Selecciona la gravedad" |
| Sin medicamentos |
"Selecciona al menos un medicamento" |
8. Metricas de UX
8.1. KPIs del Modulo
| Metrica |
Objetivo |
Medicion |
| Tiempo en dashboard |
> 30s |
analytics |
| Tap rate en insights |
> 40% |
analytics |
| Reportes generados/mes |
> 1 |
analytics |
| Completion rate anomaly |
> 80% |
funnel |
| Retorno a tab |
> 3x/semana |
analytics |
8.2. Eventos de Analytics
Ver documentacion individual de cada pantalla para lista completa de eventos.
9. Archivos del Modulo
9.1. Flujos
flows/UIF-ADH-001-motor-adherencia.md
9.2. Pantallas
screens/SCR-ADH-001-dashboard-adherencia.mdscreens/SCR-ADH-002-adherencia-por-medicamento.mdscreens/SCR-ADH-003-tendencias.mdscreens/SCR-ADH-004-patrones.mdscreens/SCR-ADH-005-reportar-anomalia.mdscreens/SCR-ADH-006-detalle-dia.mdscreens/SCR-ADH-007-insights.mdscreens/SCR-ADH-008-comparativa.mdscreens/SCR-ADH-009-logros.mdscreens/SCR-ADH-010-reporte-medico.md
9.3. Especificacion Consolidada
specs/UI-MTS-ADH-001.md (este documento)
10. Referencias
10.1. Especificacion Funcional
10.2. Design System
10.3. Accesibilidad
10.4. Modulos Relacionados
11. Historial de Cambios
| Version |
Fecha |
Cambios |
| 1.0.0 |
2025-12-05 |
Version inicial completa - FASE 2 |
12. Aprobaciones
| Rol |
Nombre |
Estado |
Fecha |
| UX Lead |
MobileUxUiDrone |
Completado |
2025-12-05 |
| A11y Review |
Pendiente |
- |
- |
| Product Owner |
Pendiente |
- |
- |
Documento generado por MobileUxUiDrone (Eight of Eight)
"La adherencia visible es adherencia mejorable."