Mappe di calore nell'analisi delle app: cosa sono, tipi e principio di funzionamento

Cos'è una mappa di calore?

Una mappa di calore è un metodo di visualizzazione dei dati in cui i valori delle metriche vengono visualizzati a colori: dal blu o verde (attività minima) attraverso il giallo al rosso (attività massima). Nel contesto dell'analisi mobile, una heatmap mostra su quali elementi dell'interfaccia gli utenti cliccano più spesso e quali rimangono inosservati.

A differenza dei report numerici, una mappa di calore fornisce una comprensione visiva immediata dei modelli di comportamento. Secondo NN Group (2024), le heatmap riducono il tempo di analisi del comportamento degli utenti del 60 % rispetto ai dati tabellari. Questo le rende uno strumento indispensabile per i ricercatori UX e i progettisti di prodotti.

Tipi di mappe di calore nell'analisi

Click Heatmap (mappa dei clic)

Click Heatmap è il tipo più comune, che mostra i punti di contatto e i clic su uno schermo. Più caldo è il colore, maggiori sono le interazioni in quell'area. Viene utilizzata per testare ipotesi: se un pulsante “Acquista” si trova in una zona fredda, deve essere spostato più in alto o modificato nel design. Click Heatmap rivela anche i falsi clic — quando gli utenti cliccano su elementi non cliccabili aspettandosi una reazione.

Scroll Heatmap (mappa di scorrimento)

Scroll Heatmap mostra quale percentuale di utenti ha scrollato fino a ciascuna sezione di uno schermo o pagina. La parte superiore è al 100%, diminuendo verso il basso. Se al 50% dell'altezza dello schermo rimane meno del 30% degli utenti, il contenuto critico deve essere spostato più in alto. Secondo Crazy Egg (2024), il 65% degli utenti non scrolla oltre la prima schermata nelle applicazioni mobili con moduli lunghi.

Move Heatmap (mappa di movimento)

Move Heatmap traccia la traiettoria del movimento del cursore del mouse (su desktop). Le ricerche del Nielsen Norman Group mostrano un'alta correlazione (0,85–0,90) tra il movimento del cursore e la direzione dello sguardo dell'utente. Nelle applicazioni mobili, l'equivalente sono le mappe tattili, che mostrano non solo i clic ma anche le pressioni lunghe e gli swipe.

Come funzionano le mappe di calore

Il principio di funzionamento di una mappa di calore si basa sulla raccolta delle coordinate di ogni interazione dell'utente con lo schermo. L'SDK della piattaforma analitica (Hotjar, Smartlook, UXCam) registra le coordinate X e Y di ogni clic o tocco insieme alla risoluzione dello schermo e al tipo di dispositivo. Questi dati vengono aggregati e sovrapposti a uno screenshot come overlay.

La resa cromatica utilizza un gradiente: dal blu (0–5% del numero massimo di interazioni) attraverso il verde e il giallo fino al rosso (95–100%). Ogni punto rappresenta una o più interazioni. Le piattaforme moderne mostrano anche i numeri assoluti dei clic quando si passa il mouse su un'area.

Per dati affidabili sono necessarie almeno 100–200 sessioni per pagina o schermo. Secondo Hotjar (2025), 500 sessioni forniscono un margine di errore inferiore al 5% e sono considerate statisticamente significative per prendere decisioni di progettazione.

Come utilizzare i dati delle mappe di calore

I dati delle mappe di calore vengono utilizzati in tre scenari: ottimizzazione delle conversioni, miglioramento dell'usabilità e validazione delle decisioni di progettazione. Nel primo caso, una heatmap mostra se gli utenti stanno cliccando sul pulsante CTA — in caso contrario, il pulsante viene spostato più in alto o cambiato di colore. Nel secondo, vengono identificati gli elementi che gli utenti scambiano erroneamente per interattivi.

Nello scenario di validazione, confrontate le mappe di calore prima e dopo il redesign di uno schermo. Se la zona calda si è spostata sull'elemento target (ad esempio, il pulsante “Aggiungi al carrello”), il redesign è riuscito. Secondo VWO (2024), il 70% dei test A/B basati sui dati delle heatmap mostra un miglioramento statisticamente significativo della conversione.

Non affidatevi solo alle mappe di calore — combinatele con registrazioni di sessione e analisi quantitative. La heatmap mostra “dove” ma non risponde alla domanda “perché” — per questo è necessaria un'analisi qualitativa del comportamento.

Mappe di calore per applicazioni mobili e desktop

Le mappe di calore mobili differiscono da quelle desktop in diversi parametri. Sui dispositivi mobili non c'è cursore, quindi Move Heatmap viene sostituito da Touch Heatmap — una mappa tattile che registra inoltre la forza di pressione (3D Touch) e la durata. Scroll Heatmap sui dispositivi mobili è particolarmente importante a causa delle dimensioni limitate dello schermo: il contenuto “sotto la piega” (below the fold) potrebbe non essere visto dal 70% degli utenti.

Le mappe di calore desktop utilizzano il movimento del cursore come proxy per l'attenzione — la correlazione tra posizione del cursore e fuoco dello sguardo raggiunge 0,85 secondo Nielsen Norman Group. Sui dispositivi mobili non esiste tale correlazione, quindi per l'analisi dell'attenzione vengono utilizzate mappe di eye-tracking o mappe di pressioni lunghe. Secondo UXCam (2024), le heatmap mobili richiedono il 40% in più di sessioni per la significatività statistica a causa della variabilità delle dimensioni dello schermo.

Quando si impostano mappe di calore per un'applicazione multipiattaforma, create heatmap separate per iOS e Android — le differenze nella navigazione (gesti vs pulsanti) possono modificare radicalmente la distribuzione dei clic. Filtrate anche per versione del sistema operativo: gli elementi dell'interfaccia su Android 12+ con Material You possono apparire ed essere posizionati diversamente rispetto ad Android 11.

Esempio di implementazione di una mappa di calore

Per tracciare i clic in un'applicazione mobile su Android, utilizzate il codice Kotlin qui sotto. Intercetta le coordinate tattili e le invia al sistema di analisi per costruire una mappa di calore.

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
        }
    }
}

Dopo la raccolta dei dati, costruite una mappa di calore in uno strumento BI o utilizzate una piattaforma pronta come UXCam per la visualizzazione automatica.

Confronto tra piattaforme per mappe di calore

Le piattaforme per mappe di calore differiscono per funzionalità, prezzo e profondità di integrazione con gli SDK mobili. Hotjar è lo strumento più popolare per le heatmap web con un'interfaccia semplice e un piano gratuito fino a 35 sessioni al giorno. Tuttavia, Hotjar non supporta le applicazioni mobili — solo versioni web e PWA. Per le applicazioni mobili, utilizzate Smartlook o UXCam con SDK nativi.

UXCam è leader nelle heatmap mobili: supporta Android e iOS, filtraggio automatico per classe di dispositivo, modalità overlay per test A/B e rilevamento anomalie tramite ML. Smartlook offre registrazioni illimitate nel piano Growth e supporta sia heatmap mobili che web in un unico progetto. Microsoft Clarity è un'alternativa gratuita per progetti web con traffico illimitato, ma senza supporto per SDK mobili.

Nella scelta di una piattaforma, considerate la frequenza di aggiornamento dei dati, la profondità di filtraggio e la possibilità di esportare coordinate grezze dei clic per analisi personalizzate. Secondo G2 Reviews (2025), UXCam riceve i punteggi più alti (4,6/5) tra le soluzioni di heatmap mobili, e Hotjar tra le soluzioni web (4,4/5).

Errori tipici nell'analisi delle mappe di calore

Il primo errore è analizzare una mappa di calore senza filtrare per dispositivo. La risoluzione dello schermo influisce notevolmente sul posizionamento degli elementi: ciò che è in alto su un iPhone 15 Pro potrebbe essere al centro su un Android economico. Filtrate sempre le heatmap per modello di dispositivo o dimensione dello schermo.

Il secondo errore è confondere il numero assoluto e relativo di clic. Una zona rossa potrebbe essere calda non per un'alta conversione, ma perché l'elemento occupa il 50% dello schermo. Utilizzate mappe di calore normalizzate, dove il colore mostra la percentuale relativa alla dimensione dell'elemento.

Il terzo errore è ignorare il tempo sullo schermo. Se gli utenti trascorrono poco tempo su uno schermo, la mappa di calore sarà “fredda” non per un design scadente, ma per scarso interesse. Analizzate le heatmap insieme alle metriche di coinvolgimento — Time on Screen e Session Duration.