005 • Coerenza

Facciamo un riepilogo dei primi numeri. È passato qualche giorno dall’ultimo, forse è utile.

In questi primi numeri abbiamo provato a fissare dei concetti utili a capire come approcciare la progettazione di un sito web. (Molti concetti valgono anche per le app, magari tra qualche numero proviamo a parlarne più nello specifico).

Abbiamo parlato di come si vede e come si interagisce con un sito web, parlando della viewport: del fatto che si vede solo una porzione di un’intera schermata. Poi abbiamo parlato di come ci si muove dentro un sito web, della necessità di avere una navigazione in risposta alla natura non lineare del web.

Poi abbiamo parlato di modularità, di come sono fatte le pagine, dei blocchi che la compongono. Blocchi non fissi, ma riutilizzabili.

Partiamo da una cosa abbastanza evidente, che sappiamo, ma a cui non sempre pensiamo. Siamo esseri viventi che si adattano a tutto, anche a un design fatto male. Usiamo ogni giorno interfacce confusionarie, testi difficili da leggere, bottoni poco evidenti, inviti a compiere azioni che non volevamo, ma in qualche modo riusciamo a cavarcela. Il nostro cervello è bravissimo ad aggiustare, compensare, individuare pattern (e relativi cambiamenti), interpretare.

Ci adattiamo a queste interfacce non proprio perfette al punto che smettiamo di farci caso. Succede in maniera così profonda che spesso quando un servizio (una piattaforma, un social) cambia il proprio design, anche migliorandolo, protestiamo perché ormai ci eravamo abituati.

Questo continuo adattamento e interpretazione aumenta però il carico cognitivo. Per ridurlo è importante mantenere una coerenza visiva e gestire al meglio l’organizzazione delle informazioni. Quando un sito è coerente – stessi allineamenti, stesse spaziature, stessa gerarchia, stessi colori per le stesse funzioni – il nostro cervello lavora meno.

Quando un sito è “auto-evidente”, ovvio – per riprendere di nuovo Steve Krug in Don’t Make me Think– non bisogna ogni volta “capire” da zero come funziona qualcosa.

La prevedibilità è una forma di risparmio cognitivo. Quando gli elementi stanno al loro posto, quando gli allineamenti si ripetono, quando le spaziature seguono un ritmo, l’utente sa dove guardare senza pensarci troppo.

Khoi Vinh, nel suo libro dedicato alle griglie nel web design, Ordering Disorder (2010), scrive:

Grids help users predict where to find information… which aids the communication of that information.

E aggiunge un punto importante, che spesso sottovalutiamo:

Grids… help readers, users, and audiences find that which all humans seek: a sense of order within the disorder.

In Don’t Make me Think, Steve Krug scrive di come interagiamo con un’interfaccia: (1) non leggiamo le pagine, le scorriamo; (2) non facciamo scelte ottimali, ma soddisfacenti; (3) non scopriamo le cose come funzionano, ma ce la caviamo.

Partendo da queste premesse scrive che per progettare pagine web che funzionano davvero è necessario:

• Creare una chiara gerarchia visiva
• Sfruttare le convenzioni¹
• Scomporre le pagine in aree ben definite
• Rendere ovvio ciò che è cliccabile
• Minimizzare il rumore

Per creare una chiara, e solida, gerarchia visiva, potrebbero bastare tre dimensioni di testo: titolo, corpo, dettagli. Ridurre la varietà aiuta l’occhio a capire cosa è importante e cosa lo è meno².

Se da un lato, l’estetica aumenta la percezione di usabilità di un sito, secondo il cosiddetto effetto estetica-usabilità³, è anche vero che la coerenza, aiuta a rendere più chiaro un design.

Questo principio della coerenza ritorna anche in un articolo di Kelley Gordon per NN/Group, che mostra come gli elementi più “visivi” del design — tipografia, spaziature, colore, griglia — contribuiscano in realtà alla chiarezza e alla riduzione del carico cognitivo, «il design non appare buono per caso»:

Be intentional about decisions you make in your design… align typography and other elements to a grid, establish a clear visual hierarchy, use color strategically, and be consistent.

Micro esercizio

Scegliete uno di questi siti e provate ad analizzare:

1. Gerarchia tipografica: quanti stili ci sono?
   Riuscite a identificare titoli, corpo dettagli?
2. Griglia: riuscite a intuire la struttura della griglia?
3. Coerenza: le spaziature si ripetono? Gli allineamenti? I colori hanno una logica?

• Groth
• Figma Blog
• Minimalissimo