Especificacion UI Consolidada - MTS-MED-001¶

Identificador: UI-MTS-MED-001 Modulo Funcional: MTS-MED-001 - Gestion de Medicamentos 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 Gestion de Medicamentos (MTS-MED-001), el modulo core de la aplicacion MedTime.

1.2. Metricas del Modulo¶

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

1.3. Pantallas Incluidas¶

ID	Nombre	Prioridad	Estado
SCR-MED-001	Lista de Medicamentos	Alta	Especificado
SCR-MED-002	Detalle de Medicamento	Alta	Especificado
SCR-MED-003	Agregar Medicamento	Alta	Especificado
SCR-MED-004	Configurar Horarios	Alta	Especificado
SCR-MED-005	Buscar en Catalogo	Alta	Especificado
SCR-MED-006	Medicamento Personalizado	Media	Especificado
SCR-MED-007	Inventario	Media	Especificado
SCR-MED-008	Historial	Media	Especificado
SCR-MED-009	Interacciones	Alta	Especificado

2. User Journeys¶

2.1. Paciente Independiente (PI) - Gestionar Medicamentos¶

Persona: Paciente adulto que maneja sus propios medicamentos.

Objetivo: Agregar y gestionar un tratamiento de forma autonoma.

Flujo principal:

Abrir app -> Tab Medicamentos
Tap FAB (+) -> Wizard agregar
Buscar medicamento -> Seleccionar
Configurar dosis y frecuencia
Configurar horarios
Confirmar (verificar interacciones)
Ver medicamento en lista

Tiempo objetivo: < 2 minutos

Puntos de friccion mitigados:

Busqueda predictiva reduce tiempo de seleccion
Sugerencias de horarios basadas en habitos
Modal de interacciones con lenguaje claro

2.2. Cuidador Responsable (CR) - Supervisar Medicamentos¶

Persona: Familiar que supervisa medicamentos de un dependiente.

Objetivo: Revisar estado de medicamentos e interacciones.

Flujo principal:

Abrir app -> Seleccionar perfil dependiente
Tab Medicamentos -> Ver lista
Identificar alertas (badges)
Tap alerta -> Ver interacciones
Compartir con medico si necesario

Restricciones:

Solo lectura por defecto
Edicion requiere permiso explicito
Eliminacion siempre bloqueada

3. Arquitectura de Navegacion¶

3.1. Diagrama de Flujo¶

flowchart TD
    HOME[Bottom Nav: Medicamentos] --> LIST[SCR-MED-001]

    LIST -->|FAB +| ADD[SCR-MED-003]
    LIST -->|Tap card| DETAIL[SCR-MED-002]
    LIST -->|Menu| HISTORY[SCR-MED-008]
    LIST -->|Menu| INTERACT[SCR-MED-009]

    ADD -->|Buscar| SEARCH[SCR-MED-005]
    SEARCH -->|Seleccionar| ADD
    SEARCH -->|No encontrado| CUSTOM[SCR-MED-006]
    CUSTOM --> ADD
    ADD -->|Config horarios| SCHEDULE[SCR-MED-004]
    SCHEDULE --> ADD

    DETAIL -->|Inventario| INVENTORY[SCR-MED-007]
    DETAIL -->|Editar| ADD

    ADD -->|Guardar| LIST

3.2. Deep Links¶

Ruta	Destino
`medtime://medications`	Lista
`medtime://medications/{id}`	Detalle
`medtime://medications/add`	Agregar
`medtime://medications/interactions`	Interacciones

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-MED-008
Text Field	CMP-INP-001	Formularios
Search Field	CMP-INP-002	SCR-MED-001, SCR-MED-005
Time Picker	CMP-INP-004	SCR-MED-004
Date Picker	CMP-INP-005	SCR-MED-003, SCR-MED-007
Dropdown Select	CMP-INP-006	SCR-MED-003, SCR-MED-006
Numeric Stepper	CMP-INP-008	SCR-MED-007
Primary Button	CMP-BTN-001	Todas las pantallas
FAB	CMP-BTN-004	SCR-MED-001
Medication Card	CMP-CRD-001	SCR-MED-001, SCR-MED-008
Interaction Card	CMP-CRD-004	SCR-MED-009
Medication List	CMP-LST-001	SCR-MED-001
Snackbar	CMP-FBK-001	Feedback acciones
Dialog	CMP-FBK-002	Confirmaciones
Bottom Sheet	CMP-FBK-003	SCR-MED-007
Chip	CMP-DAT-003	Filtros, formas
Medication Icon	CMP-DAT-006	Todas las cards

4.2. Componentes Personalizados¶

Componente	Descripcion	Pantalla
FrequencySelector	Selector de tipo de frecuencia	SCR-MED-004
TimeRowEditor	Row editable de horario	SCR-MED-004
InteractionBanner	Banner de severidad	SCR-MED-009
InventoryCalculator	Calculo de dias restantes	SCR-MED-007

5. Auditoria de Accesibilidad WCAG 2.1 AA¶

5.1. Resumen de Cumplimiento¶

Principio	Estado	Notas
Perceptible	CUMPLE	Todos los criterios AA
Operable	CUMPLE	Todos los criterios AA
Comprensible	CUMPLE	Todos los criterios AA
Robusto	CUMPLE	Todos los criterios AA

5.2. Criterios Verificados¶

5.2.1. Perceptible¶

Criterio	ID	Estado	Implementacion
Alternativas de texto	1.1.1	OK	Todas las imagenes/iconos tienen alt text
Info y relaciones	1.3.1	OK	Estructura semantica con headings
Caracteristicas sensoriales	1.3.3	OK	Color + icono + texto siempre
Uso del color	1.4.1	OK	Severidad nunca solo por color
Contraste minimo	1.4.3	OK	4.5:1 texto, verificado con herramienta
Cambio de tamano	1.4.4	OK	Soporte hasta 200%
Reflow	1.4.10	OK	Sin scroll horizontal a 320dp
Contraste no textual	1.4.11	OK	3:1 para UI components

5.2.2. Operable¶

Criterio	ID	Estado	Implementacion
Teclado	2.1.1	OK	Toda funcionalidad accesible via teclado
Sin trampa de teclado	2.1.2	OK	Focus siempre puede escapar
Orden de foco	2.4.3	OK	Secuencia logica documentada
Proposito de enlaces	2.4.4	OK	Links descriptivos
Encabezados y etiquetas	2.4.6	OK	Headings semanticos
Foco visible	2.4.7	OK	Outline 2dp primary
Tamano del objetivo	2.5.5	OK	Minimo 44x44dp

5.2.3. Comprensible¶

Criterio	ID	Estado	Implementacion
Idioma de pagina	3.1.1	OK	lang="es" declarado
Al recibir foco	3.2.1	OK	Sin cambios inesperados
Al recibir entrada	3.2.2	OK	Comportamiento predecible
Identificacion de errores	3.3.1	OK	Errores claramente indicados
Etiquetas	3.3.2	OK	Labels en todos los inputs
Sugerencia de error	3.3.3	OK	Mensajes constructivos
Prevencion de errores	3.3.4	OK	Confirmacion para eliminar

5.2.4. Robusto¶

Criterio	ID	Estado	Implementacion
Nombre, rol, valor	4.1.2	OK	Semantica correcta
Mensajes de estado	4.1.3	OK	aria-live regions

5.3. Checklist por Pantalla¶

Pantalla	Touch Targets	Contraste	Screen Reader	Focus Order
SCR-MED-001	OK	OK	OK	OK
SCR-MED-002	OK	OK	OK	OK
SCR-MED-003	OK	OK	OK	OK
SCR-MED-004	OK	OK	OK	OK
SCR-MED-005	OK	OK	OK	OK
SCR-MED-006	OK	OK	OK	OK
SCR-MED-007	OK	OK	OK	OK
SCR-MED-008	OK	OK	OK	OK
SCR-MED-009	OK	OK	OK	OK

5.4. Consideraciones Especiales¶

5.4.1. Interacciones de Medicamentos¶

Severidad CONTRAINDICADO se anuncia con prioridad assertive
Color + icono + texto siempre presentes
Disclaimers legibles por screen reader

5.4.2. Formularios de Horarios¶

Time pickers con alternativas de input
Labels claros para cada toma
Anuncios de cambios de hora

5.4.3. Inventario¶

Steppers con botones +/- de 48x48dp
Anuncio de dias restantes calculados
Alertas de stock bajo accesibles

6. Responsive Design¶

6.1. Breakpoints¶

Ancho	Adaptacion
< 360dp	Compacto, texto reducido
360-600dp	Mobile standard
600-840dp	Tablet portrait
> 840dp	Tablet landscape / Foldables

6.2. Adaptaciones por Breakpoint¶

Pantalla	Mobile	Tablet
SCR-MED-001	Lista vertical	Grid 2 columnas
SCR-MED-003	Wizard paso a paso	Side panel opcional
SCR-MED-009	Cards apiladas	Cards en grid

7. Animaciones y Movimiento¶

7.1. Transiciones¶

Transicion	Duracion	Ease	Reducido
Screen push	300ms	ease-out	Instant
Bottom sheet	300ms	ease-out	100ms
Card expand	200ms	ease	Instant
FAB show/hide	150ms	ease	Instant

7.2. Movimiento Reducido¶

Detectar prefers-reduced-motion
Duraciones < 100ms
Sin parallax ni physics
Mantener feedback haptico

8. Estados de Error¶

8.1. Errores de Red¶

Escenario	UI
Sin conexion inicial	Empty state + "Sin conexion"
Perdida de conexion	Banner offline + cache
Error de API	Toast + Reintentar

8.2. Errores de Validacion¶

Campo	Mensaje Ejemplo
Nombre vacio	"Ingresa el nombre del medicamento"
Dosis invalida	"La dosis debe ser un numero positivo"
Sin horarios	"Configura al menos un horario"

8.3. Errores Criticos¶

Error	Accion
Interaccion CONTRAINDICADA	Modal bloqueante
Medicamento caducado	Banner warning
Inventario en 0	Alert antes de toma

9. Metricas de UX¶

9.1. KPIs del Modulo¶

Metrica	Objetivo	Medicion
Tiempo agregar medicamento	< 2 min	analytics
Taps para completar wizard	< 8	analytics
Tasa de abandono wizard	< 15%	funnel
Tasa de uso de busqueda	> 80%	analytics
Errores de validacion	< 5%	logs
Interacciones revisadas	> 90%	analytics

9.2. Eventos de Analytics¶

Ver documentacion individual de cada pantalla para lista completa de eventos.

10. Archivos del Modulo¶

10.1. Flujos¶

flows/UIF-MED-001-gestion-medicamentos.md

10.2. Pantallas¶

screens/SCR-MED-001-lista-medicamentos.md
screens/SCR-MED-002-detalle-medicamento.md
screens/SCR-MED-003-agregar-medicamento.md
screens/SCR-MED-004-configurar-horarios.md
screens/SCR-MED-005-buscar-catalogo.md
screens/SCR-MED-006-medicamento-personalizado.md
screens/SCR-MED-007-inventario.md
screens/SCR-MED-008-historial.md
screens/SCR-MED-009-interacciones.md

10.3. Especificacion Consolidada¶

specs/UI-MTS-MED-001.md (este documento)

11. Referencias¶

11.1. Especificacion Funcional¶

MTS-MED-001 - Gestion de Medicamentos

11.2. Design System¶

11.3. Accesibilidad¶

03-accessibility-guidelines.md

12. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial completa

13. 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 interfaz es el puente entre la especificacion y el usuario."