codigo0/docs/TEST_UX_USABILIDAD_COMPLETO.md

🔍 Test de UX/Usabilidad Completo - EMERGES TES

Fecha: 2026-01-15
Analista: Experto UX/UI y Producto Digital
Contexto: Análisis crítico como producto en producción

---

📋 RESUMEN EJECUTIVO

EMERGES TES es una PWA mobile-first para Técnicos de Emergencias Sanitarias con contenido crítico de protocolos médicos. La aplicación tiene una base sólida con navegación clara, diseño consistente y funcionalidades bien implementadas. Sin embargo, presenta fricciones significativas en la primera impresión, jerarquía visual y accesibilidad que pueden comprometer su uso en situaciones de emergencia. El propósito de la app no es inmediatamente claro desde la primera pantalla, y hay problemas de contraste y legibilidad que afectan la usabilidad en condiciones de estrés o poca luz. La navegación es funcional pero no optimizada para uso con una sola mano, y faltan indicadores de feedback en acciones críticas.

Veredicto: Aplicación funcional con potencial, pero requiere mejoras urgentes en claridad de propósito, accesibilidad y optimización para uso en emergencias.

---

1️⃣ TEST DE PRIMERA IMPRESIÓN

❌ Problema Crítico: Propósito No Inmediatamente Claro

Análisis:

• Tiempo de comprensión: >10 segundos (objetivo: <5 segundos)
• Primera pantalla: Muestra "EMERGES TES" en header pequeño, pero no hay tagline o descripción visible
• Logo/Título: "TES" en un cuadrado pequeño no comunica el propósito
• Contenido inicial: Botones de emergencia sin contexto previo

Problemas detectados:

1. Falta de hero/tagline - No hay texto explicativo visible que diga "Guía de Protocolos de Emergencias"
2. Header minimalista - El título "EMERGES TES" solo visible en tablet/desktop (hidden en móvil)
3. Sin onboarding - No hay introducción para nuevos usuarios
4. Botones sin contexto - Los botones de emergencia aparecen sin explicación previa

Impacto: Usuario nuevo puede tardar >10 segundos en entender qué hace la app.

Gravedad: 🔴 CRÍTICO

---

2️⃣ TEST DE USABILIDAD

✅ Fortalezas

1. Navegación clara:

   • Bottom nav siempre visible
   • Header con botón de retroceso contextual
   • Menú lateral accesible

2. Búsqueda funcional:

   • Modal de búsqueda bien implementado
   • Debounce para evitar búsquedas excesivas
   • Historial de búsquedas

3. Estructura lógica:

   • Contenido organizado por categorías
   • Rutas semánticas (/rcp, /ictus, etc.)

❌ Problemas Detectados

2.1. Uso con Una Sola Mano - MEDIO

Problema: Los botones principales no están optimizados para uso con una sola mano.

Análisis:

• Botones de emergencia: Grid de 2 columnas en móvil, requiere ambas manos o estiramiento
• Bottom nav: Bien posicionado, pero algunos elementos requieren estiramiento del pulgar
• Floating button: Bien posicionado (bottom-right), pero puede interferir con bottom nav
• Header actions: Búsqueda y menú en esquina superior derecha, difícil acceso con pulgar derecho

Zona de alcance cómodo (pulgar):

• ✅ Bottom nav: Accesible
• ⚠️ Botones emergencia: Requieren estiramiento
• ❌ Header actions: Difícil acceso
• ✅ Floating button: Accesible pero puede interferir

Gravedad: 🟡 MEDIO

2.2. Identificación de Botones Principales - MEDIO

Problema: Los botones de emergencia tienen buena jerarquía visual, pero falta claridad en otros elementos.

Análisis:

• ✅ Botones de emergencia: Bien diferenciados por color (rojo crítico, naranja alto, amarillo medio)
• ⚠️ Botón de búsqueda: Solo icono, sin texto, puede no ser obvio
• ⚠️ Accesos rápidos: Chips pequeños, pueden pasar desapercibidos
• ❌ Floating button: Sin etiqueta, solo icono de alerta (¿qué hace exactamente?)

Gravedad: 🟡 MEDIO

2.3. Navegación - BAJO

Problema: La navegación es funcional pero tiene pequeñas fricciones.

Análisis:

• ⚠️ Bottom nav labels: "Herram." truncado puede confundir
• ⚠️ Menú lateral: Muchas opciones (10 items), puede abrumar
• ✅ Breadcrumbs: No hay, pero botón "Volver" contextual funciona
• ⚠️ Rutas profundas: Sin indicador de dónde estás en la jerarquía

Gravedad: 🟢 BAJO

---

3️⃣ TEST VISUAL

3.1. Jerarquía Visual - MEDIO

Análisis:

✅ Lo que funciona:

• Botones de emergencia con colores diferenciados (rojo, naranja, amarillo)
• Títulos de sección con mayúsculas y tracking-wide
• Cards con bordes y fondos diferenciados

❌ Problemas:

1. Falta de jerarquía en header:

   • Logo "TES" muy pequeño (8x8)
   • Título "EMERGES TES" oculto en móvil
   • Sin jerarquía clara entre elementos

2. Secciones sin separación visual clara:

   • "Emergencias Críticas", "Accesos Rápidos", "Últimas Consultas" tienen el mismo peso visual
   • Falta de espaciado o divisores entre secciones principales

3. Botón flotante:

   • Puede competir visualmente con bottom nav
   • Sin contexto claro de qué hace

Gravedad: 🟡 MEDIO

3.2. Uso de Colores - MEDIO

Análisis:

✅ Lo que funciona:

• Sistema de colores de emergencia bien definido (critical, high, medium, low)
• Tema oscuro apropiado para uso en ambulancias
• Contraste adecuado en botones de emergencia

❌ Problemas:

1. Contraste en texto secundario:

   • text-muted-foreground puede tener contraste insuficiente
   • Subtítulos y textos secundarios pueden ser difíciles de leer

2. Estados de hover/focus:

   • Algunos elementos tienen hover sutil que puede no ser obvio
   • Focus states pueden no ser suficientemente visibles

3. Indicadores de estado:

   • Estado "Online/Offline" pequeño y puede pasar desapercibido
   • Sin indicadores visuales claros de carga o error

Gravedad: 🟡 MEDIO

3.3. Tipografía - MEDIO

Análisis:

✅ Lo que funciona:

• Fuente IBM Plex Sans legible
• Tamaños de texto adecuados para lectura
• Line-height apropiado

❌ Problemas:

1. Tamaños inconsistentes:

   • text-2xs (0.625rem = 10px) puede ser demasiado pequeño
   • Subtítulos de botones de emergencia muy pequeños

2. Legibilidad en condiciones de estrés:

   • Texto pequeño puede ser difícil de leer bajo presión
   • Falta de opción para aumentar tamaño de fuente

3. Jerarquía tipográfica:

   • Diferencia entre h1, h2, h3 puede no ser suficientemente marcada
   • Títulos de sección muy pequeños (text-sm uppercase)

Gravedad: 🟡 MEDIO

3.4. Consistencia de Componentes - BAJO

Análisis:

✅ Lo que funciona:

• BaseCard unificado para cards
• EmergencyButton consistente
• Sistema de diseño con variables CSS

❌ Problemas menores:

1. Variaciones en padding/spacing:

   • Algunos cards tienen p-4, otros p-6
   • Espaciado entre secciones puede ser inconsistente

2. Estados de botones:

   • Algunos botones tienen active:scale-95, otros no
   • Hover states no siempre consistentes

Gravedad: 🟢 BAJO

---

4️⃣ TEST DE FLUJO

4.1. Flujo Principal del Usuario

Flujo típico:

1. Usuario abre app → Ve pantalla inicial
2. Busca protocolo (búsqueda o navegación)
3. Accede a protocolo (ej: RCP)
4. Lee/seguimiento de pasos
5. Usa herramientas si necesario
6. Vuelve a inicio o busca otro protocolo

4.2. Pasos Innecesarios o Confusos

❌ Problemas detectados:

1. Búsqueda requiere 2 toques:

   • Tocar barra de búsqueda → Abre modal → Escribir
   • Podría ser: Tocar → Escribir directamente (sin modal)

2. Navegación a herramientas:

   • Desde inicio: Home → Bottom nav "Herram." → Tab específico
   • Podría tener acceso directo desde búsqueda

3. Falta de atajos:

   • No hay atajos de teclado (aunque es móvil-first)
   • No hay gestos (swipe para volver, etc.)

Gravedad: 🟡 MEDIO

4.3. Puntos de Abandono Potenciales

Análisis:

1. Primera impresión confusa:

   • Usuario nuevo puede no entender qué hacer
   • Riesgo de abandono: ALTO

2. Búsqueda sin resultados:

   • No hay mensaje claro de "no encontrado"
   • Riesgo de abandono: MEDIO

3. Contenido largo sin navegación:

   • Protocolos largos sin índice o navegación rápida
   • Riesgo de abandono: MEDIO

4. Sin feedback en acciones:

   • Al marcar checklist, no hay confirmación visual clara
   • Riesgo de abandono: BAJO

Gravedad: 🟡 MEDIO

---

5️⃣ TEST DE ACCESIBILIDAD BÁSICA

5.1. Contraste de Colores - CRÍTICO

Análisis:

❌ Problemas detectados:

1. Texto secundario:

   • text-muted-foreground: hsl(220 10% 65%) sobre hsl(220 20% 12%)
   • Ratio calculado: ~3.2:1 (requiere 4.5:1 para texto normal)
   • NO CUMPLE WCAG AA

2. Estados de botones:

   • Botones con bg-muted y text-muted-foreground
   • Contraste puede ser insuficiente

3. Badges y etiquetas:

   • Algunos badges con colores sutiles pueden tener bajo contraste

Gravedad: 🔴 CRÍTICO

5.2. Tamaños de Texto - MEDIO

Análisis:

❌ Problemas:

1. Texto muy pequeño:

   • text-2xs (10px) usado en varios lugares
   • Subtítulos de botones, labels de nav
   • NO CUMPLE mínimo recomendado (12px)

2. Sin opción de zoom:

   • No hay opción para aumentar tamaño de fuente
   • Usuarios con problemas de visión no pueden ajustar

Gravedad: 🟡 MEDIO

5.3. Claridad de Iconos - MEDIO

Análisis:

✅ Lo que funciona:

• Iconos de Lucide React consistentes
• Tamaño adecuado (w-5 h-5 = 20px)

❌ Problemas:

1. Iconos sin etiquetas:

   • Búsqueda y menú solo con iconos
   • Aunque tienen aria-label, visualmente no son obvios

2. Iconos abstractos:

   • "Herram." con icono de llave puede no ser obvio
   • Algunos iconos pueden requerir interpretación

Gravedad: 🟡 MEDIO

5.4. Áreas de Toque - BAJO

Análisis:

✅ Lo que funciona:

• min-height: 48px aplicado globalmente
• Botones de emergencia con min-h-[60px]

❌ Problemas menores:

• Algunos chips de acceso rápido pueden ser pequeños
• Links en texto pueden tener área de toque pequeña

Gravedad: 🟢 BAJO

---

6️⃣ TEST DE RENDIMIENTO PERCIBIDO

6.1. Sensación de Velocidad - BAJO

Análisis:

✅ Lo que funciona:

• Lazy loading de rutas implementado
• Debounce en búsqueda
• React.memo en componentes clave

❌ Problemas:

1. Sin skeleton loaders:

   • Carga de contenido muestra spinner genérico
   • Podría mostrar skeleton del contenido esperado

2. Transiciones sutiles:

   • Cambios de página sin transición visible
   • Puede sentirse "instantáneo" pero también "sin feedback"

Gravedad: 🟢 BAJO

6.2. Feedback Visual en Acciones - MEDIO

Análisis:

❌ Problemas detectados:

1. Acciones sin feedback inmediato:

   • Al tocar botón, solo hay active:scale-95 (muy sutil)
   • No hay indicador de "cargando" en navegación

2. Checklist sin confirmación:

   • Al marcar paso en checklist, cambio visual es sutil
   • Podría tener animación más clara

3. Búsqueda sin indicador:

   • Búsqueda con debounce no muestra "buscando..."
   • Usuario puede pensar que no funciona

Gravedad: 🟡 MEDIO

---

7️⃣ ERRORES Y FRICCIONES

🔴 CRÍTICOS (Resolver Inmediatamente)

1. Propósito no claro en primera impresión

   • Impacto: Usuario nuevo no entiende qué hace la app
   • Solución: Añadir tagline/hero en pantalla inicial
   • Esfuerzo: Bajo

2. Contraste de colores insuficiente

   • Impacto: Texto secundario ilegible, no cumple WCAG AA
   • Solución: Aumentar contraste de text-muted-foreground
   • Esfuerzo: Bajo

3. Texto demasiado pequeño

   • Impacto: Dificulta lectura, especialmente bajo estrés
   • Solución: Eliminar text-2xs, usar mínimo text-xs (12px)
   • Esfuerzo: Bajo

🟡 MEDIOS (Resolver en Próxima Iteración)

4. Uso con una sola mano no optimizado

   • Impacto: Botones principales requieren estiramiento
   • Solución: Reorganizar layout, considerar gestos
   • Esfuerzo: Medio

5. Falta de feedback visual en acciones

   • Impacto: Usuario no sabe si su acción fue registrada
   • Solución: Añadir indicadores de estado, animaciones
   • Esfuerzo: Medio

6. Jerarquía visual poco clara

   • Impacto: Difícil identificar elementos principales
   • Solución: Mejorar espaciado, tamaños, contraste
   • Esfuerzo: Medio

7. Búsqueda requiere 2 toques

   • Impacto: Fricción innecesaria en acción común
   • Solución: Simplificar flujo de búsqueda
   • Esfuerzo: Bajo-Medio

🟢 BAJOS (Mejoras Incrementales)

8. Navegación sin breadcrumbs

   • Impacto: Usuario puede perderse en rutas profundas
   • Solución: Añadir breadcrumbs o indicador de ubicación
   • Esfuerzo: Bajo

9. Consistencia menor en componentes

   • Impacto: Experiencia ligeramente inconsistente
   • Solución: Revisar y estandarizar spacing/padding
   • Esfuerzo: Bajo

10. Sin skeleton loaders

    • Impacto: Sensación de carga menos profesional
    • Solución: Implementar skeleton screens
    • Esfuerzo: Medio

---

8️⃣ RECOMENDACIONES ACCIONABLES

🚀 CORTO PLAZO (1-2 semanas)

Objetivo: Resolver problemas críticos que afectan usabilidad básica

1. Añadir tagline/hero en pantalla inicial

   • Añadir texto: "Guía de Protocolos de Emergencias para TES"
   • Posición: Debajo del header o como primer elemento
   • Impacto: ALTO | Esfuerzo: BAJO

2. Mejorar contraste de texto secundario

   • Cambiar text-muted-foreground a color más claro
   • Asegurar ratio mínimo 4.5:1
   • Impacto: ALTO | Esfuerzo: BAJO

3. Eliminar texto demasiado pequeño

   • Reemplazar todos los text-2xs por text-xs mínimo
   • Revisar subtítulos y labels
   • Impacto: ALTO | Esfuerzo: BAJO

4. Añadir feedback visual en acciones críticas

   • Animación más clara en botones de emergencia
   • Indicador de "buscando..." en búsqueda
   • Confirmación visual en checklist
   • Impacto: MEDIO | Esfuerzo: BAJO

5. Simplificar flujo de búsqueda

   • Considerar búsqueda inline en lugar de modal
   • O mantener modal pero con mejor UX
   • Impacto: MEDIO | Esfuerzo: MEDIO

📅 MEDIO PLAZO (1 mes)

Objetivo: Mejorar experiencia general y accesibilidad

6. Optimizar para uso con una sola mano

   • Reorganizar botones principales en zona de alcance cómodo
   • Considerar gestos (swipe para volver)
   • Mover acciones críticas a bottom
   • Impacto: MEDIO | Esfuerzo: MEDIO

7. Mejorar jerarquía visual

   • Aumentar tamaño de títulos de sección
   • Mejorar espaciado entre secciones
   • Añadir divisores visuales sutiles
   • Impacto: MEDIO | Esfuerzo: BAJO

8. Añadir indicadores de estado

   • Skeleton loaders para contenido
   • Estados de carga más informativos
   • Mensajes de error claros
   • Impacto: MEDIO | Esfuerzo: MEDIO

9. Mejorar accesibilidad

   • Añadir opción para aumentar tamaño de fuente
   • Mejorar labels de iconos
   • Revisar todos los contrastes
   • Impacto: MEDIO | Esfuerzo: MEDIO

🎯 LARGO PLAZO (2-3 meses)

Objetivo: Mejoras estructurales y nuevas funcionalidades

10. Onboarding para nuevos usuarios

    • Tutorial rápido de 3-4 pantallas
    • Explicación de funcionalidades principales
    • Impacto: MEDIO | Esfuerzo: ALTO

11. Navegación mejorada

    • Breadcrumbs en rutas profundas
    • Índice/navegación rápida en contenido largo
    • Impacto: BAJO | Esfuerzo: MEDIO

12. Personalización

    • Tamaño de fuente ajustable
    • Modo de alto contraste
    • Impacto: BAJO | Esfuerzo: MEDIO

13. Analytics y optimización

    • Tracking de puntos de abandono
    • A/B testing de mejoras
    • Impacto: MEDIO | Esfuerzo: ALTO

---

📊 PRIORIZACIÓN FINAL

Matriz Impacto vs Esfuerzo

Alto Impacto / Bajo Esfuerzo (HACER PRIMERO):

1. ✅ Añadir tagline/hero
2. ✅ Mejorar contraste
3. ✅ Eliminar texto pequeño
4. ✅ Feedback visual básico

Alto Impacto / Medio Esfuerzo: 5. ⚠️ Simplificar búsqueda 6. ⚠️ Optimizar una mano

Medio Impacto / Bajo Esfuerzo: 7. ⚠️ Mejorar jerarquía visual 8. ⚠️ Indicadores de estado

Medio Impacto / Medio Esfuerzo: 9. ⚠️ Mejorar accesibilidad 10. ⚠️ Onboarding

---

✅ FORTALEZAS A MANTENER

1. Navegación clara y lógica
2. Diseño consistente con sistema de componentes
3. Búsqueda funcional con historial
4. Tema oscuro apropiado para contexto
5. Bottom nav siempre accesible
6. Estructura de contenido bien organizada

---

🎯 CONCLUSIÓN

EMERGES TES tiene una base sólida pero necesita mejoras urgentes en claridad de propósito, accesibilidad y feedback visual. Los problemas críticos son relativamente fáciles de resolver (bajo esfuerzo) y tendrán alto impacto en la usabilidad. Con las mejoras de corto plazo, la app pasaría de "funcional" a "excelente" en términos de UX.

Prioridad absoluta: Resolver los 3 problemas críticos (tagline, contraste, tamaño de texto) antes de cualquier otra mejora.

---

Última actualización: 2026-01-15
Próxima revisión: Después de implementar mejoras de corto plazo