13 Ottobre 2019

Perché i progetti di siti Web semplici sono scientificamente migliori

Tags: 

Semplice è meglio

Uno studio di Google ha avuto due risultati chiave:

  • Gli utenti giudicheranno i siti Web belli o meno entro 1/50 - 1/20 di secondo.
  • I siti Web "visivamente complessi" sono costantemente classificati come meno belli rispetto alle loro controparti più semplici.

Inoltre, i siti "altamente prototipici" - quelli con layout comunemente associati ai siti della loro categoria - che avevano anche un semplice design di un sito Web sono stati classificati come i più belli.

In altre parole, lo studio ha scoperto che più semplice è il design, meglio è.

Ma perché?

In questo articolo esamineremo il ruolo della fluidità cognitiva e della teoria dell'elaborazione delle informazioni visive, che svolgono un ruolo fondamentale nella semplificazione del tuo web design e possono portare a più conversioni.

Esamineremo anche casi studio di siti che hanno semplificato la loro progettazione, come ha migliorato il loro tasso di conversione e ti mostreremo come semplificare la progettazione del tuo sito.

Che cos'è un sito Web "prototipico"?

Se dicessi "mobili", quale immagine ti viene in mente? Se sei come il 95% delle persone, pensi a una sedia. Se chiedo di che colore rappresenti "ragazzo", pensi "blu" (e ragazza, "rosa"; macchina, "berlina"; uccello, "pettirosso"; ecc.).

La prototipicità è l'immagine mentale di base creata dal tuo cervello per classificare tutto ciò con cui interagisci. Dai mobili ai siti Web, il tuo cervello ha un modello per come dovrebbero apparire e sentire le cose. Online, la prototipicità si divide in categorie più piccole. Hai immagini mentali diverse ma specifiche per social network, siti di e-commerce e blog. Se uno di quei siti web manca di qualcosa della tua immagine mentale, rifiuti il ​​sito a livelli consci e inconsci.

Se dicessi "sito di abbigliamento femminile alla moda" potresti immaginare qualcosa del genere:

sito abbigliamento femminile

Questo segue il prototipo del "negozio di abbigliamento online" così da condividere molti attributi con wireframe per altri negozi di abbigliamento online, anche se vendono a un diverso gruppo demografico.

Le somiglianze non significano che i siti mancano di originalità o che si "rubano" gli uni agli altri. Invece, stanno giocando con le tue aspettative di base su come dovrebbe essere un sito di e-commerce.

Cosa conta la fluidità cognitiva?

L'idea alla base della fluidità cognitiva è che il cervello preferisce pensare a cose a cui è facile pensare. Ecco perché preferisci visitare siti in cui sai istintivamente dove si trova tutto e le azioni che dovresti intraprendere.

Come spiega UXmatters:

La fluidità guida il nostro pensiero in situazioni in cui non abbiamo idea che sia al lavoro e ci influenza in qualsiasi situazione in cui valutiamo le informazioni.

La fluidità cognitiva deriva da un'altra area di comportamento nota come "mero effetto di esposizione", che afferma che più sei esposto a uno stimolo, più lo preferisci.

Ancora una volta, le regole sono le stesse online. È "familiare" che i blog abbiano opt-in nella barra laterale destra o che i siti di e-commerce presentino immagini di grandi dimensioni e ad alta risoluzione con un titolo che attira l'attenzione e un logo aziendale nella parte superiore sinistra dello schermo.

Se i tuoi visitatori sono condizionati a determinati design di siti nella tua categoria, deviarli inconsciamente potrebbe metterti nella categoria "meno bella".

Ciò non significa, tuttavia, che dovresti semplicemente "fare ciò che fanno gli altri". Sebbene sia importante sapere quali scelte di progettazione del sito sono prototipiche per la tua categoria, è più importante trovare prove a supporto di tali scelte di progettazione.

Molti designer fanno scelte sbagliate. Senza fare le ricerche, potresti farle anche tu. Ad esempio, molti siti di e-commerce utilizzano i dispositivi di scorrimento automatici delle immagini per visualizzare i prodotti, ma uno studio dopo l'altro mostra che i dispositivi di scorrimento automatici supportano le conversioni.

Caso di studio: cosa succede quando si soddisfano le aspettative?

Un sito con un alto livello di fluidità sarà abbastanza familiare che i visitatori non dovranno sprecare sforzi mentali per trovare il prodotto o il pulsante giusto e possono invece concentrarsi sul perché si trovano sul tuo sito.

Quando l'esperienza è fluente, tuttavia, la senti immediatamente. Prendi il rivenditore di cravatte online, Skinny Ties , che in realtà non sembrava un sito di e-commerce fino a una riprogettazione.

Prima:

Dopo:

Alcune modifiche chiave hanno portato a enormi risultati:

  • Seguiti temi prototipici di layout e-commerce;
  • Molto più "aperto" utilizzando gli spazi bianchi;
  • Le immagini presentano un unico prodotto con immagini ad alta risoluzione e colori contrastanti.

Dai un'occhiata al case study su questa particolare riprogettazione, in quanto mostra ciò che è possibile quando si aggiorna un sito per "adattarsi" agli standard prototipici. Dopo solo due settimane e mezzo, hanno raggiunto risultati sbalorditivi:

La riprogettazione stessa, sebbene carina, non sta facendo nulla di rivoluzionario. Soddisfa esattamente le aspettative di ciò che dovrebbe essere un moderno rivenditore di abbigliamento online. È "aperto", reattivo e ha un linguaggio di progettazione coerente in tutte le pagine dei prodotti .

Elaborazione di informazioni visive e complessità del sito

In questo studio congiunto dell'Università di Harvard, Università del Maryland e Università del Colorado, i ricercatori hanno trovato forti correlazioni per siti Web "esteticamente gradevoli" tra diversi dati demografici. Ad esempio, ai partecipanti con dottorati di ricerca non piacevano i siti Web molto colorati.

Alla fine, dallo studio non sono emerse linee guida di progettazione universali specifiche. L'unica cosa universale era che un sito Web visivamente più complesso aveva un fascino visivo minore.

Perché semplice è scientificamente più semplice da elaborare

Il motivo per cui i siti Web meno "visivamente complessi" sono considerati più belli è in parte dovuto al fatto che i siti Web a bassa complessità non richiedono ai nostri occhi e al nostro cervello di lavorare duramente per decodificare, archiviare ed elaborare le informazioni.

Fondamentalmente, la tua retina converte le informazioni visive dal mondo reale in impulsi elettrici. Questi impulsi vengono quindi instradati attraverso le appropriate cellule dei fotorecettori per trasmettere informazioni sul colore e sulla luce al cervello.

Più variazioni di colore e luce sulla pagina (cioè maggiore è la complessità visiva), maggiore è il lavoro che l'occhio deve fare per inviare informazioni al cervello.

Lo spiega il ricercatore Saul McLeod

Il nostro occhio riceve informazioni visive e codifica le informazioni nell'attività neurale elettrica che viene rimandata al cervello dove viene "immagazzinata" e "codificata". Queste informazioni possono essere utilizzate da altre parti del cervello relative ad attività mentali come memoria, percezione e attenzione.

Ogni elemento comunica sottili informazioni

Quando si progetta un sito Web, sapere che ogni elemento ( tipografia , logo e selezione dei colori) comunica informazioni sottili sul marchio.

elements

Quando questi elementi non fanno il loro lavoro, il webmaster spesso compensa aggiungendo copie o immagini non necessarie, aumentando così la complessità visiva del sito Web e togliendo l'estetica generale.

L'ottimizzazione di una pagina per l'elaborazione delle informazioni visive, in particolare la semplificazione del viaggio delle informazioni dall'occhio al cervello, consiste nel comunicare il più possibile in meno elementi possibili.

Mentre questo è un articolo a sé stante, considera la riprogettazione del logo di MailChimp. Quando volevano che il marchio "crescesse", non hanno aggiunto la solita "Stiamo facendo e-mail dal 2001! Tre milioni di persone si fidano di noi! Ecco perché siamo fantastici! Blah, blah, blah ..."

mailchimp

Invece, hanno rafforzato la scrittura, semplificato il sito Web (il titolo in alto legge semplicemente "Invia e-mail migliore") e ha aggiunto un'animazione esplicativa ancora più semplice per il prodotto principale.

Mailchimp ha subito un'altra riprogettazione del logo nel 2018:

mailchimp

Quali erano i principi guida per la seconda riprogettazione principale? La semplicità era fondamentale :

L'icona di Freddie è stata a lungo il marchio principale del nostro marchio. L'abbiamo semplificato un po ', con modifiche alla sua forma e dettagli precisi per assicurarci che sia perfetto a qualsiasi dimensione.

 

[...] Attraverso un processo di iterazione e perfezionamento, abbiamo sviluppato un marchio denominativo che vive in armonia con l'icona di Freddie per creare equità per entrambi.

"Memoria di lavoro" e il Santo Graal di conversione

Secondo la famosa ricerca dello psicologo di Princeton George A. Miller, il cervello adulto medio è in grado di immagazzinare tra cinque e nove "blocchi" di informazioni nella loro memoria a breve termine o "funzionante".

La memoria di lavoro è la parte del tuo cervello che memorizza ed elabora temporaneamente le informazioni nel giro di pochi secondi. È ciò che ti consente di focalizzare l'attenzione, resistere alle distrazioni e, soprattutto, guidare il processo decisionale.

Su un "sito Web a bassa complessità e altamente prototipico", i 5-9 "blocchi" di memoria di lavoro possono elaborare elementi come garanzie, descrizioni dei prodotti, prezzi o offerte, piuttosto che perdere tempo a capire dove fare clic.

Quando si discosta dalle aspettative - il prezzo era più alto del previsto, la combinazione di colori e la simmetria erano spente, il sito non si caricava abbastanza velocemente , le foto non erano ad alta risoluzione - la memoria di lavoro elabora quei "pezzi" disfluenti invece di ciò che questioni.

brain

Questo perché la memoria di lavoro chiama la memoria a lungo termine per utilizzare ciò che già conosce per eseguire l'attività. Quando la memoria a lungo termine non può essere di aiuto nell'elaborazione delle informazioni, il flusso viene interrotto e la memoria di lavoro si disattiva e si sposta.

Ecco perché è fondamentale capire il livello di esposizione dei tuoi visitatori, non solo per i siti della tua categoria, ma per i siti Web in generale, se vuoi "hackerare" la loro memoria di lavoro con il design.

I blog che leggono, i siti su cui fanno acquisti, il browser, l'età, il genere e la posizione fisica suggeriscono tutti ciò che sembrerà familiare alla prima impressione.

7 modi per creare un sito Web più semplice

  1. Cerca il tuo pubblico e i siti che visitano di più. Cerca casi studio sulle modifiche di progettazione da tali siti e su come queste aree chiave siano state interessate.
  2. Crea un mashup per il tuo sito con tutti i componenti "funzionanti" che scopri.
  3. Rispetta le regole della fluidità cognitiva quando esponi il tuo progetto. Metti le cose dove i visitatori si aspettano di trovarle.
  4. Affidati ai tuoi colori, logo e carattere per comunicare in modo chiaro e sottile. Non aggiungere copie o immagini a meno che non comunichino qualcosa che interessa al tuo visitatore.
  5. In caso di dubbio, meno è di più. Un'immagine grande di solito è meglio di un gruppo di piccoli; una colonna anziché tre; più spazio bianco invece di più "roba".
  6. Assicurati che il tuo sito soddisfi le aspettative in termini di prezzi, estetica, velocità, ecc.
  7. Mantieni l'originalità. Un sito "prototipico" non significa che ogni aspetto del tuo sito dovrebbe adattarsi a quello stampo.

Non pensare al tuo sito come a un'opera d'arte unica nel suo genere. Invece, rendilo un composto di tutte le cose migliori.

Conclusione

Se il visitatore non può fare affidamento sulla sua esperienza precedente, non sta pensando a quanto sia innovativo il tuo sito. Rimangono solo a chiedersi perché le cose non sono dove "dovrebbero essere".

Questo non è il miglior stato d'animo se vuoi che acquistino roba. Creando un design con fluidità cognitiva, consenti ai visitatori di elaborare altre cose con la loro memoria di lavoro che rendono più facile per loro dire "sì".

Avrai anche un bellissimo sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

shopping-cart linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram