009 • Relazioni

Anni fa ho insegnato una materia che si chiama Layout e tecniche di visualizzazione. Durante le prime lezioni, mostravo alcune immagini prese dal sito Things Organized Neatly¹. Sito che raccoglie immagini di oggetti disposti e organizzati in maniera intenzionale.

In alcuni casi la disposizione rimanda a un altro oggetto, in altri dà solo un senso di ordine. In ogni caso le immagini funzionano perché funzionano le relazioni tra i singoli oggetti.

Di relazioni ne avevamo parlato nel numero sul graphic design, citando Vignelli. Vi aggiungo un’altra reference, un libro degli anni ’90 sulla progettazione di interfacce: Designing Visual Interfaces².

È un libro che riprende spesso questo concetto: l’efficacia di una composizione dipende perlopiù dalle relazioni che hanno gli elementi che la compongono, scrivono i due autori.

Modificare anche un solo attributo di una parte in una composizione complessa può avere un impatto significativo sull’equilibrio, sull’unità e, in ultima analisi, sull’armonia dell’insieme.³

Quando interagiamo con una pagina web, non iniziamo leggendo. Diamo uno sguardo, facciamo una scansione di quello che abbiamo di fronte e poi, forse, leggiamo.

La prima cosa che percepiamo è la struttura. Al primo sguardo, l’occhio cerca allineamenti, raggruppamenti, spaziature. Se non li troviamo, se non percepiamo una logica, ne costruiamo una noi. E a quel punto il controllo del messaggio si perde. Se ne accorge l’utente, che potrebbe fraintendere, affaticarsi e abbandonare. Se ne accorge il designer, che, soprattutto se è alle prime armi, tende a intervenire sull’elemento più visibile: un carattere tipografico più “forte”, un contrasto eccessivo, qualcosa che richiami lo sguardo.

Il problema è quando tutto continua a chiedere attenzione nello stesso momento. Senza una chiara gerarchia, senza un percorso, senza un prima e un dopo, il carattere vistoso rende solo evidente una mancanza.

Ogni scelta che si fa, nel design, dovrebbe essere intenzionale e dovrebbe avere una logica riconoscibile, che sia una spaziatura, un colore, una dimensione o un allineamento.

Lo so, potrebbe suonare tutto astratto. (Tempo fa, in un altro articolo⁴, parlavo della necessità di imparare a vedere, oltre a capire come farlo.) Riprendo questa raccolta di consigli pratici di Anthony Hobday in modo che li possiate subito mettere in pratica.

Elementi importanti dovrebbero usare contrasto elevato. Se un elemento è rilevante (come un pulsante o una call-to-action) l’uso di un contrasto elevato aiuta ad attirare l’attenzione.

Gli elementi dovrebbero essere allineati a qualcosa. L’allineamento aiuta a percepire relazioni tra elementi. Se qualcosa non è allineato a niente dà la sensazione che non appartenga al design.

Gli spazi esterni dovrebbero essere uguali o maggiori di quelli interni. Gli elementi che stanno dentro uno stesso insieme dovrebbero essere più vicini tra loro di quanto lo siano ai bordi che li contengono

Le misure dovrebbero essere correlate. Con una scala coerente (es. 8px, 16px, 24px), volendo matematica. In questo modo la struttura visiva appare più ordinata e prevedibile.