Psicologia del design e neuroscienze di Awesome UX

Pubblicato: 2022-03-11

Ascolta la versione audio di questo articolo

C'è una scienza sul motivo per cui particolari design catturano la tua attenzione e ti fanno pompare il sangue.

Il cervello umano è pigro, di parte e incline a scorciatoie.

Lo studio dell'esperienza dell'utente sulla cognizione umana può essere sdolcinato, non scientifico e pieno di falsi presupposti, forse è colpa di un cervello pigro.

La cognizione è complessa e molti fattori giocano nelle reazioni istintive o in un'impressione istantanea. Quando chiedi a qualcuno: "Perché l'hai fatto?" c'è un'alta probabilità che non saranno in grado di rispondere o che interpreterai erroneamente la loro risposta.

Entra in neuroscienze.

psicologia del design e neuroscienze dei grandi ux

Mentre metodi di ricerca come l'osservazione e il colloquio spesso richiedono che il ricercatore e il partecipante dell'esperienza utente facciano ipotesi, la tecnologia moderna come il tracciamento oculare consente ai ricercatori di studiare reazioni e preferenze quasi impercettibili .

Nel caso di prodotti con traffico elevato, dettagli apparentemente minuscoli come la larghezza di un pulsante o il contrasto cromatico del testo possono fare milioni di dollari di differenza. Ecco perché giganti della tecnologia come Facebook e Google stanno iniziando a utilizzare tecniche basate sulle neuroscienze per studiare come le persone usano i loro prodotti.

Iniziamo con un'introduzione al "pensiero veloce" reattivo e forniamo alcuni suggerimenti ai progettisti per aiutare a sfruttare il potere delle neuroscienze al fine di creare esperienze utente straordinarie.

Psicologia del design: pensiero veloce, pensiero lento

Non è un segreto che gran parte di ciò che guida il comportamento umano è subconscio. Nei millisecondi dopo che una persona incontra una nuova app o un nuovo sito Web, milioni di neuroni si attivano e il cervello prende centinaia di decisioni inconsce.

Sono nel posto "giusto"? Devo fidarmi di questo sito?

Il ricercatore di YouTube UX Javier Bargas-Avila ha stabilito in uno studio del 2012 che le persone formano reazioni estetiche a una pagina web nei primi 17-50 millisecondi dopo l'esposizione .

Per metterlo in prospettiva, l'occhio impiega 300-400 millisecondi per battere le palpebre. Il tuo prodotto potrebbe ricevere il processo, il giudizio e la sentenza in meno di un battito di ciglia.

Queste impressioni potrebbero non essere registrate, ma influiscono sul comportamento. Ad esempio, se un sito si carica lentamente e il cervello legge i primi elementi che vengono caricati come "fuori tema", l'utente può allontanarsi immediatamente anziché attendere il caricamento del sito.

test utente web ux

Aziende come Facebook investono risorse significative nello studio dell'ordine di caricamento degli elementi. Se qualcuno accede a Facebook e non vede alcun badge di notifica, potrebbe allontanarsi all'istante. Se i badge vengono caricati per primi, potrebbero attendere il caricamento del feed di notizie ricco di contenuti.

Il libro del premio Nobel Daniel Kahneman Thinking, Fast and Slow divide il pensiero umano e il processo decisionale in due sistemi per aiutare a illustrare la differenza.

Sistema 1: veloce, automatico, frequente, emotivo, stereotipato, subconscio.

Il pensiero del sistema 1 è reattivo , responsabile di cognizioni complesse ma istintive come determinare la distanza tra gli oggetti o determinare le risposte emotive. Il tuo cervello pigro generalmente imposta automaticamente il pensiero del sistema 1.

Sistema 2: lento, faticoso, logico, calcolatore, cosciente, poco frequente.

Il pensiero del sistema 2 è analitico e viene applicato a scenari più complessi, come la determinazione di un comportamento sociale appropriato o il confronto di due prodotti con prezzi e caratteristiche differenti.

pensiero veloce e lento nella psicologia del design

Dal momento che il cervello non vuole rielaborare informazioni o prendere nuove decisioni ogni volta che si trova di fronte a un nuovo scenario, gran parte del processo decisionale umano cade nel Sistema 1, o "pensiero veloce".

Quando prende decisioni rapidamente, il cervello può fare affidamento su schemi o modelli mentali, schemi familiari di informazioni e interazione. Quando il pensiero del sistema 1 è attivato, il sistema 2 non entra mai in vigore. Le persone potrebbero non essere consapevoli della scorciatoia decisionale del loro cervello, ma ha un forte impatto sui loro comportamenti e sulla percezione del prodotto.

La scienza della psicologia nel design

Il cervello umano consuma un enorme 25% dell'ossigeno del corpo nonostante costituisca solo il 2% circa della sua massa. Il cervello è pigro come meccanismo di sopravvivenza: il riconoscimento di schemi e le scorciatoie significano meno energia spesa per elaborare consapevolmente la situazione . Il cervello identifica le cose, le etichetta e le ignora finché non sono di nuovo rilevanti.

La preferenza del cervello per i modelli e il pigro processo decisionale potrebbe rendere più facile la sopravvivenza, ma rende più difficile la progettazione dell'esperienza utente. Come studi qualcosa che il tuo soggetto di ricerca non riesce nemmeno a percepire?

Una manciata di tecniche di neuroscienza ha recentemente fatto il salto nella ricerca sulla UX, aiutando i ricercatori a fare luce sulle cose che stimolano il "pensiero veloce".

L'attenzione e la percezione possono essere studiate con telecamere eye-tracking. La risposta emotiva e l'eccitazione possono essere determinate con sensori cutanei o analisi del viso. La risposta elettrica nel cervello può essere misurata con l'elettroencefalografia.

analisi delle onde cerebrali test di progettazione psicologia
Un elettroencefalogramma (EEG) è un test che rileva l'attività elettrica nel cervello.

Per i designer, potrebbe sembrare un compito impossibile catturare l'interesse di qualcuno e trasmettere informazioni vitali in meno di un battito di ciglia. Fortunatamente, proprio come le neuroscienze possono aiutarci a diagnosticare i problemi, possono anche rivelare soluzioni generali e migliori pratiche.

Ecco alcune lezioni generali apprese dalla ricerca sull'esperienza utente delle neuroscienze che i designer possono utilizzare durante la progettazione di prodotti digitali.

Design Psychology Suggerimento n. 1: rendilo facile da identificare

Tutti arrivano a un sito Web o a un'app con qualche aspettativa su come dovrebbe essere. Rimanere vicino a tale aspettativa aiuta i designer a trarre vantaggio dal processo decisionale subconscio istantaneo.

La persona che apre la tua app o il tuo sito web vuole sapere a) ha quello che sto cercando; e b) è questa alta qualità? Mantenere i progetti semplici e mantenere il marchio, i servizi e i prodotti in primo piano e al centro aiuta le persone a orientarsi.

Mettere alcune informazioni in primo piano e al centro significa impedire ad altre informazioni di spiazzarle. Riordinare un progetto è importante tanto quanto riorganizzare i componenti.

Noterai un movimento tra le aziende tecnologiche verso interfacce più semplici e meno affollate. Questi design minimalisti superano i progetti più complessi nel completamento delle attività e la chiarezza visiva ha dimostrato di influire sulle decisioni di acquisto online e offline.

È stato scientificamente dimostrato che i design visivamente semplici e puliti hanno prestazioni migliori. Il cervello pigro può cogliere istantaneamente lo scopo del sito e capire quale azione intraprendere.

design minimalista e design dell'interfaccia utente rumoroso per una migliore psicologia del design dell'interfaccia utente web
Rumore contro calma. Google ha ottimizzato il proprio sito per attirare l'attenzione dell'utente sul proprio logo e incoraggiare l'interazione con la casella di ricerca. Nel 2017 detenevano l'80,5% del traffico di ricerca web totale, rispetto al 65,5% del 2016

Design Psychology Suggerimento n. 2: Indica cosa sta arrivando

L'adescamento o la preparazione di qualcuno per alcune informazioni o interazioni imminenti può migliorare la capacità dell'utente di comprendere e reagire alle nuove informazioni. Puoi preparare qualcuno ad aspettarsi cose come elementi dell'interfaccia utente, determinate interazioni o tempi in un processo.

Ad esempio, Yelp utilizza una schermata aggiuntiva per avvisare gli utenti che stanno lasciando Yelp per visitare un sito di terze parti. Il contesto aggiuntivo aiuta a segnalare all'utente di aspettarsi un nuovo design e architettura dell'informazione.

yelp esempio di adescamento in psicologia del design

L'adescamento è un'arma a doppio taglio. Le informazioni che non intendi comunicare possono comunque influire sul processo decisionale . Ad esempio, se la tua società di fotografia presenta solo foto di bambini, una persona potrebbe erroneamente presumere che tu serva solo una clientela infantile.

Design Psychology Suggerimento n. 3: Organizza per lettori pigri

Gli studi di eye tracking sono in grado di seguire lo sguardo di una persona mentre interagisce con un prodotto. Possono produrre mappe di calore che mostrano la durata del tempo trascorso focalizzato su una parte dello schermo o mappe di come l'occhio salta sulla pagina.

Sappiamo che, in tutti i settori e tipi di app, il cervello esegue comunemente la scansione delle informazioni in un modello F (o modello E). La persona guarda le informazioni in alto, legge a destra, quindi esegue la scansione della pagina per informazioni o icone pertinenti.

Rompere lo schema F, ad esempio inserendo informazioni importanti nell'angolo in basso a destra, renderà più difficile trovarle.

studi di eye tracking in psicologia nel design
Le mappe di calore eye-tracking mostrano la durata del tempo in cui i partecipanti si sono concentrati su ciascuna parte della pagina. Nota il motivo F all'attenzione e quell'attenzione diminuisce mentre la persona si sposta lungo la pagina.

Doma il tuo testo

Secondo uno studio di Nielsen Norman su 45.237 pagine visualizzate, le persone leggono solo il 20% circa del testo di una pagina. Peggio ancora, sui siti con più contenuti, le persone hanno dedicato solo 4 secondi in più per ogni 100 parole di testo in più.

In un mondo in cui le persone non leggono parola per parola, Nielsen Norman utilizza le seguenti linee guida per il testo scansionabile .

  • Parole chiave in evidenza
  • Sottotitoli significativi
  • Elenchi puntati
  • Un'idea per paragrafo
  • Lo stile della piramide invertita: inizia con la conclusione
  • Metà delle parole (o meno) della scrittura convenzionale

cattivo web ux a causa di troppo testo su un sito web - neuroscienza in UX
L'enorme quantità di testo su questo sito è difficile da assorbire: l'utente può uscire immediatamente anziché continuare a leggere. Il testo è uniforme senza grassetto o punti elenco. I titoli delle sezioni sono generici, il che rende difficile un'analisi accurata senza leggere.

Lavora con Color Pop e Contrast

L'organizzazione e la posizione del testo non sono gli unici fattori importanti nella progettazione. La teoria del colore, i pesi e il contrasto possono essere utilizzati per indirizzare l'attenzione dell'utente.

Il team di progettazione della cabina di pilotaggio della NASA utilizza la luminanza, o la luminosità percepita di un progetto, per aiutare a gestire l'attenzione del pilota in un'area affollata di informazioni concorrenti. Il team di progettazione della cabina di pilotaggio utilizza il colore e il contrasto per dare risalto visivo agli elementi più importanti.

Il design della cabina di pilotaggio della NASA utilizza la psicologia del design e la teoria del colore

La luminanza e il contrasto possono essere utilizzati nel prodotto per evidenziare o minimizzare informazioni specifiche, ma nella maggior parte dei casi vengono citati nel design di pulsanti o inviti all'azione. Come puoi vedere nei pulsanti di esempio rossi sottostanti, sebbene il pulsante nell'angolo in alto a sinistra sia il più saturo, "sembra" il più luminoso perché il contrasto è il più alto.

test di contrasto del pulsante web per ux web

Contrasto e luminanza sono solo un primo passo. La teoria del colore suggerisce di bilanciare i colori del tuo prodotto utilizzando il colore dominante il 60% delle volte, il secondario il 30% e l'accento il 10%. Questa rottura è coerente con la neuroscienza dietro ciò che attira l'attenzione. Poiché il colore dell'accento è usato di meno, attira di più l'attenzione.

test di contrasto del colore web ux per la psicologia del design

Proprio come l'uso di colori brillanti può attirare l'attenzione, l'uso di colori più tenui può aiutare un utente a determinare quali informazioni sono secondarie o meno importanti. Ad esempio, la maggior parte dei siti Web utilizza aree del piè di pagina con un colore più neutro per mostrare la separazione dal resto delle informazioni sulla pagina.

Qualsiasi funzionalità o informazione che i progettisti de-priorità aiutano l'utente a concentrarsi direttamente sulle interazioni o informazioni più importanti.

piè di pagina del sito web di alaska airlines psicologia del colore e neuroscienza della UX
La maggior parte dei siti Web utilizza colori tenui nella parte inferiore per indicare la navigazione o il materiale di riferimento. I colori più luminosi al centro segnalano all'utente che sono le informazioni più importanti.

Consiglio di psicologia del design n. 4: controllo dell'intestino

Fortunatamente non hai bisogno di migliaia di dollari di software di eye-tracking o di un elettroencefalogramma per sapere se un progetto sta funzionando.

I test di 5 secondi sono un potente strumento per determinare se i tuoi progetti sono immediatamente comprensibili o meno.

In un test di 5 secondi, il partecipante visualizza un sito o un'app per 5 secondi, quindi risponde alle domande sull'argomento e sul design. Incapace di fare riferimento all'immagine, il partecipante fornisce le proprie "impressioni": ciò che i partecipanti presumevano fossero lo scopo e la funzione del prodotto e cosa avrebbero fatto o dove avrebbero cercato i passaggi successivi.

Il tuo prodotto potrebbe avere tutte le funzionalità che il tuo utente desidera, ma se il cervello pigro e amante dei modelli non riesce a capirlo all'istante, andrà avanti .

Designer come “lettori della mente”

Man mano che impariamo di più sulla psicologia del design, sul cervello e sulla percezione, le norme di progettazione continueranno a cambiare in tutto il settore. Il filo conduttore sono i dati: man mano che i metodi per lo studio delle neuroscienze e della cognizione migliorano, miglioreranno anche il tipo e la qualità dei dati disponibili per la progettazione dell'esperienza utente.

La progettazione di un'esperienza utente eccezionale non è magia: è scienza. Neuroscienza.

Questo articolo è stato scritto in collaborazione con la ricercatrice UX Caitria O'Neill , precedentemente su Facebook, attualmente su Airbnb, e una ricercatrice presso la Stanford's d.school .

• • •

Ulteriori letture sul blog di Toptal Design:

  • eCommerce UX: una panoramica delle migliori pratiche (con infografica)
  • L'importanza del design incentrato sull'uomo nel design del prodotto
  • I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
  • Principi euristici per interfacce mobili
  • Design anticipatorio: come creare esperienze utente magiche