Pattern visivi durante la navigazione o la ricerca in sito Web

Traduzione – autorizzata dagli autori – dell’articolo “Eye Gaze Patterns while Searching vs. Browsing a Website“, di Sav Shrestha e Kelsi Lenz, pubblicato su Usability News del gennaio 2007

In breve:

Questo articolo riguarda i percorsi visivi utilizzati dall’utente nell’esplorare pagine Web contenenti testo e/o immagini durante l’espletamento di particolari compiti di ricerca e di navigazione.

Viene qui descritta la performance dell’utente alle prese con tre compiti diversi all’interno di un sito di e-commerce.

I risultati evidenziano che gli utenti tendono a seguire un percorso visuale alquanto uniforme durante la navigazione di immagini, ed un percorso più casuale nell’effettuare ricerche specifiche. Inoltre, sembra che gli utenti seguano il “pattern F” di Nielsen (2006) navigando ed effettuando ricerche in pagine prevalentemente testuali.

Introduzione

Secondo Nielsen (2006) gli utenti tendono a focalizzarsi sulla parte sinistra del corpo di una pagina Web durante la lettura e fissano un numero molto limitato di informazioni posizionate sulla destra. Gli utenti mantengono questo pattern a forma di “F” con poche scansioni orizzontali, la prima più lunga della seconda, ed una lunga scansione verticale (figura 1). La conseguenza di ciò è che gli utenti potrebbero perdere informazioni utili posizionate sul lato destro della pagina. http://www.useit.com/alertbox/reading_pattern.html

Il Pattern F

Figura 1. Il pattern “F” come osservato da Nielsen (2006). (Le aree rosse indicano il numero più elevato di sguardi, seguite dal colore giallo e blu.)

Questo studio intende comprendere se il pattern “F” risulta o meno dipendente dal contenuto della pagina (testo o immagini) e/o sul compito che l’utente deve portare a termine (ricerca specifica o navigazione generica). Questa informazione potrebbe essere molto importante nel determinare dove posizionare specifiche tipologie di informazioni sulle pagine Web.

Metodo

Hanno partecipato alla sperimentazione venti studenti (17 maschi, 3 femmine) non ancora laureati della Wichita State University. Ii 65% di essi era tra i 18 ed i 26 anni. E’ stato utilizzato un PC Pentium IV con monitor 17”, 96 dpi ed una risoluzione di 1024 X 768 pixel. Il monitor era equipaggiato dal sistema di tracciamento oculare Tobil 1750, utilizzato per seguire e catalogare il percorso degli occhi durante il test. Questo sistema di tracciamento campiona la posizione degli occhi dell’utente mediamente ogni 20 ms (50 Hz), e prevede l’hardware dedicato al tracciamento (fotocamera ad alta risoluzione e diodi ad infrarossi) nella cornice del monitor. Questo permette un comportamento naturale da parte dell’utente senza che venga prevista alcuna restrizione per i partecipanti (elmetti o sotto-gola da indossare).

I partecipanti erano seduti a circa 60 cm dal monitor, e tutti hanno portato a termine tre compiti ciascuno (uno di ricerca, uno di navigazione ed uno di ricerca di un prodotto inesistente). I partecipanti avevano 20 secondi a disposizione per completare ciascun singolo compito. Ad essi sono state mostrate due pagine Web, una alla volta (figura 2). Il compito di ricerca relativo alla figura 2° ha richiesto di individuare la categoria di prodotti “zaini”, mentre quello relativo alla figura 2b ha richiesto di rintracciare informazioni su quale tipo di zaino fosse più adatto a viaggi attraverso percorso stretti e frastagliati. I compiti di navigazione per ciascuna pagina consistevano semplicemente nell’esaminare le informazioni presenti sulle pagine senza alcuno scopo particolare. A tutti i partecipanti è stato infine richiesto di trovare una categoria di prodotto relativo ad una mountain bike, come da figura 2a, prodotto non disponibile sul sito.


Figura 2a (sopra) Immagine della pagina con immagini visualizzata dai partecipanti

Figura 2b (sotto) Immagine della pagina testuale visualizzata dai partecipanti.

Risultati e discussione

Pattern visivi nel visualizzare una pagina con immagini

Le zone maggiormente visualizzate (“zone calde”) durante i compiti di ricerca e di navigazione sono evidenziati nelle figure 3 e 4. Nel navigare questa pagina, gli utenti hanno effettuato la scansione delle categorie secondo un pattern orizzontale (sinistra verso destra e destra verso sinistra) rigo per rigo. Si noti che l’area immediatamente visualizzata dalla pagina (“above de fold”) ha ricevuto la maggior parte delle “occhiate”, anche se tutti gli utenti hanno effettuato lo scrolling della pagina durante la navigazione.

Figura 3. “Zone calde” durante la navigazione delle categorie di prodotti. L’area “al di sotto della piega” (below the fold) si trova oltre la quarta riga di categorie di prodotti.

Durante la ricerca della categoria zaini, gli utenti hanno mostrato di seguire un percorso meno sistematico. Il tracciamento degli spostamenti oculari relativo a questa pagina è stato fermato subito dopo l’identificazione della giusta categoria. Per questo lo schema delle zone calde qui sotto evidenzia esposizioni molto limitate per le aree diverse da quella d’interesse.

Figura 4. Zone calde durante la ricerca della categoria zaini.

Un campione di percorso visivo degli utenti che navigano la pagina (le prime 3 immagini della figura 5) mostrano anche il pattern di ricerca da sinistra verso destra. Invece il pattern utilizzato per la ricerca della categoria zaini (le ultime 3 immagini della figura 5) evidenzia un percorso maggiormente casuale.

Figura 5. Diagrammi relativi alla navigazione generica (sopra) ed alla ricerca (sotto) in una pagine contenente le categorie di prodotti. (il cerchio blu indica la durata delle occhiate, a cerchi più grandi corrispondono occhiate più prolungate; e le linee blu che uniscono i punti indicano i veloci spostamenti degli occhi).

La figura 6 mostra il diagramma delle zone calde relativo alla ricerca dell’inesistente categoria mountain bike. L’utente ha percorso quasi uniformemente tutte le categorie con una più forte concentrazione nella zona superiore sinistra.

Figura 6. Diagramma delle visualizzazioni relative alla ricerca della categoria mountain bike, inesistente.

Ulteriori approfondimenti relativi ai diagrammi di visualizzazione, evidenziati nella figura 7, hanno evidenziato come ciascun utente ha adottato un pattern unico e casuale durante la ricerca dell’inesistente categoria mountain bike; è interessante osservare come molti utenti non hanno fissato lo sguardo su tutte le categorie.

Figura 7. Diagrammi visivi individuali durante la ricerca dell’inesistente categoria mountain bike.

Pattern visuali con pagine testuali

La figura 8 mostra i percorsi visuali corrispondenti alla navigazione ed alla ricerca in pagine di testo. Durante entrambi i compiti, gli utenti sembravano aver adottato il pattern “F” suggerito da Nielsen (2006), facendo registrare un numero maggiore di occhiate in corrispondenza dell’inizio di ciascuna riga piuttosto che del suo termine, ed ancora un maggior numero di visualizzazioni per le primissime righe rispetto alle successive.

Figura 8. Schema delle visualizzazioni durante i compiti di navigazione (sinistra) e ricerca (destra) in una pagina testuale.

Alcuni esempi di percorsi visivi individuali per la navigazione generica (primi 4 schemi) e per la ricerca di elementi specifici (ultimi 4 schemi) sono evidenziati nella figura 9. Si può osservare come il grafico relativo ai compiti di navigazione è in qualche modo più dispersivo rispetto a quello relativo alla ricerca specifica, dove si registra una concentrazione maggiore nella porzione superiore della pagina Web. Questo è dovuto al fatto che i partecipanti, nel ricercare specifiche informazioni, tendevano a leggere il testo con maggiore accortezza rispetto alla navigazione generica. In ogni caso, è possibile evidenziare alcune differenze individuali nell’ambito del secondo schema della navigazione e nel terzo schema della ricerca, nei quali è presente un pattern invertito.

Figura 9. Diagrammi individuali relativi alla navigazione (sopra) ed alla ricerca (sotto) nella pagina testuale.

Conclusione

Questo studio ha di fatto riprodotto quel che Nielsen nel 2006 ha chiamato “pattern F”, relativo alla visualizzazione di pagine Web essenzialmente testuali. Con poche eccezioni, sì è anche evidenziato che il compito di navigazione generica tende a seguire questo stesso pattern, anche se in maniera meno puntuale rispetto al secondo compito. Questo pattern e le relative eccezioni si trovano nella figura 9.

La visualizzazione secondo il pattern “F” non sembra essere adottata nella navigazione e nella ricerca in presenza di pagine basate su immagini. La maggior parte degli sguardi dei partecipanti si è concentrata sulle categorie “above the fold” , come evidenziato dalla figura 3. I partecipanti hanno mostrato una grande efficienza nel rintracciare una specifica categoria, anche se hanno adottato pattern del tutto personali. Il loro sguardo si è fermato su 8-15 categorie prima di rintracciare quella giusta. Dovendo rintracciare una categoria inesistente, gli schemi visivi hanno evidenziato una maggiore uniformità tra “above” e “below the fold”, diversamente dal compito di ricerca specifica per il quale le categorie al di sotto del fold non hanno ricevuto molti sguardi.

Questi risultati ribadiscono l’importanza della sintesi nell’utilizzare testo sulle pagine Web. Visto che la parte destra della pagina ed il contenuti al di sotto del fold vengono facilmente ignorati, le pagine dovrebbero essere strutturate in maniera tale da far ricadere le informazioni importanti all’interno del pattern “F”.

Resta comunque da approfondire come si modifica il pattern visivo in presenza di testo su più colonne.

Per quanto riguarda le pagine basate su immagini, risulta maggiormente efficace il posizionamento dei prodotti più importanti al di sopra del fold, anche se resta da stabilire quale tipologia di immagini attraggono l’attenzione maggiormente, e come gli schemi di visualizzazione si combinano in presenza di pagine contenenti in egual misura testo ed immagini.

Potrebbero interessarti anche i seguenti articoli

  • Progettazione Universale e Mappe CognitiveProgettazione Universale e Mappe Cognitive Premessa Il principio di progettazione universale (universal design) ha origine in architettura e nel design dei manufatti; lo scopo di questi principi di base è […]
  • Surf Right ToolbarSurf Right Toolbar Fino ad ora il panorama delle toolbar da installare su questo o quel browser era essenzialmente orientato al punto di vista dello sviluppatore, visto che è su di esso […]
  • Contenuti alternativi e motori di ricercaContenuti alternativi e motori di ricerca Riprendendo, anche se solo in parte, una discussione iniziata in lista Itlists IWA Webaccessibile, ho ricevuto alcuni feedback personali da parte di utenti che mi […]
  • L’accessibilità di AJAXL’accessibilità di AJAX Traduzione dell'articolo "Ajax accessibility" di John Resig Una diffusa preoccupazione sulla maggior parte delle applicazioni Ajax riguarda la loro accessibilità. E' […]
  • 4 – Le mappe cognitive4 – Le mappe cognitive Durante le tre fasi "umane" descritte in precedenza, ed in generale durante un qualsiasi processo di apprendimento, l’utente apprende il funzionamento dell’applicazione […]
Condividi:

Informazioni sull'autore

Roberto Castaldo
Roberto Castaldo
Sono nato e vivo a Napoli, ed opero professionalmente nel mondo dell'informatica da più di vent'anni. In realtà l'informatica, insieme alla musica e ad altre poche cose, è stato da sempre un mio chiodo fisso, e la buona sorte mi ha aiutato a trasformarlo in un mestiere. Sin dalle mie primissime esperienze lavorative - insegnavo dattilografia ed i primi rudimenti di informatica in una scuola privata - mi sono trovato a mio agio nel settore della formazione e della divulgazione, certamente aiutato dai miei studi classici. Nel 1987 ho iniziato la mia attività come insegnante d'informatica in un Istituto Professionale Statale - per circa due anni sono stato il più giovane insegnante di ruolo d'Italia. Ho avuto svariate esperienze anche nel settore privato come sviluppatore (TPascal - lo ricordate? - VB, ASP e, più di recente VB.NET ed ASP.NET), ma soprattutto come docente e come divulgatore. Ho effettuato attività di formazione presso le più grandi realtà imprenditoriali italiane (IBM, Omnitel, Telecom Italia, TIM, Unicredito, Ekip, BNL, SSGRR), ma anche all'estero in qualità di docente e/o progettista di percorsi formativi; gli argomenti spaziano dal mondo Office fino al multimedia ed alla programmazione avanzata ASP ed ASP.NET. Ho collaborato con l'Istituto Italiano per gli Studi Filosofici di Napoli, ho redatto articoli/tutorial per un'importante rivista informatica (Win98 Magazine), ed ho partecipato allo sviluppo di CD-Rom Multimediali (IBM, Selfin, BNL) curando personalmente la registrazione dei commenti audio ed il montaggio delle musiche (CoolEdit), l'eventuale connessione a database remoti, l'assemblaggio degli elementi testuali, grafici e multimediali (Director 8) fino alla creazione del master definitivo. Negli anni 1998-2000 ho collaborato con la Gazzetta dello Sport Online curando, in occasione dei più importanti avvenimenti sportivi (Mondiali ed Europei di calcio, Giro d'Italia, Campionato di Serie A) le pagine contenenti la traduzione in inglese e francese degli articoli in italiano. Il mio compito consisteva nell'inviare ai miei traduttori la cronaca in italiano, riceverne la traduzione, creare le pagine inglesi e francesi del sito www.gazzetta.it e pubblicarle sul server, il tutto entro 90 minuti dalla fine dell'evento. Nel frattempo, mi avvicinavo in maniera sempre più approfondita alle problematiche legate all'accessibilità di siti web, progettando percorsi di formazione ad hoc, ed aderendo entusiasticamente al progetto webaccessibile.org. Sono stato per diversi mesi membro del XML Protocol Working Group del W3C, ed attualmente partecipo ai lavoro del WAI Web Content Accessibility Guidelines (WCAG) Working Group e del E&O Education ad Outreach Working Group.

Commenti

Nessun commento

    Rispondi

    Link e informazioni