Flujo de Navegacion - Gestion de Medicamentos¶

Identificador: UIF-MED-001 Modulo: MTS-MED-001 - Gestion de Medicamentos Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight)

1. Resumen del Flujo¶

Este documento especifica el flujo de navegacion completo para el modulo de Gestion de Medicamentos, incluyendo todas las pantallas, transiciones y estados posibles.

1.1. Pantallas del Modulo¶

ID	Nombre	Proposito	Prioridad
SCR-MED-001	Lista de Medicamentos	Vista principal de medicamentos activos	Alta
SCR-MED-002	Detalle de Medicamento	Ver/editar medicamento individual	Alta
SCR-MED-003	Agregar Medicamento	Wizard de nuevo medicamento	Alta
SCR-MED-004	Configurar Horarios	Seleccion de frecuencia y horas	Alta
SCR-MED-005	Buscar en Catalogo	Busqueda de medicamentos	Alta
SCR-MED-006	Medicamento Personalizado	Agregar sin catalogo	Media
SCR-MED-007	Inventario	Gestion de stock personal	Media
SCR-MED-008	Historial	Medicamentos pasados	Media
SCR-MED-009	Interacciones	Vista de interacciones detectadas	Alta

2. Diagrama de Flujo Principal¶

flowchart TD
    subgraph Entry["Puntos de Entrada"]
        HOME[Tab Medicamentos]
        NOTIF[Notificacion]
        DEEP[Deep Link]
    end

    subgraph MainFlow["Flujo Principal"]
        LIST[SCR-MED-001<br/>Lista de Medicamentos]
        DETAIL[SCR-MED-002<br/>Detalle Medicamento]
        ADD[SCR-MED-003<br/>Agregar Medicamento]
        SCHEDULE[SCR-MED-004<br/>Configurar Horarios]
    end

    subgraph SearchFlow["Flujo de Busqueda"]
        SEARCH[SCR-MED-005<br/>Buscar en Catalogo]
        CUSTOM[SCR-MED-006<br/>Medicamento Personalizado]
    end

    subgraph SecondaryFlow["Flujos Secundarios"]
        INVENTORY[SCR-MED-007<br/>Inventario]
        HISTORY[SCR-MED-008<br/>Historial]
        INTERACT[SCR-MED-009<br/>Interacciones]
    end

    subgraph Actions["Acciones"]
        CONFIRM{Confirmar<br/>Interaccion?}
        SUCCESS[Medicamento<br/>Guardado]
        DELETE{Eliminar?}
    end

    %% Entry Points
    HOME --> LIST
    NOTIF --> DETAIL
    DEEP --> DETAIL

    %% Main Navigation
    LIST -->|FAB +| ADD
    LIST -->|Tap card| DETAIL
    LIST -->|Menu: Historial| HISTORY
    LIST -->|Menu: Interacciones| INTERACT

    %% Add Flow
    ADD -->|Buscar| SEARCH
    SEARCH -->|Seleccionar| ADD
    SEARCH -->|No encontrado| CUSTOM
    CUSTOM -->|Guardar| ADD
    ADD -->|Siguiente| SCHEDULE
    SCHEDULE -->|Verificar| CONFIRM
    CONFIRM -->|Si hay interaccion| INTERACT
    CONFIRM -->|Sin interaccion| SUCCESS
    INTERACT -->|Aceptar riesgo| SUCCESS
    SUCCESS --> LIST

    %% Detail Flow
    DETAIL -->|Editar horarios| SCHEDULE
    DETAIL -->|Ver inventario| INVENTORY
    DETAIL -->|Eliminar| DELETE
    DELETE -->|Confirmar| LIST
    DELETE -->|Cancelar| DETAIL
    INVENTORY --> DETAIL

    %% History Flow
    HISTORY -->|Tap item| DETAIL

    %% Styling
    classDef entry fill:#E3F2FD,stroke:#1976D2
    classDef main fill:#E8F5E9,stroke:#388E3C
    classDef search fill:#FFF3E0,stroke:#F57C00
    classDef secondary fill:#F3E5F5,stroke:#7B1FA2
    classDef action fill:#FFEBEE,stroke:#D32F2F

    class HOME,NOTIF,DEEP entry
    class LIST,DETAIL,ADD,SCHEDULE main
    class SEARCH,CUSTOM search
    class INVENTORY,HISTORY,INTERACT secondary
    class CONFIRM,SUCCESS,DELETE action

3. User Journeys¶

3.1. Journey: Paciente Independiente (PI) - Gestionar Medicamentos¶

Persona: Maria, 45 anos, diabetes tipo 2, maneja sus medicamentos sola.

journey
    title Maria agrega su tratamiento de Metformina
    section Descubrimiento
      Abre app por primera vez: 5: Maria
      Ve lista vacia con CTA: 4: Maria
    section Agregar Medicamento
      Toca FAB +: 5: Maria
      Busca Metformina: 4: Maria
      Selecciona resultado: 5: Maria
    section Configuracion
      Ingresa dosis 850mg: 5: Maria
      Selecciona 2 veces al dia: 4: Maria
      Ajusta horarios 8am/8pm: 5: Maria
      Agrega instruccion con comida: 4: Maria
    section Confirmacion
      Revisa resumen: 5: Maria
      Confirma sin interacciones: 5: Maria
      Ve medicamento en lista: 5: Maria

3.1.1. Pasos Detallados - PI¶

Paso	Pantalla	Accion	Siguiente	Notas UX
1	HOME	Tap tab Medicamentos	SCR-MED-001	Bottom nav destacado
2	SCR-MED-001	Vista lista vacia	-	Empty state motivacional
3	SCR-MED-001	Tap FAB +	SCR-MED-003	FAB siempre visible
4	SCR-MED-003	Campo busqueda activo	SCR-MED-005	Auto-focus en busqueda
5	SCR-MED-005	Escribe "metfor..."	-	Busqueda predictiva
6	SCR-MED-005	Tap resultado	SCR-MED-003	Pre-llena datos
7	SCR-MED-003	Ingresa dosis	-	Sugerencias de dosis
8	SCR-MED-003	Tap "Configurar horarios"	SCR-MED-004	Transicion suave
9	SCR-MED-004	Selecciona frecuencia	-	Pills de frecuencia
10	SCR-MED-004	Ajusta horas	-	Time pickers grandes
11	SCR-MED-004	Tap "Siguiente"	SCR-MED-003	Vuelve a resumen
12	SCR-MED-003	Agrega instrucciones	-	Campo expandible
13	SCR-MED-003	Tap "Guardar"	CONFIRM	Modal si hay interacciones
14	SUCCESS	Ve confirmacion	SCR-MED-001	Snackbar + lista actualizada

3.1.2. Consideraciones Accesibilidad - PI¶

Touch targets minimo 48x48dp
Labels claros para VoiceOver/TalkBack
Feedback haptico en acciones exitosas
Sin timeouts en formularios
Posibilidad de aumentar texto 200%

3.2. Journey: Cuidador Responsable (CR) - Supervisar Medicamentos¶

Persona: Carlos, 38 anos, cuida a su madre de 72 anos con multiples condiciones.

journey
    title Carlos supervisa medicamentos de su madre
    section Acceso
      Abre app: 5: Carlos
      Selecciona perfil de madre: 4: Carlos
      Ve dashboard: 5: Carlos
    section Revision
      Tap tab Medicamentos: 5: Carlos
      Ve lista de 6 medicamentos: 4: Carlos
      Identifica alerta interaccion: 3: Carlos
    section Investigacion
      Tap alerta interaccion: 4: Carlos
      Lee detalle interaccion: 4: Carlos
      Ve recomendaciones: 5: Carlos
    section Accion
      Toma screenshot para medico: 5: Carlos
      Agenda cita consulta: 4: Carlos

3.2.1. Pasos Detallados - CR¶

Paso	Pantalla	Accion	Siguiente	Notas UX
1	HOME	Tap selector de perfil	PROFILES	Header persistente
2	PROFILES	Selecciona dependiente	SCR-MED-001	Avatar + nombre claro
3	SCR-MED-001	Ve lista medicamentos	-	Cards con estado
4	SCR-MED-001	Ve badge interaccion	-	Badge rojo llamativo
5	SCR-MED-001	Tap badge o menu	SCR-MED-009	Acceso rapido
6	SCR-MED-009	Ve detalle interaccion	-	Severity color coded
7	SCR-MED-009	Lee recomendacion	-	Texto claro, sin jerga
8	SCR-MED-009	Tap compartir	SHARE	Sheet de compartir
9	SHARE	Selecciona destino	-	Screenshot o PDF

3.2.2. Permisos del Cuidador¶

Permiso	CR Puede	CR No Puede
Ver lista medicamentos	Si	-
Ver detalles	Si	-
Ver interacciones	Si	-
Agregar medicamento	Configurable	Por defecto no
Editar medicamento	Configurable	Por defecto no
Eliminar medicamento	No	Siempre bloqueado
Exportar datos	Si	-

3.2.3. Consideraciones Accesibilidad - CR¶

Indicadores visuales + iconos para interacciones
Alto contraste en alertas criticas
Soporte para texto grande (madre puede ver pantalla)
VoiceOver describe severidad de interacciones

4. Transiciones y Animaciones¶

4.1. Transiciones Entre Pantallas¶

De	A	Tipo	Duracion	Ease
LIST	DETAIL	Shared element (card)	300ms	ease-out
LIST	ADD	Bottom sheet slide up	300ms	ease-out
ADD	SEARCH	Overlay fade	200ms	ease-in-out
SEARCH	ADD	Overlay fade out	200ms	ease-in-out
ADD	SCHEDULE	Slide left	250ms	ease-out
SCHEDULE	ADD	Slide right	250ms	ease-out
*	INTERACT	Modal scale up	200ms	ease-out

4.2. Preferencias de Movimiento Reducido¶

Cuando prefers-reduced-motion esta activo:

Todas las transiciones < 100ms
Sin shared element animations
Cambios instantaneos de pantalla
Mantener feedback haptico

5. Estados de Pantalla¶

5.1. SCR-MED-001 - Lista de Medicamentos¶

Estado	Condicion	Visualizacion
Empty	0 medicamentos	Ilustracion + CTA "Agregar primer medicamento"
Loading	Cargando datos	Skeleton loader (3 cards)
Loaded	>= 1 medicamento	Lista de MedicationCards
Error	Fallo de carga	Error card + "Reintentar"
Offline	Sin conexion	Banner offline + datos cache

5.2. SCR-MED-003 - Agregar Medicamento¶

Estado	Condicion	Visualizacion
Initial	Formulario vacio	Todos campos default
Searching	Buscando catalogo	Loading en campo
Selected	Medicamento elegido	Datos pre-llenados
Custom	Modo personalizado	Formulario extendido
Validating	Verificando interacciones	Loading overlay
Warning	Interaccion detectada	Modal de advertencia
Saving	Guardando	Button loading state
Error	Error de guardado	Inline error message

6. Deep Links¶

6.1. Estructura de Deep Links¶

Deep Link	Destino	Parametros
`medtime://medications`	SCR-MED-001	-
`medtime://medications/{id}`	SCR-MED-002	medication_id
`medtime://medications/add`	SCR-MED-003	-
`medtime://medications/add?name={name}`	SCR-MED-003	pre-fill name
`medtime://medications/{id}/schedule`	SCR-MED-004	medication_id
`medtime://medications/interactions`	SCR-MED-009	-

6.2. Notificaciones que Abren Pantallas¶

Tipo Notificacion	Destino	Contexto
Alerta de reabasto	SCR-MED-007	medication_id
Interaccion detectada	SCR-MED-009	interaction_id
Medicamento por caducar	SCR-MED-002	medication_id

7. Gestos Soportados¶

7.1. Gestos por Pantalla¶

Pantalla	Gesto	Accion	Alternativa
SCR-MED-001	Swipe left en card	Revelar acciones (editar/eliminar)	Long press
SCR-MED-001	Pull down	Refrescar lista	Menu > Refrescar
SCR-MED-002	Swipe down	Cerrar detalle	Tap back button
SCR-MED-004	Swipe en time picker	Ajustar hora	Tap +/- buttons

7.2. Gestos de Accesibilidad¶

Todos los gestos tienen alternativa de un toque
VoiceOver: custom actions para swipe actions
TalkBack: accessibility actions en cada elemento

8. Metricas de UX¶

8.1. KPIs del Flujo¶

Metrica	Objetivo	Medicion
Tiempo para agregar medicamento	< 2 minutos	analytics
Taps para agregar medicamento	< 8 taps	analytics
Tasa de abandono wizard	< 15%	analytics
Errores de formulario	< 5% usuarios	crash reports
Uso de busqueda vs manual	> 80% busqueda	analytics

8.2. Puntos de Friccion Identificados¶

Punto	Riesgo	Mitigacion
Busqueda sin resultados	Alto	Sugerencias fuzzy + custom
Seleccion de horarios	Medio	Presets inteligentes
Modal de interacciones	Alto	Lenguaje claro, no alarmista
Inventario opcional	Bajo	Skip explicito

9. Referencias¶

10. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial con flujo completo

Documento generado por MobileUxUiDrone (Eight of Eight) "El flujo de usuario es la columna vertebral de la experiencia."