Matteo Frana

I principi Gestalt: Proximity

Matteo Frana, 24 Giugno 2014

Continuiamo la serie di articoli su “UX Design: Principi fondamentali”. In questo articolo espongo il principio Gestalt di Proximity e la sua applicazione alle interfacce web e non solo.

Vai al primo articolo

Il principio di Prossimità

Il principio di Prossimità (Proximity) afferma che la distanza relativa tra gli elementi influenza il modo in cui la nostra percezione organizza gli elementi in gruppi. Gli elementi vicini (rispetto agli altri) appaiono come raggruppati e connessi logicamente.

Esempio classico

Nelle due figure qui sotto è possibile vedere come lo stesso insieme di elementi venga percepito come 3 righe di cerchi oppure come 4 colonne di cerchi, semplicemente modificando la distanza tra gli elementi.

Principi Gestalt - Proximity

Applicazione del principio di proximity

Il principio di Prossimità è fondamentale nel design del layout di pannelli di controllo, software o siti web. Gli elementi dell’interfaccia che sono logicamente collegati devono essere correttamente raggruppati utilizzando il principio di prossimità.

Questo è particolarmente importante per stabilire la connessione logica tra un controllo e la relativa etichetta (label).

L’ascensore: un esempio di etichetta – controllo

Vediamo come primo esempio una ipotetica pulsantiera di ascensore.

Principio di Proximity - esempio ascensore

Provate ad analizzarla per qualche istante. Ok, lo so: mi sono dimenticato il piano terra, ma non era questo il punto… Supponiamo di essere negli USA, dove il piano terra viene indicato con 1.

Dal punto di vista del principio di Proximity, sicuramente questa pulsantiera è molto scadente, non essendoci una correlazione chiara tra i bottoni e i numeri dei piani.

Supponiamo di entrare per la prima volta in questo ascensore e di voler salire al secondo piano. Lo sguardo si ferma subito sul numero 2, ma prima di capire se il pulsante giusto è quello a destra o a sinistra del numero bisogna osservare l’intera pulsantiera e pensare un istante (e uno dei più noti libri sull’usabilità si chiama per l’appunto “Don’t make me think”).

Pensiamo poi come la decisione possa essere ancora più difficile per una persona non vedente, che non può nemmeno basarsi sullo sguardo d’insieme: ad es. toccando la scritta in braille sotto il 5, questa persona si troverebbe due bottoni equidistanti senza alcuna indicazione di quale sia quello corretto.

Applicando correttamente il principio di Proximity è possibile migliorare molto la situazione con un piccolo sforzo:

Principio di Proximity - esempio ascensore corretto

In questo caso non si ha alcun dubbio su quale tasto si debba premere per raggiungere il piano desiderato.

Sugli ascensori e gli altri oggetti di ogni giorno

Più avanti torneremo ancora sulle pulsantiere degli ascensori (anche quella del nostro ufficio!), un po’ perché sono un classico della letteratura sull’usabilità e i principi di design, un po’ perché purtroppo è effettivamente molto facile trovarne di progettate male (e probabilmente proprio per questo sono un classico).

Prima di passare al nostro mestiere (le interfacce software e web), provate a pensare a quanto sia più immediato alzare o abbassare i finestrini elettrici dell’auto quando i tasti sono posizionati sulla portiera invece che al centro del cruscotto o nella zona del cambio: è un altro esempio del principio di proximity applicato in modo corretto o meno, in questo caso tra controllo e oggetto controllato.

Consiglio a chiunque di iniziare a guardare gli oggetti che ci circondano con occhio critico per identificare i problemi di usabilità o le soluzioni particolarmente ingegnose. A chi fosse interessato a questo argomento, consiglio di leggere il libro classico “The Design of everyday things” di Donald Norman e il già citato “Don’t make me think” di Steve Krug, di cui trovate i riferimenti in fondo all’articolo. Tornerò in futuro sui concetti chiave del libro di Norman, come mapping, affordance, forgiveness.

Esempio: un form di contatto

Principio di Proximity - esempio form

In questo form appare chiaro come le etichette e i campi da compilare risultino troppo distanziati tra loro per consentire la percezione chiara della connessione tra le etichette e i campi del form.

E’ sufficiente allineare i label a destra (e aggiungere un pizzico di cosmetica CSS ;) per rendere il form decisamente più leggibile:

Principio di Proximity - esempio form corretto

Esempio con radio button

Solitamente è meglio evitare di avere radio button o checkbox disposti orizzontalmente, perché gli utenti sono più abituati a selezionare tra liste verticali, ma a volte può capitare di doverli utilizzare.

Principio di Proximity - esempio radio button

Vediamo però come, in questo caso, la centratura di tutti i campi non consenta la percezione chiara dei gruppi label-controllo e quindi come non sia stato applicato il principio di proximity. Il tutto peggiorato dal fatto che il radio button è stato messo a destra del testo e non a sinistra come è solitamente.

Lo spazio bianco

Nell’esempio del form abbiamo visto come troppo spazio tra un controllo e la sua etichetta non consenta di percepire in modo immediato i due elementi come un gruppo logico. Spesso è importante ragionare anche in negativo sullo spazio vuoto. Spaziando bene gli insiemi di elementi tra loro, questi vengono percepiti come separati e gli elementi all’interno dei diversi gruppi vengono invece percepiti come raggruppati tra loro.

Vediamo come, utilizzando questo concetto, si possa migliorare la scelta basata su radio button dell’esempio precedente:

Principio di Proximity - esempio radio button corretto

Raggruppamenti sgraditi

Lo spazio bianco a volte può essere molto utile anche per evitare che si creino dei raggruppamenti percettivi indesiderati. Ad esempio, nella Home page del nostro sito web, avremmo potuto presentare i servizi in questo modo:

Principio di Proximity - esempio servizi F2

Ma si sarebbe creata una falsa associazione visiva tra i due servizi della colonna a sinistra e tra i due servizi della colonna destra.

Lo spazio bianco risolve il problema, oltre a dare più respiro alla pagina migliorandone l’impatto estetico:

Principio di Proximity - esempio servizi F2 corretto

Proximity e gestione degli errori

Così come è importante che ogni label sia percepito come raggruppato al suo controllo, è fondamentale anche che nei form ogni errore venga mostrato vicino al campo che lo ha generato, in modo da rendere immediata la comprensione del problema:

Principio di Proximity - esempio errore form

Anche sulla gestione degli errori probabilmente torneremo in futuro con un articolo dedicato.

Proximity e Flat design

Da ormai oltre un anno la community dei designers non fa che parlare di Flat Design, anche perché ormai non è più solo una moda da web designer, ma è stata adottata da diversi sistemi operativi, quali Windows 8 e iOS7.

Principio di Proximity - esempio flat design

La maggior parte dei designer è entusiasta di questo trend, mentre alcuni lo odiano profondamente.

Io ritengo che, come spesso accade, la verità stia un po’ nel mezzo. Per esempio, in generale non accolgo con particolare entusiasmo l’abbandono tout court dello scheumorfismo (il fare apparire gli elementi più realistici tramite ombre e gradienti che simulino la tridimensionalità). Alcune interfacce progettate male che seguono il trend “flat” finiscono infatti per far passare in secondo piano l’usabilità, con il rischio che l’utente non capisca più cosa è cliccabile e cosa no. Non gradisco nemmeno l’uso di colori troppo saturati che caratterizza un gran numero di interfacce flat.

Apprezzo invece molto l’approccio minimalista che porta ad interfacce più semplici e “pulite”, senza fronzoli inutili. A questo proposito vedremo in seguito due meta-principi del design: il “rasoio di Ockham” e “form follows function”.

Ma torniamo a noi: cosa c’entra tutto questo con il principio Gestalt di Proximity?

C’entra perché eliminando i fronzoli, i bordini, i box di separazione dei controlli, risulta ancora più importante separare i controlli tramite l’utilizzo esclusivo del principio di proximity, ovvero avvicinando gli elementi correlati e sfruttando in modo sapiente lo spazio bianco per separarli dagli altri elementi.

Per chi fosse interessato all’analisi di interfacce innovative, Vi consiglio di seguire www.dribbble.com, una community dove i designer postano screenshot dei loro progetti in corso per ottenere opinioni da parte degli altri designer. E’ quindi possibile vedere in anteprima loghi, icone e interfacce web o mobile: spesso si trovano lavori eccellenti da cui prendere un po’ di ispirazione! :)

Per concludere l’articolo, vi lascio come esercizio l’immagine seguente, dove si vede un’ottima interfaccia mobile flat: riuscite a trovare in che modo è stato utilizzato il principio di proximity?

Principio di Proximity - esempio flat ui

Libri consigliati


Universal Principles of Design

di Lidwell, Holden, Butler

Questo libro contiene 125 principi di design spiegati e illustrati con esempi. E’ molto utile come reference, un po’ meno per lo studio iniziale dei principi, perché questi sono presentati in ordine strettamente alfabetico, quindi non organizzati secondo un criterio logico.



Designing with the Mind in Mind

di Jeff Johnson

Ottimo libro per comprendere i concetti alla base dei principi di design attraverso la psicologia cognitiva. Il capitolo 2 è dedicato ai principi Gestalt.



The design of everyday things

di Donald Norman

Questo è il primo libro che vi consiglio di leggere per iniziare a guardare gli oggetti che vi circondano con occhio critico. Norman analizza una serie di oggetti (tra cui porte e fornelli) progettati in modo non corretto e fornisce una serie di suggerimenti per progettare invece oggetti usabili. Pur non riguardando solo le interfacce software, è molto utile per chiunque si trovi a progettare un’interfaccia uomo-macchina.



Don’t make me think, Revisited

di Steve Krug

Libro classico sull’usabilità, in particolare delle interface web. E’ un libro piacevole, che si legge velocemente, e che fornisce molti consigli di buon senso per migliorare l’usabilità dei siti web realizzati.

Leave a Reply