Come indirizzare gli occhi degli utenti su un sito Web

Esiste un principio comune nella fotografia secondo cui una foto dovrebbe guidare gli occhi dello spettatore. Ciò viene spesso realizzato con una linea che attraversa la foto. Riconoscere il modo in cui l'osservatore eseguirà la scansione della tua foto è spesso utile per comporre uno scatto e il modo in cui gli occhi dello spettatore scansionano la foto a volte può persino cambiare il significato della foto.

Cosa si può fare nel web design per guidare gli occhi dell'utente attraverso il sito nella direzione desiderata senza che l'utente debba cercare le parti giuste della pagina?

Ad esempio, potresti voler visualizzare il logo, quindi una breve descrizione del sito e un articolo. Oltre a mettere questi elementi in una colonna verticale con uno sotto il successivo e rimuovere tutti gli altri elementi dalla pagina, come porteresti gli occhi dell'utente da uno all'altro?

È tutta una questione di equilibrio tra dimensione, colore e allineamento. Con l'esperienza saprai cosa e quando usare quei trucchi per attirare l'attenzione. Fortunatamente sul sito Web possiamo tracciare questa attenzione e ci sono molti studi scientifici su questo argomento, ad esempio ci sono buoni dati nel sito web di Jakob Nielsen .

Per quanto riguarda il rilevamento degli occhi, voglio dire che per una questione di budget e la realtà nessuno pagherà per un dispositivo di rilevamento degli occhi, o addirittura lo userà. (È già difficile convincere il tuo capo in ufficio a fare poche ore di test di usabilità in qualsiasi fase del progetto ...) Personalmente preferisco fare test di usabilità con persone reali per giudicare la mia composizione nel web design. Anche se questo significa prendere un amico di una persona della mia famiglia e metterlo sullo schermo facendo domande o osservando il loro comportamento.

Il tracciamento oculare non ti dice se l'utente che guarda capisce di cosa si tratta o no. Se sono frustrati esitando o semplicemente ammirando la composizione grafica.

Un grande libro che può aiutarti in questo è Rocket Surgery Made Easy di Steve Krug

Come koiyu ha menzionato nel commento, il eye tracking è ciò che dovresti cercare . Puoi creare progetti con l'intento di guidare gli utenti lungo un percorso, ma l'unico modo per sapere davvero se stai raggiungendo i tuoi obiettivi è fare uno studio di tracciamento oculare.

Detto questo, potresti trovare la mia risposta utile per la domanda, come attirare l'attenzione su un'area specifica di un design? Non è la stessa identica domanda, ma è vicina.

Altre risorse di tracciamento oculare:

• Eye Tracking: il modo migliore per testare l'usabilità dell'app ricca
• Linee guida per la progettazione di moduli Web: uno studio sul tracciamento degli occhi
• Lo studio di tracciamento oculare rivela 12 tattiche di siti Web
• Una domanda StackOverflow sulla configurazione del proprio eye tracker con una web cam

Servizi di tracciamento oculare:

• GazeHawk
• SimpleUsability
• UserCentric
• UserVision

Ecco un suggerimento rapido: includi l'immagine di una persona che guarda o punta verso il tuo oggetto target (ad es. Un prodotto, un pulsante Iscriviti). Ecco un esempio da un annuncio, ma ho visto la stessa tattica sulle pagine Web:

(Fonte: http://www.grokdotcom.com/2007/10/04/how-a-pretty-face-can-push-visitors-away/ )

Posso pensare a due semplici modi per indirizzare gli occhi degli utenti su un sito Web:

1. Usa una numerazione evidente sugli elementi della tua pagina. Puoi vederlo in un numero piuttosto elevato di homepage del sito, oppure puoi fare riferimento a questo file PDF da un sito Web finanziario (anche se penso che non sia davvero un ottimo esempio).
2. Usa le frecce per attirare l'attenzione dell'utente. Questo può essere qualcosa di simile a un diagramma di flusso. Non riesco a pensare a nessun esempio online in questo momento però.