Eyetracking per studi di usabilità
dei quotidiani on-line: il caso de La Repubblica
Massacci Valerio
Relatore: Carlo Giovannella
"ISIM_GARAGE"
Università di Roma Tor Vergata
I test effettuati – I quattro task
Task1: Naviga all’interno della “homepage” e seleziona una notizia di tuo interesse.
Obbiettivo: registrare e capire le modalità di fruizione della pagina da parte degli
utenti.
Task 2: Utilizza il motore di ricerca interno.
Obiettivo: capire se e come gli utenti vanno alla ricerca sulla pagina di strumenti
utili alla navigazione.
Task 3: Cerca il link alla rubrica “Lettera Finanziaria” di Giuseppe Turani.
Obiettivo: capire come l’utente si orienta e si muove quando deve cercare
informazioni precise all’interno di una homepage.
Task 4: Naviga all’interno della pagina di settore Sport e seleziona una notizia
Obiettivo: analizzare le modalità di fruizione dei contenuti da parte dell’utente sulla
homepage
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
Attraverso l’analisi dei patterns si descrivono le modalità di lettura e
interazione degli utenti con il sito, in funzione del tempo e dello spazio
Come è fatto un patterns
Ogni pallino rappresenta una fissazione,
più grandi sono più è lunga la durata
della fissazione.
Ogni pallino è numerato e unito con il
successivo da una linea retta che
rappresenta la saccade. Durante le
saccadi l’occhio non acquisisce
informazioni
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
I percorsi dei movimenti oculari dei sei utenti hanno mostrato che i primi istanti
di navigazione sono simili per tutti gli utenti
Ci si muove tra il titolo più importante e le zone limitrofe: la foto e le news24ore
Ci troviamo davanti ad uno spostamento a
grandi linee orizzontale, da sinistra verso
destra: primo titolo – foto – news 24ore
Successivamente lo spostamento diventa
verticale. Ci si muove verso il basso
seguendo il layout della pagina
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
“Il fascione”: Il titolo della prima notizia è la parte del fascione più letta, poi
le news 24ore e quindi la foto, il sommario della prima notizia è poco letto.
Differenze sostanziali nella grandezza dei font tra titolo e sommario non invogliano
l’utente a continuare la lettura dopo aver letto il titolo.
Zona
% di Fissazioni sul
totale
Titolo prima notizia
45%
Sommario prima notizia
9%
Foto
14.5%
News 24ore
31.5%
Questa immagine è la heatmap del fascione, rappresenta l’aggregato di
tutte le fissazione dei sei utenti per quanto riguarda il primo task
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
Il corpo centrale: quando l’utente si sposta dal fascione a questa zona, passa
da una disposizione orizzontale ad una verticale dei contenuti, il layout diventa
a tre colonne ben distinte, graficamente e a livello di contenuti
Le fissazioni dei partecipanti al test, si
concentrano sulla prima notizia (del corpo
centrale) e sulla parte sinistra della colonna
centrale.
Il colore di sfondo della parte destra della
colonna centrale forse trae in inganno gli utenti
che la scambiano per una zona che contiene
pubblicità
L’interesse dell’utente decresce man mano che
si muove con lo sguardo verso il basso
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Ampiezza delle fissazioni
Il corpo informativo: Dividendo la pagina in
molte zone si analizza con precisione come gli
utenti hanno speso il tempo sulla pagina
Fascione: tempi di fissazione lunghi rispetto
al resto della pagina che fanno pensare ad
un’attività di lettura molto attenta.
I 2,138s spesi in media sul titolo del fascione
rappresentano un tempo molto lungo trattandosi
di quattro righe, soprattutto se confrontato con
le altre zone.
Corpo centrale: tempi di fissazione lunghi
nella parte alta, sotto il fascione.
Più si scende verso il basso più i tempi
diventano brevi e fanno pensare ad un’attività
di lettura molto veloce.
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
Le immagini: Quando un utente si trova davanti un’immagine tende a focalizzare
l’attenzione sempre sugli stessi aspetti
Le fissazioni degli utenti sono concentrate in
poche zone dell’immagine. Sui volti e sulle
mani.
In alcuni casi come le fissazioni sono
concentrate nelle zone in cui si svolge l’azione
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
Modalità di lettura: Gli utenti leggono le prime due-tre parole di ogni frase
La seconda heatmap invece mostra un’alta
concentrazione di fissazioni sulla prime parole di
ogni riga, sia sul titolo che sul sommario
(macchia rossa)
Entrando più nello specifico, dividendo la cella
in tre porzioni, la percentuale di fissazioni della
prima porzione è del 75% rispetto al 25% delle
restanti due porzioni
Risultati analoghi sono stati riportati dallo studio
Eyetrack III
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
Le colonne laterali: il tipo di layout della
pagina, con la divisione a colonne, i colori di
sfondo che creano una divisone marcata,
impongono una netta separazione tra
contenuti e pubblicità indicando chiaramente
all’utente dove trovare le notizie e dove altri
tipi di contenuti (link, servizi, pubblicità).
Le colonne laterali infatti contengono proprio
contenuti di importanza secondaria e
pubblicità
Nell’immagine di fianco è chiaro come la
distribuzione delle fissazioni sia concentrata
quasi esclusivamente sulla parte del layout che
contiene contenuti editoriali
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Percentuali di fissazione
Nell’immagine qui di lato sono riportate le percentuali di fissazione
nelle diverse zone della pagina.
Le zone del layout che ospitano contenuti editoriali raggiungono più
dell’85% delle fissazioni totali.
Le zone che invece contengono link, servizi e pubblicità totalizzano un
magro 8% di fissazioni sul totale.
Interessante è la percentuale di fissazioni nella “coda”, che, nonostante
si trovi in una zona periferica della pagina, conquista la stessa
percentuale di entrambe le colonne insieme, probabilmente perché si
trova nella colonna centrale del layout
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Patterns & Heatmap
Le pubblicità: tasto dolente per i quotidiani online considerando che molti
dipendono direttamente dalla vendita delle inserzioni
I tipi di pubblicità: Banner sotto la testata di media-piccola grandezza, visti da
un numero discreto di utenti grazie alla posizione privilegiata.
I banner sulle colonne soffrono le scelte di layout,
gli utenti capiscono che si tratta di pubblicità ed
escludono automaticamente le colonne dal processo di
lettura.
Le pubblicità testuali riescono a confondersi
facilmente con i contenuti
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Ampiezza delle fissazioni
Seondo lo studio Eyetrack III le pubblicità che
funzionano sono quelle che si mimetizzano
con il “look and feel” della pagina: pubblicità
testuali, inserite negli articoli, confuse con
contenuti editoriali
Le pubblicità: Anche questo tipo di analisi sottolinea il
problema delle pubblicità.
Anche se si tratta di banner e quindi di immagini, i tempi di
fissazione sono troppo brevi per pensare ad una fruizione
esaustiente dei contenuti
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Suggerimenti
I punti di forza:
Tutto il blocco informativo, grazie al layout è facilmente fruibile
Le lacune:
Quasi totale inefficacia delle pubblicità in tutte le zone della pagina
Suggerimenti:
1. Grande attenzione nella scelta delle immagini
2. Scrivere sommari più brevi e limitare la differenza di grandezza tra i font
del titolo e quelli dei sommari
3. Utilizzo di pubblicità testuali e di banner inseriti nel corpo informativo
4. Testata più grande e i servizi proposti sopra, posizionati lateralmente per
avere più visibilità.
5. Maggiore organizzazione delle categorie nel blocco finale della pagina
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Elementi di navigazione
Se cerchiamo elementi di navigazione, si ha come
priorità rintracciare un “form” in determinate zone. Se
non si trova un form, si cerca un menu o un link
fisso.
Gli elementi per la navigazione
dovrebbero comparire nella forma
e nella posizione attesa
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi qualitativa – Contenuti secondari
Task 3: Viene richiesto
all’utente di cercare il link
alla rubrica “Lettera
Finanziaria”
La mappa qui di fianco
mostra le percentuali di
fissazioni degli utenti nelle
diverse zone della pagina
"ISIM_GARAGE"
Gli utenti hanno cercato nella
“coda” dove ci sono link divisi
per categorie, quindi sulle
colonne, solo dopo tanto, a causa
di una cattiva organizzazione dei
link, è stato raggiunto l’obiettivo
Gli utenti cercano contenuti
partendo dalla ricerca della
categoria
Università di Roma Tor Vergata
I TEST SULLA PAGINA DI REPUBBLICA.IT
Analisi del campione di utenti
6 partecipanti, 4 task.
Questa analisi è stata svolta per validare la bontà del test, valutando le
caratteristiche dei sei utenti, cercando di capire le modalità di lettura e
interazione con il media
Sono state analizzate:
La durata delle fissazioni
(tempo di permanenza in un punto)
La lunghezza degli spostamenti
La durata delle saccadi
(tempo di spostamento da una
fissazione all’altra)
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi quantitativa – Studio del campione
I grafici rappresentano il comportamento medio dei 6 utenti, calcolato
con i dati dei quattro task
8
440
400
360
320
280
240
200
160
120
80
-2
40
3
0
Differenza con valore medio
Durata delle saccadi
-7
-12
Tempo
Un’alta concentrazione di fissazioni
attorno ai 200 millisecondi
"ISIM_GARAGE"
Per le saccadi, gli spostamenti tra una
fissazione, la maggiore concentrazione
Sta tra i 20 e i 60 millisecondi
Università di Roma Tor Vergata
Analisi quantitativa – Studio del campione
I grafici rappresentano il comportamento medio dei 6 utenti, calcolato
con i dati dei quattro task
La durata e la lunghezza delle saccadi
sono due caratteristiche indipendenti tra
loro. Ad una saccade di 20 millisecondi
possono corrispondere spostamenti che
vanno dai 25 ai 600 pixel
Lunghezza delle Saccadi
25
Utente
Utente
Utente
Utente
Utente
Utente
15
10
Se si escludono gli utenti 1 e 5 le curve
delle distribuzioni degli altri utenti sono
molto simili
5
600
575
550
525
500
475
450
425
400
375
350
325
300
275
250
225
200
175
150
125
75
100
50
0
0
25
Frequenza
20
1
2
3
4
5
6
Pixel
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi quantitativa – Task di navigazione
Task 1: Naviga all’interno della “homepage” e dopo una breve lettura dei contenuti
seleziona una notizia di tuo interesse.
Durata delle fissazioni Task 1
Durata delle fissazioni
10
1600
1500
1400
1300
1200
1100
900
800
700
600
500
400
300
1000
15
0
200
20
5
100
25
10
0
Utente 1
Utente 2
Utente 3
Utente 4
Utente 5
Utente 6
Differenza con il valore medio
30
Frequenza
35
-5
-10
5
-15
Le curve della durata delle fissazioni
Presentano due picchi, tra i 150-200
millisecondi e tra i 300-400 millisec
"ISIM_GARAGE"
1100
1050
950
900
850
800
750
1000
Tempo
700
650
600
550
500
450
400
350
300
250
200
150
100
50
0
0
Tempo
Queste curve mostrano la differenze
tra i diversi utenti e sottolineano i
diversi stili di lettura
Università di Roma Tor Vergata
Analisi quantitativa – Task di navigazione
Task 1: Naviga all’interno della “homepage” e dopo una breve lettura dei contenuti
seleziona una notizia di tuo interesse.
Durata delle Saccadi
80
Durata delle saccadi
Utente 1
70
Utente 2
20
440
400
360
320
280
240
200
-2
160
30
3
120
Utente 6
40
80
50
8
40
Utente 5
0
Frequenza
Utente 4
Differenza con valore medio
Utente 3
60
-7
10
-12
0
0
20
40
60
80 100 120 140 160 180 200 220 240 260 280
Tempo
Tempo
Le curve della durata delle fissazioni
Presentano due picchi, tra i 150-200
millisecondi e tra i 300-400 millisec
"ISIM_GARAGE"
Per quanto riguarda la durata delle
saccadi le distribuzioni sono quasi
identiche per tutti gli utenti
Università di Roma Tor Vergata
Analisi quantitativa – Task di navigazione
Lunghezza delle Saccadi
25
Frequenza
30
Utente 1
Utente 2
Utente 3
Utente 4
Utente 5
Utente 6
20
15
10
5
Le frequenze delle curve sono
diverse tra i vari utenti, ma
l’andamento generale non è molto
discorde tra le diverse distribuzioni
Le curve crescono fino ai 50-75
pixel, poi decrescono tutte in
maniera più o meno veloce.
Ulteriore crescita, picco tra i 150 e
i 175 pixel, tranne l’utente 6.
0
0
25
50
75
100 125 150 175 200 225 250 275 300 325 350 375 400 425 450 475 500
Pixel
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi quantitativa – Task di navigazione
300
250
250
200
200
Serie1
Serie2
150
Serie3
150
Serie1
Serie4
Serie5
100
Serie6
100
50
50
0
0
20
40
60
80
Questo grafico rappresenta il
comportamento dei sei utenti per quanto
riguarda la lunghezza delle saccadi
"ISIM_GARAGE"
1
2
3
4
Qui invece è riportato il comportamento
medio
Università di Roma Tor Vergata
Analisi quantitativa – Task di ricerca
Task 3: Cerca il link alla rubrica “Lettera Finanziaria”
Durata delle Fissazioni
15
35
Utente 1
Utente 2
Utente 3
Utente 4
Utente 5
Utente 6
30
20
Utente 2
10
Utente 3
Utente 4
Utente 5
5
Utente 6
15
50
14
50
13
50
12
50
11
50
10
50
95
0
85
0
75
0
65
0
55
0
45
0
35
0
25
0
50
10
15
0
0
15
-5
5
-10
0
0
50
10
0
15
0
20
0
25
0
30
0
35
0
40
0
45
0
50
0
55
0
60
0
65
0
70
0
75
0
80
0
85
0
90
0
95
0
10
00
10
50
11
00
Frequenza
25
Utente 1
-15
Tempo
Le varie curve hanno alcune differenze sulle fissazioni di breve-media durata
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi quantitativa – Task di ricerca
Task 3: Cerca il link alla rubrica “Lettera Finanziaria”
44
0
40
0
36
0
32
0
28
0
24
0
0
30
20
0
0
16
0
40
5
12
0
50
10
80
60
15
40
70
Frequenza
Durata delle Saccadi
-5
20
Utente 1
10
Utente 2
-10
Utente 3
0
0
20 40
60 80 100 120 140 160 180 200 220 240 260 280
Tem po
Utente 4
-15
Utente 5
Utente 6
-20
Le differenze di comportamento tra gli utenti sono visibili nelle saccadi
di durata tra i 60 e 80 millisecondi, spostamenti di breve-media durata
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi quantitativa – Task di ricerca
Task 3: Cerca il link alla rubrica “Lettera Finanziaria” di Giuseppe Turani
Il grafico rappresenta le distribuzioni
relative alla lunghezza delle saccadi
Lunghezza delle Saccadi
20
Frequenza
25
Utente 1
Utente 2
Utente 3
Utente 4
15
Utente 5
Utente 6
Picchi intorno ai 50 e i 75 pixel poi le curve
decrescono per valori di pixel più grandi
L’unica curva che ha delle differenze vistose
rispetto alle altre è quella relativa alla
distribuzione dell’utente 4
10
5
50
0
45
0
40
0
35
0
30
0
25
0
20
0
15
0
10
0
50
0
0
Pixel
"ISIM_GARAGE"
Università di Roma Tor Vergata
Analisi quantitativa – Task di navigazione
Lunghezza e Durata Saccadi media
Lunghezza e Durata Saccadi
400
500
Utente 1
350
Utente 2
400
Utente 3
350
Utente 4
300
Lunghezza saccadi
Lunghezza delle saccadi
450
Utente 5
Utente 6
250
200
150
300
250
200
150
100
100
50
50
0
0
20
40
60
80
Durata delle saccadi
Questo grafico rappresenta il
comportamento dei sei utenti per quanto
riguarda il rapporto tra lunghezza e durata
delle saccadi
"ISIM_GARAGE"
20
40
60
80
Durata saccadi
Qui invece è riportato il comportamento
medio
Università di Roma Tor Vergata