Mapas de calor en el análisis de aplicaciones: qué son, tipos y principio de funcionamiento

¿Qué es un mapa de calor?

Un mapa de calor es un método de visualización de datos en el que los valores de las métricas se muestran con colores: desde el azul o verde (actividad mínima) pasando por el amarillo hasta el rojo (actividad máxima). En el contexto del análisis móvil, un heatmap muestra en qué elementos de la interfaz hacen clic los usuarios con más frecuencia y cuáles pasan desapercibidos.

A diferencia de los informes numéricos, un mapa de calor proporciona una comprensión visual instantánea de los patrones de comportamiento. Según NN Group (2024), los heatmaps reducen el tiempo de análisis del comportamiento del usuario en un 60 % en comparación con los datos tabulares. Esto lo convierte en una herramienta indispensable para investigadores de UX y diseñadores de productos.

Tipos de mapas de calor en análisis

Click Heatmap (mapa de clics)

Click Heatmap es el tipo más común, que muestra los puntos de contacto y clics en una pantalla. Cuanto más cálido es el color, más interacciones hay en esa zona. Se utiliza para probar hipótesis: si un botón “Comprar” se encuentra en una zona fría, hay que moverlo más arriba o cambiar su diseño. Click Heatmap también revela clics falsos — cuando los usuarios hacen clic en elementos no cliqueables esperando una reacción.

Scroll Heatmap (mapa de desplazamiento)

Scroll Heatmap muestra qué porcentaje de usuarios se desplazó hasta cada sección de una pantalla o página. La parte superior es el 100 %, disminuyendo hacia abajo. Si al 50 % de la altura de la pantalla queda menos del 30 % de los usuarios, el contenido crítico debe subirse más arriba. Según Crazy Egg (2024), el 65 % de los usuarios no se desplaza por debajo de la primera pantalla en aplicaciones móviles con formularios largos.

Move Heatmap (mapa de movimiento)

Move Heatmap rastrea la trayectoria del movimiento del cursor del ratón (en escritorio). Las investigaciones de Nielsen Norman Group muestran una alta correlación (0.85–0.90) entre el movimiento del cursor y la dirección de la mirada del usuario. En aplicaciones móviles, el equivalente son los mapas táctiles, que muestran no solo clics sino también pulsaciones largas y deslizamientos.

Cómo funcionan los mapas de calor

El principio de funcionamiento de un mapa de calor se basa en la recopilación de las coordenadas de cada interacción del usuario con la pantalla. El SDK de la plataforma analítica (Hotjar, Smartlook, UXCam) registra las coordenadas X e Y de cada clic o toque junto con la resolución de la pantalla y el tipo de dispositivo. Estos datos se agregan y se superponen en una captura de pantalla como una superposición.

La representación cromática utiliza un gradiente: desde el azul (0–5 % del número máximo de interacciones) pasando por el verde y el amarillo hasta el rojo (95–100 %). Cada punto representa una o más interacciones. Las plataformas modernas también muestran números absolutos de clics al pasar el cursor sobre una zona.

Para obtener datos fiables se requieren al menos 100–200 sesiones por página o pantalla. Según Hotjar (2025), 500 sesiones proporcionan un margen de error inferior al 5 % y se consideran estadísticamente significativas para la toma de decisiones de diseño.

Cómo usar los datos de los mapas de calor

Los datos de los mapas de calor se utilizan en tres escenarios: optimización de conversiones, mejora de la usabilidad y validación de decisiones de diseño. En el primer caso, un heatmap muestra si los usuarios hacen clic en el botón CTA — si no, el botón se mueve más arriba o se cambia su color. En el segundo, se identifican elementos que los usuarios confunden con interactivos.

En el escenario de validación, compare los mapas de calor antes y después del rediseño de una pantalla. Si la zona cálida se ha desplazado al elemento objetivo (por ejemplo, el botón “Añadir al carrito”), el rediseño es exitoso. Según VWO (2024), el 70 % de las pruebas A/B basadas en datos de heatmap muestran una mejora estadísticamente significativa en la conversión.

No se base únicamente en los mapas de calor — combínelos con grabaciones de sesiones y análisis cuantitativos. El heatmap muestra “dónde” pero no responde a la pregunta “por qué” — para eso se necesita un análisis cualitativo del comportamiento.

Mapas de calor para aplicaciones móviles y de escritorio

Los mapas de calor móviles se diferencian de los de escritorio en varios parámetros. En los dispositivos móviles no hay cursor, por lo que Move Heatmap se sustituye por Touch Heatmap — un mapa táctil que además registra la fuerza de presión (3D Touch) y la duración. Scroll Heatmap en dispositivos móviles es críticamente importante debido al tamaño limitado de la pantalla: el contenido “debajo del pliegue” (below the fold) puede no ser visto por el 70 % de los usuarios.

Los mapas de calor de escritorio utilizan el movimiento del cursor como indicador de atención — la correlación entre la posición del cursor y el foco de la mirada alcanza 0.85 según Nielsen Norman Group. En dispositivos móviles no existe tal correlación, por lo que para el análisis de la atención se utilizan mapas de seguimiento ocular (eye-tracking) o de pulsaciones largas. Según UXCam (2024), los heatmaps móviles requieren un 40 % más de sesiones para la significación estadística debido a la variabilidad de los tamaños de pantalla.

Al configurar mapas de calor para una aplicación multiplataforma, cree heatmaps separados para iOS y Android — la diferencia en la navegación (gestos vs botones) puede cambiar radicalmente la distribución de clics. Filtre también por versión del SO: los elementos de la interfaz en Android 12+ con Material You pueden verse y ubicarse de forma diferente que en Android 11.

Ejemplo de implementación de mapa de calor

Para rastrear clics en una aplicación móvil en Android, use el código Kotlin a continuación. Intercepta las coordenadas táctiles y las envía al sistema analítico para construir un mapa de calor.

class HeatmapTracker {
    fun trackEvent(activity: Activity) {
        activity.window.decorView.setOnTouchListener { _, event ->
            if (event.action == MotionEvent.ACTION_UP) {
                val bundle = Bundle().apply {
                    putFloat("x", event.x)
                    putFloat("y", event.y)
                    putInt("screen_width", resources.displayMetrics.widthPixels)
                }
                Firebase.analytics.logEvent("touch_heatmap", bundle)
            }
            false
        }
    }
}

Después de recopilar los datos, construya un mapa de calor en una herramienta de BI o use una plataforma preparada como UXCam para la visualización automática.

Comparación de plataformas para mapas de calor

Las plataformas para mapas de calor difieren en funcionalidad, precio y profundidad de integración con SDK móviles. Hotjar es la herramienta más popular para heatmaps web con una interfaz sencilla y un plan gratuito de hasta 35 sesiones al día. Sin embargo, Hotjar no admite aplicaciones móviles — solo versiones web y PWA. Para aplicaciones móviles, use Smartlook o UXCam con SDK nativos.

UXCam es el líder en heatmaps móviles: admite Android e iOS, filtrado automático por clase de dispositivo, modo superposición para pruebas A/B y detección de anomalías con ML. Smartlook ofrece grabaciones ilimitadas en el plan Growth y admite tanto heatmaps móviles como web en un solo proyecto. Microsoft Clarity es una alternativa gratuita para proyectos web con tráfico ilimitado, pero sin soporte para SDK móviles.

Al elegir una plataforma, considere la frecuencia de actualización de datos, la profundidad del filtrado y la posibilidad de exportar coordenadas de clics en bruto para análisis personalizados. Según G2 Reviews (2025), UXCam obtiene las puntuaciones más altas (4.6/5) entre las soluciones móviles de heatmap, y Hotjar entre las soluciones web (4.4/5).

Errores típicos al analizar mapas de calor

El primer error es analizar un mapa de calor sin filtrar por dispositivo. La resolución de la pantalla afecta enormemente a la ubicación de los elementos: lo que en un iPhone 15 Pro está arriba, en un Android económico puede estar en el medio. Filtre siempre los heatmaps por modelo de dispositivo o tamaño de pantalla.

El segundo error es confundir el número absoluto y relativo de clics. Una zona roja puede ser cálida no por una alta conversión, sino porque el elemento ocupa el 50 % de la pantalla. Use mapas de calor normalizados, donde el color muestra el porcentaje relativo al tamaño del elemento.

El tercer error es ignorar el tiempo en pantalla. Si los usuarios pasan poco tiempo en una pantalla, el mapa de calor será “frío” no por un mal diseño, sino por un bajo interés. Analice los heatmaps junto con métricas de participación — Time on Screen y Session Duration.