Matteo Frana

I principi Gestalt: Common Fate

Matteo Frana, 5 Agosto 2014

In questo articolo analizzerò il principio Gestalt detto Common Fate (“destino comune”).

Il principio di Common fate afferma che gli elementi che si muovono insieme nella stessa direzione sono percepiti come raggruppati e correlati.

Vai al primo articolo della serie “UX Design – Principi fondamentali”.

Esempio classico

In questo caso sembra che non vi sia alcuna distinzione tra gli oggetti rappresentati, ma se clicchiamo su uno dei tasti sotto all’immagine vediamo che il movimento di alcuni oggetti insieme ci fa percepire questi oggetti come associati tra loro.

Contemporaneità, direzione e velocità

Questo principio funziona molto bene quando il movimento degli elementi è contemporaneo, nella stessa direzione e alla stessa velocità. Al variare di uno qualsiasi di questi elementi, l’effetto di raggruppamento decresce rapidamente.

A questa regola ci sono però eccezioni, come ad esempio movimenti che seguano un ritmo particolare che consenta di identificare facilmente una catena di causa-effetto, come il movimento di un’onda (o una ola da stadio): come vedremo nel prossimo paragrafo, siamo stati “programmati” nel tempo per riconoscere facilmente i movimenti presenti nel nostro ambiente naturale.

La “programmazione biologica” del common fate

Anche questo principio, così come gli altri principi Gestalt, deriva dall’evoluzione della nostra specie.

Immaginiamo ad esempio di vedere qualcosa che si muove nell’erba alta: identificare il movimento comune dei fili d’erba come connesso ad un’unica causa, ci consente di stimare velocemente la dimensione di una preda o di un predatore. Allo stesso modo il principio di common fate può farci identificare più facilmente un animale mimetizzato nel momento in cui inizi a muoversi. Non so se notate il leone nascosto qui a destra. Se si muovesse, lo notereste meglio! ;)

Principio di Common fate - esempio leone

Come per gli altri principi Gestalt, se seguendo il principio possiamo ottenere un raggruppamento tra elementi, la violazione del principio consente al contrario di evidenziare un elemento diverso e quindi di “identificare l’intruso”. E’ spesso questa capacità che sembra essere stata la più utile per la sopravvivenza dei nostri antenati e ci ha quindi “programmati biologicamente” per riconoscere velocemente il movimento.

Il movimento viene tra l’altro percepito facilmente anche dalle parti più periferiche della retina, quelle che vedono “a bassa risoluzione”. Se infatti stiamo osservando in una certa direzione, il “pericolo” potrebbe sopraggiungere all’improvviso dall’esterno del nostro campo visivo. E’ quindi fondamentale allarmarsi e voltare subito lo sguardo nella direzione del movimento per la successiva identificazione tramite l’utilizzo della fovea, ovvero della parte centrale della retina “ad alta risoluzione”.

Restando ai nostri tempi, se vediamo una colonna di macchine davanti a noi che si muovono nella stessa direzione alla stessa velocità, le percepiamo come qualcosa in movimento armonico, predicibile, appartenente al nostro branco… ehm… gruppo.

Se però vediamo che la macchina davanti a noi inizia a frenare all’improvviso, il principio di common fate ci aiuta a riconoscere facilmente che qualcosa sta cambiando, che non fa più parte del gruppo sotto controllo e che costituisce quindi un potenziale pericolo. Per fortuna i fanali di stop, sfruttando la violazione del principio di similarità (highlighting), ci aiutano a percepire il pericolo ancora prima.

Principio di Common fate - esempio traffico

Common fate e interfacce grafiche

Poiché il principio di common fate comporta il movimento di oggetti, si potrebbe pensare che fosse utile ai tempi delle famigerate (e da me sempre odiate) “introduzioni in Flash”, ma che oggi abbia un utilizzo limitato nel design di interfacce software moderne, web o mobile.

In realtà non è proprio così, ma è vero che, nel caso del design di interfacce, il principio di common fate viene utilizzato più per stabilire una correlazione di causa-effetto che non nella accezione pura di principio di raggruppamento.

Il mouse

Pensiamo ad esempio al fatto che muovendo il mouse sulla scrivania si muova il puntatore sullo schermo: è una cosa talmente banale da sembrare scontata, eppure è un esempio di utilizzo del principio di common fate: il puntatore si muove contemporaneamente, nella stessa direzione e con una velocità proporzionale al movimento del mouse, quindi i due elementi sono percepiti come fortemente correlati, il che ha determinato l’enorme successo del mouse e, di conseguenza, delle interfacce grafiche moderne.

La barra di scorrimento

In modo simile, quando scrolliamo la pagina, il movimento della rotellina è correlato a quello della pagina a video, così come la barra di scorrimento è percepita come correlata alla pagina che stiamo scrollando. E’ interessante notare come in questo caso il movimento del cursore della barra di scorrimento sia inverso rispetto a quello della pagina: se il cursore scende, allora la pagina si muove verso l’alto per rivelare il contenuto che sta sotto. Questo comporta il differente utilizzo del mouse (correlato alla barra di scorrimento) rispetto alle interfacce touch (correlate alla pagina). Se con il mouse voglio scendere nella pagina, ruoto verso il basso la rotellina, come per spingere il cursore verso il basso e spostare di conseguenza la pagina in alto, mentre nelle interfacce touch, su cellulare oppure con un Trackpad su Mac, dobbiamo “spingere” la pagina verso l’alto.

Utilizzo del common fate nel design

Vediamo ora come viene utilizzato solitamente il principio di common fate all’interno delle interfacce web o mobile.

Drop-down menu

Un esempio tipico è quello dei menu a tendina o delle barre dei menu su due livelli. Solitamente si crea un effetto di movimento a comparsa delle voci del sottomenu, le quali risultano così raggruppate tra loro e correlate al click sull’elemento “padre”.

Principio di Common fate - esempio dropdown menu

A proposito dei menu dei siti web, ritengo che sia una buona norma quella di evitare di avere menu con oltre 2 livelli, soprattutto se a comparsa al passaggio del mouse anziché su click: a prescindere dall’aumentato carico cognitivo dei tre livelli, capita spesso che si chiuda inavvertitamente il menu mentre si sta cercando di cliccare su una delle voci.

Tooltip

I tooltip sono un elemento molto utile per mostrare informazioni secondarie senza occupare spazio. Il collegamento tra il passaggio sull’elemento e la comparsa del tooltip è dato dal principio di common fate.

Principio di Common fate - esempio tooltip

Chiaramente nel momento in cui si realizza un sito web responsive bisogna pensare al fatto che il concetto di “hover” non esiste su tablet o cellulari. Poiché in questi casi non è possibile passare sopra ad un elemento senza cliccarlo, il tooltip deve essere scatenato anche dal click.

Carousel / Slider e relativa divagazione…

Un altro utilizzo del principio di common fate è quello dei carousel, ovvero di quei grandi banner con immagini e testo che oggi scorrono nella parte alta della home page di moltissimi siti web. In questo caso il movimento conferisce unità all’immagine e al relativo testo.

Principio di Common fate - esempio carousel Ferrari

Approfitto di questa sezione per aprire una parentesi su questo tipo di interfaccia. In certi casi può essere utile mostrare qualche immagine grande che illustri i servizi offerti e magari crei una connessione emozionale agli stessi: sto pensando ad esempio alle belle immagini proposte da un tour operator per invogliare alle vacanze o anche allo slider della Ferrari qui sopra.

Oggi però sembra che molti siti web abbiano un carousel giusto perché è di moda ed è presente in bella vista nella quasi totalità dei temi preconfezionati che si trovano in commercio.

Ci sono in realtà molte ragioni per non utilizzare i carousel: la prima e fondamentale è… perché di solito non funzionano! Un articolo dell’estate scorsa riportava statistiche sconcertanti basate su test effettuati dall’università di Notre Dame nell’Indiana: soltanto l’1% dei visitatori clicca sui carousel in home page e il 90% dei click avviene sulla prima slide. Se anche possiamo supporre che questo articolo non sia completamente affidabile basandosi sull’analisi di soli 5 siti web, i risultati sono sostanzialmente confermati anche dal guru dell’usabilità Jakob Nielsen (per approfondire vedi anche questi articoli di Chris Goward di Wider Funnel e Tim Ash di Clickz).

Cosa determina questo insuccesso? Proviamo a dare qualche risposta. Innanzi tutto spesso i carousel sono utilizzati per trovare un posto alle nuove idee dei vari reparti. Ogni reparto dell’azienda vorrebbe un posto in home page e… quale modo migliore se non aggiungere una nuova slide al carousel: rapido e indolore. Peccato che spesso questo contenuto non sia quello che l’utente sta cercando! Il contenuto in evidenza in home page dovrebbe infatti essere frutto di uno studio editoriale di content strategy, non un ricettacolo di informazioni che non si sa dove piazzare altrimenti! :)

Quando un utente entra in un sito web per la prima volta cerca di orientarsi, attratto dalle informazioni più in evidenza: un grande banner sicuramente attrae l’attenzione, ma spesso rischia di apparire come una pubblicità, cosa da cui gli utenti stanno alla larga (banner blindness). Se poi non contiene nemmeno informazioni utili, provoca nell’utente un effetto di disorientamento e frustrazione. Quando anche invece un utente trovasse qualcosa di interessante, spesso non fa in tempo a cliccare che la slide è già sparita per far posto ad un’altra slide. Per questo gli utenti finiscono per saltare in blocco lo slider e cercare un approdo più sicuro e stabile nel menu principale o in altri menu sotto allo slider. Come ultima cosa, c’è da considerare che gli utenti non hanno intenzione di perdere tempo per scorrere le slide e la visione di una sola slide potrebbe dare informazioni molto parziali e incomplete sui prodotti / servizi offerti dall’azienda.

In generale, quindi, è meglio utilizzare un carousel solo quando è veramente necessario, dopo aver valutato attentamente i relativi vantaggi e svantaggi.

Common fate in senso più lato

Spesso il raggruppamento è dato dal principio di common fate anche per immagini statiche. Questo succede ad esempio quando l’immagine ha un movimento intrinseco dato dalle linee del disegno che puntino tutte in una stessa direzione, oppure quando è rappresentato un volto che guarda in una certa direzione: la tendenza naturale è quella di seguire con lo sguardo questa direzione.

Principio di Common fate - esempio immagine statica

La correlazione diventa quindi quella tra il movimento intrinseco all’immagine e quella dello sguardo di chi la sta leggendo. Sfruttando in questo modo il principio di common fate è possibile guidare lo sguardo del nostro utente verso gli elementi più utili per lui (nel caso di un’applicazione web) o più utili per il business del nostro cliente (nel caso di un sito web di marketing o una pubblicità on-line).

Pausa estiva e prossimi articoli

Nei prossimi giorni il nostro blog si prenderà una pausa per le ferie estive (abbiamo provato ad insistere, ma aveva già prenotato… ;)

Il prossimo articolo verrà pubblicato a Settembre e concluderà la serie sui principi Gestalt con Figure/Ground, Closure e Continuity.

Anche a livello di sviluppo la nostra attività è in fermento. Rilasceremo a breve la nostra prima App mobile per iOS e Android e un nostro social network altamente innovativo: stay tuned! :)

Nel frattempo vi auguro Buone Vacanze, a nome mio e di tutto lo staff F2.net!