Quanti film sapreste elencare in cui viene messo in discussione il nostro libero arbitrio, alludendo al fatto che le scelte di ognuno sono controllate dallʼalto?Oggi però non parliamo di despoti che tentano di governare il mondo. Anche gli UI designer provano (e spesso riescono) a manipolare la vostra mente.
Come? Affidandosi ai principi della Gestalt, influenzando la percezione e lʼattenzione dellʼutente che approda in un sito oppure guarda un cartellone pubblicitario.
La Gestalt non è di certo una novità, parliamo di una corrente psicologica risalente al 1920, la cui teoria è che
«lʼinsieme è percepito differentemente rispetto alla mera somma delle sue parti».
Insomma, 1+1+1 e 3 non sono la stessa cosa. Effettivamente, un buon piatto di pasta non ha lo stesso sapore di ogni ingrediente gustato da ciotole separate.
Saltiamo a piè pari la teoria (per chi volesse un ripasso veloce, ecco un link esaustivo: teoria della gestalt) e arriviamo alla parte succosa, ovvero a come i principi della Gestalt possono trovare applicazione concreta mentre smanettate su Sketch.
VICINANZA
Raggruppando elementi simili, lʼocchio li percepisce come unʼentità unica, compatta e quindi ordinata. Aiutate lʼutente a comprendere quando si cambia argomento, create distanza fra le parti usando gli spazi bianchi. Cosa volete che venga letto prima?
Più spazio bianco attorno = più contrasto col resto = più importanza nella scala gerarchica delle informazioni.
Come raggruppare gli elementi coerenti?
Se avvicinarli non basta, usate uno sfondo comune o delle linee, applicate le stesse ombre a forme simili, aiutatevi coi colori.
SOMIGLIANZA
Forme simili, dicevamo.
Elementi con le stesse caratteristiche avranno presumibilmente la stessa funzione, per questo in una pagina web è bene che i bottoni delle call to action non mutino. Ci sono poi caratteristiche più forti di altre; due persone coi capelli rossi ti sembreranno molto più correlate rispetto a due persone con lo stesso taglio degli occhi!
Se dovessimo fare una classifica, nella scala percettiva la somiglianza viene dettata da:
- 3° posto – forma
- 2° posto – dimensione
- 1° posto – colore
Ma si sa, esiste sempre lʼeccezione che conferma la regola, per cui a volte causare intenzionalmente unʼanomalia darà risalto a un elemento, portando lʼutente a focalizzarsi su di lui, «unico e speciale».
Un esempio pratico:
Devo realizzare una sezione web per vendere dei pacchetti di iscrizioni in palestra. Ogni “scheda” organizzerà i dati alla stessa maniera (titolo – prezzo – elenco di cosa comprende lʼofferta). Ovviamente la palestra vorrà spingere una formula più delle altre, quindi quella scheda dovrà distinguersi. Basterà ingrandirla leggermente allʼinterno della serie, farla spiccare fra le altre.
SIMMETRIA
Lo sa bene Wes Anderson, la simmetria soddisfa lʼocchio, aiuta a comunicare in maniera veloce ed efficiente. Certo occorre saperla dosare, per non progettare layout statici e noiosi. Non tutto può essere organizzato come una gallery di Instagram! Anche in questo caso, lʼelemento che si ribellerà alla regola, verrà messo in risalto.
CHIUSURA
«Saltare subito alle conclusioni» non è mai stato così giusto.
In presenza di un sufficiente numero di informazioni visive, il nostro cervello chiude in automatico le interruzioni e percepisce la figura come unitaria. Questo torna molto utile, concedendoci il lusso della semplificazione. Senza questa “magia”, dovremmo visualizzare su smartphone icone iper dettagliate… sarebbe impossibile!
Ricordate, vogliamo trasmettere il massimo dellʼinformazione tramite la struttura più semplice.
CONTINUITÀ
Simile al principio di vicinanza e di chiusura, anche la continuità ci porge una mano allʼinterno del nostro layout. Lʼorganizzazione degli elementi in righe e colonne, in caroselli e liste, veicola lo sguardo lungo un percorso prestabilito (alla fine del quale capiamo che quel tema è concluso e che possiamo passare a un nuovo argomento).
DESTINO COMUNE
Questo punto riguarda il comportamento che prevederete per i vostri menù espandibili, per gli accordion e per gli indicatori di movimento. Parti che si muovono insieme o in maniera simile, sono percepite come una forma unitaria (come gli stormi di uccelli, le atlete di nuoto sincronizzato o uno sciame di api).
Se scegliendo una voce del mio menù a tendina vedrò aprire una sua espansione verso destra, cliccando su una nuova voce non mi aspetterò di certo che si apra una terza parte verso il basso! Avere delle certezze nella vita piace a tutti, anche al vostro utente.
Pensate ancora che la percezione sia sregolata e dipenda solo da voi?
FORSE avete già applicato queste regole ai vostri progetti in maniera intuitiva…
SICURAMENTE dʼora in poi sarete consci delle vostre scelte al 100%!