12.

Progettare la grafica
Sintesi del capitolo
Questo capitolo descrive alcune linee guida per la progettazione dinterfacce grafiche. Dopo avere osservato che gli obiettivi che possono guidare il visual designer possono essere diversi, ci si concentra in particolare sullobiettivo dellusabilit. Si introducono le leggi della Gestalt, che descrivono le modalit con le quali lapparato visivo umano segmenta il campo visivo raccogliendo in gruppi gli elementi visivi che lo compongono. Si mostra quindi, attraverso la discussione di numerosi esempi, come le leggi della Gestalt possono guidare utilmente il progettista di sistemi interattivi nella realizzazione di soluzioni grafiche di facile comprensione. Gli esempi riguardano soprattutto lopportunit di avvicinare elementi visivi semanticamente e funzionalmente correlati, dando loro un aspetto simile e separandoli visivamente dagli altri elementi con luso di riquadri o cornici, e creando un ordine visivo mediante un uso consapevole del colore e degli allineamenti.

Design dellinterazione e comunicazione visiva

La comunicazione visiva ha un ruolo fondamentale nellinterazione uomo-macchina: la maggior parte delle informazioni che un sistema trasmette al suo utente sono veicolate da display video di varia forma e dimensione, dai grandi monitor che tappezzano le pareti delle control room dei grandi impianti di processo, fino ai piccoli display dei telefoni cellulari o degli altri dispositivi mobili in circolazione. Lusabilit di questi sistemi dipende quindi in modo considerevole dalla loro interfaccia grafica. La grafica dei sistemi interattivi pu perseguire obiettivi diversi: la comprensibilit delle informazioni, lusabilit, la gradevolezza complessiva, loriginalit, la capacit di suscitare emozioni. Occorre grande chiarezza nella definizione dei requisiti del progetto, perch ciascuno di questi obiettivi richiede approcci e soluzioni differenti, che potrebbero essere fra loro in conflitto. Certamente, secondo gli scopi prefissati, i risultati della progettazione saranno molto diversi. Consideriamo la a, che mostra la home page del sito della Fanta di qualche anno fa, allinterno del sito italiano della Coca Cola. Anche se non si capisce subito, si tratta di un menu: le varie voci appaiono, una a una, esplorando con il mouse il piede e la mano delle ragazze nelle zone indicate dal tratteggio. La b mostra infatti la scritta che compare quando il puntatore del mouse passa sopra la zona destra del piede in primo piano. Il design divertente e originale, ma certamente lascia molto a desiderare dal punto di vista dellusabilit. Lutente non ha mai una visione dinsieme dei contenuti del sito: il menu visibile sempre e solo a pezzi, e per leggerne tutte le voci occorre esplorare col mouse una diecina di aree sensibili diverse.

Figura 1. Home page di www.fanta.it (2003)

Tutto questo pu non creare problemi per un sito destinato soprattutto a funzioni dintrattenimento, ma potrebbe essere molto negativo in un sito con uno scopo diverso: tutto dipende dagli obiettivi. Loriginalit del design spesso un obiettivo prioritario per il sito web di uno stilista di moda, ma sarebbe probabilmente considerata controproducente per il sito di unofficina meccanica che voglia trasmettere unimpressione di economicit e concretezza. La capacit di suscitare forti emozioni potrebbe essere importante per la grafica di un computer game, ma certamente non per un sistema informativo aziendale. Usabilit, comprensibilit, originalit, gradevolezza, emozione sono attributi in larga misura indipendenti. Un sistema pu avere uninterfaccia comprensibile e non essere usabile, pu essere gradevole ma non suscitare emozioni. Oppure pu godere contemporaneamente di tutte queste caratteristiche ().

Figura 2. I diversi obiettivi della grafica di un sistema interattivo

Nei primi anni di questo secolo, a seguito della pubblicazione (nel 2000) del libro Designing Web Usability di Jacob Nielsen, ci fu un ampio dibattito fra i fautori dellusabilit dei siti web, da un lato, e della libert espressiva, dallaltro. I primi rimproveravano ai secondi di perseguire una creativit libera da ogni vincolo, spesso a discapito della facilit duso. I secondi obiettavano che lusabilit perseguita ad ogni costo avrebbe, in ultima analisi, limitato la libert di comunicazione che la rete permetteva: Dietro la semplificazione della navigazione sintravede la trasformazione della rete in una sorta di percorso prestabilito che segue strade precostituite verso destinazioni che poi sono facilmente intuibili: comprare, comprare comprare. 'Making things easy' (facilitare le cose) il principio guida per la trasformazione della rete in un sistema di potere economico e politico rigido, automatico, inevitabile. Se riduciamo Internet a un sistema pavloviano di domande prevedibili e di risposte precostituite, la rete diverr un congegno di produzione e distribuzione di merce e di potere.[] Ma l'ambiguit l'essenziale di ogni comunicazione che non sia riducibile a mera ingiunzione, ordine che proviene dal potere e al quale bisogna obbedire se non si vuole essere emarginati ed espulsi. La pretesa di una comunicazione univoca e non ambigua pu rivelare una certa ignoranza della semiologia dellinterazione, o piuttosto rivela l'intenzione di ridurre l'interazione a processo precostituito. [] Internet non un medium che deve sacrificare ogni cosa alla creazione di opportunit economiche ma una sfera di creazione nella quale si pongono delle domande estetiche, delle ricerche di significato, cio della comunicazione vera, e non prestampata a uso e consumo di commercianti e di utenti conformisti.1 Da allora il Web molto cambiato, e le posizioni estreme si sono attenuate. Gli stessi avvocati dellusabilit a tutti i costi hanno rivalutato in modo considerevole limportanza degli aspetti emozionali del design. Lo stesso Donald Norman inizia il suo libro Emotional Design (2004) con una citazione di William Morris, uno dei padri dellindustrial design: Se si vuole una regola doro in grado di soddisfare chiunque, eccola: non tenere in casa propria nulla che non si ritenga utile, o non si consideri bello.2 Nel prologo a questo libro, Norman spiega, infatti: Negli anni 80, quando scrissi La caffettiera del masochista, non presi in considerazione le emozioni. Mi occupai di utilit e usabilit, forma e funzione, il tutto in maniera logica, senza passione anche se gli oggetti progettati con poca cura mi fanno infuriare. Ma oggi ho cambiato idea. Perch? In parte per via
1

Franco Bifo Berardi, Dissociare il web design dalla usabilit, in Web design e usabilit, un dibattito, e-book gratuito realizzato dal forum della trasmissione RAI Mediamente, in http://www.unitus.it/virtual/e-book/e-library.htm (aprile 2001). 2 William Morris, The Beauty of Life, 1880.

dei nuovi sviluppi scientifici nella comprensione del cervello e del modo in cui lemozione e il processo cognitivo siano intimamente interconnessi tra loro. Noi studiosi ora comprendiamo limportanza dellemozione nella vita quotidiana, quanto si dimostri preziosa. Certo, lutilit e lusabilit sono importanti, ma senza divertimento e piacere, gioia ed eccitazione, e, s, ansia e rabbia, paura e ira, la nostra esistenza sarebbe incompleta.3 Pur consapevoli dellimportanza della creativit e dellemozione nellinteraction design, in questo capitolo tratteremo la grafica esclusivamente dal punto di vista della usabilit, senza occuparci degli altri aspetti indicati in , che esulano dagli argomenti di questo libro e ci porterebbero molto lontano. Da questo punto di vista, citando le parole dello standard ISO 9241-12,4 la presentazione dellinformazione visiva dovrebbe abilitare lutente a eseguire i compiti percettivi (per esempio, la ricerca dinformazioni sullo schermo) in modo efficace, efficiente e con soddisfazione. Per raggiungere questobiettivo, prosegue ancora lo standard, importante che, nel progettare linformazione visiva, si considerino le seguenti caratteristiche: Chiarezza (clarity): il contenuto informativo veicolato velocemente e accuratamente; Discriminabilit (discriminability): linformazione visualizzata pu essere distinta con accuratezza; Concisione (conciseness): agli utenti viene fornita solo linformazione necessaria per eseguire il compito; Consistenza (consistency): la medesima informazione presentata nello stesso modo allinterno del sistema, conformemente alle aspettative dellutente; Scopribilit (detectability): lattenzione dellutente diretta verso linformazione necessaria; Leggibilit (legibility): linformazione facile da leggere; Comprensibilit (comprehensibility): il significato chiaramente comprensibile, non ambiguo, interpretabile e riconoscibile.

Per raggiungere questi obiettivi, nella progettazione della grafica occorre considerare numerosi aspetti. Non solo le caratteristiche del sistema visivo umano e dei processi cognitivi che filtrano ed elaborano le informazioni percepite dai nostri occhi, ma anche le consuetudini individuali e collettive che associano alle immagini che vediamo significati e valori diversi. Il progettista di sistemi software spesso impreparato per questo. La sua formazione, tradizionalmente, non comprende lo studio del sistema visivo umano e della comunicazione visiva. La sua sensibilit verso le arti figurative spesso modesta o del tutto inesistente, come suggerisce la nostra esperienza trentennale con gli studenti dinformatica. Le abilit pi marcate fra i progettisti di software sono infatti quelle di carattere logico-analitico, molto lontane dalla sensibilit di un visual designer. Non stupisce, quindi, che le interfacce grafiche realizzate da progettisti di origine informatica siano spesso trascurate e molto carenti dal punto di vista estetico. Un professionista dellinteraction design, qualunque sia la sua formazione, dovrebbe tuttavia essere in grado di valutare la qualit delle interfacce grafiche, e di progettare soluzioni grafiche corrette dal punto di vista dellusabilit ed esteticamente gradevoli, almeno nelle situazioni meno impegnative. Nelle applicazioni in cui la qualit della comunicazione visiva sia ritenuta critica, potr poi essere affiancato da uno specialista di comunicazione visiva. Questo avviene abitualmente nella progettazione dei siti web non elementari. In questo capitolo forniremo alcune linee guida per la progettazione delle interfacce grafiche. Esse integrano le linee guida descritte nel Capitolo 10, che sono di validit generale, introducendo alcuni elementi specifici che tengono conto delle caratteristiche del sistema visivo umano.

Le leggi della Gestalt

La psicologia della Gestalt (la parola tedesca Gestalt significa forma, schema, rappresentazione), detta anche
3 4

Donald Norman, Emotional Design, ed.italiana Apogeo, 2004, pag.6. ISO 9241-12:1998, Presentation of information. Questa parte dello standard ISO 9241 contiene raccomandazioni sulla presentazione visiva dellinformazione applicabili ad ogni tipo di dialogo realizzato per mezzo di display video. Il documento contiene raccomandazioni sulluso di vari elementi delle interfacce testuali e grafiche: finestre, aree di input e di output, raggruppamenti di elementi, liste, tabelle, etichette, campi, cursori, e cos via. La descrizione troppo dettagliata per gli scopi di questo libro, e non ne tratteremo oltre.

psicologia della forma, una corrente psicologica che si svilupp tra gli anni '10 e gli anni '30 del secolo scorso. I suoi esponenti si focalizzarono soprattutto sugli studi della percezione e del problem-solving. L'idea portante della psicologia della Gestalt che non corretto dividere lesperienza umana nelle sue componenti elementari, da analizzare separatamente, perch un insieme pi della somma delle sue parti. In particolare, questo avviene nella percezione visiva: gli elementi che ci si presentano nel campo visivo interagiscono fra loro in modo complesso, e noi percepiamo qualcosa che sostanzialmente diverso dalla loro semplice somma. Per esempio, quando osserviamo una fila di lampadine che si accendono e si spengono in sequenza con una certa cadenza temporale (), noi percepiamo delle luci in movimento, anche se nulla, in realt, si muove.

Figura 3. Luci alternate vengono percepite in movimento

La illustra in modo suggestivo questo principio. Si tratta di un dipinto di Salvador Dal, che rappresenta una stanza contenente un divano, due quadri alla parete, un caminetto che regge un orologio, vista da una grande porta incorniciata da tende. Leffetto complessivo determinato dalla somma di questi elementi per molto diverso; losservatore percepisce innanzitutto un viso di donna che, com confermato dal titolo del quadro, assomiglia allattrice Mae West: il tutto diverso dalla somma delle sue parti.

Figura 4. Viso di Mae West in forma di appartamento (Salvador Dal, 1935)

Gli psicologi della Gestalt hanno cercato di individuare le leggi elementari che governano questi fenomeni. Nel 1923, Max Wertheimer descrisse le leggi dellorganizzazione figurale, in base alle quali gli elementi presenti nel campo visivo tendono a organizzarsi in unit, cio a venire raggruppati in modi diversi, secondo la loro forma e posizione

relativa. Esse sono chiamate legge della vicinanza, della somiglianza, della chiusura, della continuit di direzione, della buona forma e dellesperienza passata, e sono descritte qui di seguito. Legge della vicinanza: a parit di tutte le altre condizioni, gli elementi del campo visivo che sono fra loro pi vicini tendono a essere raccolti in unit.

Nella a, formata da 36 piccoli cerchi, potremmo in teoria vedere molti gruppi diversi, formati da varie combinazioni di cerchi. In realt vediamo relativamente pochi raggruppamenti: linee orizzonti, o verticali, o diagonali, o ad angolo. Queste configurazioni sono per piuttosto instabili, e si tramutano continuamente luna nellaltra. Tuttavia, sufficiente inserire piccole modifiche nella posizione dei punti, perch la figura si stabilizzi: nelle b, c e d le configurazioni ci appaiono infatti molto stabili e univoche. Nella prima vediamo inequivocabilmente tre colonne verticali, nella seconda tre righe orizzontali, e nella terza quattro gruppi di forma quadrata. Poich lunica grandezza che varia fra una configurazione e laltra la distanza, mentre forma, colore e numero dei cerchi sono rimasti invariati, chiaro che i raggruppamenti sono determinati dalla distanza relativa fra gli elementi. Ecco perch Wertheimer afferma che, a parit di tutte le altre condizioni, gli elementi fra loro vicini tendono a essere percepiti come facenti parte di ununica unit.

Figura 5. Legge della vicinanza

Legge della somiglianza: a parit di tutte le altre condizioni, gli elementi del campo visivo che sono tra loro simili tendono a essere raccolti in unit.

Se nella a, invece di spostarli, modifichiamo il colore di alcuni elementi, otteniamo una nuova segmentazione ben definita e stabile del campo visivo. Per esempio, nella a percepiamo due gruppi ben distinti di elementi: un gruppo di tre righe orizzontali bianche, e un gruppo tre righe orizzontali nere. In b i due gruppi di righe bianche e nere sono verticali. Se invece di modificare il colore modifichiamo la forma, il risultato lo stesso: gli elementi si raccolgono in gruppi di analoga forma. Per esempio, nella c il gruppo dei quadrati neri viene percepito come ben distinto dal gruppo dei cerchi neri. A parit di tutte le altre condizioni, quindi, tendono a raggrupparsi quegli elementi che hanno qualche tipo di somiglianza. Non solo colore o forma, come negli esempi, ma anche grandezza, orientamento o movimento verso una stessa direzione5, come sarebbe immediato verificare con facili esempi. Il fenomeno descritto dalla legge della somiglianza pu anche essere utilizzato per porre in evidenza alcuni elementi, per diversit o contrasto. Nella d, lelemento grigio spicca chiaramente nel contesto degli altri elementi, tutti neri: la legge della somiglianza fa s che esso venga isolato da tutti gli altri, in un gruppo costituito da un singolo elemento.

Cio, gli elementi che si muovono verso una stessa direzione vengono raccolti in gruppo. In questo caso, piuttosto che di legge della somiglianza si preferisce parlare di legge del moto comune.

Figura 6. Legge della somiglianza

Legge della chiusura: a parit di tutte le altre condizioni, le linee delimitanti una superficie chiusa si percepiscono come unit pi facilmente di quelle che non si chiudono. In altre parole, fra tutte le possibili organizzazioni percettive di un insieme di elementi, verr vista preferenzialmente quella che produce figure chiuse. In a, per la legge della vicinanza vediamo quattro coppie di linee verticali. Tuttavia, se aggiungiamo i tratti orizzontali che uniscono le linee verticali come in b, la segmentazione del campo visivo cambia, e vediamo tre rettangoli chiusi con due linee verticali ai lati.

Figura 7. Legge della chiusura

Che la chiusura sia pi forte della vicinanza dimostrato anche nellesempio di a: anche se le parentesi quadre accostate (][) sono molto vicine, e quindi dovrebbero essere raccolte in gruppo, noi le associamo diversamente, e vediamo tre rettangoli chiusi. Se per eliminiamo le parentesi quadre ai due lati estremi della figura, come in b, la situazione cambia, e la segmentazione diventa piuttosto instabile: a volte vediamo tre coppie di parentesi accostate, altre volte vediamo due rettangoli e due parentesi ai lati.

Figura 8. Conflitto fra chiusura e vicinanza

Legge della continuit di direzione (detta anche della curva buona): a parit di tutte le altre condizioni, le linee che vanno nella stessa direzione si costituiscono in unit pi facilmente delle altre. In sostanza, il sistema visivo sembra funzionare in modo che un segmento rettilineo tenda a evitare bruschi cambiamenti di direzione e quindi, a un incrocio con altri segmenti, si unifica di preferenza con quello che continua nella medesima direzione. Per esempio, i quattro segmenti obliqui di a si unificano in un unico segmento che sembra disposto dietro i tre gruppi di linee verticali, unificati per effetto, come abbiamo visto, della legge della vicinanza. Anche se questa non sarebbe, teoricamente, lunica lettura possibile della figura, quella pi adatta a farci riconoscere gli oggetti del mondo reale, che possono venire parzialmente nascosti da altri oggetti pi vicini a noi. Anche le linee curve tendono a mantenere il proprio andamento e, dopo un incrocio con altre linee, a proseguire nelle linee che meno si discostano da esso. Cos, in b, vediamo le due linee 1-2 e 3-4, e non le altre possibili (1-4 e 3-2, oppure 1-3 e 4-2).

Figura 9. Legge della continuit di direzione

Legge della buona forma: a parit di tutte le altre condizioni, il campo percettivo si segmenta in modo che risultino entit per quanto possibile equilibrate, armoniche, costituite secondo un medesimo principio in tutte le loro parti. Questo importantissimo principio, detto anche principio di pregnanza o della coerenza strutturale, non facilmente definibile con precisione, ma risulta chiaro dagli esempi. Nella a, in virt della legge della chiusura, vediamo due figure chiuse distinte, ciascuna con una propria forma definita. Se per le avviciniamo come in b, gli elementi si raggruppano in modo completamente diverso. Le due figure, per cos dire, si trasformano, e diventa praticamente impossibile vedere le due configurazioni di partenza. Questo perch, nel nuovo insieme, le linee si collegano fra loro in un modo strutturalmente pi coerente: i segmenti lineari si uniscono ad altri segmenti lineari a formare un poligono, mentre le linee curve si uniscono a formare una figura tondeggiante. La tendenza alla coerenza strutturale e alla continuit di direzione ci permettono di vedere la figura in un solo modo, eliminando tutte le altre possibili segmentazioni, fra le quali anche quella di c (una figura esterna a tratto continuo, e una interna a tratteggio).

Figura 10. Legge della buona forma

La mostra altri esempi interessanti a illustrazione della legge della buona forma. Le configurazioni a1 e a2 potrebbero, teoricamente, essere lette come figure a due o tre dimensioni (un cubo). Ma mentre a2 appare chiaramente come un cubo, molto difficile vedere in a1 la terza dimensione, anche se rappresenta anchessa un cubo in visione prospettica. Questo perch la a1 gi regolare, simmetrica ed equilibrata nel piano, mentre a2 pi regolare se la consideriamo nello spazio. La legge della buona forma interviene anche nei meccanismi che ci permettono di isolare le figure dallo sfondo. Consideriamo le due immagini b1 e b2, sempre in . pi naturale interpretarle come cornici nere o come un quadrato bianco su un quadrato nero? In b1 prevale la prima interpretazione, mentre in b2 prevale nettamente la seconda. Infatti, nelle due situazioni, queste sono le soluzioni percettive pi semplici ed equilibrate: b2 sarebbe insolita come cornice, poich molto irregolare. Un meccanismo analogo agisce negli altri due esempi di . In c1 vediamo prevalentemente delle bande bianche su uno sfondo nero. Infatti, sono queste le bande pi regolari: fra i margini di ciascuna banda intercorre sempre la medesima distanza. Con linterpretazione contraria, avremmo delle bande nere molto irregolari su sfondo bianco: questa interpretazione, per la legge della buona forma, viene scartata. In c2, invece, prevale linterpretazione contraria: vediamo una banda (ancorch molto irregolare) nera su fondo bianco. In questo caso, contano di pi la minore dimensione dellarea nera rispetto a quella bianca e la sua centralit.

Figura 11. Legge della buona forma: altri esempi

Legge dellesperienza passata: a parit di tutte le altre condizioni, gli elementi del campo visivo che danno origine a una figura familiare o dotata di significato tendono a formare ununit.

In sostanza, questo principio ci dice che lesperienza passata orienta le nostre percezioni. Un esempio tipico mostrato in a, dove riconosciamo facilmente la lettera E, anche se molti tratti sono mancanti. Infatti, la familiarit con questa lettera ci permette facilmente di completare mentalmente la figura. Osserviamo che questo processo dintegrazione, messo in atto dal nostro sistema cognitivo, non sempre scontato. La b contiene unaltra configurazione di tratti

appartenente alla lettera E, nella quale tuttavia il riconoscimento pi problematico, anche se il numero di tratti identico a quello dellesempio precedente.

Figura 12. Legge dellesperienza passata

Gli esempi a illustrazione delle leggi della Gestalt potrebbero essere molto pi numerosi. 6 Essi ci dimostrano che, di fronte a una molteplicit di elementi presenti nel nostro campo visivo, il nostro sistema visivo sceglie una ben precisa interpretazione, in virt di propri meccanismi di funzionamento. Questi non dovrebbero sorprenderci. Essi, in ultima analisi, si sono evoluti per permetterci di riconoscere nel modo migliore gli oggetti del mondo fisico che ci circonda: un oggetto tende a essere costituito da parti adiacenti (legge della vicinanza) e simili (legge della somiglianza); i suoi contorni tendono a variare gradualmente senza presentare brusche discontinuit (legge della continuit di direzione) e sono chiusi (legge della chiusura). Moltissimi oggetti hanno forme regolari e simmetriche (legge della buona forma), e dalle esperienze passate impariamo a riconoscere gli oggetti gi visti (legge dellesperienza). Un sistema percettivo che privilegia queste leggi fornir quindi, nella maggior parte dei casi, informazioni che descrivono correttamente il mondo reale.7 Se invece gli elementi presenti nel campo visivo sono irregolari nella forma e nella distribuzione spaziale, senza simmetrie o continuit, abbiamo serie difficolt a riconoscerne il senso, come negli esempi di a e b. Nella prima, lassenza di linee chiuse e la somiglianza delle numerose chiazze nere presenti sullo sfondo bianco ci impediscono di vedere ci che la figura rappresenta: un cane di razza dalmata visto da dietro, che annusa il terreno. In questa immagine, la legge della somiglianza gioca a nostro sfavore, associando fra loro le macchie nere del cane e del terreno. Daltra parte, lassenza di linee chiuse ci impedisce di separare la figura del cane dallo sfondo. Nella seconda, per gli stessi motivi, risulta difficile riconoscere il viso barbuto che la figura rappresenta.8

Il lettore interessato pu riferirsi al libro Grammatica del vedere, di G.Kanitza, Ed.Il Mulino, 1980, dal quale abbiamo tratto molti degli esempi sopra discussi. 7 Ci avviene nella maggior parte dei casi, ma non sempre, come testimoniano le cosiddette illusioni ottiche, causate da configurazioni visive che ingannano i meccanismi della visione, e producono interpretazioni sbagliate. Lo studio delle diverse illusioni ottiche e delle loro cause molto interessante, ma lo spazio a disposizione non ci consente di parlarne. Daltra parte, questi fenomeni si presentano molto di rado o non si presentano affatto - nelle tipiche interfacce grafiche dei sistemi interattivi. 8 Si tratta di due esempi molto citati nei testi sulla visione. Il primo tratto dal classico testo di P.Lindsay e D.Norman, Human Information Processing (Academic Press, 1980); il secondo da P.B.Porter, Another puzzle-picture, in American Journal of Psychology, n.67, 1954, pp.550-551.

10

Figura 13. Figure prive di Gestalt

La conoscenza delle leggi della Gestalt di grande utilit per il progettista di interfacce grafiche. Egli potr sfruttare questi meccanismi a suo favore, per far s che il sistema visivo dellutente gli mostri le immagini presentate sullo schermo nel modo desiderato. Nel seguito di questo capitolo ne vedremo numerosi esempi.

Vicinanza
Il principio della vicinanza della Gestalt ci dice che elementi vicini verranno percepiti come appartenenti a uno stesso gruppo. Questo ci suggerisce di porre uno vicino allaltro gli elementi grafici che, dal punto di vista funzionale, sono fra loro correlati. E anche, ovviamente, di tenere lontani elementi che non hanno fra loro alcun rapporto. In questo modo il progettista sfrutta la legge della vicinanza a proprio vantaggio, facendo s che i meccanismi della visione rafforzino la percezione dello stretto legame che unisce gli oggetti dellinterfaccia fra loro semanticamente o funzionalmente correlati. La mostra la form di unapplicazione alberghiera. Contiene numerosi campi, per limmissione dei dati degli ospiti dellalbergo. Esiste una certa correlazione fra campi vicini: le informazioni relative alla camera occupata sono raggruppate in basso, i dati per il pagamento del conto sono al centro, e cos via. Ma non c alcun ordine visivo: i campi appaiono disposti alla rinfusa, e queste correlazioni sono quasi impossibili da individuare. Ogni volta che utilizziamo la form, la dobbiamo esplorare visivamente, e riscoprirne la logica nascosta. I meccanismi della visione non ci aiutano a coglierne il senso. Limmagine cos destrutturata (priva di Gestalt) che nemmeno la legge dellesperienza passata ci permetta di venirne a capo rapidamente: ogni volta che la esaminiamo come se fosse la prima volta.

11

Figura 14. Form di unapplicazione alberghiera

La mostra gli stessi campi, riorganizzati visivamente su due form.9 Ora, i campi sono stati chiaramente suddivisi in quattro gruppi di significato omogeneo: il gruppo con le informazioni riguardanti la prenotazione della camera, quello con i dati anagrafici dellospite e, nella seconda form, un gruppo con i dati per il pagamento e uno con i dati per la fatturazione. La vicinanza dei campi semanticamente correlati facilita enormemente la comprensione rispetto alla versione precedente. La correlazione fra i campi vicini ulteriormente sottolineata dalle linee che incorniciano i diversi gruppi, per sfruttare la legge della chiusura. Lallineamento verticale delle etichette e dei campi contribuisce ulteriormente alla forte sensazione di ordine e di semplicit strutturale trasmessa dalla grafica.

Figura 15. Lapplicazione alberghiera di ridisegnata

9

Nella riorganizzazione, qualche campo stato eliminato, evidentemente perch ritenuto superfluo.

12

I meccanismi della visione possono facilitare la comprensione di unimmagine, ma possono anche creare serie difficolt, se non li sfruttiamo per i nostri scopi. Il pannello di , che permette di definire le tabulazioni dei testi in PowerPoint 2007, risulta incomprensibile. Il titolo Allineamento, che si riferisce ai quattro check-box sottostanti, invece visivamente contiguo al grande campo bianco sulla sinistra, e gli viene quindi associato. Questultimo dovrebbe essere associato al titolo Tabulazioni da cancellare il quale per, presumibilmente per un errore di software, spostato sulla destra, e si trova quindi contiguo al titolo Tabulazioni predefinite, con cui fa gruppo (anche per la somiglianza delle parole). Anche in questo caso, ogni volta che esaminiamo il pannello, dobbiamo lottare con il nostro sistema visivo per interpretarlo correttamente.

Figura 16. Da Microsoft PowerPoint 2007

Vediamo ora un esempio pi complesso, legato a una situazione che si presenta frequentemente nella pratica, in molte diverse varianti. Durante la progettazione di un sistema informativo aziendale, allinizio degli anni 90, si trattava di visualizzare su monitor la tabella di informazioni anagrafiche rappresentata in e costituita da cinque colonne, di cui qui non interessa il significato. Le righe della tabella erano per troppo lunghe per i monitor utilizzati, che permettevano di visualizzare righe di 80 caratteri.

Figura 17. Una tabella con righe lunghe, da visualizzare su monitor di 80 caratteri

La soluzione, adottata da un analista di procedure ignaro dei meccanismi della Gestalt, assolutamente disastrosa (). Ogni riga della tabella stata, per cos dire, ripiegata in due, e visualizzata su due righe contigue dello schermo. In questo modo, i campi Stato e Data St. si trovano disposti sotto i campi Anagrafica e Conto FM, mentre il campo Ragione Sociale, troppo lungo, stato diviso in due tranche, disposte una sotto laltra. Per permettere lidentificazione dei vari campi, stato quindi necessario ripetere le etichette su ogni riga della tabella, non essendo pi possibile porle una sola volta in testa a ogni colonna, come in .

13

Figura 18. Rappresentazione a video della tabella di

Tutto ci, unito a qualche disattenzione nella progettazione del layout, rende la figura del tutto incomprensibile. Il motivo molto semplice: le leggi della Gestalt ci impediscono di vederla nel modo corretto. Infatti, lo spazio sotto le righe che iniziano con Anagrafica maggiore di quello sotto le altre righe. Pertanto, la legge della vicinanza ci costringe ad associare le righe a tre a tre, e non a due a due, e per di pi in modo sfasato rispetto alla situazione corretta: i gruppi che il nostro sistema visivo ci presenta sono infatti quelli di , che risultano del tutto privi di senso. Anche la legge della somiglianza crea seri impedimenti alla comprensione. Infatti raggruppa fra loro le etichette simili, creando un gruppo di Ragione Sociale, un gruppo di Conto FM, due gruppo di coppie di linee orizzontali contigue, ecc. Questo, in sostanza, ci fa leggere verticalmente la tabella, impedendoci, di fatto, di leggerla nel modo corretto. Tutte le volte che il sistema ci proporr la tabella sul monitor, sperimenteremo le stesse difficolt di comprensione. Tanto forte leffetto combinato dei meccanismi che abbiamo descritto, che nemmeno la legge dellesperienza passata ci pu aiutare.

Figura 19. Associazione delle righe di , per la legge della vicinanza

Somiglianza
Possiamo utilizzare a nostro vantaggio la legge della somiglianza dando forma o colore simili a quegli elementi grafici che sono funzionalmente o semanticamente correlati. Nel menu di a, tratta dalla home page di www.yahoo.it, ad ogni singola voce associata una piccola icona colorata. In questo caso, le icone non servono a spiegare il significato della voce: le etichette sono chiare, e non c bisogno di spiegazioni aggiuntive; daltra parte le figure sono piccole e non sempre riconoscibili. La loro funzione principale unaltra: quella di associare a ogni voce di menu un pattern visivo ben riconoscibile, che non avrebbe con luso del solo testo. In questo modo, per la legge della somiglianza, tutte le voci vengono raccolte in un gruppo, ben differenziato dagli altri gruppi presenti sulla pagina, che molto densa di informazioni. Analogo fine hanno le icone di b, tratta dalla home page del sito della British Airways di qualche anno fa: esse sono utili nonostante la scarsa comprensibilit delle immagini (perch mai Si registri ora dovrebbe essere associato alla figura di un ombrellone sulla spiaggia?). Nel menu di c, tratto dal pannello di controllo di Windows Vista, strutturalmente simile ai precedenti, le icone hanno dimensioni maggiori, e contengono figure ben riconoscibili. In questo caso, a differenza degli altri due esempi, costituiscono una vera alternativa al testo: in molti casi lutente sar in grado di selezionare la funzione desiderata senza

14

leggerne la descrizione testuale, semplicemente eseguendo una visual search sulla colonna delle icone.

Figura 20. Menu da http://www.yahoo.it (a, 2009), http://www.british-airways.com (b, 2003) e Windows Vista (c, 2009)

Nellesempio di , tratto dalla home page del sito della Esselunga, le otto voci del menu principale posseggono una forma ben riconoscibile, data dalla associazione del testo e di una icona quadrata ben visibile. Stranamente, per, il visual designer ha distanziato le due righe del menu, inserendo fra luna e laltra quattro grandi banner, anchessi di forma quadrata, ma molto pi grandi. La legge della somiglianza e quella della vicinanza, in questo caso, operano in conflitto fra loro: la prima tende a unificare le otto voci di menu in un singolo gruppo, la seconda tende a separarle in due gruppi distinti, fra i quali si inserisce il gruppo dei banner. Questa scelta, che frammenta il menu principale e lo pone in secondo piano, non ci sembra convincente.

Figura 21. Da www.esselunga.it (2009)

Due pessimi esempi, tratti dalla raccolta Interface Hall of Shame sul Web, sono riportati in e in . Nel primo, il

15

progettista non ha ritenuto necessario introdurre alcun accorgimento visivo che permettesse di ripartire le informazioni in gruppi, semplificando limmagine e dandole un significato. Ne risulta una form in cui nomi e valori dei campi si confondono: locchio la percorre invano alla ricerca di qualche elemento che permetta di attribuirle un senso. La figura del tutto priva di Gestalt: la si confronti, pur con le ovvie differenze, con limmagine del cane dalmata che si confonde con lo sfondo, gi visto nella a.

Figura 22. Da Webforms

Nellesempio di , invece, la legge della somiglianza ripartisce gli elementi visivi in tre gruppi ben definiti: bottoni, etichette e campi. Ma, interagendo con il sistema, ci si accorge che non tutti gli elementi che sembravano bottoni lo sono realmente. Subscriber e Contact, infatti, sono solo etichette, e quindi non cliccabili, anche se hanno la stessa forma di Save e Cancel, che sono realmente bottoni.

Figura 23. Titoli o bottoni?

La mostra un altro esempio di pessimo design. Qui, il progettista ha cercato di ridurre le difficolt dovute alleccessivo numero di tab associando a ciascuno di essi unicona colorata, probabilmente allo scopo di rendere pi riconoscibili le singole voci. Ma il risultato controproducente. Le icone, che sono vivacemente colorate con una diecina di colori diversi, contrastano con il colore neutro delle scritte e, per la legge della somiglianza, non si raggruppano con le etichette contigue, ma fanno gruppo a s. Ne risulta un guazzabuglio visivo che rende molto difficile lidentificazione della funzione desiderata.

16

Figura 24. Da MultiEdit 8.0

Chiusura
Una tecnica molto efficace per associare visivamente pi elementi consiste nel racchiuderli allinterno di una cornice chiusa. La mostra tre versioni di uno stesso menu a tendina. Nella prima (a), le varie voci sono elencate in un ordine logico (New, Open e Close sono voci contigue, e cos Save e Save as), ma nessun accorgimento grafico mette in evidenza questi raggruppamenti. Nella seconda (b), stata inserita una spaziatura per distinguere i tre gruppi, sfruttando la legge della vicinanza. Nella terza (c) stata inserita una linea di separazione fra un gruppo e laltro. Ogni gruppo risulta ora allinterno di un rettangolo, che lo isola dagli altri, sottolineando con evidenza molto maggiore le relazioni fra le voci di ciascun gruppo.

Figura 25. Leffetto dei separatori in un menu a tendina

Quando si abbia la necessit di mostrare sul monitor una grande quantit di elementi, come avviene spesso sul Web, luso delle cornici spesso la tecnica pi conveniente per orientare lutente nella lettura corretta della pagina. La mostra la home page del sito di due compagnie aeree, British Airways e Alitalia. In entrambe, la form di prenotazione voli (sulla sinistra in entrambe) posta in grande evidenza dal riquadro che la isola, anche cromaticamente, dagli altri elementi.

17

Figura 26. http://www.britishairways.com e http://www.alitalia.it (2009)

Queste due pagine web, pur nella loro semplicit la grafica semplice e funzionale, senza soluzioni a effetto risultano molto chiare e leggibili: le informazioni sono ben organizzate in gruppi logici facilmente individuabili. Tutti i meccanismi della visione descritti dalle leggi della Gestalt sono stati sfruttati per facilitare lorientamento dellutente allinterno dei diversi gruppi di informazioni. Il risultato non deriva soltanto dalla presenza delle cornici, ma dalluso sapiente di diversi accorgimenti: la vicinanza di informazioni correlate e il contrasto (di forma o colore) fra informazioni che non lo sono, la forte evidenza dei pulsanti principali ottenuta con colori vivaci e saturi, che richiamano i colori del logo delle due compagnie. Ben diverso il risultato ottenuto dai progettisti del sito di . Le informazioni sono inserite in numerosi riquadri, che affollano la pagina. La sensazione complessiva che essa ci trasmette di confusione. Ci che spicca innanzitutto, per la legge della somiglianza, il gruppo delle immagini, che rappresentano prevalentemente delle automobili. Queste per non sono disposte in modo da permetterci di distinguere, a colpo docchio, le diverse aree funzionali della pagina, come negli esempi di : infatti, escono dalle cornici per fare gruppo a s. Nemmeno i titoli dei riquadri ci aiutano a questo scopo: nella maggior parte dei casi, essi sono di corpo inferiore a quello dei testi, e quindi restano, per cos dire, in secondo piano. N ci aiutano i quadratini accanto ai titoli: sono troppo piccoli e di un colore che non li mette in risalto (giallo). Ancora una volta, la legge della somiglianza opera non a favore, ma contro la comprensibilit del sito. La pagina ci costringe a una lettura sequenziale: per individuarne i contenuti, dobbiamo scandirla per intero, leggendo titoli e testi, e identificandone a posteriori i temi principali.

18

Figura 27. http://www.quattroruote.it (2009)

Allineamento
Lallineamento degli elementi visivi una delle tecniche pi importanti usate dai grafici per dare allimmagine una struttura immediatamente percepibile. Una pagina i cui elementi siano disallineati ci trasmette unimpressione di

19

complessit che pu essere molto ridotta con un maggior ordine visivo. Per ottenerlo, gli elementi dovrebbero essere inseriti in una griglia logica ben definita. Confrontiamo ancora una volta la form di con la sua riorganizzazione in . Limmediata comprensibilit di questultima non solo il risultato della vicinanza dei campi semanticamente correlati e delle cornici che racchiudono i diversi gruppi di informazioni. Anche lallineamento delle etichette e dei campi allinterno dei riquadri e, nella form di destra, dei riquadri stessi, contribuisce a trasmettere una sensazione di ordine e di semplicit. In ultima analisi, lallineamento rende gli elementi pi simili, e quindi anche la legge della somiglianza allopera per facilitare ulteriormente lidentificazione dei diversi gruppi. Anche in situazioni molto pi semplici di quella di il mancato allineamento degli elementi visivi pu creare problemi. Nellesempio di , il progettista aveva inteso porre in evidenza i raggruppamenti logici dei vari campi introducendo i due riquadri e ponendoli al centro della finestra. Ma leffetto controproducente: limmagine confusa, e non se ne percepisce la logica: gli elementi sembrano disposti in modo casuale. Per giunta, il gruppo di elementi che maggiormente spicca quello dei campi di input, unificati dalla somiglianza di colore (bianco) e di forma (rettangolare). Anche in questo caso, lorganizzazione visiva degli elementi impedisce di leggerla in modo corretto.

Figura 28. Da Aptiva Communication (IBM)

Colore
Il colore, se usato bene, pu essere di grande aiuto alla comprensione di uninterfaccia. Quando usato male pu creare serie difficolt. I colori andrebbero impiegati non tanto (o non solo) per rendere gradevoli le schermate, quanto soprattutto per distinguere meglio fra loro contenuti di natura diversa. Ancora una volta, possiamo sfruttare a nostro vantaggio la legge della somiglianza della teoria della Gestalt, utilizzando gli stessi colori per associare visivamente elementi fra loro correlati, o colori diversi e contrastanti per dissociare elementi semanticamente o funzionalmente lontani. Anche se la stampa in bianco e nero di questo libro trasforma i colori in toni di grigio, lesempio di dimostra chiaramente lefficacia di questa tecnica, se usata in modo sapiente. Si tratta della mappa in tempo reale dei mercati finanziari presentata dal sito http://www.smartmoney.com. I riquadri rappresentano le principali aziende quotate in borsa, raggruppate per settori merceologici (Health care, Financial, Energy, Utilities, ecc.). Larea di ogni riquadro proporzionale alla capitalizzazione dellazienda, e il colore del riquadro rappresenta la variazione del valore del titolo a

20

partire da una data scelta dallutente. In rosso sono indicate le variazioni negative, in verde quelle positive. La luminosit del colore proporzionale allentit della variazione: rosso vivo = perdita consistente, rosso scuro = perdita lieve, e cos via, come spiegato nella legenda in alto a destra. Limmagine ci mostra a colpo docchio la situazione complessiva del mercato, permettendoci di raggruppare visivamente le aziende in funzione dellandamento del loro titolo (legge della somiglianza). Daltro canto, la vicinanza dei riquadri corrispondenti ad aziende dello stesso settore (legge della vicinanza) e la cornice bianca che delimita ogni settore (legge della chiusura) ci permettono di avere immediatamente una percezione qualitativa dellandamento dellintero settore. Infine, la disposizione spaziale regolare, realizzata ricercando i migliori allineamenti fra i riquadri e collocandoli allinterno di aree anchesse rettangolari e per quando possibile allineate, contribuisce a dare unimpressione di semplicit, nonostante la grande quantit di informazioni visualizzate.

Figura 29. http://www.smartmoney.com (2009)

Un altro eccellente uso del colore mostrato in , che rappresenta una pagina del sito della British Airways di qualche anno fa. Per facilitare allutente la scelta di un volo fra numerose possibilit in giorni vicini, le alternative sono visualizzate in colori diversi secondo la fascia tariffaria utilizzata.

21

Figura 30. Da http://www.britishairways.com

I colori possono anche essere usati per indirizzare lattenzione dellutente su elementi di particolare importanza. Per questo sono particolarmente indicati i colori saturi e caldi (per esempio rosso o arancione vivo), meglio se su sfondi insaturi e freddi (per esempio verde chiaro o azzurro), come nell Figura 18 del Capitolo 10, dove i due controlli dello slider sono di colore rosso vivo su sfondo grigio, mentre il pulsante Esegui ricerca, di colore blu, meno in evidenza. In , il menu principale messo in grande evidenza dal colore rosso vivo, anche nel contesto di pagine molto ricche di banner e di elementi colorati. La voce corrente segnalata da una freccia nera. Essa risulta ben visibile, anche se molto piccola, per effetto del contrasto con il colore rosso vivo del menu. I menu di secondo livello (nel nostro esempio, quello relativo alla voce Servizi e Assistenza) sono invece grigio pallido: questo li separa bene, per contrasto, dal menu principale.

22

Figura 31. Da http://www.mediaworld.it

Il colore pu essere usato per potenziare leffetto della legge della chiusura, colorando i riquadri che identificano le diverse aree funzionalmente differenti di una schermata. A questo scopo si useranno prevalentemente sfondi di colori insaturi, per non risultare stancanti, e rendere i testi ben leggibili. La tecnica particolarmente utile per i siti web con pagine molto ricche di informazioni, che necessario differenziare visivamente. Luso del colore, per essere defficace aiuto alla comprensione, non deve mai eccedere. consigliabile usare pochi colori contemporaneamente, evitando pagine eccessivamente variopinte. Infatti, troppa informazione equivale a nessuna informazione, e pagine troppo ricche di colori diversi tendono a sembrare complesse, anche quando in realt non lo sono. Un altro aspetto che richiede una certa attenzione luso di colori che, presso determinati gruppi di utenti, sono associati a particolari significati. Per esempio, nei paesi occidentali il colore rosso usato per segnalare pericolo, mentre il verde normalmente associato a messaggi di via libera. Un cartello di STOP di colore verde a un incrocio stradale sarebbe ambiguo, e probabilmente causerebbe parecchi incidenti. Cos, scelte differenti del colore dei due pulsanti in a possono portare a conseguenze molto diverse dal punto di vista dellusabilit del sistema. Lassociazione STOP verde e GOrosso genererebbe probabilmente pi errori da parte dellutente dellassociazione inversa, molto pi consueta. Losservazione sembra ovvia, ma gli esempi di queste associazioni sbagliate abbondano. La b mostra un esempio interessante: le parole YES e NO sono, rispettivamente, di colore verde e rosso. Il progettista ha associato i colori al significato delle etichette (NOnegazionerosso) invece che alleffetto che si ottiene premendo i pulsanti relativi, come sarebbe stato pi corretto (NOnon cancellare i recordverde). La distinzione sottile, ma la scelta fatta dal progettista certamente la pi pericolosa.

23

Figura 32. Quali colori associare ai tasti?

La mostra un altro esempio di scelta criticabile dei colori. Nelle pagine del catalogo dei prodotti in vendita presso www.mediaworld.it, i codici colore scelti per segnalarne la disponibilit non seguono le normali convenzioni. Infatti, il verde e il rosso non contraddistinguono i prodotti disponibili ed esauriti, come ci si aspetterebbe, ma indicano, rispettivamente, le novit e i prodotti in promozione. Il nero indica un prodotto esaurito. Il giallo, invece, identifica un prodotto disponibile e non un prodotto in via desaurimento, come ci potremmo aspettare. Le associazioni sono per noi cos innaturali da richiedere uno sforzo cognitivo abbastanza rilevante.

Figura 33. Da http://www.mediaworld.it

Tutto ci, ovviamente, secondo le consuetudini dei paesi occidentali. In altri paesi, le consuetudini potrebbero essere molto differenti. Un altro problema che dobbiamo tenere presente nella scelta dei colori quello della cecit cromatica (daltonismo): come abbiamo gi visto nella sezione dedicata alla visione del Capitolo 4, non tutti gli utenti sono in grado di distinguere correttamente i vari colori, a causa di difetti nella pigmentazione dei coni della retina dellocchio. Il problema importante, poich la percentuale di persone affette da disturbi nel riconoscimento dei colori elevata (circa 1 maschio ogni 12 e 1 femmina ogni 165). I disturbi pi frequenti (presenti nel 5% circa delle persone) riguardano lincapacit di distinguere il rosso dal verde, ma ci sono altri tipi di disturbi, anche se meno diffusi. E quindi opportuno che nellinterfaccia non ci siano informazioni importanti identificabili esclusivamente attraverso il colore. In particolare, non dobbiamo mai supporre che lutente sia in grado di distinguere il rosso dal verde. Da questo punto di vista, lesempio di doppiamente scorretto: i codici colore, oltre che insoliti, come abbiamo gi osservato, non sono distinguibili da una parte significativa degli utenti. Il sito di , invece, correttamente consente allutente di scegliere uno schema cromatico alternativo (con la check-box in basso a destra), che visualizza in giallo e in blu, rispettivamente, le variazioni negative e positive. Questi due colori, infatti, sono distinguibili dalla grandissima maggioranza delle persone.

Percorsi visivi
abbastanza diffusa la convinzione che, quando esaminano una schermata, i nostri occhi seguano un percorso regolare, iniziando dalla posizione di home (langolo in alto a sinistra) e procedendo da sinistra a destra e dallalto in basso, come quando si legge un testo scritto. Questa convinzione non ha alcun fondamento. In realt, la situazione molto pi complessa, e pu essere analizzata utilizzando i dispositivi di eye tracking, che sono in grado di tracciare il percorso effettuato dal nostro sguardo (chiamato scanpath). Questi dispositivi mostrano che il movimento dei nostri occhi

24

molto irregolare: lo sguardo si fissa per un certo tempo su un determinato punto, per acquisire linformazione visiva (fissazione), e quindi sposta lasse visivo su un altro punto, con un movimento rapidissimo (chiamato saccade) durante il quale non viene acquisita alcuna informazione visiva. In media vengono eseguite tre-quattro fissazioni al secondo. Gli studi effettuati con queste apparecchiature mostrano che il percorso dello sguardo, anche sulla stessa immagine, molto variabile, e dipende non solo dalle caratteristiche dellimmagine stessa, ma anche e soprattutto dagli obiettivi di chi guarda. In un classico esperimento del 1967, lo psicologo russo Alfred Yarbus studi i percorsi dello sguardo sul dipinto Un visitatore inaspettato, di I.E.Repin (). Pur con apparati di eye tracking molto pi rudimentali di quelli disponibili oggi, lesperimento mostr chiaramente che losservatore esaminava il quadro con percorsi visivi completamente diversi secondo la richiesta fattagli dal conduttore dellesperimento. Gli scanpath mostrati nella corrispondono alle seguenti richieste del conduttore: 1)- esaminare liberamente il quadro; 2)- esaminare lambiente materiale; 3)- indicare let delle persone; 4)- indicare che cosa facevano i personaggi prima dellarrivo del visitatore inatteso; 5)- memorizzare quali abiti indossano le persone; 6)- memorizzare la posizione delle persone e degli oggetti nella stanza; 7)- indicare quanto tempo il visitatore inatteso stato lontano dalla famiglia.

Figura 34. Lesperimento di Yarbus (1967)

Studi analoghi possono essere condotti sulle interfacce grafiche dei sistemi interattivi, tipicamente sulle pagine web. La mostra lo scanpath di una persona nellesame di una pagina web. Come si vede, lo sguardo percorre la pagina irregolarmente, fissandosi sui diversi menu, sui titoli, secondo una logica che dipende dagli obiettivi (che in questo caso non conosciamo) dellutente.

25

Figura 35. Scanpath di una pagina web (fonte: Universit de Nice Sophia Antipolis)

Le analisi delle interfacce con dispositivi di eye tracking possono fornirci utili informazioni per migliorarne lusabilit. Jakob Nielsen e Kara Pernice hanno raccolto in un libro i risultati di unampia serie di esperimenti condotti con apparati di eye-tracking sulle pagine dei siti web, allo scopo di analizzare le relazioni fra la grafica del sito e la sua usabilit.10 Questi esperimenti confermano quanto detto pi sopra: le persone non esaminano una pagina web sempre nello stesso modo. A volte guardano inizialmente nel mezzo della pagina, perch vi sono attratti da unimmagine di loro interesse. Altre volte locchio si sofferma inizialmente sul logo, per sapere su che sito sono arrivati. Oppure esaminano innanzitutto larea dove si trova il menu di navigazione orizzontale o, ancora, ignorano navigazione e figure per cercare subito qualche informazione nel testo. E cos via. Indipendentemente dalla strategia seguita, lo scanpath quasi sempre molto irregolare: locchio si muove qua e l sulla pagina, con percorsi spezzati del tipo di quello in . Sommando fra loro gli scanpath percorsi da numerosi utenti, possibile costruire le cosiddette heat-map, che mostrano le aree della pagina sulle quali gli sguardi si sono, in media, maggiormente soffermati. Analizzando le heat-map di un gran numero di pagine, Nielsen e Pernice hanno osservato una configurazione prevalente a foma di F (): gli utenti inizialmente tendono a esaminare, con un movimento orizzontale degli occhi, la parte superiore dellarea dei contenuti: questo rappresenta il tratto orizzontale superiore della F; poi, lo sguardo esplora la pagina un po pi sotto, anche qui con una scansione orizzontale, ma pi breve: il tratto orizzontale corto della F; quindi, la pagina viene esaminata con un movimento verticale, tendenzialmente sulla sinistra: il tratto verticale della F.

Si deve comunque tener conto che si tratta di una configurazione media, ottenuta accumulando gli scanpath di numerosi utenti: i singoli percorsi individuali possono differire fra loro in modo significativo.

10

J.Nielsen, K.Pernice, Eyetracking Web Usability, New Riders, 2010.

26

Figura 36. Heat-map di tre pagine web (da Jakob Nielsen, http://wwww.useit.com/alertbox/reading_pattern)

Analisi di questo tipo possono fornire informazioni molto utili per migliorare lusabilit dei siti web. Studiando i cammini percorsi dallo sguardo dei diversi utenti sulle pagine, e correlandoli agli obiettivi che essi hanno nel condurre questo esame, possiamo ricavare utili informazioni per migliorarne il layout. Anche se i dispositivi di eye-tracking oggi non sono pi invasivi, e sono di semplice utilizzo, si tratta tuttavia di analisi complesse, tuttoggi utilizzate solo in casi molto particolari.

Ripasso ed esercizi
1. Riporta la formulazione dalle prime tre leggi della Gestalt, e spiega quali indicazioni possiamo trarre da
esse per il visual design delle pagine di un sito web.

2. Esamina le pagine attuali del sito http://www.alitalia.it. Ritieni che i progettisti ne abbiano disegnato i
layout in modo corretto, dal punto di vista delle leggi della Gestalt? Rispondi dettagliatamente per ciascuna pagina esaminata, indicando e motivando le eventuali modifiche che potrebbero migliorarne lusabilit.

3. Confronta la versione corrente dei due siti http://www.alitalia.it e http://www.british-airways.it. Quale, a

tuo parere, utilizza layout coerenti con le leggi della Gestalt?

4. Analizza la struttura dei pannelli che servono per definire le impostazioni del tuo browser. Come giudichi,
dal punto di vista delle leggi della Gestalt, il layout di questi pannelli? Rispondi dettagliatamente, analizzando ogni singolo pannello, e indicando le eventuali modifiche che potrebbero migliorarne lusabilit.

Approfondimenti e ricerche
1. Per approfondire le relazioni fra i meccanismi della visione e il design grafico, puoi usare: C.Ware, Visual
Thinking for Design, Morgan Kaufmann, 2008, un libro molto interessante, rigoroso e ricco di esempi.

2. Esamina un insieme di siti appartenenti a una stessa categoria, a tua scelta (per esempio, siti di compagnie
aeree, oppure siti della moda, siti di negozi online, ecc.), e raccogli esempi di soluzioni grafiche che, a tuo parere, sono criticabili dal punto di vista della teoria della Gestalt, spiegandone i motivi.

3. molto importante per il progettista avere a disposizione delle linee guida per la progettazione di form usabili. 27

In rete esiste molto materiale su questo argomento. Ricerca del materiale attendibile, e produci un sintetico elenco di linee guida che si riferiscono agli aspetti grafici dei form, citando, per ciascuna di esse, le fonti. Suggerimenti: ricerca con Google form usability. Un ottimo punto di partenza larticolo di Maurizio Boscarol: Lusabilit dei form, su http://www.usabile.it.

4. Cerca in rete qualche studio che analizza gli scanpath di pagine web. Suggerimento: ci sono diversi video
interessanti su http://ww.youtube.com, http://www.useit.com/eyetracking. e parecchio materiale sul sito di Jakob Nielsen, in

28