Saltar a contenido

Especificacion UI Consolidada - Catalogo de Medicamentos

Modulo: MTS-CAT-001 - Catalogo de Medicamentos Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado FASE: 2 - Value

1. Vision General del Modulo UI

1.1. Proposito

Este documento consolida la especificacion de interfaz de usuario para el modulo de Catalogo de Medicamentos, que proporciona busqueda, filtrado y seleccion de medicamentos desde la base de datos central de MedTime.

PRINCIPIO FUNDAMENTAL - SIN CACHE LOCAL (RN-CAT-001): Las busquedas del catalogo requieren conexion a internet. Los medicamentos del usuario (MedicamentoPaciente) se almacenan localmente y funcionan 100% offline.

1.2. Pantallas del Modulo

ID Nombre Tipo Prioridad
SCR-CAT-001 Busqueda con Autocomplete Full Screen Alta
SCR-CAT-002 Resultados de Busqueda Full Screen Alta
SCR-CAT-003 Detalle de Medicamento Full Screen Alta
SCR-CAT-004 Filtros Avanzados Bottom Sheet Media
SCR-CAT-005 Medicamentos Recientes Full Screen Media
SCR-CAT-006 Escaneo Codigo de Barras Full Screen Modal Media

1.3. Estados de Conectividad

Estado Funcionalidades UI
Online Busqueda completa en catalogo Normal
Offline Solo recientes y personalizados Banner advertencia
Lento Busqueda con timeout extendido Spinner prolongado

2. Flujo de Navegacion

2.1. Diagrama Principal

flowchart TD
    subgraph Entry["Puntos de Entrada"]
        ADDMED[Agregar Medicamento]
        RECETA[Wizard de Recetas]
        SEARCH[Tab Buscar]
        DEEPLINK[Deep Link]
    end

    subgraph MainFlow["Flujo Principal"]
        BUSQUEDA[SCR-CAT-001<br/>Busqueda]
        RESULTS[SCR-CAT-002<br/>Resultados]
        DETALLE[SCR-CAT-003<br/>Detalle]
    end

    subgraph AuxFlow["Flujos Auxiliares"]
        FILTERS[SCR-CAT-004<br/>Filtros]
        RECIENTES[SCR-CAT-005<br/>Recientes]
        SCAN[SCR-CAT-006<br/>Escanear]
    end

    ADDMED --> BUSQUEDA
    RECETA --> BUSQUEDA
    SEARCH --> BUSQUEDA
    DEEPLINK --> DETALLE

    BUSQUEDA -->|Escribir texto| RESULTS
    BUSQUEDA -->|Tap reciente| DETALLE
    BUSQUEDA -->|Tap escanear| SCAN

    RESULTS -->|Tap medicamento| DETALLE
    RESULTS -->|Tap filtrar| FILTERS

    DETALLE -->|Seleccionar| SELECT[Seleccion confirmada]

    FILTERS -->|Aplicar| RESULTS
    BUSQUEDA -->|Ver recientes| RECIENTES
    RECIENTES -->|Tap item| DETALLE
    SCAN -->|Codigo detectado| DETALLE

    SELECT --> EXIT[Retornar a origen]
Deep Link Destino Parametros
medtime://catalog/search SCR-CAT-001 query?
medtime://catalog/search?q={term} SCR-CAT-002 term
medtime://catalog/medication/{id} SCR-CAT-003 medication_id
medtime://catalog/scan SCR-CAT-006 -

3. User Journeys

3.1. Journey: Buscar Medicamento en Catalogo (PI)

Persona: Maria, 45 anos, quiere agregar un nuevo medicamento.

journey
    title Maria busca un medicamento
    section Inicio
      Abre agregar medicamento: 5: Maria
      Ve pantalla de busqueda: 5: Maria
    section Busqueda
      Escribe nombre del medicamento: 4: Maria
      Ve sugerencias en tiempo real: 5: Maria
      Selecciona medicamento correcto: 5: Maria
    section Detalle
      Revisa ficha tecnica: 4: Maria
      Confirma que es el correcto: 5: Maria
      Selecciona para agregar: 5: Maria
    section Resultado
      Ve medicamento en su lista: 5: Maria

3.1.1. Pasos Detallados

Paso Pantalla Accion Siguiente
1 SCR-MED-001 Tap "Agregar medicamento" SCR-CAT-001
2 SCR-CAT-001 Focus en input -
3 SCR-CAT-001 Escribe >= 3 caracteres Autocomplete
4 SCR-CAT-002 Lista de resultados -
5 SCR-CAT-002 Tap en medicamento SCR-CAT-003
6 SCR-CAT-003 Revisa ficha tecnica -
7 SCR-CAT-003 Tap "Agregar" SCR-MED-002

3.2. Journey: Medicamento No Encontrado (PI)

Persona: Carlos, 52 anos, busca un medicamento regional.

Paso Pantalla Accion Siguiente
1 SCR-CAT-001 Busca medicamento SCR-CAT-002
2 SCR-CAT-002 0 resultados Estado vacio
3 SCR-CAT-002 Revisa sugerencias fuzzy -
4 SCR-CAT-002 Tap "Agregar personalizado" Formulario
5 - Ingresa datos manualmente -
6 - Guarda medicamento Lista

4. Catalogo de Pantallas

4.1. SCR-CAT-001 - Busqueda con Autocomplete

Proposito: Busqueda principal de medicamentos con sugerencias en tiempo real.

Estados:

  • Inicial (sin texto): Recientes + categorias
  • Escribiendo: Autocomplete activo
  • Sin resultados: Estado vacio + agregar personalizado
  • Sin conexion: Solo recientes locales

Wireframe (Escribiendo):

+------------------------------------------+
|  [<]    Buscar Medicamento                |
+------------------------------------------+
|                                           |
|  [ 🔍 metfor_                   [X] ]    |
|                                           |
|  SUGERENCIAS                              |
|  +-----------------------------------------+
|  |  Metformina 500mg                     |
|  |  Metformina 850mg                     |
|  |  Metformina 1000mg                    |
|  |  Glucophage (Metformina)              |
|  +-----------------------------------------+
|                                           |
|  [+ Agregar medicamento personalizado]    |
+------------------------------------------+

4.2. SCR-CAT-002 - Resultados de Busqueda

Proposito: Lista de medicamentos encontrados con filtros.

Agrupacion:

  • Genericos (primero)
  • Marcas comerciales
  • Combinaciones

Features:

  • Filter chips rapidos
  • "Did you mean" para errores
  • Paginacion lazy load

4.3. SCR-CAT-003 - Detalle de Medicamento

Proposito: Ficha tecnica completa con opcion de agregar.

Secciones:

  • Hero card con nombre e icono
  • Informacion general
  • Administracion
  • Interacciones (con alerta si hay conflictos)
  • Regulacion

Estados especiales:

  • Con alerta de interaccion severa
  • Ya en lista del usuario

4.4. SCR-CAT-004 - Filtros Avanzados

Proposito: Refinamiento de busqueda con multiples criterios.

Categorias de Filtro:

Filtro Tipo Opciones
Forma farmaceutica Multi-select Tableta, Capsula, Jarabe, etc.
Via administracion Multi-select Oral, Topica, Inyectable, etc.
Tipo Single-select Generico, Marca, Ambos
Requiere receta Single-select Si, No, Todos
Pais Single-select Segun ubicacion

4.5. SCR-CAT-005 - Medicamentos Recientes

Proposito: Historial de busquedas y medicamentos vistos.

Caracteristicas:

  • Maximo 50 items
  • Retencion 7 dias
  • Solo almacenamiento local (NUNCA sincroniza)
  • Agrupado por dia

4.6. SCR-CAT-006 - Escaneo Codigo de Barras

Proposito: Busqueda rapida escaneando codigo EAN/UPC.

Formatos Soportados:

Formato Digitos Region
EAN-13 13 Europa, Latam
EAN-8 8 Productos pequenos
UPC-A 12 USA, Canada
UPC-E 8 USA comprimido
Code128 Variable Industrial

Estados:

  • Escaneando (viewfinder activo)
  • Detectado (procesando)
  • Encontrado (resultado)
  • No encontrado (opciones alternativas)
  • Sin permiso camara

5. Componentes Nuevos

5.1. Catalogo de Componentes del Modulo

ID Nombre Tipo Usado en
CMP-CAT-001 SearchInput Input SCR-CAT-001
CMP-CAT-002 RecentSearchItem List Item SCR-CAT-001, SCR-CAT-005
CMP-CAT-003 AutocompleteItem List Item SCR-CAT-001
CMP-CAT-004 CategoryChip Chip SCR-CAT-001
CMP-CAT-005 ResultCountHeader Header SCR-CAT-002
CMP-CAT-006 FilterChipsRow Container SCR-CAT-002
CMP-CAT-007 MedicationResultCard Card SCR-CAT-002
CMP-CAT-008 DidYouMeanBanner Banner SCR-CAT-002
CMP-CAT-009 MedicationHeroCard Card SCR-CAT-003
CMP-CAT-010 InteractionAlertBanner Banner SCR-CAT-003
CMP-CAT-011 FilterSection Container SCR-CAT-004
CMP-CAT-012 FilterChip Chip SCR-CAT-004
CMP-CAT-013 HistorySearchItem List Item SCR-CAT-005
CMP-CAT-014 HistoryMedicationItem List Item SCR-CAT-005
CMP-CAT-015 CameraViewfinder Camera SCR-CAT-006
CMP-CAT-016 ScanResultCard Card SCR-CAT-006

5.2. Especificacion de Componentes Clave

5.2.1. CMP-CAT-001 - SearchInput

Propiedades:
- Placeholder: "Buscar por nombre o codigo..."
- Icono izquierda: Lupa
- Accion derecha: Scan / Clear
- Debounce: 300ms
- Min caracteres: 3

5.2.2. CMP-CAT-007 - MedicationResultCard

Layout:
- Icono: Segun forma farmaceutica
- Titulo: Nombre del medicamento
- Subtitulo: Forma, via, laboratorio
- Badge: Estrella si popular
- Touch target: 56dp height

5.2.3. CMP-CAT-010 - InteractionAlertBanner

Variantes:
| Severidad | Background | Texto |
|-----------|------------|-------|
| SEVERE | error.50 | "ALERTA: Interaccion SEVERA" |
| MODERATE | warning.50 | "Atencion: Interaccion moderada" |
| MILD | info.50 | "Nota: Interaccion leve" |

6. Datos y Modelos

6.1. Estructura de Datos Principal

interface SearchScreenData {
  isOnline: boolean;
  recentSearches: RecentSearch[];
  userMedications: UserMedication[];
  categories: Category[];
}

interface SearchResultsData {
  query: string;
  totalCount: number;
  filteredCount: number;
  activeFilters: Filter[];
  results: {
    generics: MedicationResult[];
    brands: MedicationResult[];
    combinations: MedicationResult[];
  };
  didYouMean?: string;
  hasMore: boolean;
}

interface MedicationDetailData {
  medication: MedicationCatalog;
  isInUserList: boolean;
  addedDate?: Date;
  interactions: InteractionCheck[];
  localRegulation: {
    countryCode: string;
    registrationNumber: string;
    requiresPrescription: boolean;
  };
}

interface MedicationCatalog {
  id: string;
  name: string;
  genericName: string;
  activeIngredients: ActiveIngredient[];
  form: string;
  strength: string;
  route: string;
  atcCode: string;
  therapeuticCategory: string;
  type: 'generic' | 'brand';
  manufacturer?: string;
  countriesAvailable: string[];
  requiresPrescription: boolean;
  knownInteractionsCount: number;
}

6.2. Eventos de Output

Pantalla Evento Payload
SCR-CAT-001 onSearch query
SCR-CAT-001 onSelectAutocomplete medication_id
SCR-CAT-001 onScanTap -
SCR-CAT-002 onSelectMedication medication_id
SCR-CAT-002 onFilterToggle filter
SCR-CAT-003 onAdd medication_id
SCR-CAT-003 onViewInteraction interaction_id
SCR-CAT-004 onApply filter_state
SCR-CAT-006 onCodeDetected code, format

7. Accesibilidad

7.1. Cumplimiento WCAG 2.1 AA

Criterio Implementacion
1.1.1 Non-text Content Iconos con labels descriptivos
1.3.1 Info and Relationships Estructura semantica de listas
1.4.3 Contrast Minimo 4.5:1 para texto
2.1.1 Keyboard Navegacion completa con teclado
2.4.6 Headings and Labels Headers por seccion de resultados
4.1.2 Name, Role, Value Search input con role correcto

7.2. Labels de Accesibilidad

Pantalla Elemento accessibilityLabel
SCR-CAT-001 Search input "Buscar medicamento"
SCR-CAT-001 Scan button "Escanear codigo de barras"
SCR-CAT-002 Result card "{nombre}, {forma}, {via}"
SCR-CAT-003 Interaction alert "Alerta: interaccion {severidad}"
SCR-CAT-006 Viewfinder "Camara para escanear codigo"

8. Metricas y Analytics

8.1. KPIs del Modulo

Metrica Objetivo Medicion
Tiempo busqueda a seleccion < 30s analytics
Tasa exito busqueda > 85% analytics
Uso de escaneo codigo > 10% analytics
Medicamentos personalizados < 5% analytics

8.2. Eventos de Analytics

Evento Pantalla Parametros
screen_view Todas screen_name
search_start SCR-CAT-001 query, source
search_complete SCR-CAT-002 query, results_count, time_ms
result_select SCR-CAT-002 medication_id, position
filter_apply SCR-CAT-004 filters_applied
scan_success SCR-CAT-006 code, format, medication_id
scan_not_found SCR-CAT-006 code, format
add_from_catalog SCR-CAT-003 medication_id, has_interaction

9. Transiciones y Animaciones

9.1. Transiciones Entre Pantallas

De A Tipo Duracion
BUSQUEDA RESULTS Fade in lista 200ms
RESULTS DETALLE Shared element (card) 300ms
BUSQUEDA SCAN Modal full screen 300ms
BUSQUEDA FILTERS Slide up 300ms
FILTERS RESULTS Slide down + refresh 300ms

9.2. Animaciones Especificas

Elemento Animacion Trigger
Autocomplete items Stagger fade in onResults
Skeleton loading Shimmer onLoading
No results Scale in onEmpty
Scan viewfinder Pulse line onActive
Filter chips Chip appear onSelect

10. Integracion con Otros Modulos

10.1. Dependencias

Modulo Tipo Descripcion
MTS-MED-001 Invocador Agregar medicamento inicia busqueda
MTS-REC-001 Invocador Wizard OCR busca medicamentos
MTS-INT-001 Consulta Verificar interacciones

10.2. Componentes Reutilizados

Componente De Modulo Uso
CMP-FBK-004 Core Banners (offline, privacy)
CMP-BTN-001 Core Botones primarios
CMP-INP-012 Core Radio groups en filtros

11. Consideraciones de Privacidad

11.1. Datos Locales (HIPAA-CAT-001)

Dato Retencion Ubicacion Sincronizacion
Historial busquedas Max 30 dias Solo dispositivo NUNCA
Medicamentos recientes Max 50 items Solo dispositivo NUNCA
Cache resultados 7 dias Solo dispositivo NUNCA

RN-CAT-009: El historial de busquedas se almacena exclusivamente en el dispositivo local y NUNCA se sincroniza al servidor.

12. Referencias

12.1. Documentos de Especificacion

12.2. Pantallas Individuales

12.3. Guias de Diseno

Documento generado por MobileUxUiDrone (Eight of Eight) "Encontrar el medicamento correcto debe ser tan simple como buscarlo."