Web design e neuroscienze, parte 3: checklist finale per un sito a prova di istinto umano

In breve:

• nel capitolo numero 1 ci dicevamo: se vuoi che le persone sappiano muoversi nel tuo sito, devi agevolare gli automatismi dei loro cervelli. Fare neuro progettazione web dev’essere la natura stessa del fare progettazione web
• nel capitolo numero 2 capivamo come funziona la percezione di una pagina web (prima istinto, poi abitudine e solo alla fine, forse, razionalità) e di come il sistema neurale delle persone prenda decisioni “al loro posto”
• in questo terzo capitolo snoccioleremo la lista di aspetti sine qua non con cui ci eravamo lasciati: usala per verificare se il tuo sito web rispetta l’istinto con cui le persone lo navigano!

1 – in 50 millisecondi le persone “decidono” se il tuo sito sarà usabile oppure no.

Funziona così: l’occhio percepisce la pagina web in un’istante, come una fotografia, e la invia al cervello che valuta quanti oggetti sono presenti (intesi come linee/forme e colori) e come sono disposti nello spazio. Il mandato è scansionare e avere un quadro chiaro della situazione il più velocemente possibile: in meno di un decimo di secondo.

Questi 50 millisecondi non sono sufficienti per leggere un menù, un logo o il titolo di pagina, ma sono sufficienti per capire se “c’è feeling” tra noi e il sito, se il sito ci piace esteticamente, e lo capiamo in base alla complessità visiva di ciò che vediamo: meno oggetti (parole, forme, immagini, persone) ci sono e/o più sono ordinati e chiari fra loro, più la pagina web ci piace perché ci agevola nel processo di scansione e nel prepararci al suo utilizzo.

Ovvero: in meno di un decimo di secondo le persone capiscono ad occhio se predisporsi della serie “ehi, questo sito sarà molto facile da usare” oppure “oddio, è già un casino adesso, pensa dopo”. Tutto da dimostrare con il proseguo della navigazione, certo, ma se avrai imbastito un sito all’apparenza usabile avrai persone che navigano in maniera più tollerante e più inclini all’esperienza positiva (e non al rimbalzo, per esempio!).

(Gitte Lindgaard, “Attention web designers: You have 50 milliseconds to make a good first impression!”)

Come progettare le pagine sopra la linea di scroll per generare una buona prima impressione:

• esprimi i concetti in frasi molto brevi (5/15 parole)
• evita elementi sovrapposti fra loro (es. foto+testo)
• inserisci call to action contrastanti con il resto degli elementi
• suddividi lo spazio in aree ben distinte (sfrutta i riquadri e/o lo spazio “bianco”)
• usa fotografie visivamente poco complesse (poche linee, pochi colori e pochi soggetti)
• allinea gli elementi in una griglia

2 – il primo obiettivo di una persona che visita un sito non è nè acquistare nè contattarvi: è risparmiare energie.

Di come ogni attività che svolgiamo consumi energia immagazzinata sotto forma di glucosio ne parlavamo bene nel capitolo due. Tra tutte, le attività mentali sono tra quelle più dispendiose, per questo la nostra testa ama le cose facili da fare/usare (ricordate la storia degli antenati? Risparmio di energia = più energia per scappare dai predatori!).

In un sito, una volta creata la prima impressione, iniziamo a fare quello che dobbiamo fare, ma ogni volta che l’occhio si sposta per cercare un elemento consumiamo energia, ogni volta che dobbiamo leggere una parola consumiamo energia, ogni volta che dobbiamo scorrere la pagina consumiamo energia. E alle persone non piace consumare energia, e se il tuo sito le obbliga a spenderne più del dovuto puoi star sicuro che se ne andranno.

Il sito ideale prevederebbe, per ogni necessità, un solo oggetto al centro di una pagina bianca. Una sorta di genio della lampada versione sito web. Ma questo non sempre è possibile. Ogni sito è inserito in un contesto specifico, ha taget specifici e obiettivi specifici. Partire dalla conoscenza di questa triade per costruire il sito significa garantire un buon risparmio di energia alle persone!

Cosa fare per trasformare il tuo sito in un sito a basso consumo:

• scopri di cosa hanno bisogno le persone e metti questi bisogni nei primi livelli di navigazione (hai presente la SEO?)
• in homepage fai trovare alle persone una proposta di valore degna di questo nome
• posiziona le call to action principali di ogni pagina sopra la linea di scroll (mobile!!!)
• link e bottoni devono essere parlanti (e visibili) e spiegare bene cosa accade dopo il clic
• sfrutta il titolo di ogni pagina per raccontare il succo specifico di ogni pagina, con meno parole possibili (da 1 a 6 sarebbe il numero perfetto per facilitare l’occhio)
• no a muri di testo: diluisci il contenuto e facilita le persone a trovare le informazioni (per questo serve un paragrafo specifico)

3 – insegna alle persone a saper usare il tuo sito come se fossi lì con loro, e puoi star sicuro che gli piacerai.

Siamo sempre lì, risparmio di energie. Quando entriamo in un sito nuovo non sappiamo nulla della sua struttura e di dove sia ciò di cui abbiamo bisogno. È necessario prima imparare a usarlo.

Man mano che scansioniamo gli elementi che vediamo nell’interfaccia, creiamo un modello mentale della struttura del sito e del suo funzionamento. Questo ci aiuterà a capire dove guardare e cosa cliccare per trovare ciò che ci serve e influenzerà il modo in cui risolveremo eventuali blocchi di navigazione. Più questo modello mentale è efficace, più avremo imparato a muoverci rapidamente nel sito, più energia risparmieremo per fare quello che dobbiamo fare.

D’altra parte, più questo modello è sbagliato, più ci sentiremo disorientati, più faremo fatica ad utilizzare il sito.

È un processo che, una volta entrati in un sito, attiviamo subito (prendendo spunto anche dai modelli già costruiti su altri siti) e che vogliamo sia fatto bene e in fretta. Per aiutare le persone che navigano in questo è importante sfruttare quegli elementi che in una pagina ne suggeriscono la struttura e i contenuti.

Che elementi seminare nel tuo sito per insegnare alle persone ad usarlo:

• in homepage, racconta le macro sezioni del sito e le loro sottosezioni
• in una pagina con contenuti diversi e suddivisi, inserisci sopra la linea di scroll una lista di àncore alle diverse parti (un sommario cliccabile)
• in pagine di listing generici (es: sport), posiziona sotto il titolo dei bottoni alle sotto sezioni del listing (es: calcio – basket – pallavolo)
• se una pagina prevede una sezione importante sotto la linea di scroll, inserisci un’àncora sopra lo scroll che porti alla sezione (es: più dettagli)
• nei listing di categoria più filtri ci sono meglio è: raccontano alle persone tutto ciò che possono trovare nella lista

4 – un oggetto che si muove verrà inevitabilmente notato da chi naviga la pagina, sia che sia utile sia che sia inutile.

All’interno della retina dell’occhio umano sono presenti due tipi di fotorecettori: i coni e i bastoncelli. Semplificando di molto: i coni sono concentrati al centro dell’occhio, sono responsabili della visione nitida e si occupano della percezione dei colori. I bastoncelli, distribuiti ai lati, funzionano meglio al buio e sono più sensibili alle variazioni di luce. Proprio questa sensibilità alla luce che cambia rende i bastoncelli, e quindi la nostra visione periferica, attenti agli oggetti in movimento. In poche parole: una cosa che si muove nel nostro campo visivo non può non essere notata dai nostri occhi. Non serve nemmeno che il cervello elabori l’oggetto in movimento, gli occhi si sono già accorti che c’è qualcosa che si muove (potenziale predatore minaccioso?) e ci mettono in allerta.

Cosa significa tutto ciò applicato a un’interfaccia? Che se l’oggetto che si muove è poco utile (slider automatici, gif di annunci, …) farlo muovere sta solo sovraccaricando i nostri occhi che non possono non notarlo, infastidendo le persone e distraendole dal loro scopo. Se invece è un oggetto utile (notifica, errore commesso in un form) farlo muovere assicurerà che venga notato.

Come sfruttare la meccanica degli occhi delle persone senza infastidirle:

• inserisci una piccola animazione per segnalare eventuali errori (oggetto che “vibra”, messaggio di errore che “pulsa”)
• usa le micro interazioni per comunicare la cliccabilità di link, bottoni, oggetti cliccabili, fotografie 
• rendete i movimenti del vostro sito poco scattosi grazie alle transizioni (menù, scroll, caricamenti.. )
• gli slider funzionano bene sui social, meno sui siti. Se proprio non potete farne a meno, non rendeteli automatici.
• attenzione alle gif dei banner adv: soprattutto in siti professionali infastidiscono molto, ancora di più se fuori contesto
• presente quando aprite un sito e questo continua a caricare testi/foto/banner/popup spostando la vista ogni mezzo secondo? Ecco, ottimizzare ed evitare grazie

5 – ogni persona di fronte ad un errore compiuto sul sito perde ogni capacità risolutiva.

E per errore non si intende solo l’aver sbagliato a digitare la propria mail nel form di contatti, quanto il non trovare la voce di menù che ci si aspetta di trovare, non individuare l’errore che è stato compiuto in un form, non capire che bottone dover cliccare per proseguire, ovvero tutti quegli errori generati da un sito mal strutturato, non causati dalla persona che naviga o digita.

Quando abbiamo a che fare con internet ingenuamente pensiamo di aver a che fare con qualcosa di perfetto, di più intelligente di noi. Così ogni volta che apriamo un sito ci aspettiamo che tutto sia come dovrebbe essere: facile, chiaro, usabile. Non è così, i siti sono fatti da persone e sono pieni di errori di progettazione, ma quando navighiamo una pagina web di fronte ad un errore diamo sempre la colpa a noi stessi e andiamo in ansia. E l’ansia è un’emozione che fa focalizzare: ci aiuta a concentrarci su ciò che la provoca, con il risultato che non noteremo nient’altro e per qualche minuto non saremo più capaci di ampliare la mente per risolvere il problema.

In che modo aiutare una persona in preda all’ansia da “non so cosa fare”?:

A questo punto bisognerebbe affrontare il tema della prevenzione all’errore (come strutturare tutto il sito e i suoi contenuti per non far compiere errori e come sfruttare i micro contenuti per anticipare i dubbi delle persone), ma è un tema davvero ampio che merita un approfondimento a sè. Mi limiterò quindi a darvi tre consigli, ma fatemi una promessa: prima di dire “che banalità” controllate che il vostro sito ne sia esente. Mi imbatto in questi errori troppo spesso perchè tutti li rispettiate:

• colora i messaggi di errore e/o gli elementi dov’è stato commesso l’errore
• fai comparire il messaggio di errore vicino all’elemento dov’è stato commesso l’errore
• nei messaggi di errore, indica dove è stato commesso l’errore e chiarisci in che modo correggerlo (No, “si è verificato un errore” non è un messaggio chiaro e non aiuta a capire cosa fare per correggerlo)

6 – per ogni minuto trascorso sul tuo sito, c’è un minuto trascorso sui siti di tutti i tuoi competitor. Ti conviene conoscerli.

L’era delle grandi navigate in un unico sito è finita da un po’ (se è mai esistita), oggi le persone sono abituate al confronto di prodotti, di professionisti, di servizi. Internet offre tutto nello stesso posto e giustamente le persone ne traggono vantaggio saltellando da un sito all’altro. Ciò significa soprattutto due cose per il tuo sito: deve rappresentare bene la famiglia di siti a cui appartiene e l’esperienza utente dev’essere molto veloce ed efficiente.

La questione della velocità e dell’efficienza è autoesplicativa: se une persona ha 10 minuti per cercare una nuova borsa di pelle e ha aperto i primi cinque risultati di google, a ognuno di questi dedicherà 2 minuti di media. È meglio che il tuo sito garantisca che in questo poco tempo le persone riescano a capire dove sono atterrate, trovare quello che cercano in base ai loro scopi, fidarsi del prodotto e della tua azienda e completare il processo d’acquisto senza dubbi. E che lo faccia meglio di come fanno i tuoi competitor.

Per quanto riguarda la famiglia di siti: esiste un concetto, la prototipicità, che nell’internet funziona un po’ come una magia. Più un sito è prototipico ( = esemplare) della famiglia di siti a cui appartiene, più le persone si fideranno e sapranno di essere arrivate nel posto giusto se cercavano proprio qualcosa di inerente a quella famiglia. Esempio: una persona cerca un centro estetico. Tu sei il proprietario di un centro estetico. Il tuo sito sembra il tipico sito di un centro estetico. Bingo!! La persona sarà meno diffidente e si sentirà a proprio agio nel tuo sito più in fretta.

Oltre all’efficienza e alla prototipicità, come sfruttare i siti dei tuoi competitor a tuo vantaggio?:

• studia le loro architetture: c’è qualche elemento ricorrente? Valuta di inserirlo nella tua
• verifica che il tuo sito sembri appartenere alla tua famiglia di siti
• sfrutta immagini e parole per far capire subito di cosa tratta il tuo sito e a che famiglia appartiene
• di nuovo sulle architetture degli altri: se c’è qualche elemento interessante, ricordati che non è copiare, è prendere ispirazione…
• i siti degli altri hanno una struttura molto simile (es. giornali online)? Discostarsi non è sempre sbagliato, ma di sicuro è un rischio
• sii migliore degli altri: costruire il tuo sito copiandone un altro ti farà copiare anche i loro errori e non ti differenzierà

7 – la lettura è un meccanismo complesso per l’occhio umano e la minaccia del “cheppa**e” è sempre dietro l’angolo.

Ripassiamo: ogni volta che guardiamo qualcosa, l’occhio scansiona in continuazione tutti gli oggetti nel proprio campo visivo, intesi come un insieme di linee. In questo senso, un testo non è altro che è un oggetto da scansionare che, a differenza di altri, è pieno zeppo di linee. Ogni lettera è composta da una o più linee, ogni parola da più lettere, ogni paragrafo da più parole e il tutto risulta in tanto, tanto, tanto lavoro da fare per i nostri poveri occhi, per di più appesantiti dalla luminosità degli schermi.

Ah, e dopo che abbiamo scansionato le linee che compongono le lettere, il cervello deve verificare la conoscenza di ogni carattere, valutare l’insieme di caratteri e il significato che sappiamo (o meno) associarci per poi inserirlo nel contesto “frase” e – forse – alla fine comprendere tutto il paragrafo.

Wow.

Quindi, troppo testo mette in difficoltà? No, la questione non è il quanto, ma il come questo testo viene presentato.

Parlando di pagine testuali, le persone preferiscono avere tutto nella stessa pagina (tanti click e tanti caricamenti di pagina sono scomodi) ma bisogna stare attenti a rendere il testo amichevole, altrimenti qualsiasi cervello davanti ad un muro di testo vorrà solo essere graziato (oltre a finire per associare la complessità di lettura all’oggetto del testo, non capendo nulla e generando un’esperienza negativa).

Come evitare che i gli ingombri di testo facciano scappare le persone?

• frasi brevi.
• curate la tipografia: il titolo visibilmente più grande del sottotitolo, il sottotitolo più grande del paragrafo, etc
• i font grafici sono difficili da scansionare, preferite dei font semplici
• suddividete il testo in piccoli capitoli a cui dare un titolo (visibile!), eventualmente apribili e richiudibili
• le spaziature fra gli elementi (titolo/sottotitolo/paragrafo) sono le vere aiutanti della leggibilità!!
• non siate timidi con l’interlinea
• elenchi puntati e bold sono pura magia: aiutano i lettori che vogliono solo una panoramica veloce (la maggior parte) ad individuare le cose importanti

Conclusioni e Saluti

Adesso che avete seguito le tre puntate di questa guida pratica al neuro-design non vi resta che verificare che i vostri siti rispettino tutti i requisiti elencati! Se sì, cervelli salvaguardati e persone più felici. Se no, cercate subito di rimediare e di volere più bene, d’ora in avanti, all’istinto delle persone che vi vengono a trovare online.