# Análisis UX y Auditoría de Producto ## EMERGES TES - PWA Sanitaria Crítica **Fecha:** 2024 **Contexto:** Aplicación en producción para uso en emergencias reales **Prioridad:** Rapidez, claridad y estabilidad absolutas --- ## A. Qué está bien y no debe tocarse ### Navegación Core - **BottomNav fija con 6 secciones principales** - Acceso rápido siempre visible, optimizado para uso con guantes - **Header con botón de retroceso contextual** - Aparece automáticamente cuando no estás en home, funciona correctamente - **Botones de emergencia en home** - Grid 2x2 con RCP, Ictus, Shock, Vía Aérea, bien diferenciados por color y prioridad - **MenuSheet lateral** - Acceso completo sin saturar la UI principal, bien organizado ### Búsqueda - **Modal de búsqueda con resultados en tiempo real** - Funciona desde 2 caracteres, muy rápido - **Historial de búsquedas** - Últimas 3 consultas visibles en home, útil para reacceso rápido - **Filtros por tipo y categoría** - Permite refinar búsquedas sin complejidad ### Jerarquía Visual - **Tema oscuro por defecto** - Optimizado para uso nocturno en ambulancia, bien contrastado - **Sistema de colores de emergencia** - Critical (rojo), High (naranja), Medium (amarillo) bien diferenciados - **Tamaños mínimos táctiles (48px)** - Cumple estándares de accesibilidad para uso con guantes - **Tipografía IBM Plex Sans** - Legible y profesional ### Estructura de Protocolos - **Separación clara Adulto/Pediátrico** - Tabs bien visibles en RCP - **Estructura consistente** - Pasos, Advertencias, Puntos Clave, Material en todas las páginas - **Enlaces relacionados** - Facilita navegación contextual entre protocolos relacionados ### Funcionalidades Críticas - **PWA offline-first** - Service Worker funcionando, contenido disponible sin conexión - **Lazy loading de páginas** - Carga rápida inicial, solo carga lo necesario - **ErrorBoundary** - Protección contra crashes que podrían bloquear la app en emergencia - **UpdateNotification** - Avisa de actualizaciones sin ser intrusivo ### Herramientas - **Calculadora Glasgow interactiva** - Muy clara, resultado destacado, interpretación automática - **Triage START visual** - Colores y criterios bien diferenciados - **Checklist de seguridad interactiva** - Permite marcar items completados --- ## B. Qué está parcial y puede mejorarse (UX) ### Navegación 1. **Falta breadcrumb en protocolos críticos** - **Impacto:** En protocolos largos (RCP, Ictus) no queda claro dónde estás dentro de la jerarquía - **Ejemplo:** En `/rcp` no se ve "Home > Soporte Vital > RCP" - **Impacto operativo:** MEDIO - Puede confundir en situaciones de estrés 2. **Accesos rápidos en home podrían ser más visibles** - **Estado actual:** Chips pequeños en sección "Accesos Rápidos" - **Impacto:** OVACE, Glasgow, Triage están presentes pero no destacan lo suficiente - **Impacto operativo:** MEDIO - Requieren scroll y no son tan inmediatos como los botones de emergencia 3. **MenuSheet no muestra sección actual** - **Estado actual:** No hay indicador visual de dónde estás - **Impacto operativo:** BAJO - Menor confusión, pero mejoraría orientación ### Búsqueda 1. **No soporta búsqueda por siglas comunes** - **Estado actual:** Buscar "RCP" funciona, pero "OVACE", "EAP", "SVB", "SVA" pueden no dar resultados directos - **Impacto operativo:** ALTO - Los TES usan siglas constantemente, es lenguaje natural para ellos - **Ejemplo:** Buscar "EAP" debería encontrar "Enfermedad Arterial Periférica" o protocolos relacionados 2. **Falta búsqueda por síntomas** - **Estado actual:** Solo busca por nombre de protocolo/fármaco - **Impacto operativo:** MEDIO - En emergencia, a veces se busca por síntoma ("dolor torácico") no por diagnóstico 3. **No hay sugerencias mientras escribes** - **Estado actual:** Solo muestra resultados tras escribir 2+ caracteres - **Impacto operativo:** BAJO - Mejoraría velocidad pero no es crítico ### Jerarquía Visual 1. **Tamaños de texto en protocolos largos** - **Estado actual:** Texto estándar, puede ser pequeño en móviles bajo estrés - **Impacto operativo:** MEDIO - En situaciones críticas, texto más grande = menos errores de lectura - **Especialmente:** Pasos numerados y advertencias deberían ser más grandes 2. **Contraste en modo claro** - **Estado actual:** Tema oscuro por defecto (correcto), pero modo claro puede tener contraste insuficiente - **Impacto operativo:** BAJO - Si alguien cambia a modo claro, debe ser igual de legible 3. **Botón flotante de emergencia en home** - **Estado actual:** Botón fijo bottom-right con animación pulse - **Impacto:** Puede ser confuso (¿qué hace? ¿es RCP siempre?) - **Impacto operativo:** BAJO - Está bien, pero podría ser más claro ### Flujo dentro de Protocolos 1. **Falta modo "checklist rápida"** - **Estado actual:** Protocolos muestran pasos como lista, pero no interactiva - **Impacto operativo:** ALTO - En RCP real, marcar pasos completados ayuda a no saltarse nada - **Ejemplo:** RCP debería permitir marcar "Compresiones iniciadas", "DEA disponible", etc. 2. **Separación contenido operativo vs formativo no siempre clara** - **Estado actual:** "Guías de Refuerzo" están separadas, pero en protocolos normales se mezcla información - **Impacto operativo:** MEDIO - A veces hay info formativa que ralentiza acceso a lo operativo - **Ejemplo:** En Ictus, el test FAST está bien, pero luego hay mucha explicación antes de los pasos críticos 3. **Dosis de fármacos en protocolos** - **Estado actual:** Algunos protocolos mencionan fármacos pero no siempre muestran dosis - **Impacto operativo:** MEDIO - Requiere ir a sección Fármacos, pérdida de tiempo - **Ejemplo:** RCP SVA menciona "Adrenalina 1mg" pero no especifica dilución, vía, timing exacto 4. **Falta indicador de tiempo crítico** - **Estado actual:** Ictus tiene alerta "TIEMPO ES CEREBRO", pero otros protocolos críticos no - **Impacto operativo:** MEDIO - Recordatorio visual ayuda en estrés - **Ejemplo:** RCP debería mostrar "Minutos desde parada: [contador]" si fuera posible ### Confianza y Soporte 1. **Información de fuentes no visible en protocolos** - **Estado actual:** Solo en página "Acerca" se menciona "ERC, AHA, SEMES" - **Impacto operativo:** BAJO - Mejora confianza profesional, pero no crítico para uso 2. **Fecha de actualización no visible** - **Estado actual:** Versión en "Acerca" pero no fecha de última actualización de protocolos - **Impacto operativo:** BAJO - Los TES necesitan saber si la info está actualizada 3. **Feedback desde móvil no accesible** - **Estado actual:** No hay forma de reportar errores o sugerencias desde la app - **Impacto operativo:** BAJO - Mejoraría iteración del producto 4. **Ko-fi solo visible en desktop** - **Estado actual:** Footer oculto en móvil (correcto, no intrusivo) - **Impacto operativo:** NINGUNO - Está bien así, no debe ser intrusivo --- ## C. Qué falta para acabado profesional ### Navegación - **Breadcrumb contextual** en páginas de protocolos (no solo BackButton) - **Atajos de teclado** para accesos críticos (ej: tecla "R" para RCP) - solo en desktop/web - **Navegación por gestos** - Swipe para volver atrás en móvil (ya funciona nativo, pero podría ser más explícito) ### Búsqueda - **Búsqueda por siglas** - Sinónimos y acrónimos comunes del ámbito TES - **Búsqueda por síntomas** - Índice inverso: síntoma → protocolos relacionados - **Búsqueda de voz** - En móvil, activar búsqueda por voz (útil con guantes) ### Jerarquía Visual - **Modo "Alta Visibilidad"** - Aumentar tamaños de fuente, contraste máximo, para uso en condiciones adversas - **Indicadores de scroll** - En protocolos largos, mostrar "3 de 8 pasos completados" - **Animaciones más sutiles** - El botón flotante de emergencia tiene animación que puede distraer ### Flujo dentro de Protocolos - **Modo checklist interactivo** - Especialmente para RCP, Ictus, OVACE - **Timer integrado** - Para RCP (ya existe RCPTimer, pero podría estar integrado en página RCP) - **Modo "Solo pasos críticos"** - Toggle para ocultar explicaciones y mostrar solo pasos operativos - **Dosis inline** - Mostrar dosis de fármacos directamente en protocolos sin salir - **Calculadoras contextuales** - Ej: En Ictus, calculadora de tiempo desde inicio de síntomas ### Confianza y Soporte - **Badge de "Protocolo actualizado [fecha]"** en protocolos críticos - **Enlace a fuentes oficiales** - Cada protocolo debería tener "Basado en: ERC 2021" o similar - **Canal de feedback** - Formulario simple para reportar errores o sugerencias - **Changelog visible** - "Últimas actualizaciones" en página Acerca ### Accesibilidad - **Modo alto contraste** - Para usuarios con discapacidad visual - **Tamaños de fuente ajustables** - Control en Ajustes para aumentar tamaño global - **Lectura de pantalla mejorada** - ARIA labels más descriptivos en elementos críticos --- ## D. Prioridades (Alta / Media / Baja) ### 🔴 ALTA (Impacto directo en uso en emergencia) 1. **Búsqueda por siglas** - Los TES buscan "OVACE", "EAP", "SVB" constantemente - **Esfuerzo:** MEDIO - Requiere mapeo de siglas a términos - **Impacto:** ALTO - Reduce tiempo de búsqueda en situaciones críticas 2. **Modo checklist en RCP** - Permitir marcar pasos completados durante RCP real - **Esfuerzo:** BAJO - Ya hay checklist en Escena, aplicar mismo patrón - **Impacto:** ALTO - Previene errores por omisión en estrés 3. **Dosis inline en protocolos** - Mostrar dosis directamente sin ir a Fármacos - **Esfuerzo:** MEDIO - Requiere integración de datos de fármacos en protocolos - **Impacto:** ALTO - Ahorra tiempo y reduce errores 4. **Tamaños de texto más grandes en pasos críticos** - Especialmente números y advertencias - **Esfuerzo:** BAJO - Ajuste CSS, clases específicas - **Impacto:** ALTO - Mejora legibilidad con guantes y bajo estrés ### 🟡 MEDIA (Mejora experiencia pero no bloqueante) 1. **Breadcrumb en protocolos** - Mejor orientación en contenido largo - **Esfuerzo:** BAJO - Componente ya existe, solo integrar - **Impacto:** MEDIO - Mejora orientación pero BackButton ya funciona 2. **Búsqueda por síntomas** - Índice inverso síntoma → protocolo - **Esfuerzo:** ALTO - Requiere estructura de datos nueva - **Impacto:** MEDIO - Útil pero búsqueda actual ya cubre mayoría de casos 3. **Modo "Solo pasos críticos"** - Toggle para ocultar explicaciones - **Esfuerzo:** MEDIO - Requiere reestructuración de contenido - **Impacto:** MEDIO - Útil para usuarios avanzados, pero contenido formativo también tiene valor 4. **Timer integrado en RCP** - Mostrar RCPTimer directamente en página RCP - **Esfuerzo:** BAJO - Componente ya existe, solo integrar - **Impacto:** MEDIO - Conveniente pero no crítico (ya está en Herramientas) 5. **Indicadores de progreso en protocolos largos** - "Paso 3 de 8" - **Esfuerzo:** BAJO - Cálculo simple - **Impacto:** MEDIO - Mejora orientación pero no crítico 6. **Información de fuentes en protocolos** - "Basado en ERC 2021" - **Esfuerzo:** BAJO - Metadata en datos, mostrar en UI - **Impacto:** MEDIO - Mejora confianza profesional ### 🟢 BAJA (Nice to have, no crítico) 1. **Búsqueda por voz** - Activar búsqueda con comando de voz - **Esfuerzo:** MEDIO - API de voz del navegador - **Impacto:** BAJO - Útil pero no esencial, búsqueda escrita ya es rápida 2. **Atajos de teclado** - Tecla "R" para RCP, etc. - **Esfuerzo:** BAJO - Event listeners - **Impacto:** BAJO - Solo útil en desktop, mayoría de uso es móvil 3. **Modo "Alta Visibilidad"** - Aumentar contraste y tamaños globalmente - **Esfuerzo:** MEDIO - Nuevo tema CSS - **Impacto:** BAJO - Tema oscuro actual ya es legible, esto sería para casos extremos 4. **Canal de feedback** - Formulario para reportar errores - **Esfuerzo:** MEDIO - Backend o servicio externo - **Impacto:** BAJO - Mejora producto a largo plazo pero no afecta uso inmediato 5. **Changelog visible** - Historial de actualizaciones - **Esfuerzo:** BAJO - Página estática - **Impacto:** BAJO - Informativo pero no crítico --- ## E. Riesgos si se toca sin cuidado ### ⚠️ RIESGOS ALTOS 1. **Modificar estructura de datos de procedimientos** - **Riesgo:** Romper búsqueda, navegación, o mostrar información incorrecta - **Impacto:** CRÍTICO - Información médica incorrecta puede tener consecuencias graves - **Recomendación:** Cualquier cambio requiere testing exhaustivo con datos reales 2. **Cambiar colores del sistema de emergencia** - **Riesgo:** Confundir prioridades (rojo=crítico está establecido) - **Impacto:** ALTO - Los usuarios ya tienen memoria muscular de colores - **Recomendación:** Si se cambia, debe ser con migración gradual y comunicación clara 3. **Modificar Service Worker sin cuidado** - **Riesgo:** Romper funcionalidad offline, dejar usuarios sin acceso en emergencia - **Impacto:** CRÍTICO - La app debe funcionar offline siempre - **Recomendación:** Testing exhaustivo en modo offline, versionado cuidadoso del SW 4. **Cambiar rutas de navegación principales** - **Riesgo:** Romper bookmarks, enlaces compartidos, historial de usuarios - **Impacto:** ALTO - Pérdida de acceso rápido a contenido crítico - **Recomendación:** Mantener rutas legacy con redirects si es necesario cambiar ### ⚠️ RIESGOS MEDIOS 1. **Refactorizar componentes de protocolos** - **Riesgo:** Cambiar estructura visual puede confundir a usuarios que ya conocen la app - **Impacto:** MEDIO - Requiere re-aprendizaje en momento de estrés - **Recomendación:** Cambios graduales, mantener estructura familiar 2. **Modificar sistema de búsqueda** - **Riesgo:** Cambiar algoritmo puede hacer que búsquedas conocidas no funcionen - **Impacto:** MEDIO - Pérdida de velocidad en acceso a información - **Recomendación:** Mantener compatibilidad con búsquedas existentes, mejorar sin romper 3. **Cambiar tema oscuro por defecto** - **Riesgo:** Usuarios acostumbrados a tema oscuro pueden tener problemas de legibilidad - **Impacto:** MEDIO - Afecta uso nocturno en ambulancia - **Recomendación:** Mantener oscuro por defecto, permitir cambio opcional ### ⚠️ RIESGOS BAJOS 1. **Añadir nuevas secciones al menú** - **Riesgo:** Mínimo, solo puede saturar si se añaden muchas - **Impacto:** BAJO - Mejora funcionalidad sin romper existente - **Recomendación:** Mantener máximo 6-7 items principales en BottomNav 2. **Mejorar estilos visuales menores** - **Riesgo:** Mínimo si se mantiene estructura - **Impacto:** BAJO - Mejora estética sin afectar funcionalidad - **Recomendación:** Cambios incrementales, no rediseños completos --- ## Resumen Ejecutivo ### Estado Actual La aplicación **EMERGES TES** está en un estado **sólido y funcional** para uso en producción. La navegación es clara, la búsqueda funciona bien, y los protocolos críticos están accesibles rápidamente. El diseño está optimizado para uso móvil con guantes y condiciones de baja luz. ### Fortalezas Principales - ✅ Navegación rápida y clara - ✅ Búsqueda funcional y rápida - ✅ Protocolos críticos bien estructurados - ✅ Funciona offline - ✅ Diseño optimizado para emergencias ### Áreas de Mejora Prioritarias 1. **Búsqueda por siglas** (ALTA) - Lenguaje natural de los TES 2. **Checklist interactiva en RCP** (ALTA) - Previene errores en estrés 3. **Dosis inline en protocolos** (ALTA) - Ahorra tiempo crítico 4. **Texto más grande en pasos críticos** (ALTA) - Mejora legibilidad ### Recomendación General **No realizar cambios mayores sin necesidad.** La app funciona bien en producción. Las mejoras deben ser **incrementales y probadas exhaustivamente** antes de desplegar, especialmente en: - Estructura de datos de protocolos - Sistema de colores de emergencia - Service Worker y funcionalidad offline - Rutas de navegación principales **Priorizar mejoras de UX que no requieran cambios estructurales** (búsqueda por siglas, checklist, tamaños de texto) sobre refactorizaciones o rediseños completos. --- *Análisis realizado sin modificar código ni proponer implementaciones técnicas específicas, solo evaluación del estado actual y áreas de mejora desde perspectiva UX/Producto.*