Come Eye Scanning influisce sulla gerarchia visiva in UX Design
Mentre millenni di arte, dai vasi greci alle cappelle italiane, hanno plasmato la nostra comprensione di cosa sia la bellezza, la tecnologia relativamente recente che si cela dietro l'eye tracking aggiunge una nuova dinamica al modo in cui percepiamo visivamente il mondo. Più precisamente, questa nuova entusiasmante scienza ci sta aiutando a capire meglio - e a migliorare il design - i siti web che sono sia efficaci che estetici.
Il web design (come arte visiva) segue molte delle stesse regole delle forme d'arte più tradizionali. In questo articolo illustreremo brevemente l'importanza dell'organizzazione visiva, quindi spiegheremo in che modo i risultati del rilevamento degli occhi possono migliorare il layout delle interfacce web.
Creare organizzazione visiva
Non sorprende che l'impatto di un sito Web sul suo successo, ma è importante individuare i motivi per cui. Nel suo articolo Comunicazione con la gerarchia visiva , Luke Wroblewski, autore e Senior Principal of Product Design di Yahoo !, spiega che la presentazione visiva di un'interfaccia web è essenziale per:
Guida
Un'interfaccia ben fatta può guidare gli utenti da un'azione all'altra senza sentirsi prepotente. Indipendentemente da ciò che pensi delle loro pratiche commerciali, non c'è dubbio Uber è un esempio di un sito Web incredibilmente semplice ma strutturato. Le proposte di valore sono in cima alla lista, seguite da un divertente slider per conoscere le diverse opzioni di auto e terminare con il logico passo successivo per trovare le giostre nella tua città.
Comunicazione
Accoppiando diversamente a differenza di informazioni, l'interfaccia utente può creare collegamenti nella mente dell'utente, comunicando messaggi senza dire nulla. Guarda il famoso sito web di design Abduzeedo : le categorie generali sono in cima, i contenuti in primo piano nel mezzo e le categorie dettagliate nel footer.
Creare un impatto emotivo
Non commettere l'errore di pensare che il tuo sito Web sia semplicemente uno strumento meccanizzato. I siti web hanno il potenziale per creare connessioni emotive, e se i tuoi non lo fanno, lo faranno i tuoi concorrenti. In effetti, le persone potrebbero essere più inclini a perdonare le carenze della tua interfaccia se produci un positivo risposta emotiva . MailChimp è un perfetto esempio di un sito con un'interfaccia che è utilizzabile, spensierata e davvero divertente da usare.
Il prevedibile occhio umano
A volte, sembra che i tuoi occhi abbiano le loro menti. Anni di evoluzione ci hanno dato l'istinto di individuare oggetti e movimenti che riteniamo importanti, sia che si tratti di una sexy passeggiata per strada o di un tenero cartone animato che fa pubblicità al miele. Mentre il peso relativo che poniamo su ciò che è importante può variare da persona a persona, l'unica costante sono i meccanismi su cui si comportano. Su larga scala, la maggior parte delle persone segue le stesse tendenze quando visualizza una pagina web.
Di questi trend, ce ne sono due di cui parleremo in dettaglio. In un articolo sui principi visivi , Alex Bigman, Design Writer per 99Designs, mostra come, per le culture che leggono da sinistra a destra, questi due modelli sono i più comuni e più utili quando si progetta il layout di un sito web.
Il primo, il modello F, è usato principalmente per il testo (ma può essere adattato per altri scopi). Il secondo, il modello Z, può essere utilizzato per qualsiasi layout visivo. Spiegheremo i diversi pro e contro per ciascuno di seguito.
F-pattern
L'F-Pattern è la tendenza visiva che emerge su pagine che sono pesantemente caricate di testo, tipicamente blog, fonti di notizie, articoli, ecc.
Di fronte a un blocco di parole, la maggior parte dei lettori prima scansionano una linea verticale lungo il lato sinistro del testo, in genere alla ricerca di parole chiave o punti di interesse nelle frasi iniziali del paragrafo. Alla fine il lettore trova qualcosa che gli piace e inizia a leggere normalmente, formando linee orizzontali. Il risultato finale è qualcosa che assomiglia alle lettere F o E.
Jakob Nielson del Nielson Norman Group ha condotto uno studio di leggibilità basato su 232 utenti che eseguivano la scansione di migliaia di siti Web. Dalla sua ricerca, ha registrato ciò che crede le implicazioni pratiche del modello F:
- Gli utenti leggeranno raramente ogni parola del tuo testo.
- I primi due paragrafi sono i più importanti e dovrebbero contenere il tuo hook.
- Inizia paragrafi, sottotitoli e punti elenco con parole chiave allettanti.
Come sempre, l'angolo in alto a sinistra è il più importante, poiché è qui che iniziano tutte le culture di lettura da sinistra a destra. L'utente di solito legge orizzontalmente attraverso l'intestazione, quindi ecco un buon posto per una barra di navigazione e / o un invito all'azione. Quindi l'utente esegue la scansione in verticale lungo il lato sinistro, fino a quando non incontra il contenuto che li interessa. Infine, l'utente termina sul lato destro della pagina, un ottimo posto con un invito all'azione o pubblicità. Non lasciare che la barra laterale sommerga il contenuto.
Ma F-Pattern non è un modello - in realtà non è una pratica esatta, ma più di una guida generica elaborata dalle tendenze della maggior parte degli utenti. Tieni questo a mente perché il modello F perde la sua efficacia dopo le prime file della F.
Kickstarter utilizza un layout di scheda per mostrare i progetti di funzionalità e non diventare noioso visivamente dopo i primi 500 pixel.
D'altra parte, iZettle prende un approccio più convenzionale a F-Pattern sulla loro homepage. Tuttavia, riescono a evitare un look basato su modelli sovrapponendo la copia primaria ("Fai crescere la tua azienda con iZettle") e inviti all'azione su un'immagine di sfondo di grandi dimensioni. Lo considereremmo il minimo indispensabile per adattare questo modello di lettura al layout dell'interfaccia.
Z-pattern
Inoltre, Z-Pattern è il modello più semplice e universale, usato comunemente in qualsiasi pagina web basata sul testo. Il lettore dapprima esegue la scansione in orizzontale lungo la parte superiore, esegue il dardo verso il basso e indietro sul lato sinistro, quindi esegue nuovamente la scansione orizzontalmente sul fondo.
È importante capire il versatile Z-Pattern , poiché risponde ai requisiti del sito Web principale come gerarchia, branding e inviti all'azione. La sua bellezza è nella sua semplicità e un layout ideale per i siti incentrati su un invito all'azione. Tuttavia, per contenuti più complessi o eccessivi, la Z-Pattern potrebbe essere troppo semplice.
Pensi che Z-Pattern sia adatto alla tua pagina? Ecco alcune best practice per ottimizzare i vantaggi:
- Sfondo : conserva lo sfondo a cui appartiene: sullo sfondo. Non vuoi distrarre il tuo lettore.
- Punto # 1 - Come punto di partenza, questo è generalmente il punto in cui vuoi posizionare il tuo logo.
- Punto # 2 - Mentre l'invito all'azione principale dovrebbe venire dopo, ecco un buon posto per un invito all'azione secondario, che punteggia una barra di navigazione orizzontale. (Un bel cursore grafico o di immagine aiuta a separare la parte superiore e inferiore della pagina, incoraggiando il lettore a rimanere sul percorso prevedibile del modello Z.)
- Punto # 3 - Questo è un bel posto per attirare l'attenzione per altri collegamenti, o in alternativa per guidare la vista dell'utente verso l'obiettivo finale: Punto # 4.
- Punto # 4 - Come "traguardo", questo è il posto perfetto per il tuo invito all'azione principale.
La prima cosa che vorrai fare è dare la priorità agli elementi della tua pagina per te stesso in modo da conoscere quelli più importanti e meno importanti. Da lì, si tratta semplicemente di assegnarli agli appropriati "punti caldi".
Inoltre, lo Z-Pattern può essere ripetuto ed esteso su tutta la pagina. Basta dare un'occhiata a come Evernote zig-zag verso il basso attraverso call-to-action e punti vendita.
DropBox prende un approccio visivamente più semplice a questo schema a zig-zag eliminando qualsiasi immagine di sfondo. Al contrario, più funzionalità sono integrate nel layout poiché un invito all'azione "Ulteriori informazioni" aiuta a connettere ogni sezione del modello di avvolgimento mentre l'occhio si fa strada lungo la pagina. Ciò aiuta anche i lettori informati a fare clic sulla prossima pagina pertinente senza dover prima leggere tutta la copia.
Vista in previsione
La grande progettazione dell'interfaccia dovrebbe essere come una mano invisibile che guida i lettori alla velocità del pensiero. L'aspetto importante delle tendenze F-Pattern e Z-Pattern è che puoi inserire il tuo contenuto più importante in cui il lettore "inciampa" in modo naturale, invece di cercare di costringerli a guardarli.
La sottigliezza è un grande vantaggio per qualsiasi layout di pagina, e questi modelli possono fare la differenza tra suggerire qualcosa al tuo lettore contro spingendolo in gola.
Immagine in primo piano, usi immagine dell'occhio umano via Shutterstock.