folder Filed in inspirational, neurodesign, UI design
Nell'occhio dell'utente
Come avviene la visione delle pagine e come sfruttare la cosa...
gabriele access_time 8 min read

Fin da quando eravamo piccoli ci hanno fatto credere che il toro odi il colore rosso. Il torero, infatti, gli sventola davanti il capote, un drappo rigido rosso, per farlo "infuriare". Il toro carica quindi il drappo e il torero, con un abile mossa, si scansa e lo infilza con le banderillas.

(Io odio la tauromachia. Ne parlo solo perché mi serve un incipit.)

Poi cresciamo e scopriamo che non è vero. Il toro non distingue i colori. Nella retina del toro sono assenti i coni, ossia quella componente del nostro occhio che consente la visione a colori. E alla fine arriva Wikipedia che ci dice che:

"Entrambe le versioni sono in realtà errate: se da un lato è vero che non basta la vista del colore a scatenare la reazione aggressiva, è altrettanto vero che il rosso è uno dei pochi colori che i bovini riescono a distinguere."
(Fonte)

Quindi, evidentemente, l'aggressività del toro dipenderebbe da altro... Come, per esempio, dal fatto che, prima di entrare nell'arena a farsi matar, gli venga conficcato nel garrese "l'arpón de divisa, un nastro con i colori dell'allevamento, fissato a un arpioncino [...]" (Fonte).

 

 

Il toro quindi riesce a vedere solo i colori caldi, come il rosso. Capirlo è importante, soprattutto per gli allevatori che stanno cercando di crescerlo con la massima aggressività possibile, preparandolo al suo incontro con il torero: dress-code senza rosso obbligatorio...

Questo esempio introduce il tema in questione: siamo sicuri di sapere come gli utenti vedono le nostre pagine? Capirlo può aiutarci in qualche modo?

Ovviamente la risposta è sì, altrimenti cosa scriverei a fare?!?

La Fòvea

Come funziona il nostro occhio ci può aiutare a capire meglio. La maggior parte di noi vede da quando è nato e, di conseguenza, ci siamo abituati a gestire senza accorgercene tutte le distorsioni che l'occhio genera durante la visione. Il nostro cervello compensa a tali errori, rielaborando i segnali che arrivano dai nostri occhi e permettendoci una continua visione di ciò che ci circonda adeguata alle nostre capacità di analisi.

Il cuore di tutto questo processo è grande 1,5 mm2 e si chiama fòvea.

Questa piccola zona della retina è direttamente connessa al nervo ottico e nonostante ne occupi solo l’1% in termini di superficie, ne assorbe il 50% delle risorse. È importante, quindi. In soldoni: è il punto dove la visione si focalizza, dove il nostro occhio mette a fuoco l'impulso luminoso. Tutto attorno la retina si allarga, diradando sempre di più la presenza di coni a favore dei bastoncelli.

Memo dal sussidiario di seconda media (+ Wikipedia):

  • Coni: visione a clori, visione distinta. sono circa 6.000.000 per ogni occhio.
  • Bastoncelli: percepiscono il movimento e sono impiegati dall'occhio in condizioni di scarsa luminosità, tipo di notte. Sono 4.000 volte più sensibili alla luce dei coni.

Come mai il nostro occhio è fatto in questo modo? Ovviamente qui non possiamo che tirare fuori l'evoluzione, Darwin e compagnia cantando: i nostri antenati erano cacciatori ma erano anche prede. Fateci caso... Le prede tendono ad avere gli occhi ai lati del cranio mentre i cacciatori sul davanti. Le prede devono cercare di avere il maggior raggio visivo possibile mentre i cacciatori, per poter cacciare con efficacia hanno bisogno di individuare con precisione l'obbiettivo della loro picchiata, corsa o semplice punta, in stile bracco italiano.

Eravamo un po' a metà strada. Cacciatori cacciabili... Quindi abbiamo dovuto sviluppare una visione laterale molto sensibile. Non in stile coniglietto ma comunque una visione laterale che ci permettesse di reagire velocemente al minimo movimento.

A questo punto ci possiamo ricordare i discorsi fatti sul cervello limbico...

Risultato:

Questa è la nostra reale visione di una pagina di testo. La visione globale di un oggetto è ottenuta dal nostro cervello mettendo insieme tutti i dettagli che l'occhio invia, prima senza mettere a fuoco e poi spostando focale, cercando i dettagli che ritiene importanti.

Quando disegniamo una pagina immaginiamo che venga vista dai nostri utenti così:

Mentre invece, approssimando, viene vista così:

L'occhio mette a fuoco un'area ristretta, rispetto all'insieme. Il cervello della persona si occuperà poi di crearne una versione "ragionata" direttamente nella mente.

Questa fase è cruciale nel generare piacere o disgusto, disorientamento o comfort: l'utente scansiona l'impaginato e individua gli elementi che ritiene utili al suo scopo. Solo in seconda battuta inizierà a focalizzarsi sul contenuto. SPARO: Il 90% del lavoro di chi si occupa di usabilità è concentrato nella prima fase. Permettere all'utente di individuare da subito gli elementi che sono funzionali alla navigazione, alla conversione, alla fruizione di un contenuto, ecc. è il nocciolo del UI Design.

Sia della riconoscibilità dei componenti della pagina, sia della scansione visiva parlerò, probabilmente, in futuro.

Siamo arrivati alla scansione della pagina. Possiamo controllarla, entro certi limiti. Abbiamo gli strumenti per poter indirizzare l'occhio dell'utente, per poterlo guidare all'interno della nostra interfaccia:

  • Dimensione
  • Contrasto
  • Aree vuote

e non ultimo:

  • Animazioni

L'immagine qui sopra è abbastanza banale, ma spiega bene i primi tre.

Resta il quarto: le animazioni.

Croce e delizia di ogni UI/UX Designer. Spesso vengono usate a sproposito o in maniera eccessiva, ma sono comunque molto efficaci. Perché? Darwin: eravamo prede, dovevamo schizzare in piedi e correre se un animale compariva dai cespugli mentre eravamo intenti a bere da un ruscello! Chi non sapeva farlo veniva mangiato. La nostra visione laterale ci ha permesso di sopravvivere. Mentre siamo concentrati a leggere del testo e la nostra fovea sta mettendo a fuoco una parola alla volta, "con la coda dell'occhio" notiamo del movimento in basso a destra... un banner animato! Il nostro occhio si sposta e ci fa capire cosa ci ha distratto.

A tutto questo si aggiunge un altro dettaglio notevole: le animazioni "spiegano". Un bottone statico deve essere letto e interpretato dall'utente:

  • sulla base di esperienze precedenti (ho già interagito con quel bottone: se clicco so cosa succede)
  • sulla base di eventuali testi che anticipano l'azione (Se clicchi sul bottone verde il tuo computer si autodistruggerà)

Un pulsante animato potrebbe già raccontarmi tutto e lo farebbe garantendosi la mia attenzione per tutto il tempo necessario. Oltretutto "non legge nessuno", cit. dal manuale del copy disperato.

Side-effect

Le animazioni sono gradevoli. Ci permettono di cambiare pagina senza offrire shock visivi, creano effetti di rollover piacevoli, possono far sentire l'utente a proprio agio scatenando eventi non bruschi e comunicando anche una sensazione di reversibilità sulle azioni, un po' la differenza tra il CRACK di un bastone di legno che si spacca e il piegarsi di un barra di gomma.

Conclusioni

L'occhio umano è uno strumento potentissimo e molto complicato ma segue delle regole semplici. O meglio: ci sono comportamenti profondi che risultano essere comuni a tutti i nostri utenti. Tramite questi abbiamo quindi la possibilità di controllare come l'utente percepisca le nostre pagine e verificare che ne crei una versione mentale più vicina possibile ai nostri desiderata. Sfruttiamole, però, bene queste caratteristiche della nostra visione, per orientare il visitatore: una pagina con 3/4 banner animati non metterà mai nessuno in condizione di sentirsi a proprio agio perché chiunque verrebbe continuamente distratto dal vero motivo per qui è lì, ossia il contenuto della pagina.

 


Feedback

Feedback... veramente... ci tengo, mi interessa sapere dove sbaglio. ditemelo! Replico tutti i miei post anche su Medium. È una piattaforma che ci può permettere di commentare e ragionare in un modo fantastico. Fateci un salto: ditemi la vostra lì!