L'interazione tra l'utente e il computer avviene attraverso l'interfaccia grafica.
E' fondamentale che l'interfaccia risponda ad una serie di requisiti:

1. L’interfaccia grafica deve risultare di semplice utilizzo per gli utenti

1.1 L’uso di icone e la gradualità nel proporre le opzioni disponibili

1.2 Ambiguità delle icone

1.3 La denominazione dei tasti e dei collegamenti ipertestuali

1.4 Il raggruppamento dei tasti per categorie

1.5 La chiarezza nell’indicare gli elementi interattivi sulla pagina

1.6 L’equilibrio fra essenzialità e ridondanza

1.7 La coerenza nel layout e nella grafica



2. L’interfaccia grafica deve risultare esteticamente piacevole

2.1 L’interfaccia grafica deve veicolare una identità grafica

2.2 Tipologie di impaginazione sul Web

2.3 Il possibile disorientamento dell’utente causato da un criterio di navigazione innovativo

2.4 Tener conto del target

2.5 L’interfaccia grafica deve risultare rapida da visualizzare



3. Approfondimenti

----------------------------------------------------------------------------

1. L’interfaccia grafica deve risultare di semplice utilizzo per gli utenti

Anche se alcune tecnologie (Shockwave e Flash di Macromedia) permettono all’art director e ai progettisti una notevole libertà nell’ideazione dell’interattività e della grafica di un sito web, tale creatività deve essere guidata dalla fondamentale considerazione dell’usabilità del sito: l’utente non deve “cercare” le funzioni o la sezione del sito di suo interesse: la navigazione deve apparirgli naturale.
Tale obiettivo è perseguito mediante differenti strategie:

· l’uso di icone e la gradualità nel proporre le opzioni disponibili
· la denominazione dei collegamenti ipertestuali
· il raggruppamento dei tasti per categorie
· la chiarezza nell’indicare gli elementi interattivi sulla pagina
· l’equilibrio fra essenzialità e ridondanza
· la coerenza nel layout e nella grafica

________________________________________________

1.1 L’uso di icone e la gradualità nel proporre le opzioni disponibili

Spesso in passato l’uso delle icone ha condotto alla creazione di interfacce grafiche poco intuitive. L’utilizzo di icone è pratica comune nei programmi professionali, tuttavia l’utente, a differenza del professionista, non deve apprendere l’uso dell’interfaccia.

L’uso di icone è giusticato nel caso di programmi che offrono numerosissime funzioni (in tal caso le icone riducono notevolmente l’ingombro dei pannelli di comando), mentre in genere questo non accade nei software on line per utenti non professionisti. Nel caso nascesse la necessità di far compiere all’utente numerose scelte, a causa di funzioni complesse e/o altamente personalizzabili, esse devono essere poste gradatamente. È la tecnica dei wizard, ossia la presentazione di poche scelte per volta, che portano infine al risultato; la procedura risulta meno rapida per l’utente esperto, ma sicuramente più semplice per l’utente meno competente.

________________________________________________

1.2 Ambiguità delle icone

Non esiste una codificazione univoca delle icone, e questo le rende di fatto puri segni grafici, significanti privi di significato.
Ad esempio, una freccia rivolta verso l’alto in alcuni casi attiva la funzione di “uscita” dal programma, in altri conduce all’indice generale o ha la funzione di “ritorno” all’ultima pagina consultata.
L’uso di icone deve essere accompagnato allora da denominazioni, segni testuali privi di ambiguità.
Le icone risulteranno elemento di rinforzo percettivo ed emozionale. Il loro impiego avrà a che fare più con la piacevolezza estetica delle pagine che non con l’ergonomia e l’usabilità delle funzioni del software.

________________________________________________

1.3 La denominazione dei tasti e dei collegamenti ipertestuali

Alla luce di quanto riportato finora, le denominazioni dei tasti svolgono una funzione importantissima per la creazione di un’interfaccia grafica intuitiva da usare.

Le denominazioni devono risultare:
a) sintetiche (possibilmente costituite da una o due parole);
b) precise, quanto più possibile univoche, prive di molteplici significati, che richiederebbero un contesto testuale per la piena comprensione;
c) differenti fra loro, in modo da evitare ambiguità (ad esempio due tasti con le rispettive diciture “salva” e “memorizza” generano confusione nell’utente).

________________________________________________

1.4 Il raggruppamento dei tasti per categorie

È opportuno raggruppare tasti (funzioni) simili in gruppi o categorie.
Ad esempio se la funzione di stampa è accompagnata dalle opzioni di layout pagina, grandezza font, numero di copie, ect, è opportuno radunare tutte queste funzioni (e i rispettivi tasti) sotto un’unica dicitura “opzioni stampa”, che attiverà le opzioni di scelta per l’utente.
La gradualità nella richiesta di scelte all’utente comporta due vantaggi:
- non confonde l’utente inesperto o al suo primo approccio con il software
- consente all’utente competente di scoprire gradatamente le funzioni di cui sente via via la necessità. L’apprendimento delle funzioni sofware ne risulta agevolato.

________________________________________________

1.5 La chiarezza nell’indicaregli elementi interattivi sulla pagina

Le parti attive delle pagine devono essere evidenziate adeguatamente e devono essere immediatamente percepibili e riconoscibili dall’utente.
Le tecniche comunemente utilizzate prevedono:

- L’illuminazione dei tasti o dei collegamenti ipertestuali - quando il cursore del mouse ci si trova sopra - per informare l’utente che l’elemento è attivo (se cliccato, produrrà un effetto).

- Il cambiamento di forma del cursore del mouse quando esso si trova sopra un’area attiva (ad esempio da puntatore-freccia a dito indice); è una soluzione semplice ed economica, ma risulta anche meno efficace: gli utenti potrebbero non notare il cambiamento del cursore.

- La segnalazione dell’interattività di una scritta o di un collegamento ipertestuale mediante colorazione blu e sottolineatura: è il segno universale e ormai univoco, privo di qualunque ambiguità, tipico del Web.
E’ semplice ed efficace. La gradevolezza estetica della pagina web può tuttavia risentirne. Una personalizzazione della coloritura può migliorare l’estetica, anche se si allontana dalla percezione immediata del puro link del web.

E’ opportuno evitare l’uso di sottolineature e colorazione di frasi e titoli in altre parti del sito o della pagina se essi non indicano un collegamento ipertestuale.

________________________________________________

1.6 L’equilibrio fra essenzialità e ridondanza

Un accesso univoco ai contenuti prevede che ogni elemento della pagina presenti una precisa funzione, non ripetuta in altre porzioni della stessa pagina.
Numerosi siti web presentano pagine-indice che permettono la consultazione dei contenuti mediante più “punti di accesso”, ad esempio tramite barra grafica a sinistra, titoli dei paragrafi, immagini, icone a fondo pagina, indice riepilogativo a bordo pagina. Questi elementi a volte attivano collegamenti ipertestuali che conducono tutti ai medesimi contenuti. Viene quindi scelta la strada della ridondanza. Alle stesse pagine (di livello gerarchico inferiore) si accede da più punti (di livello gerarchico superiore). Tale scelta permette di proporre link grafici sintetici e la loro ripetizione in forma di testo, maggiormente esplicativo e dettagliato.
Il tempo di decodifica di una pagina così ricca di elementi aumenta notevolmente.
Il vantaggio della ridondanza è che permette a utenti con differenti competenze e aspettative di trovare una propria modalità di interazione con il software.

________________________________________________

1.7 La coerenza nel layout e nella grafica

Tasti, collegamenti ipertestuali e animazioni che costituiscono punti di accesso ai contenuti devono essere progettati in modo da risultare costanti per grafica, forma, colore e posizione in più pagine del sito. In tal modo si garantisce continuità nella percezione, immediatezza nelle scelte, corenza grafica e progettuale, essenzialità.

________________________________________________

2. L’interfaccia grafica deve risultare esteticamente piacevole

L’estetica dell’interfaccia è condizionata da numerosi fattori e limiti. Potrebbe essere paragonata all’estetica di un’automobile: il designer deve relazionarsi con gli ingegneri progettisti, tener conto delle esigenze tecniche del veicolo (penetrazione dell’aria, raffreddamento del motore) e delle norme legali del settore. Così il progettista dell’interfaccia deve tener conto dei contenuti da veicolare, dell’usabilità, delle indicazioni dell’art director, dei vincoli tecnici, delle aspettative del target di pubblico a cui ci si rivolge.
Nonostante ciò, essa deve risultare esteticamente piacevole.

________________________________________________

2.1 L’interfaccia grafica deve veicolare una identità grafica

Veicolare l’identità grafica dell’azienda promotrice di un sito web implica l’analisi degli stili, dei colori, delle immagini e dei font tipici della comunicazione aziendale. Le decisioni prese a livello di progettazione del layout influenzano anche lo sviluppo software e le scelte delle tecnologie da utilizzare.

________________________________________________

2.2 Tipologie di impaginazione sul Web

Le interfacce sul Web potrebbero essere classificare grosso modo in tre gruppi:

- impaginazione ispirata dai giornali e dalle riviste cartacee
In questo caso, il modello è la tradizionale “gabbia” tipografica: l’uso di più colonne per il testo, di titoli e sottotitoli. I tasti sono sostituiti da titoli di paragrafi; è generalizzato l’uso delle “parole calde”, ossia dei collegamenti ipertestuali (detti link) tra le pagine.

- impaginazione e strutturazione dei dati simile alle opere off line (Cd Rom o Dvd)
L’attivazione delle funzioni o l’accesso alla consultazione di date sezioni dell’opera avviene attraverso tasti grafici, a volte chiaramente esplicitati (ad esempio ispirati ai bottoni di plastica dei lettori Cd audio o dei videoregistratori).

- impaginazione multimediale innovativa
I software di authoring Macromedia Flash e Shockwave hanno offerto ai creativi una grande libertà nella progettazione delle modalità di interazione sul Web.
La grafica che permette l’interattività può essere pienamente dinamica: le scritte si compongono o si animano, i simboli grafici si creano sotto gli occhi dell’utente, l’intera pagina presenta elementi in movimento.

A volte può risultare difficoltoso per l’utente comprendere a prima vista - in mezzo al movimento generale degli elementi grafici della pagina - quali elementi sono interattivi e quali puramente decorativi.
Il modello estetico di riferimento risulta essere in questo caso quello dell’animazione, delle sigle televisive, degli spot pubblicitari.
Tali pagine possono risultare estremamente divertenti; la loro capacità di fascinazione e di persuasione è senza dubbio maggiore rispetto alle pagine statiche di testo, grazie anche all’uso di effetti sonori, musiche, eventuali commenti vocali.

________________________________________________

2.3 Il possibile disorientamento dell’utente causato da un criterio di navigazione innovativo

Una eccessiva originalità nel ricorso alle animazioni grafiche può comportare una difficoltà di utilizzo per l’utente. L’utente smaliziato apprezzerà i virtuosismi di grafici e programmatori, l’utente meno esperto potrebbe rimanere confuso da modalità di navigazione eccentriche.

________________________________________________

2.4 Tener conto del target

Nel conciliare le esigenze di una grafica innovativa e della necessaria intuitività nell’uso bisogna tener conto del target al quale ci si rivolge. Si tratta di un software rivolto al grosso pubblico o ad un gruppo sociale ben definito? Si tratta di un sito web interessante per una comunità di tecnici specializzati o di un sito orientato ad un pubblico sensibile ai valori intangibili dell’immagine e delle emozioni?

Se il sito non è esclusivamente informativo, ma mira anche a divertire e persuadere l’utente, una grafica innovativa potrebbe risultare la scelta ideale. L’intento ludico può spingersi fino a nascondere di proposito determinate funzioni, sfidando l’utilizzatore in una metaforica “caccia al tesoro”. Se invece ciò avviene per errore, o se il target si aspetta una comunicazione di tipo informativo, il risultato sarà disastroso.

________________________________________________

2.5 L’interfaccia grafica deve risultare rapida da visualizzare

Una interfaccia grafica web deve essere concepita per adeguarsi ai limiti delle attuali connessioni internet; questo per due motivazioni:
- non penalizzare gli utenti connessi tramite modem analogici
- rendere più rapido possibile il caricamento anche per gli utenti dotati di connessioni a banda larga

La creazione di due tipologie di interfaccia, una per connessione ISDN o ADSL e una per connessioni lente, implica un sensibile aumento dei costi di sviluppo software.

________________________________________________

3. Approfondimenti

Per ulteriori approfondimenti sul tema della progettazione delle interfacce grafiche si consigliano i seguenti testi e indirizzi internet:

J. Nielsen, Web usability, Apogeo, Milano 2000.
K. Goto e E. Cotler, Web ReDesign, Apogeo, Milano 2002.

Il sito di Jakob Nielsen, il “guru” riconosciuto dell’usabilità web:
http://www.useit.com/

Una guida online ai criteri di usabilità dei software:
http://www.usabilityfirst.com/

Il sito del World Wide Web Consortium, l’ente che coordina gli standard tecnici del Web:
http://www.w3.org/