Especificacion UI Consolidada - MTS-EST-001
Identificador: UI-MTS-EST-001
Modulo Funcional: MTS-EST-001 - Catalogo de Estudios
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 Catalogo de Estudios (MTS-EST-001), que permite buscar, programar y prepararse para estudios clinicos.
1.2. Metricas del Modulo
| Metrica |
Valor |
| Total de pantallas |
8 |
| Componentes unicos |
15 |
| User journeys documentados |
1 |
| Nivel WCAG |
AA |
| Cobertura de accesibilidad |
100% |
1.3. Pantallas Incluidas
| ID |
Nombre |
Prioridad |
Estado |
| SCR-EST-001 |
Busqueda de Estudios |
Alta |
Especificado |
| SCR-EST-002 |
Resultados de Busqueda |
Alta |
Especificado |
| SCR-EST-003 |
Detalle de Estudio |
Alta |
Especificado |
| SCR-EST-004 |
Filtros por Categoria |
Media |
Especificado |
| SCR-EST-005 |
Estudios Programados |
Alta |
Especificado |
| SCR-EST-006 |
Historial de Estudios |
Media |
Especificado |
| SCR-EST-007 |
Preparacion para Estudio |
Alta |
Especificado |
| SCR-EST-008 |
Recordatorios de Preparacion |
Alta |
Especificado |
2. User Journeys
2.1. Paciente Independiente (PI) - Buscar Estudio Clinico
Persona: Ana, 52 anos, necesita programar un perfil lipidico.
Objetivo: Encontrar informacion del estudio y configurar preparacion.
Flujo principal:
- Abrir app -> Tab Citas/Estudios
- Tap "Nueva Cita" -> "Estudio"
- Buscar "perfil lipidico"
- Seleccionar resultado
- Revisar preparacion (ayuno)
- Configurar recordatorios
- Seleccionar para cita
Tiempo objetivo: < 1 minuto
Puntos de friccion mitigados:
- Busqueda predictiva reduce tiempo
- Categorias visuales facilitan navegacion
- Preparacion claramente destacada
- Recordatorios sugeridos automaticamente
3. Arquitectura de Navegacion
3.1. Diagrama de Flujo
flowchart TD
HOME[Tab Citas] --> SEARCH[SCR-EST-001]
SEARCH -->|Buscar| RESULTS[SCR-EST-002]
SEARCH -->|Categoria| FILTER[SCR-EST-004]
SEARCH --> SCHEDULED[SCR-EST-005]
RESULTS -->|Tap card| DETAIL[SCR-EST-003]
FILTER -->|Aplicar| RESULTS
DETAIL -->|Ver prep| PREP[SCR-EST-007]
DETAIL -->|Seleccionar| CIT[MTS-CIT-001]
PREP -->|Config| REMIND[SCR-EST-008]
REMIND --> PREP
SCHEDULED -->|Tap| DETAIL
SCHEDULED -->|Menu| HISTORY[SCR-EST-006]
HISTORY -->|Tap| DETAIL
3.2. Deep Links
| Ruta |
Destino |
medtime://studies |
Busqueda |
medtime://studies/{codigo} |
Detalle |
medtime://studies/scheduled |
Programados |
medtime://studies/{codigo}/prep |
Preparacion |
4. Componentes Utilizados
4.1. Componentes del Design System
| Componente |
ID |
Uso en Modulo |
| Top App Bar |
CMP-NAV-002 |
Todas las pantallas |
| Search Field |
CMP-INP-002 |
SCR-EST-001, SCR-EST-002 |
| Filter Chips |
CMP-DAT-003 |
SCR-EST-004 |
| Category Cards |
Custom |
SCR-EST-001 |
| Study Cards |
Custom |
SCR-EST-002, SCR-EST-005 |
| Prep Status Chip |
Custom |
SCR-EST-005, SCR-EST-007 |
| Countdown Timer |
Custom |
SCR-EST-007 |
| Reminder Card |
Custom |
SCR-EST-008 |
| Section Header |
CMP-TYP-001 |
Todas las listas |
| Bottom Sheet |
CMP-FBK-003 |
SCR-EST-004 |
| Primary Button |
CMP-BTN-001 |
SCR-EST-003 |
| Checkbox |
CMP-INP-007 |
SCR-EST-004, SCR-EST-007 |
| Switch |
CMP-INP-009 |
SCR-EST-008 |
4.2. Componentes Personalizados
| Componente |
Descripcion |
Pantalla |
| CategoryCard |
Card de categoria con icono y count |
SCR-EST-001 |
| StudyResultCard |
Card de resultado con prep badge |
SCR-EST-002 |
| PrepDetailCard |
Card de preparacion con detalles |
SCR-EST-003 |
| PrepStatusChip |
Chip de estado de preparacion |
SCR-EST-005 |
| FastingTimer |
Timer con countdown para ayuno |
SCR-EST-007 |
| ReminderToggleCard |
Card de recordatorio con switch |
SCR-EST-008 |
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 |
Iconos con alt text |
| Info y relaciones |
1.3.1 |
OK |
Headings semanticos |
| Uso del color |
1.4.1 |
OK |
Prep status con color + icono + texto |
| Contraste minimo |
1.4.3 |
OK |
4.5:1 verificado |
| Cambio de tamano |
1.4.4 |
OK |
Hasta 200% |
5.2.2. Operable
| Criterio |
ID |
Estado |
Implementacion |
| Teclado |
2.1.1 |
OK |
Tab navigation |
| Orden de foco |
2.4.3 |
OK |
Logico y predecible |
| Headings y etiquetas |
2.4.6 |
OK |
Secciones identificadas |
| Foco visible |
2.4.7 |
OK |
Outline 2dp |
| 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" |
| Al recibir foco |
3.2.1 |
OK |
Sin cambios inesperados |
| Identificacion de errores |
3.3.1 |
OK |
Busqueda sin resultados |
| Etiquetas |
3.3.2 |
OK |
Labels claros |
5.3. Checklist por Pantalla
| Pantalla |
Touch Targets |
Contraste |
Screen Reader |
Focus Order |
| SCR-EST-001 |
OK |
OK |
OK |
OK |
| SCR-EST-002 |
OK |
OK |
OK |
OK |
| SCR-EST-003 |
OK |
OK |
OK |
OK |
| SCR-EST-004 |
OK |
OK |
OK |
OK |
| SCR-EST-005 |
OK |
OK |
OK |
OK |
| SCR-EST-006 |
OK |
OK |
OK |
OK |
| SCR-EST-007 |
OK |
OK |
OK |
OK |
| SCR-EST-008 |
OK |
OK |
OK |
OK |
5.4. Consideraciones Especiales
5.4.1. Preparacion de Ayuno
- Informacion critica con role="alert"
- Colores: Rojo (evitar), Verde (permitido), Ambar (en progreso)
- Timer anunciado periodicamente por screen reader
5.4.2. Busqueda
- Soporte para busqueda por voz
- Resultados anunciados automaticamente
- Categorias navegables por teclado
6. Responsive Design
6.1. Breakpoints
| Ancho |
Adaptacion |
| < 360dp |
Compacto |
| 360-600dp |
Mobile standard |
| 600-840dp |
Tablet portrait |
| > 840dp |
Tablet landscape |
6.2. Adaptaciones
| Pantalla |
Mobile |
Tablet |
| SCR-EST-001 |
Grid 3x2 categorias |
Grid 3x2 mas grande |
| SCR-EST-002 |
Lista vertical |
Grid 2 columnas |
| SCR-EST-003 |
Scroll vertical |
Two-pane layout |
| SCR-EST-007 |
Checklist vertical |
Checklist con timer side |
7. Integraciones
7.1. Con Otros Modulos
| Modulo |
Integracion |
| MTS-CIT-001 |
Seleccion de estudio para cita |
| MTS-INT-002 |
Verificacion de interacciones |
| MTS-ANA-001 |
Vinculacion de resultados |
| MTS-NTF-001 |
Programacion de recordatorios |
7.2. Flujo de Datos
sequenceDiagram
participant EST as MTS-EST-001
participant CIT as MTS-CIT-001
participant INT as MTS-INT-002
participant NTF as MTS-NTF-001
EST->>INT: Verificar interacciones
INT-->>EST: Resultado
EST->>CIT: Retornar estudio
CIT->>NTF: Programar alertas
8. Metricas de UX
8.1. KPIs del Modulo
| Metrica |
Objetivo |
Medicion |
| Tiempo busqueda a seleccion |
< 30s |
analytics |
| Tasa configuracion prep |
> 60% |
analytics |
| Tasa uso busqueda vs browse |
> 70% |
analytics |
| Estudios custom |
< 20% |
analytics |
8.2. Eventos de Analytics
study_search - Busqueda iniciadastudy_selected - Estudio seleccionadoprep_configured - Preparacion configuradareminder_set - Recordatorio activado
9. Archivos del Modulo
9.1. Flujos
flows/UIF-EST-001-catalogo-estudios.md
9.2. Pantallas
screens/SCR-EST-001-busqueda-estudios.mdscreens/SCR-EST-002-resultados.mdscreens/SCR-EST-003-detalle-estudio.mdscreens/SCR-EST-004-filtros-categoria.mdscreens/SCR-EST-005-estudios-programados.mdscreens/SCR-EST-006-historial-estudios.mdscreens/SCR-EST-007-preparacion-estudio.mdscreens/SCR-EST-008-recordatorios-preparacion.md
9.3. Especificacion Consolidada
specs/UI-MTS-EST-001.md (este documento)
10. Referencias
10.1. Especificacion Funcional
10.2. Design System
10.3. Accesibilidad
11. Historial de Cambios
| Version |
Fecha |
Cambios |
| 1.0.0 |
2025-12-05 |
Version inicial completa |
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 preparacion del paciente comienza con una buena interfaz."