Eye Tracker e ricerca dell’informazione visiva testuale

Nello sviluppo della UX Research è sempre più importante comprendere come gli utenti stanno osservando un prodotto digitale, sia esso un video, un videogame, un sito internet o una applicazione web based. Gli utenti infatti non si accontentano più del sito o dell’applicazione che svolga semplicemente le funzioni che dovrebbe assolvere, ma devono avere anche un ottima user experience. Grazie infatti all grande sviluppo tecnologico sempre più spesso la selezione ricade non solo sul prodotto con più feature, ma su quel prodotto che riesce a realizzare un’esperienza di utilizzo dell’utente migliore degli altri. In questo articolo cerchiamo di spiegare in generale alcuni principi dell’analisi visiva e nel dettaglio come funziona il sistema di elaborazione delle informazioni testuali.

Come si ricercano le informazioni su una pagina web?

Riuscire a comprendere come un utente legge le informazioni su una pagina internet è molto importante. Consente infatti agli sviluppatori di siti web di costruire siti più efficienti, rispondendo così alle esigenze degli utenti. Per fare questo però abbiamo bisogno di ipotesi su come la ricerca dell’informazione visiva avvenga.

La teoria della gerarchia visiva

Secondo la teoria della gerarchia visiva (Faraday, 2000) per comprendere come un utente elabora una pagina web dobbiamo considerare due processi cognitivi differenti che sono la fase di scansione e la fase di ispezione.

Fase di scansione

Durante la prima fase, o fase di scansione, un utente passa rapidamente in rassegna la pagina per trovare un punto di ingresso. Un punto di ingresso è, ad esempio, una parola chiave o una frase che cattura l’attenzione dell’utente. Questa attività è simile a quella di una persona che cerca una parola in un dizionario.

Quando l’utente si trova in questa prima fase infatti possiamo osservare, tramite eyetracker, che i suoi movimenti oculari sono rapidi e tipici di un comportamento esplorativo. L’utente è infatti alla ricerca di un punto di ingresso.

Fase di ispezione e di riscansione

Una volta che l’utente ha trovato un punto di ingresso, inizia la seconda fase, o fase di lettura. In questa fase, l’utente legge il testo in modo più attento e metodico, cercando di comprendere il significato delle parole. I movimenti oculari sono meno rapidi e più precisi, e l’utente può fermarsi su una parola o una frase per un periodo di tempo più lungo.

La terza e ultima fase è la fase di ri-scansione, in cui l’utente torna a passare velocemente in rassegna il testo per verificare se ci sono altri punti di ingresso che possono essere interessanti. I movimenti oculari sono simili a quelli della prima fase, rapidi e saltuari.

 

Queste tre fasi sono le principali attività che un utente svolge quando legge un testo su una pagina web. Tuttavia, non tutti gli utenti le svolgono necessariamente in questo ordine.

Ad esempio, alcuni utenti potrebbero saltare la prima fase di scansione e passare direttamente alla fase di lettura, mentre altri potrebbero fare più di una ri-scansione prima di decidere se leggere il testo o meno. Per questo è importante un po’ di esperienza nello studio del comportamento di navigazione web.

Cosa può attivare le diverse fasi?

In genere le prime due fasi, di scansione e di ispezione, sono influenzate dalle caratteristiche degli elementi presenti sulla pagina web come:

• la loro posizione
• il loro colore
• la loro grandezza
• font e stili usati nel testo
• e il loro tipo (ad esempio possono essere delle immagini, oppure dei testi o altro)

Come avrai notato inoltre in questa lista, è anche importante l’ordine generale, ossia il bilanciamento degli spazi, la simmetria e tutto quello che risulta ordinato per il tuo cervello. Il disordine è più complesso da gestire e elaborare per il cervello (come può apparire questa lista), di una configurazione più “ordinata” (in termini computazionali più che essere ordinata sarà più prevedibile).

Le qualità importanti dell’oggetto

Dimensione

Ad esempio, aumentare le dimensioni di un oggetto su una pagina web è un modo indiretto per comunicare all’utente che quell’oggetto è importante. Quindi un oggetto più grande è più probabile che venga percepito dall’utente come un punto di ingresso e inizi ad esplorarlo con lo sguardo rispetto ad un oggetto più piccolo.

Posizione

Anche la posizione degli oggetti ricopre una importanza fondamentale. In molte culture, tra cui quella occidentale, le informazioni più importanti sono poste in alto. Inoltre la parte superiore sinistra delle pagine è la parte che viene esplorata per prima, in quanto siamo abituati a cercare l’inizio di testo in alto a sinistra.

Inoltre, quando siamo nella fase di ispezione, tendiamo a limitare la nostra ricerca visiva la dove identifichiamo il punto di ingresso e le aree ad esso adiacenti. Anche la vicinanza tra due oggetti è importante, perchè tendiamo a considerarli in relazione tra di loro.

La ricerca sull’esplorazione visiva ha evidenziato che, in questa fase, la fissazione è limitata all’area attorno al punto di ingresso e segue un ordine sinistra->destra e alto->basso. Questo pattern però si osserva solamente quando il soggetto sta leggendo un testo, non se il soggetto sta elaborando la visione di un oggetto.

Pattern visivi di lettura

Quando un utente sta leggendo una pagina di un sito web può prestare attenzione ad un oggetto alla volta. Questo determina che, nei nostri comportamenti esplorativi di ricerca visiva, noi creiamo delle sequenze di fissazioni, ossia delle gerarchie o pattern, che in un qualche modo si ripetono. Uno dei modelli tipici di scansione di una pagina web è il “pattern a forma di F” o “triangolo d’oro”.

 

Il fatto che spesso gli utenti utilizzo questo pattern a F ci dice che, da una parte, abbiamo la tendenza innata a osservare gli elementi che si trovano in alto a sinistra quando stiamo operando una esplorazione testuale su una pagina web.

Inoltre, come conseguenza, otteniamo che, seguendo questo pattern per analizzare la pagina, corriamo il rischio di non vedere alcuni importanti informazioni che vengono posizionate nella parte destra della pagina.

Per comprendere i pattern di scansione della pagina da parte dell’utente risulta quindi necessario l’eyetracker, strumento che consente di valutare se e quali pattern di elaborazione dell’informazione testuale il soggetto sperimentale sta realmente utilizzando.

Informazioni “below the fold”

Quando una pagina web viene aperta, la parte che viene immediatamente elaborata visivamente è quella che non necessita dello scrolling del mouse. Detta anche “above the fold”. Da questo dipendende che, nella scelta di progettazione ad esempio di una landing page, le informazioni più importanti e le call to action salienti dovrebbero comparire subito, senza necessità da parte dell’utente di fare altro.

Questo aspetto è solo in parte vero. Uno studio del 2011 (Djamasbi et al.,) ha evidenziato come soggetti più giovani (appartenenti alla generazione Y) dessero decisamente meno attenzione alla sezione below the fold. Al contrario, i Baby Boomer (47-65 anni) sono meno soggetti a questo bias e tendono con maggior probabilità a leggere anche la sezione below the fold.

Quali considerazioni per User Experience?

Lo studio di come avviene l’elaborazione visiva risulta quindi un aspetto importante in fase di progettazione e di testing di un prodotto digitale come può essere una pagina, una landing page o la home di un sito web.

In linea generale la conoscenza di questi pattern non deve determinare uno stile di design fisso e rigido, anzi…un buon user experience design sarà progettato per fare in modo che gli utenti possano utilizzare pattern di elaborazione diversi dal solito. Sappiamo ad esempio che:

• Quando le informazioni hanno più a che vedere con l’elaborazione di immagini il pattern a F scompare (Shrestha & Lenz, 2007)
• Quando il testo è su due colonne, cambiamo il nostro sistema di ricerca delle informazioni e leggiamo più facilmente anche il testo che si trova nel basso e nella parte destra della pagina (Djamasbi et al., 2011)

In conclusione

Inoltre esistono diverse variabili difficili da considerare insieme in fase di design. A volte ci sono dei vincoli di contenuto, oppure relative alla tecnologia che si sta utilizzando che richiedono un compromesso. Sicuramente lo studio con gli eye tracker dei comportamenti di analisi di una pagina web, e più nello specifico nei comportamenti di lettura, è un’aspetto importante che può dare informazioni determinati per la buona riuscita di un progetto.

“Gli studi di eye tracking rendono visibile l’invisibile. Gli studi di eye tracking sono un modo per comprendere davvero che cosa sta accadendo in quel preciso momento. Grazie all’eye tracking abbiamo scoperto che modifiche al design dei sottotitoli possono portare a diversi comportamenti da parte degli utenti. Anche piccole modifiche come il colore di background, il posizionamento degli oggetti sulla pagina o l’utilizzo di etichette può determinare un cambiamento significativo nei pattern di scansione. In ultima analisi, questo può fare la differenza tra una call to action che funziona, e una che non funziona” – Marisa Siegel – User Experience Research – Fidelity Investsments

References

Costescu, C., Rosan, A., Brigitta, N., Hathazi, A., Kovari, A., Katona, J., … Efrem, I. (2019). Assessing Visual Attention in Children Using GP3 Eye Tracker. 10th IEEE International Conference on Cognitive Infocommunications, CogInfoCom 2019 – Proceedings, 343–348. https://doi.org/10.1109/CogInfoCom47531.2019.9089995

Djamasbi, S., Hall-Phillips, A., & Yang, R. R. (2013). Search results pages and competition for attention theory: An exploratory eye-tracking study. Lecture Notes in Computer Science (Including Subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics), 8016 LNCS(PART 1), 576–583. https://doi.org/10.1007/978-3-642-39209-2_64

Djamasbi, S., Siegel, M., Skorinko, J., & Tullis, T. (2011). Online Viewing and Aesthetic Preferences of Generation Y and the Baby Boom Generation: Testing User Web Site Experience Through Eye Tracking. Https://Doi.Org/10.2753/JEC1086-4415150404, 15(4), 121–158. https://doi.org/10.2753/JEC1086-4415150404

Faraday, P. (2000). Visually Critiquing Web Pages. https://doi.org/10.1007/978-3-7091-6771-7_17

Gwizdka, J., & Zhang, Y. (2015, August 9). Differences in Eye-Tracking Measures Between Visits and Revisits to Relevant and Irrelevant Web Pages. 811–814. https://doi.org/10.1145/2766462.2767795

Kim, S. H., Dong, Z., Xian, H., Upatising, B., & Yi, J. S. (2012). Does an eye tracker tell the truth about visualizations?: Findings while investigating visualizations for decision making. IEEE Transactions on Visualization and Computer Graphics, 18(12), 2421–2430. https://doi.org/10.1109/TVCG.2012.215

Pan, B., Hembrooke, H. A., Gay, G. K., Granka, L. A., Feusner, M. K., & Newman, J. K. (2004). The determinants of web page viewing behavior: An eye-tracking study. Eye Tracking Research and Applications Symposium (ETRA), 147–154. https://doi.org/10.1145/968363.968391

Shrestha, S., & Lenz, K. (2007). Eye Gaze Patterns while Searching vs. Browsing a Website. Usability News, 9(1), 8. Retrieved from https://www.semanticscholar.org/paper/Eye-Gaze-Patterns-while-Searching-vs.-Browsing-a-Chaparro-Shrestha/e19391c11e90e78d2c3664b366bf721f3eae09bc