planetazuzu/codigo0
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
codigo0/docs/DIAGNOSTICO_UX_RESPONSIVE.md

14 KiB
Raw Blame History

📱Diagnóstico UX/UI - Diseño Responsive

Análisis de Experiencia en Tablet y Desktop

Fecha: 2026-01-15
Especialista: UX/UI Mobile-First para Entornos Sanitarios
Contexto: PWA para Técnicos de Emergencias Sanitarias (TES)

🎯 OBJETIVO DEL ANÁLISIS

Evaluar cómo se percibe la interfaz actual en dispositivos de mayor tamaño (tablet y desktop) cuando la aplicación fue diseñada principalmente para móvil, identificando problemas de usabilidad, percepción de calidad y estética.

📐 CONFIGURACIÓN ACTUAL

Breakpoints y Contenedores

  • Breakpoint móvil: 768px (único breakpoint definido)
  • Ancho máximo del contenedor: max-w-2xl (672px)
  • Padding del contenedor: 1rem (16px)
  • Sin breakpoints específicos para tablet (768px-1024px) ni desktop (1024px+)

Estructura de Layout

  • Header: Fijo, altura 56px (h-14), sin variaciones responsive
  • Main container: Centrado, máximo 672px, padding vertical py-4
  • Grids: Mayormente grid-cols-2 fijo (sin variaciones por breakpoint)
  • Cards: Mismo tamaño en todos los dispositivos
  • Navegación: Vertical exclusivamente, sin sidebar

🔍 ANÁLISIS POR DISPOSITIVO

1. TABLET HORIZONTAL (768px - 1024px)

Percepción Visual

  • Problema principal: Contenido centrado con grandes espacios vacíos a ambos lados (mínimo 48px por lado en tablet de 768px, hasta 176px en tablet de 1024px)
  • Sensación: Aplicación móvil "flotando" en el centro, no aprovecha el espacio disponible
  • Proporción: El contenido ocupa aproximadamente 65-70% del ancho disponible

Problemas Identificados

🔴 CRÍTICOS:

  1. Longitud de línea de texto excesiva

    • En MarkdownViewer y textos largos, las líneas pueden extenderse hasta 640px (672px - 32px padding)
    • Límite óptimo de lectura: 45-75 caracteres (aprox. 400-600px)
    • Impacto: Fatiga visual, dificultad para seguir líneas, pérdida de ritmo de lectura

  2. Grid de 2 columnas subutilizado

    • En Index.tsx, los botones de emergencia usan grid-cols-2 fijo
    • En tablet horizontal (768px+), podrían ser 3-4 columnas
    • Impacto: Desaprovechamiento del espacio, sensación de "apretado" innecesario

🟡 IMPORTANTES: 3. Header no aprovecha espacio horizontal

  • Logo y título ocupan solo ~200px del ancho disponible
  • Botones de acción (búsqueda, menú) quedan muy separados del logo
  • Impacto: Sensación de header "vacío", falta de jerarquía visual

  1. Cards sin escalado proporcional

    • BaseCard mantiene mismo padding (p-6) y tamaño de iconos (w-12 h-12) en todos los dispositivos
    • Impacto: Cards se ven pequeñas y "perdidas" en el espacio disponible

  2. Falta de navegación lateral o complementaria

    • Todo el contenido está en una sola columna vertical
    • En tablet horizontal, podría haber sidebar con navegación rápida o contenido complementario
    • Impacto: Sensación de "app móvil estirada", no aprovecha el formato landscape

🟢 ESTÉTICOS: 6. Espaciado vertical excesivo

  • space-y-6 en páginas principales puede verse excesivo en tablet
  • Impacto: Sensación de contenido "disperso"
  1. Tipografía no escalada
    • Tamaños de fuente idénticos a móvil
    • Impacto: Texto puede verse pequeño en relación al espacio disponible

2. TABLET VERTICAL (768px - 1024px altura)

Percepción Visual

  • Problema principal: Similar a tablet horizontal pero con menos impacto del espacio horizontal desperdiciado
  • Sensación: Más aceptable que horizontal, pero aún se percibe como "móvil grande"
  • Proporción: Contenido ocupa ~70-75% del ancho

Problemas Identificados

🔴 CRÍTICOS:

  1. Mismo problema de longitud de línea (aunque menos pronunciado)
    • Líneas de texto aún pueden ser demasiado largas para lectura óptima

🟡 IMPORTANTES: 2. Grid de 2 columnas podría ser 3

  • En tablet vertical (768px ancho), grid-cols-3 sería más eficiente
  • Impacto: Mejor aprovechamiento del espacio sin comprometer legibilidad
  1. Cards podrían tener más información visible
    • Con más espacio horizontal, las cards podrían mostrar más contenido sin scroll
    • Impacto: Menos necesidad de expandir/colapsar, mejor scaneo visual

🟢 ESTÉTICOS: 4. Mismos problemas estéticos que tablet horizontal (espaciado, tipografía)

3. DESKTOP ESTÁNDAR (1366px - 1920px)

Percepción Visual

  • Problema principal: Contenido centrado con espacios vacíos masivos (352px-624px por lado)
  • Sensación: Aplicación móvil "centrada" en un mar de espacio vacío, aspecto poco profesional
  • Proporción: El contenido ocupa solo 35-50% del ancho disponible

Problemas Identificados

🔴 CRÍTICOS:

  1. Longitud de línea de texto CRÍTICA

    • Líneas de texto de 640px son extremadamente difíciles de leer
    • Límite óptimo: 50-75 caracteres (aprox. 500-600px máximo)
    • Impacto: Fatiga visual severa, pérdida de comprensión, sensación de "texto corrido"

  2. Desaprovechamiento masivo del espacio

    • En desktop de 1920px, el contenido ocupa solo 672px (35% del ancho)
    • 1248px de espacio desperdiciado (65% del ancho)
    • Impacto: Sensación de aplicación "no diseñada para desktop", falta de profesionalismo

  3. Grid de 2 columnas extremadamente ineficiente

    • En desktop, los botones de emergencia podrían ser 4-6 columnas
    • Impacto: Contenido se ve "apretado" artificialmente, desperdicio visual

🟡 IMPORTANTES: 4. Header minimalista para el espacio disponible

  • Header de 56px con solo logo, título y 2 botones
  • En desktop, podría incluir navegación horizontal, breadcrumbs, o acciones adicionales
  • Impacto: Sensación de header "vacío" y poco funcional

  1. Falta de layout multi-columna

    • Todo el contenido en una sola columna vertical
    • En desktop, podría haber:
      • Sidebar con navegación/índice
      • Contenido principal + panel lateral con información complementaria
      • Layout de 2-3 columnas para contenido relacionado
    • Impacto: Sensación de "app móvil estirada", no aprovecha el formato desktop

  2. Cards sin variantes para desktop

    • Mismo tamaño y estructura que móvil
    • En desktop, podrían ser más anchas, mostrar más información, o agruparse en layouts más complejos
    • Impacto: Cards se ven pequeñas y "perdidas", falta de jerarquía visual

  3. Falta de navegación contextual

    • Sin breadcrumbs, sin navegación lateral, sin tabs horizontales
    • Impacto: Sensación de aplicación "plana", falta de estructura visual

🟢 ESTÉTICOS: 8. Espaciado vertical desproporcionado

  • space-y-6 y py-4 pueden verse excesivos en relación al ancho disponible
  • Impacto: Sensación de contenido "disperso" y "estirado verticalmente"

  1. Tipografía no optimizada para desktop

    • Tamaños de fuente idénticos a móvil
    • En desktop, podría haber jerarquía tipográfica más marcada
    • Impacto: Falta de escala visual, texto puede verse pequeño

  2. Falta de "respiración" visual

    • Todo el contenido está "apretado" en el centro
    • En desktop, podría haber más espacio entre secciones, mejor separación visual
    • Impacto: Sensación de "densidad" innecesaria

📊 CLASIFICACIÓN DE PROBLEMAS

🔴 CRÍTICOS (Afectan Usabilidad)

Problema Dispositivos Afectados Impacto en Usabilidad
Longitud de línea de texto excesiva Tablet H, Desktop Fatiga visual, pérdida de comprensión, dificultad para seguir líneas
Desaprovechamiento masivo del espacio Desktop Sensación de aplicación "no diseñada para desktop", falta de profesionalismo
Grid de 2 columnas ineficiente Tablet H, Desktop Contenido se ve "apretado" artificialmente, desperdicio visual

🟡 IMPORTANTES (Afectan Percepción de Calidad)

Problema Dispositivos Afectados Impacto en Percepción
Header no aprovecha espacio horizontal Tablet H, Desktop Sensación de header "vacío", falta de jerarquía visual
Falta de layout multi-columna Desktop Sensación de "app móvil estirada", no aprovecha formato desktop
Cards sin escalado proporcional Tablet H, Desktop Cards se ven pequeñas y "perdidas" en el espacio disponible
Falta de navegación contextual Desktop Sensación de aplicación "plana", falta de estructura visual
Grid podría ser 3 columnas en tablet vertical Tablet V Mejor aprovechamiento del espacio sin comprometer legibilidad

🟢 ESTÉTICOS (Mejorables)

Problema Dispositivos Afectados Impacto Estético
Espaciado vertical excesivo Tablet H/V, Desktop Sensación de contenido "disperso"
Tipografía no escalada Tablet H/V, Desktop Falta de escala visual, texto puede verse pequeño
Falta de "respiración" visual Desktop Sensación de "densidad" innecesaria

🎨 CÓMO DEBERÍA "SENTIRSE" LA APP

Principios de Diseño para Entornos Sanitarios

La aplicación debe mantener su identidad como herramienta sanitaria móvil pero adaptarse inteligentemente a dispositivos más grandes sin perder su esencia operativa.

En TABLET HORIZONTAL (768px - 1024px)

Sensación objetivo:

  • "Herramienta profesional ampliada" - Mantiene la simplicidad móvil pero aprovecha el espacio para mejor legibilidad y organización
  • Densidad de información moderada - Más contenido visible sin saturación
  • Navegación complementaria - Posibilidad de sidebar discreto con navegación rápida o información contextual
  • Layout flexible - Grids de 3-4 columnas donde tiene sentido, pero manteniendo jerarquía clara

Características clave:

  • Ancho de línea de texto limitado a 600-700px máximo (óptimo 500-600px)
  • Grids adaptativos (3-4 columnas según contenido)
  • Cards ligeramente más grandes pero no excesivas
  • Header con más información contextual (breadcrumbs, estado, etc.)
  • Posibilidad de sidebar colapsable con navegación/índice

En TABLET VERTICAL (768px - 1024px altura)

Sensación objetivo:

  • "Móvil mejorado" - Similar a móvil pero con más espacio para respirar
  • Legibilidad optimizada - Texto más cómodo de leer sin ser excesivamente ancho
  • Grids de 3 columnas - Mejor aprovechamiento sin saturación

Características clave:

  • Ancho de línea de texto limitado a 550-650px
  • Grids de 3 columnas para botones/cards
  • Cards con más información visible
  • Header con más elementos contextuales

En DESKTOP (1366px - 1920px)

Sensación objetivo:

  • "Centro de comando sanitario" - Aprovecha el espacio para crear una experiencia más completa sin perder la simplicidad operativa
  • Layout multi-columna inteligente - Contenido principal + información complementaria
  • Navegación contextual rica - Breadcrumbs, sidebar, navegación horizontal cuando tiene sentido
  • Jerarquía visual clara - Mejor separación de secciones, mejor uso del espacio vertical y horizontal

Características clave:

  • Ancho de contenido principal limitado a 800-900px máximo (óptimo 700-800px para texto)
  • Layout de 2-3 columnas cuando tiene sentido:
    • Columna principal: Contenido principal (protocolos, guías, etc.)
    • Columna secundaria: Navegación, índice, información relacionada, acciones rápidas
  • Sidebar colapsable con navegación, índice de contenido, o información contextual
  • Header enriquecido con navegación horizontal, breadcrumbs, estado del sistema
  • Grids adaptativos (4-6 columnas para botones de emergencia, 2-3 para cards de contenido)
  • Cards más informativas - Mostrar más contenido sin necesidad de expandir
  • Mejor separación visual - Más espacio entre secciones, mejor uso de whitespace
  • Tipografía escalada - Tamaños ligeramente mayores, mejor jerarquía

Principios Fundamentales

  1. Mantener la identidad móvil - No convertirse en una "web corporativa", seguir siendo una herramienta operativa
  2. Legibilidad primero - Nunca comprometer la legibilidad por aprovechar espacio
  3. Progresivo enhancement - Mejoras que se añaden sin romper la experiencia móvil
  4. Contexto sanitario - Diseño que refleja urgencia, claridad y profesionalismo médico
  5. Accesibilidad - Mantener contraste, tamaños de toque, y navegación accesible

📋 RESUMEN EJECUTIVO

Problemas Críticos Identificados

  1. Longitud de línea de texto excesiva en tablet y desktop (afecta legibilidad)
  2. Desaprovechamiento masivo del espacio en desktop (afecta percepción profesional)
  3. Grids fijos de 2 columnas que no se adaptan (afecta eficiencia visual)

Problemas Importantes Identificados

  1. Falta de layout multi-columna en desktop
  2. Header minimalista que no aprovecha espacio horizontal
  3. Cards sin escalado proporcional al dispositivo
  4. Falta de navegación contextual (sidebar, breadcrumbs, etc.)

Sensación Objetivo

  • Tablet: "Herramienta profesional ampliada" - Mantiene simplicidad móvil con mejor organización
  • Desktop: "Centro de comando sanitario" - Layout multi-columna inteligente sin perder identidad operativa

Principio Fundamental

Mantener la identidad como herramienta sanitaria móvil mientras se aprovecha inteligentemente el espacio disponible para mejorar legibilidad, organización y percepción de calidad profesional.

Última actualización: 2026-01-15
Próximo paso: Propuesta de soluciones técnicas (pendiente de aprobación)