Diseño asistido por datos: mapas de calor y accesibilidad

Mapas de calor: lo que revelan y lo que no

Un mapa de calor (heatmap) es una representación visual que superpone sobre una interfaz la densidad de interacciones de los usuarios: dónde hacen clic, hasta dónde hacen scroll, dónde pasan más tiempo con el cursor. La zona roja acumula más actividad; la azul, menos.

Lo que revelan bien: zonas muertas donde nadie interactúa aunque hayas puesto contenido importante, dead clicks (clics sobre elementos no interactivos que el usuario confunde con botones), y la profundidad de scroll real —que en móvil suele ser bastante inferior a lo que se asume.

Lo que no revelan: el por qué. Si el 70% de los usuarios abandona el formulario en el campo de teléfono, el heatmap te dice dónde para; las grabaciones de sesión o un test cualitativo te dicen por qué. Úsalos en tándem, no como sustitutos.

Tres patrones que se repiten en casi cualquier proyecto:

• El hero ignorado: en landing pages con imagen de fondo grande, los usuarios hacen scroll antes de leer el texto del hero. El mapa revela que el titular más importante tiene menos interacción que el primer H2 visible sin scroll.
• El footer inesperadamente activo: los footers bien estructurados reciben más clics de los esperados, especialmente en móvil. Muchos usuarios los usan como mapa del sitio.
• El CTA invisible: botones que visualmente se pierden por falta de contraste o por estar rodeados de demasiado contenido. El heatmap los delata en segundos.

De la observación al diagnóstico: qué buscar en los datos

Tener un mapa de calor sin saber qué buscar es como tener Google Analytics sin entender las métricas. Hay tres señales que vale la pena priorizar:

• Rage clicks: clics repetidos sobre el mismo punto en poco tiempo. Generalmente indican frustración: un elemento que el usuario espera que sea interactivo y no lo es, o una acción que no produce respuesta visible.
• Scroll depth bajo en contenido clave: si tienes una sección de valor (precios, testimonios, comparativa de planes) por debajo del 60% de scroll y el mapa muestra que ahí llega menos del 30% de los usuarios, el problema no es el contenido sino la arquitectura de la página.
• Click leakage: tráfico que sale de donde no quieres. Si el 40% de los clics en tu landing van a la nav en lugar de al CTA principal, la jerarquía visual no está haciendo su trabajo.

Con estos tres indicadores ya tienes suficiente para priorizar qué rediseñar primero sin necesidad de hacer un análisis exhaustivo de cada sesión.

Diseño asistido por IA: el turno de las herramientas

En 2026, la mayoría de plataformas de analítica de comportamiento han integrado capas de IA que van más allá de mostrar zonas rojas. Herramientas como Hotjar, Microsoft Clarity o FullStory ahora generan resúmenes automáticos de sesiones, detectan patrones de fricción y priorizan los problemas por impacto estimado en conversión.

Clarity, por ejemplo, es gratuito y tiene integración directa con Google Analytics 4. Su panel de «Copilot» genera insights en lenguaje natural del tipo «el 34% de los usuarios que ven la sección de precios no llegan al botón de compra» con segmentación por dispositivo. Para proyectos con presupuesto ajustado es difícil justificar no usarlo.

La parte interesante no es la IA como generadora de diseños, sino como intérprete de comportamiento. El diseñador sigue tomando las decisiones; la IA reduce el tiempo de diagnóstico de horas a minutos.

Accesibilidad asistida: más allá del contraste

La accesibilidad tiene mala prensa como «checklist de cumplimiento legal» y buena prensa como «diseño más inclusivo». Ambas son ciertas y las dos razones son válidas para tomarla en serio. Lo que ha cambiado en los últimos dos años es que las herramientas de análisis automatizado han mejorado mucho, y ahora puedes integrar checks de accesibilidad directamente en el flujo de diseño, no solo al final.

Lo que las herramientas actuales detectan automáticamente con bastante fiabilidad:

• Contraste insuficiente: el estándar WCAG 2.1 AA exige una ratio de 4.5:1 para texto normal y 3:1 para texto grande (≥18px regular o ≥14px bold). Herramientas como Axe DevTools, WAVE o el propio Lighthouse de Chrome lo detectan en segundos sobre HTML real.
• Targets táctiles demasiado pequeños: Google recomienda un mínimo de 44×44px para elementos interactivos en móvil. Es uno de los errores más comunes en diseños que vienen de Figma sin revisión de espaciado real.
• Jerarquía de encabezados rota: saltar de H1 a H3 sin H2 intermedio es un fallo frecuente que afecta a lectores de pantalla y al SEO simultáneamente.
• Atributos alt ausentes o genéricos: «imagen1.jpg» como alt no aporta nada. Un alt bien escrito describe el contenido o función de la imagen en el contexto de la página.
• Foco de teclado invisible: el outline: none en :focus que algún desarrollador puso para «que no se vean esos bordes feos» deja sin navegación por teclado a usuarios que no usan ratón.

Lo que las herramientas no detectan bien aún: contexto semántico, si un formulario tiene el flujo lógico correcto, o si el lenguaje es comprensible para usuarios con diversidad cognitiva. Ahí sigue siendo necesaria la revisión humana.

Checks de accesibilidad desde el navegador: Lighthouse y Axe

Sin instalar nada, puedes obtener un análisis de accesibilidad básico con Lighthouse (integrado en Chrome DevTools). Abre DevTools → pestaña Lighthouse → selecciona «Accessibility» → Generate report. El resultado es una puntuación de 0 a 100 con los problemas desglosados y enlazados a la documentación de WCAG.

Para un análisis más fino, Axe DevTools (extensión gratuita de Chrome/Firefox) detecta un mayor número de violaciones y las clasifica por impacto: crítico, serio, moderado, menor. Es el estándar de facto en equipos de producto que hacen QA de accesibilidad.

Herramientas que merece la pena conocer

Microsoft Clarity — Gratuito, sin límite de sesiones, con integración GA4 y resúmenes automáticos por IA. El punto de entrada más rápido para mapas de calor y grabaciones de sesión en proyectos reales.

Hotjar — Más completo en funcionalidades (encuestas, funnels, feedback en página), con plan gratuito limitado. Útil cuando necesitas cruzar datos cualitativos con los cuantitativos.

Axe DevTools — La extensión de navegador más rigurosa para checks de accesibilidad. La versión gratuita cubre el 80% de lo que necesitas en proyectos web estándar.

Stark — Plugin para Figma que comprueba contraste, simula daltonismo y verifica tamaño de targets directamente en el archivo de diseño, antes de llegar a código.