N Cap.12: Progettare la grafica

8/3/2019 N Cap.12: Progettare la grafica

1/28

12. Progettare la graficaSintesi del capitolo

Questo capitolo descrive alcune linee guida per la progettazione dinterfacce grafiche. Dopo avere osservato che gliobiettivi che possono guidare il visual designer possono essere diversi, ci si concentra in particolare sullobiettivodellusabilit. Si introducono le leggi della Gestalt, che descrivono le modalit con le quali lapparato visivo umanosegmenta il campo visivo raccogliendo in gruppi gli elementi visivi che lo compongono. Si mostra quindi, attraverso ladiscussione di numerosi esempi, come le leggi della Gestalt possono guidare utilmente il progettista di sistemi interattivinella realizzazione di soluzioni grafiche di facile comprensione. Gli esempi riguardano soprattutto lopportunit diavvicinare elementi visivi semanticamente e funzionalmente correlati, dando loro un aspetto simile e separandolivisivamente dagli altri elementi con luso di riquadri o cornici, e creando un ordine visivo mediante un uso consapevoledel colore e degli allineamenti.

Design dellinterazione e comunicazione visivaLa comunicazione visiva ha un ruolo fondamentale nellinterazione uomo-macchina: la maggior parte delleinformazioni che un sistema trasmette al suo utente sono veicolate da display video di varia forma e dimensione, daigrandi monitor che tappezzano le pareti delle control room dei grandi impianti di processo, fino ai piccoli display deitelefoni cellulari o degli altri dispositivi mobili in circolazione. Lusabilit di questi sistemi dipende quindi in modoconsiderevole dalla loro interfaccia grafica.

La grafica dei sistemi interattivi pu perseguire obiettivi diversi: la comprensibilit delle informazioni, lusabilit, lagradevolezza complessiva, loriginalit, la capacit di suscitare emozioni. Occorre grande chiarezza nella definizionedei requisiti del progetto, perch ciascuno di questi obiettivi richiede approcci e soluzioni differenti, che potrebberoessere 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 dellaCoca Cola. Anche se non si capisce subito, si tratta di un menu: le varie voci appaiono, una a una, esplorando con ilmouse il piede e la mano delle ragazze nelle zone indicate dal tratteggio. La b mostra infatti la scritta che comparequando il puntatore del mouse passa sopra la zona destra del piede in primo piano. Il design divertente e originale, macertamente lascia molto a desiderare dal punto di vista dellusabilit. Lutente non ha mai una visione dinsieme deicontenuti del sito: il menu visibile sempre e solo a pezzi, e per leggerne tutte le voci occorre esplorare col mouse unadiecina di aree sensibili diverse.

1


2/28

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 esseremolto negativo in un sito con uno scopo diverso: tutto dipende dagli obiettivi. Loriginalit del design spesso unobiettivo prioritario per il sito web di uno stilista di moda, ma sarebbe probabilmente considerata controproducente peril sito di unofficina meccanica che voglia trasmettere unimpressione di economicit e concretezza. La capacit disuscitare forti emozioni potrebbe essere importante per la grafica di un computer game, ma certamente non per unsistema 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. Oppurepu godere contemporaneamente di tutte queste caratteristiche ().

2
http://www.fanta.it/http://www.fanta.it/


3/28

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 JacobNielsen, ci fu un ampio dibattito fra i fautori dellusabilit dei siti web, da un lato, e della libert espressiva, dallaltro. Iprimi rimproveravano ai secondi di perseguire una creativit libera da ogni vincolo, spesso a discapito della facilitduso. I secondi obiettavano che lusabilit perseguita ad ogni costo avrebbe, in ultima analisi, limitato la libert dicomunicazione 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 icosti hanno rivalutato in modo considerevole limportanza degli aspetti emozionali del design. Lo stesso Donald

Norman inizia il suo libroEmotional Design (2004) con una citazione di William Morris, uno dei padri dellindustrialdesign:

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 realizzatodal forum della trasmissione RAI Mediamente, in http://www.unitus.it/virtual/e-book/e-library.htm (aprile 2001).2William Morris, The Beauty of Life, 1880.

3
http://www.unitus.it/virtual/e-book/e-library.htmhttp://www.unitus.it/virtual/e-book/e-library.htm


4/28

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 lagrafica esclusivamente dal punto di vista della usabilit, senza occuparci degli altri aspetti indicati in , che esulano dagliargomenti di questo libro e ci porterebbero molto lontano. Da questo punto di vista, citando le parole dello standardISO 9241-12,4la presentazione dellinformazione visiva dovrebbe abilitare lutente a eseguire i compiti percettivi (peresempio, la ricerca dinformazioni sullo schermo) in modo efficace, efficiente e con soddisfazione. Per raggiungerequestobiettivo, prosegue ancora lo standard, importante che, nel progettare linformazione visiva, si considerino leseguenti 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 ericonoscibile.

Per raggiungere questi obiettivi, nella progettazione della grafica occorre considerare numerosi aspetti. Non solo lecaratteristiche del sistema visivo umano e dei processi cognitivi che filtrano ed elaborano le informazioni percepite dainostri 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 artifigurative spesso modesta o del tutto inesistente, come suggerisce la nostra esperienza trentennale con gli studentidinformatica. Le abilit pi marcate fra i progettisti di software sono infatti quelle di carattere logico-analitico, moltolontane dalla sensibilit di un visual designer. Non stupisce, quindi, che le interfacce grafiche realizzate da progettisti diorigine informatica siano spesso trascurate e molto carenti dal punto di vista estetico. Un professionista dellinteractiondesign, qualunque sia la sua formazione, dovrebbe tuttavia essere in grado di valutare la qualit delle interfaccegrafiche, e di progettare soluzioni grafiche corrette dal punto di vista dellusabilit ed esteticamente gradevoli, almenonelle 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 progettazionedei siti web non elementari.

In questo capitolo forniremo alcune linee guida per la progettazione delle interfacce grafiche. Esse integrano le lineeguida descritte nel Capitolo 10, che sono di validit generale, introducendo alcuni elementi specifici che tengono contodelle caratteristiche del sistema visivo umano.

Le leggi della Gestalt

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

3Donald Norman,Emotional Design, ed.italiana Apogeo, 2004, pag.6.4 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 diquesto libro, e non ne tratteremo oltre.

4


5/28

psicologia della forma, una corrente psicologica che si svilupp tra gli anni '10 e gli anni '30 del secolo scorso. I suoiesponenti 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 componentielementari, da analizzare separatamente, perch un insieme pi della somma delle sue parti . In particolare, questoavviene 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, quandoosserviamo una fila di lampadine che si accendono e si spengono in sequenza con una certa cadenza temporale ( ), noipercepiamo 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 incorniciatada tende. Leffetto complessivo determinato dalla somma di questi elementi per molto diverso; losservatorepercepisce innanzitutto un viso di donna che, com confermato dal titolo del quadro, assomiglia allattrice Mae West: iltutto 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 campovisivo tendono a organizzarsi in unit, cio a venire raggruppati in modi diversi, secondo la loro forma e posizione

5


6/28

relativa. Esse sono chiamate legge della vicinanza, della somiglianza, della chiusura, della continuit di direzione, dellabuona 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 pivicini tendono a essere raccolti in unit.

Nella a, formata da 36 piccoli cerchi, potremmo in teoria vedere molti gruppi diversi, formati da varie combinazioni dicerchi. 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, sufficienteinserire piccole modifiche nella posizione dei punti, perch la figura si stabilizzi: nelle b, c e d le configurazioni ciappaiono infatti molto stabili e univoche. Nella prima vediamo inequivocabilmente tre colonne verticali, nella secondatre righe orizzontali, e nella terza quattro gruppi di forma quadrata. Poich lunica grandezza che varia fra unaconfigurazione e laltra la distanza, mentre forma, colore e numero dei cerchi sono rimasti invariati, chiaro che iraggruppamenti sono determinati dalla distanza relativa fra gli elementi. Ecco perch Wertheimer afferma che, a paritdi 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 lorosimili tendono a essere raccolti in unit.

Se nella a, invece di spostarli, modifichiamo il colore di alcuni elementi, otteniamo una nuova segmentazione bendefinita e stabile del campo visivo. Per esempio, nella a percepiamo due gruppi ben distinti di elementi: un gruppo di trerighe orizzontali bianche, e un gruppo tre righe orizzontali nere. Inb 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 dianaloga forma. Per esempio, nella c il gruppo dei quadrati neri viene percepito come ben distinto dal gruppo dei cerchineri. A parit di tutte le altre condizioni, quindi, tendono a raggrupparsi quegli elementi che hanno qualche tipo disomiglianza. 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,perdiversit o contrasto. Nella d, lelemento grigio spicca chiaramente nel contesto degli altri elementi, tutti neri: lalegge della somiglianza fa s che esso venga isolato da tutti gli altri, in un gruppo costituito da un singolo elemento.

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

6


7/28

Figura 6. Legge della somiglianza

Legge della chiusura: a parit di tutte le altre condizioni, le linee delimitanti una superficie chiusa sipercepiscono 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, seaggiungiamo i tratti orizzontali che uniscono le linee verticali come in b, la segmentazione del campo visivo cambia, evediamo 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 quadreaccostate (][) sono molto vicine, e quindi dovrebbero essere raccolte in gruppo, noi le associamo diversamente, evediamo 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, altrevolte vediamo due rettangoli e due parentesi ai lati.

7


8/28

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 lineeche 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 bruschicambiamenti di direzione e quindi, a un incrocio con altri segmenti, si unifica di preferenza con quello che continuanella medesima direzione. Per esempio, i quattro segmenti obliqui di a si unificano in un unico segmento che sembradisposto 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 riconosceregli oggetti del mondo reale, che possono venire parzialmente nascosti da altri oggetti pi vicini a noi. Anche le lineecurve tendono a mantenere il proprio andamento e, dopo un incrocio con altre linee, a proseguire nelle linee che meno sidiscostano 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 cherisultino entit per quanto possibile equilibrate, armoniche, costituite secondo un medesimo principio in tutte leloro parti.

Questo importantissimo principio, detto anche principio di pregnanza o della coerenza strutturale, non facilmentedefinibile con precisione, ma risulta chiaro dagli esempi. Nella a, in virt della legge della chiusura, vediamo due figurechiuse distinte, ciascuna con una propria forma definita. Se per le avviciniamo come in b, gli elementi si raggruppanoin modo completamente diverso. Le due figure, per cos dire, si trasformano, e diventa praticamente impossibile vederele due configurazioni di partenza. Questo perch, nel nuovo insieme, le linee si collegano fra loro in un modostrutturalmente pi coerente: i segmenti lineari si uniscono ad altri segmenti lineari a formare un poligono, mentre lelinee curve si uniscono a formare una figura tondeggiante. La tendenza alla coerenza strutturale e alla continuit didirezione ci permettono di vedere la figura in un solo modo, eliminando tutte le altre possibili segmentazioni, fra lequali anche quella di c (una figura esterna a tratto continuo, e una interna a tratteggio).

8


9/28

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 uncubo, 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 consideriamonello 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 quadratobianco 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 dellebande bianche su uno sfondo nero. Infatti, sono queste le bande pi regolari: fra i margini di ciascuna banda intercorresempre la medesima distanza. Con linterpretazione contraria, avremmo delle bande nere molto irregolari su sfondobianco: 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 laminore 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 dannoorigine 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 mostratoin a, dove riconosciamo facilmente la lettera E, anche se molti tratti sono mancanti. Infatti, la familiarit con questalettera 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

9


10/28

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, difronte a una molteplicit di elementi presenti nel nostro campo visivo, il nostro sistema visivo sceglie una ben precisainterpretazione, in virt di propri meccanismi di funzionamento. Questi non dovrebbero sorprenderci. Essi, in ultimaanalisi, si sono evoluti per permetterci di riconoscere nel modo migliore gli oggetti del mondo fisico che ci circonda: unoggetto tende a essere costituito da parti adiacenti (legge della vicinanza) e simili (legge della somiglianza); i suoicontorni tendono a variare gradualmente senza presentare brusche discontinuit (legge della continuit di direzione) esono chiusi (legge della chiusura). Moltissimi oggetti hanno forme regolari e simmetriche (legge della buona forma), edalle esperienze passate impariamo a riconoscere gli oggetti gi visti (legge dellesperienza). Un sistema percettivo cheprivilegia queste leggi fornir quindi, nella maggior parte dei casi, informazioni che descrivono correttamente ilmondo reale.7

Se invece gli elementi presenti nel campo visivo sono irregolari nella forma e nella distribuzione spaziale, senzasimmetrie 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 divedere 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. Daltraparte, lassenza di linee chiuse ci impedisce di separare la figura del cane dallo sfondo. Nella seconda, per gli stessimotivi, risulta difficile riconoscere il viso barbuto che la figura rappresenta.8

6 Il lettore interessato pu riferirsi al libro Grammatica del vedere, di G.Kanitza, Ed.Il Mulino, 1980, dal quale abbiamo tratto moltidegli esempi sopra discussi.7 Ci avviene nella maggior parte dei casi, ma non sempre, come testimoniano le cosiddette illusioni ottiche, causate daconfigurazioni visive che ingannano i meccanismi della visione, e producono interpretazioni sbagliate. Lo studio delle diverseillusioni ottiche e delle loro cause molto interessante, ma lo spazio a disposizione non ci consente di parlarne. Daltra parte, questifenomeni 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 ofPsychology, n.67, 1954, pp.550-551.

10


11/28

Figura 13.Figure prive di Gestalt

La conoscenza delle leggi della Gestalt di grande utilit per il progettista di interfacce grafiche. Egli potrsfruttare 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 stessogruppo. Questo ci suggerisce di porre uno vicino allaltro gli elementi grafici che, dal punto di vista funzionale, sono fraloro correlati. E anche, ovviamente, di tenere lontani elementi che non hanno fra loro alcun rapporto. In questo modo ilprogettista 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 funzionalmentecorrelati.

La mostra la form di unapplicazione alberghiera. Contiene numerosi campi, per limmissione dei dati degli ospitidellalbergo. Esiste una certa correlazione fra campi vicini: le informazioni relative alla camera occupata sonoraggruppate in basso, i dati per il pagamento del conto sono al centro, e cos via. Ma non c alcun ordine visivo: icampi appaiono disposti alla rinfusa, e queste correlazioni sono quasi impossibili da individuare. Ogni volta cheutilizziamo la form, la dobbiamo esplorare visivamente, e riscoprirne la logica nascosta. I meccanismi della visione nonci aiutano a coglierne il senso. Limmagine cos destrutturata (priva di Gestalt) che nemmeno la leggedellesperienza passata ci permetta di venirne a capo rapidamente: ogni volta che la esaminiamo come se fosse laprima volta.

11


12/28

Figura 14.Form di unapplicazione alberghiera

La mostra gli stessi campi, riorganizzati visivamente su due form.9 Ora, i campi sono stati chiaramente suddivisi inquattro gruppi di significato omogeneo: il gruppo con le informazioni riguardanti la prenotazione della camera, quellocon i dati anagrafici dellospite e, nella seconda form, un gruppo con i dati per il pagamento e uno con i dati per lafatturazione. 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 diversigruppi, 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

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

12


13/28

I meccanismi della visione possono facilitare la comprensione di unimmagine, ma possono anche creare seriedifficolt, se non li sfruttiamo per i nostri scopi. Il pannello di , che permette di definire le tabulazioni dei testi inPowerPoint 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 titoloTabulazioni da cancellare il quale per, presumibilmente per un errore di software, spostato sulla destra, e si trova quindi contiguo al titoloTabulazioni predefinite, con cui fa gruppo (anche per lasomiglianza delle parole). Anche in questo caso, ogni volta che esaminiamo il pannello, dobbiamo lottare con ilnostro 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 moltediverse varianti. Durante la progettazione di un sistema informativo aziendale, allinizio degli anni 90, si trattava divisualizzare su monitor la tabella di informazioni anagrafiche rappresentata in e costituita da cinque colonne, di cui quinon interessa il significato. Le righe della tabella erano per troppo lunghe per i monitor utilizzati, che permettevano divisualizzare 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. Inquesto modo, i campi Stato e Data St. si trovano disposti sotto i campi Anagrafica e Conto FM, mentre il campoRagione Sociale, troppo lungo, stato diviso in due tranche, disposte una sotto laltra. Per permetterelidentificazione dei vari campi, stato quindi necessario ripetere le etichette su ogni riga della tabella, non essendo pipossibile porle una sola volta in testa a ogni colonna, come in .

13


14/28

Figura 18.Rappresentazione a video della tabella di

Tutto ci, unito a qualche disattenzione nella progettazione del layout, rende la figura del tutto incomprensibile. Ilmotivo molto semplice: le leggi della Gestalt ci impediscono di vederla nel modo corretto. Infatti, lo spazio sotto lerighe che iniziano con Anagrafica maggiore di quello sotto le altre righe. Pertanto, la legge della vicinanza cicostringe 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 lalegge della somiglianza crea seri impedimenti alla comprensione. Infatti raggruppa fra loro le etichette simili, creandoun 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. Inquesto caso, le icone non servono a spiegare il significato della voce: le etichette sono chiare, e non c bisogno dispiegazioni 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 solotesto. In questo modo, per la legge della somiglianza, tutte le voci vengono raccolte in un gruppo, ben differenziatodagli altri gruppi presenti sulla pagina, che molto densa di informazioni. Analogo fine hanno le icone di b, tratta dallahome page del sito della British Airways di qualche anno fa: esse sono utili nonostante la scarsa comprensibilit delleimmagini (perch mai Si registri ora dovrebbe essere associato alla figura di un ombrellone sulla spiaggia?). Nelmenu 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
http://www.yahoo.it/http://www.yahoo.it/


15/28

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 WindowsVista (c, 2009)

Nellesempio di , tratto dalla home page del sito della Esselunga, le otto voci del menu principale posseggono unaforma ben riconoscibile, data dalla associazione del testo e di una icona quadrata ben visibile. Stranamente, per, ilvisual designer ha distanziato le due righe del menu, inserendo fra luna e laltra quattro grandi banner, anchessi diforma quadrata, ma molto pi grandi. La legge della somiglianza e quella della vicinanza, in questo caso, operano inconflitto fra loro: la prima tende a unificare le otto voci di menu in un singolo gruppo, la seconda tende a separarle indue gruppi distinti, fra i quali si inserisce il gruppo dei banner. Questa scelta, che frammenta il menu principale e lopone 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
http://www.yahoo.it/http://www.british-airways.com/http://www.esselunga.it/http://www.yahoo.it/http://www.british-airways.com/http://www.esselunga.it/


16/28

progettista non ha ritenuto necessario introdurre alcun accorgimento visivo che permettesse di ripartire le informazioniin gruppi, semplificando limmagine e dandole un significato. Ne risulta una form in cui nomi e valori dei campi siconfondono: 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 confondecon 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 losono realmente. Subscriber e Contact, infatti, sono solo etichette, e quindi non cliccabili, anche se hanno la stessaforma 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 alleccessivonumero 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 coloridiversi, contrastano con il colore neutro delle scritte e, per la legge della somiglianza, non si raggruppano con leetichette contigue, ma fanno gruppo a s. Ne risulta un guazzabuglio visivo che rende molto difficile lidentificazionedella funzione desiderata.

16


17/28

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 inevidenza questi raggruppamenti. Nella seconda (b), stata inserita una spaziatura per distinguere i tre gruppi, sfruttandola legge della vicinanza. Nella terza (c) stata inserita una linea di separazione fra un gruppo e laltro. Ogni grupporisulta ora allinterno di un rettangolo, che lo isola dagli altri, sottolineando con evidenza molto maggiore le relazionifra 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 prenotazionevoli (sulla sinistra in entrambe) posta in grande evidenza dal riquadro che la isola, anche cromaticamente, dagli altrielementi.

17


18/28

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 dellutenteallinterno dei diversi gruppi di informazioni. Il risultato non deriva soltanto dalla presenza delle cornici, ma dallusosapiente di diversi accorgimenti: la vicinanza di informazioni correlate e il contrasto (di forma o colore) frainformazioni che non lo sono, la forte evidenza dei pulsanti principali ottenuta con colori vivaci e saturi, che richiamanoi colori del logo delle due compagnie.

Ben diverso il risultato ottenuto dai progettisti del sito di . Le informazioni sono inserite in numerosi riquadri, cheaffollano la pagina. La sensazione complessiva che essa ci trasmette di confusione. Ci che spicca innanzitutto, per lalegge della somiglianza, il gruppo delle immagini, che rappresentano prevalentemente delle automobili. Queste pernon 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 inrisalto (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, leggendotitoli e testi, e identificandone a posteriorii temi principali.

18
http://www.britishairways.com/http://www.britishairways.com/http://www.alitalia.it/http://www.britishairways.com/http://www.alitalia.it/


19/28

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

Allineamento

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

19
http://www.quattroruote.it/http://www.quattroruote.it/http://www.quattroruote.it/


20/28

complessit che pu essere molto ridotta con un maggior ordine visivo. Per ottenerlo, gli elementi dovrebbero essereinseriti 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 edelle cornici che racchiudono i diversi gruppi di informazioni. Anche lallineamento delle etichette e dei campiallinterno 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 dueriquadri 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 chemaggiormente 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)

ColoreIl colore, se usato bene, pu essere di grande aiuto alla comprensione di uninterfaccia. Quando usato male pu creareserie difficolt. I colori andrebbero impiegati non tanto (o non solo) per rendere gradevoli le schermate, quantosoprattutto per distinguere meglio fra loro contenuti di natura diversa. Ancora una volta, possiamo sfruttare a nostrovantaggio la legge della somiglianza della teoria della Gestalt, utilizzando gli stessi colori per associare visivamenteelementi fra loro correlati, o colori diversi e contrastanti per dissociare elementi semanticamente o funzionalmentelontani.

Anche se la stampa in bianco e nero di questo libro trasforma i colori in toni di grigio, lesempio di dimostrachiaramente lefficacia di questa tecnica, se usata in modo sapiente. Si tratta della mappa in tempo reale dei mercatifinanziari 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
http://www.smartmoney.com/http://www.smartmoney.com/


21/28

partire da una data scelta dallutente. In rosso sono indicate le variazioni negative, in verde quelle positive. Laluminosit del colore proporzionale allentit della variazione: rosso vivo = perdita consistente, rosso scuro = perditalieve, e cos via, come spiegato nella legenda in alto a destra. Limmagine ci mostra a colpo docchio la situazionecomplessiva del mercato, permettendoci di raggruppare visivamente le aziende in funzione dellandamento del lorotitolo (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 avereimmediatamente 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 perquando possibile allineate, contribuisce a dare unimpressione di semplicit, nonostante la grande quantit diinformazioni 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 qualcheanno fa. Per facilitare allutente la scelta di un volo fra numerose possibilit in giorni vicini, le alternative sonovisualizzate in colori diversi secondo la fascia tariffaria utilizzata.

21
http://www.smartmoney.com/http://www.smartmoney.com/http://www.smartmoney.com/


22/28

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

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

22
http://www.britishairways.com/http://www.britishairways.com/


23/28

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

Il colore pu essere usato per potenziare leffetto della legge della chiusura, colorando i riquadri che identificano lediverse aree funzionalmente differenti di una schermata. A questo scopo si useranno prevalentemente sfondi di coloriinsaturi, per non risultare stancanti, e rendere i testi ben leggibili. La tecnica particolarmente utile per i siti web conpagine molto ricche di informazioni, che necessario differenziare visivamente.

Luso del colore, per essere defficace aiuto alla comprensione, non deve mai eccedere. consigliabile usare pochicolori contemporaneamente, evitando pagine eccessivamente variopinte. Infatti, troppa informazione equivale anessuna informazione, e pagine troppo ricche di colori diversi tendono a sembrare complesse, anche quando in realtnon lo sono.

Un altro aspetto che richiede una certa attenzione luso di colori che, presso determinati gruppi di utenti, sonoassociati a particolari significati. Per esempio, nei paesi occidentali il colore rosso usato per segnalare pericolo, mentreil verde normalmente associato a messaggi di via libera. Un cartello di STOP di colore verde a un incrocio stradalesarebbe ambiguo, e probabilmente causerebbe parecchi incidenti. Cos, scelte differenti del colore dei due pulsanti in apossono portare a conseguenze molto diverse dal punto di vista dellusabilit del sistema. Lassociazione STOPverde

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 esempiointeressante: le parole YES e NO sono, rispettivamente, di colore verde e rosso. Il progettista ha associato i colori alsignificato 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 dalprogettista certamente la pi pericolosa.

23
http://www.mediaworld.it/http://www.mediaworld.it/


24/28

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 pressowww.mediaworld.it, i codici colore scelti per segnalarne la disponibilit non seguono le normali convenzioni. Infatti, ilverde 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 noicos 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 esseremolto 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 didistinguere correttamente i vari colori, a causa di difetti nella pigmentazione dei coni della retina dellocchio. Ilproblema importante, poich la percentuale di persone affette da disturbi nel riconoscimento dei colori elevata (circa1 maschio ogni 12 e 1 femmina ogni 165). I disturbi pi frequenti (presenti nel 5% circa delle persone) riguardanolincapacit 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 sonodistinguibili da una parte significativa degli utenti. Il sito di , invece, correttamente consente allutente di scegliere unoschema cromatico alternativo (con la check-box in basso a destra), che visualizza in giallo e in blu, rispettivamente, levariazioni 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, comequando 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 percorsoeffettuato dal nostro sguardo (chiamato scanpath). Questi dispositivi mostrano che il movimento dei nostri occhi

24
http://www.mediaworld.it/http://www.mediaworld.it/http://www.mediaworld.it/http://www.mediaworld.it/


25/28

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) duranteil 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 suldipinto Un visitatore inaspettato, di I.E.Repin (). Pur con apparati di eye tracking molto pi rudimentali di quellidisponibili oggi, lesperimento mostr chiaramente che losservatore esaminava il quadro con percorsi visivicompletamente 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 lambientemateriale; 3)- indicare let delle persone; 4)- indicare che cosa facevano i personaggi prima dellarrivo del visitatoreinatteso; 5)- memorizzare quali abiti indossano le persone; 6)- memorizzare la posizione delle persone e degli oggettinella 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. Lamostra lo scanpath di una persona nellesame di una pagina web. Come si vede, lo sguardo percorre la paginairregolarmente, fissandosi sui diversi menu, sui titoli, secondo una logica che dipende dagli obiettivi (che in questo caso

non conosciamo) dellutente.

25


26/28

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 apparatidi 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 stessomodo. 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 esaminanoinnanzitutto larea dove si trova il menu di navigazione orizzontale o, ancora, ignorano navigazione e figure per cercaresubito qualche informazione nel testo. E cos via. Indipendentemente dalla strategia seguita, lo scanpath quasi sempremolto 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 mostranole aree della pagina sulle quali gli sguardi si sono, in media, maggiormente soffermati. Analizzando le heat-map di ungran 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 verticaledella F.

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

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

26


27/28

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 icammini percorsi dallo sguardo dei diversi utenti sulle pagine, e correlandoli agli obiettivi che essi hanno nel condurrequesto esame, possiamo ricavare utili informazioni per migliorarne il layout. Anche se i dispositivi di eye-tracking ogginon sono pi invasivi, e sono di semplice utilizzo, si tratta tuttavia di analisi complesse, tuttoggi utilizzate solo in casimolto particolari.

Ripasso ed esercizi

1. Riporta la formulazione dalle prime tre leggi della Gestalt, e spiega quali indicazioni possiamo trarre daesse 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 ilayout in modo corretto, dal punto di vista delle leggi della Gestalt? Rispondi dettagliatamente perciascuna pagina esaminata, indicando e motivando le eventuali modifiche che potrebbero migliorarnelusabilit.

3. Confronta la versione corrente dei due siti http://www.alitalia.it e http://www.british-airways.it. Quale, atuo 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 migliorarnelusabilit.

Approfondimenti e ricerche

1. Per approfondire le relazioni fra i meccanismi della visione e il design grafico, puoi usare: C.Ware, VisualThinking 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 compagnieaeree, oppure siti della moda, siti di negozi online, ecc.), e raccogli esempi di soluzioni grafiche che, a tuoparere, 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
http://www.useit.com/alertbox/reading_patternhttp://www.alitalia.it/http://www.alitalia.it/http://www.british-airways.it/http://www.useit.com/alertbox/reading_patternhttp://www.alitalia.it/http://www.alitalia.it/http://www.british-airways.it/


28/28

In rete esiste molto materiale su questo argomento. Ricerca del materiale attendibile, e produci un sinteticoelenco 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 MaurizioBoscarol: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 videointeressanti su http://ww.youtube.com, e parecchio materiale sul sito di Jakob Nielsen, inhttp://www.useit.com/eyetracking.
http://www.usabile.it/http://ww.youtube.com/http://www.useit.com/eyetrackinghttp://www.usabile.it/http://ww.youtube.com/http://www.useit.com/eyetracking

N Cap.12: Progettare la grafica

Documents

Transcript of N Cap.12: Progettare la grafica