Photo by HalGatewood.com on Unsplash
“Usability is about people and how they understand and use things, not about technology” ~ Steve Krug
Durante il mio ultimo incontro con uno dei miei compagni di squadra, abbiamo iniziato a costruire un prototipo per un progetto. Il nostro obiettivo con il prototipo era studiare il flusso di uno scopo specifico del progetto, raccogliere e analizzare alcune analytics e delineare le nostre mosse successive. Come sviluppatore, volevo profilare il prototipo, ma ovviamente la mia non era l'unica opinione sul tavolo. Così ho chiesto se qualcuno avesse bisogno di analytics, e la risposta è stata "heatmap?".
Cosa sono e cosa usare
Le heat map sono un modo per visualizzare i dati su come qualcuno usa un servizio o una feature. Per una pagina web, le heat map possono mostrare come gli utenti muovono il mouse o toccano la pagina. Di solito usano gradienti di colore per rappresentare i dati.
Quindi perché ho bisogno delle heat map? Le heat map possono aiutare l'analista UX ad avere una migliore comprensione di dove gli utenti concentrano la loro attenzione.
Un'ottima libreria per questo è heatmap.js: open-source, disponibile su Github e sotto licenza MIT.
Il sito di Heatmap.js con tracciamento heat map in tempo reale
Costruisci la tua prima heat map
Heatmap.js ha un'ottima documentazione con tanti esempi.
Per iniziare a costruire la tua prima heat map, prendi una pagina web e raccogli gli eventi da tracciare. Per raccogliere i dati sto usando attualmente RRWeb, per via del package che sto scrivendo (puoi saperne di più leggendo questo o dando un'occhiata a Github), oppure puoi usare qualsiasi package tu preferisca, come Cimice (ho scritto un articolo su come usarlo o, di nuovo, dagli un'occhiata su Github).
Una volta raccolti tutti i dati, formattali in un modo utilizzabile da heatmap.js:
{
x: 10,
y: 10,
value: 15
}Heatmap.js costruirà la heat map basandosi sul numero di hit per una coordinata e sulla prossimità tra i punti. La bontà della heat map è strettamente legata ai dati, quindi con pochi dati la tua mappa non rifletterà davvero il comportamento dei tuoi utenti.
Vediamo come funziona. La libreria è disponibile via CDN oppure scaricando manualmente il file.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/heatmap.min.js"></script>L'inizializzazione è davvero semplice: scegli il container della heat map, recuperi i dati e li formatti, poi dici a heatmap.js di costruire la mappa! Per il primissimo esempio userò l'intero DOM come container della mappa:
<body style="min-height:100vh">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/heatmap.min.js"></script>
<script type="text/javascript">
const config = {
container: document.documentElement,
};
const heatmap = h337.create(config);
// Set data here
</script>
</body>Ora raccogli i dati: puoi recuperarli da un database (o da qualsiasi sorgente dati). Io uso RRWeb, che raccoglie molti dati, quindi devono essere deserializzati e strutturati come indicato prima. Ho solo pochi dati, quindi metto l'elaborazione sul frontend:
const rawData = /* data from RRWeb as array */;
const data =
rawData
.filter(v => v.type === 3 && v.data.hasOwnProperty('positions'))
.map(v => v.data.positions)
.flat()
.map(v => { return {x: v.x, y: v.y, value: 1}; })
.reduce((acc, v) => {
let position = acc.filter(el => el.x === v.x && el.y === v.y);
if (position.length > 0) {
position = position[0];
let idx = acc.indexOf(position);
++position.value;
acc.splice(idx, 1, position);
} else {
acc.push(v);
}
return acc;
}, []);Ho scritto questo codice molto velocemente a scopo di test, quindi non è affatto ottimizzato. RRWeb memorizza molti dati, quindi:
- il filter per il type 3 serviva per gli eventi del mouse che contengono una posizione,
- map prende la posizione,
- un record può contenere più di una posizione, quindi basta un flat,
- map riformatta il contenuto nel formato desiderato,
- reduce aggrega i record con gli stessi dati di posizione aggiornandone il valore.
Una volta che hai i tuoi dati, ti basta:
heatmap.setData({
min: 0,
max: 100,
data: data
});Il mio dataset di test è piccolo, solo 2370 record (una sessione utente di qualche minuto), quindi i valori min e max sono piccoli in questo caso.
Heat map generata
Sembra totalmente privo di senso. Ma se ripeti questo sulla pagina in cui i dati sono stati raccolti, inizia ad avere senso.
Heat map generata
Ricorda che per riprodurre davvero i comportamenti degli utenti dovresti riportare i dati sulla scala corretta: se vuoi costruire una heat map a 1920x1080 e i tuoi dati sono a 1280x720, dovresti considerare di usare un fattore di scala di 1.5x oppure di costruire heat map diverse in base ai dati.
Migliora le tue decisioni data-driven con i dati
Stiamo solo scalfendo la superficie con queste heat map: puoi usarle in combinazione con le session recording, esportarle in immagine o PDF, combinarle con altre analytics per avere una migliore comprensione del sistema. Puoi persino tracciare come ogni modifica della pagina si riflette sui comportamenti degli utenti, controllando come cambiano le heat map nel tempo!
Ora sta a te costruire qualcosa di grande! 🥂
Resta sintonizzato per altre Strategie Data-Driven e, se vuoi, prenditi un momento ️️per lasciare un commento su come prendi decisioni data-driven supportate dagli strumenti! ☕️