Web usability II

Andrea Crevola
andrea.crevola@3juice.com
http://webdesign.3juice.com
Come ottenere l’usabilità?

Gli interventi di usabilità si collocano in tutti i
momenti della vita di un sito web, dalla
progettazione iniziale alla fase di test conclusiva.

Il design dell’interazione può avvalersi di nozioni a

diversi livelli di astrazione:

Principi di usabilità

Linee guida

Design Patterns

Metodologie di test
Linee guida

I principi di usabilità rischiano di rimanere concetti aridi se non vengono portati
sul piano pratico.

I principi formano il background teorico di qualsiasi ragionamento

sull’interazione uomo-macchina, ma devono necessariamente essere tradotte in
forma applicata perché possa esserne apprezzata l’utilità.

La ricerca del settore ha utilizzato con relativo successo la formula della linea
guida: una raccomandazione per progettare e realizzare nel modo migliore un
artefatto o un processo costruita sulla base di generalizzazioni di esperienze di
successo e supportata da test di laboratorio.

Nel campo delle interfacce-utente possono far riferimento alla componente

visuale, all’organizzazione dell’informazione, alla redazione dei contenuti.
Ciascuna di esse cerca di sintetizzare, in un'unica formula, una regola di
progettazione applicabile a differenti esperienze d’uso.
Linee guida: utilità

L’utilità delle linee guida si esprime sotto due punti di vista:

1. la loro formulazione sintetica ed efficace le rende di semplice

condivisione e acquisizione da parte del gruppo di lavoro;
(funzione prescrittiva)

2. sono un valido strumento anche “a valle” del progetto, quando

l’obiettivo è comprendere se il sistema realizzato è più o meno
rispondente a criteri di usabilità;
(funzione valutativa)

Alcune imprese hanno redatto documenti di linee guida da

adottare in tutti i loro prodotti: forte fattore di rafforzamento
della qualità dell’esperienza utente dei propri destinatari finali

per esempio, Microsoft, Apple e Sun hanno redatto linee guida per
gli sviluppatori interni ed esterni in modo da assicurare la massima
consistenza con i loro sistemi operativi;
Linee guida per l’usabilità dei siti web

Jackob Nielsen fornisce dieci linee guida da utilizzare

per migliorare l’usabilità di un sito web;

http://www.useit.com/papers/heuristic/heuristic_list.html

Con esse un esperto di usabilità è in grado di

scovare molti problemi (indagine euristica), ma
possono essere considerate degli strumenti di
orientamento per chi progetta e sviluppa siti web;
1. Visibilità dello stato del sistema

L’utente dovrebbe in ogni momento sapere qual è lo stato del sito
web, sia per quanto concerne la posizione della pagina visualizzata
rispetto all’architettura del sito sia relativamente alla posizione in una
serie di step (ad esempio registrazione ad un servizio).

L’utente, in ogni pagina deve poter comprendere - con semplicità - dove si
trova, dove può andare, da dove arriva e come fare a tornare sui propri
passi;

Importante perché molto spesso l’utente entra nel sito da una pagina interna
(es. dai risultati di un motore di ricerca, da un link presente in un altro sito);

Dovrebbe essere una visibilità percepibile da chiunque (es. non sfruttare solo
il colore per trasmettere informazione);

Il tema della visibilità si associa strettamente ai meccanismi di

feedback: verificare che alle azioni dell’utente corrispondano chiari e
appropriati messaggi di ritorno che informino circa il cambiamento di
stato del sito web.
2. Associazione tra sistema e mondo reale

Il sistema dovrebbe parlare il linguaggio dell’utente, con rappresentazioni,

metafore, parole, espressioni e concetti familiari all’utente.

I sistemi di labeling (nomi dei link, dei menu, dei box ecc.) dovrebbero utilizzare una
terminologia adeguata al modello mentale / linguaggio adottato dall’utente: non
dovrebbe essere utilizzato un linguaggio che si scosti da quello utilizzato dall’utente per
descrivere un’azione o un’informazione: come descriverebbe quel che si trova di fronte
e quel che intende fare?

Occorre osservare le convenzioni del mondo reale, facendo in modo che le

informazioni appaiano in un ordine logico e naturale.

I raggruppamenti dell’informazione (menu, form ecc.) dovrebbero avvenire in

modo logico ed omogeneo: raggruppare quel che è simile, separare ciò che è
diverso;
3. Controllo e libertà dell’utente

All’utente dovrebbe essere garantito il controllo sullo stato del sistema (o
l’apparenza di controllo).

L’utente deve poter attivare e interrompere volontariamente ogni procedura consentita

sul sito web.

Dovrebbe essere possibile annullare un’operazione il cui esito pare errato o

inappropriato all’utente, così come deve essere presente una funzione di ripristino di
uno stato pre-esistente all’azione dell’utente (vedi linea guida 9).

È bene prevedere le cause di errore probabili da parte dell’utente ed inserire nel

sistema vincoli e funzioni obbliganti che costringano l’utente ad adottare
comportamenti corretti dal punto di vista del sistema (es. checkboxes vs input libero).

L’utente, in sintesi, deve essere messo in condizione di appoggiare la sua azione

su una sorta di “rete di sicurezza” fornita dal sistema.
4. Coerenza e standard

Il sistema dovrebbe adottare standard e soluzioni di
progettazione condivise: l’utente non dovrebbe faticare per
apprendere un nuovo e diverso modo di presentare funzionalità comuni
alla maggior parte dei siti web.

Il nostro sito forma l’esperienza del web di un utente sempre in minima

parte: deve apparire familiare;

Raskin: “intuitivo” = “familiare”

Adottare segnali convenzionali o standard semplifica ampiamente il

riconoscimento da parte di utenti inesperti.
5. Gestione degli errori

Questa linea guida ha due versanti di applicazione:

1. gestione preventiva dell’errore: il sistema dovrebbe essere progettato

in maniera tale da evitare situazioni che possano generare ambiguità o
malfunzionamenti. L’utente deve essere guidato sia esplicitamente (con
documentazione, suggerimenti e una generale comprensibilità
dell’interfaccia) sia implicitamente (vincoli e funzioni obbliganti) a utilizzare
il sito web senza errori;

2. gestione dell’errore avvenuto: il sistema dovrebbe fornire adeguati

feedback all’utente affinché questi possa comprendere le ragioni del
fallimento della sua azione, venga rassicurato circa il destino delle
informazioni da lui inserite, possa ricominciare la procedura senza dover
incorrere nel medesimo inconveniente.
6. Riconoscimento piuttosto che
memorizzazione

L’utente deve essere aiutato a ricordare le informazioni di cui ha
necessità per fruire adeguatamente del sito web.

Le informazioni circa il funzionamento di un sito web, come di qualsiasi

altro artefatto, possono risiedere o nella memoria dell’utilizzatore o
collocata “nel mondo”.

Se si fa affidamento alla memoria dell’utente, questi sarà costretto a

memorizzare e quindi richiamare ciò di cui ha bisogno. Alternativamente, se
l’informazione è in qualche modo presente sull’interfaccia sarà possibile
proseguire “riconoscendo” anziché ricordando.

Affidarsi al principio di riconoscimento rende un interfaccia più

facilmente utilizzabile anche da chi visita il sito web per la prima volta.

Rendere ogni elemento auto-esplicativo circa la sua identità e il suo

comportamento: sfruttare le affordances e il principio del mapping;
Affordance

Concetto derivato dalla psicologia di J. J.
Gibson, introdotto in HCI da Norman;

Indica quelle proprietà reali e percepite degli

elementi della realtà che suggeriscono come li
si possa utilizzare;

Le affordances di un artefatto comunicano

all’utilizzatore in che modo esso può essere
usato: si tratta di “inviti all’uso”;

Esempio: una sedia “invita” ad utilizzarla per

sedersi, una maniglia “invita” ad essere girata,
un pulsante “invita” ad essere premuto…

Può essere un concetto molto potente nelle

mani di chi progetta un artefatto e la sua
interfaccia;
Mapping

Il Mapping è la relazione tra il sistema di
comandi e le effettive conseguenze delle azioni
dell’utente su di essi.

Per esempio, girare il volante a destra fa

cambiare direzione verso destra all’automobile;
???

Mapping naturale: sfrutta analogie fisiche,

spaziali, culturali o convenzionali per portare ad
una comprensione immediata della relazione tra
comandi ed effetti;

Per esempio, associare la rotazione di un

manopola all’incremento di una proprietà (il
volume) sfrutta una convenzione / modello !
culturale (destra = maggiore);

Un mapping naturale è coerente, comprensibile

e visibile: è un elemento di forte rafforzamento
del modello di funzionamento dell’artefatto che
l’utente costruisce nella sua mente;
7. Flessibilità ed efficacia d’impiego

Il sistema dovrebbe presentare opportunità di utilizzo differenziate per utenti
differenziati, in modo tale da permettere – ad esempio – ai più esperti di interagire con
maggior rapidità (con vie di accesso diretto ai contenuti, con tasti di accesso rapido ecc.).

Il sistema dovrebbe permettere funzionalità di personalizzazione affinché l’utente lo

possa configurare nel modo maggiormente appropriato per le proprie esigenze (ad esempio
consentendogli di selezionare la categoria di contenuto da presentare in home page: es.
Google News).

Controindicazioni:

La flessibilità non deve significare inconsistenza e incoerenza;

Una buona interfaccia non fa differenze: si lascia usare efficientemente e efficacemente da tutti;

La flessibilità spesso coincide con la moltiplicazione delle funzioni e con l’introduzione di
modalità (per esempio, stati del sistema in cui i comandi hanno un significato particolare o in cui il
set di azioni possibili è molto limitato);

La personalizzazione può causare disorientamento e difficoltà di riconoscimento;

Accanto a una modalità personalizzata è bene mantenere sempre una modalità “impersonale”
8. Minimalismo

“Less is better”: evitare le ridondanze, gli appesantimenti e le complicazioni
inutili.

Il linguaggio deve essere semplice, diretto e deve evitare periodi

eccessivamente complessi dal punto di vista sintattico.

Evitare di strutturare le procedure in un numero eccessivo di passi: se è

possibile, meglio accorpare tra di loro pur mantenendo una coerenza e un
omogeneità interna alla nuova suddivisione.
9. Aiuto nel riconoscimento, diagnosi e
soluzione degli errori

L’esecuzione di operazioni erronee dovrebbe essere immediatamente segnalata
con la dovuta precisione.

Le azioni pericolose (es. cancellazione di dati) dovrebbero essere rese difficili o

richiedere esplicitamente l’attenzione dell’utente;

L’utente dovrebbe poter sempre tornare sui propri passi (undo) e annullare gli
effetti di un’azione erronea (possibilità di esplorare l’interfaccia senza rischi); Il
sistema dovrebbe essere in grado di ripristinare lo stato precedente all’azione
erronea;

Il messaggio di errore dovrebbe essere chiaro, diretto e non ambiguo.

Il messaggio di errore dovrebbe comunicare perché è incorso un problema e

suggerire come evitare di incorrere nuovamente in esso;
10. Aiuto e documentazione

Il sito web dovrebbe prevedere, se necessario, aree e funzionalità dedicate alla spiegazione
delle azioni possibili al suo interno, alla risposta di domande frequenti, alla definizione
dell’eventuale terminologia specialistica utilizzata.

Dovrebbe essere possibile richiamare questo genere di informazioni senza uscire dal flusso
di operazioni intrapreso (help contestuale);

La documentazione dovrebbe presentare una indice o sommario di accesso rapido.

L’organizzazione dei contenuti della guida dovrebbe rispecchiare il modello mentale degli
utenti in cerca di informazione.

Ciascun contenuto della documentazione dovrebbe essere etichettato in modo chiaro e semplice,
adottando formule interrogative (“come posso fare a…?”), più vicine al modo di pensare dell’utente
in cerca di informazioni.

Meglio adottare uno stile omogeneo nella redazione dei contenuti: differenziare i contenuti che
forniscono i motivi di un comportamento errato (“perché non riesco a…?) da quelli che spiegano
come superare il problema (“come faccio a…?).
Design patterns

Una caratteristica condivisa sia dai principi di usabilità che dalle linee
guida è di avere un’impronta relativamente astratta. Il progettista /
sviluppatore si trova costretto a dedurre quale sia il modo migliore per
raggiungere i propri obiettivi;

Gli user-interface patterns sono infatti astrazioni di situazioni di

interazione specifiche.

A partire da una serie di casi di successo è possibile derivare per
induzione un modello che li riunisca in un solo concetto pratiche e stili di
interazione comuni.

I pattern cercano di indicare non cosa sia necessario ottenere, ma

come determinati obiettivi di usabilità siano perseguibili.

Grazie ad un simile approccio, anche chi non possiede un background

teorico può individuare una linea di azione appropriata.
Caratteristiche dei design pattern

Un pattern si limita ad indicare un modello di soluzione e non
la soluzione: non viene indicato un modo preciso e definito per
risolvere una determinata problematica ma si preferisce fornire i
tratti salienti di una possibile soluzione;

Spetta a chi adotta il pattern il compito di integrarlo con il

contesto specifico di applicazione e si lascia aperta l’opportunità
di derivare nuove modalità di attuazione;

I pattern hanno un potenziale generativo: non sono un insieme

chiuso definitivo bensì un sistema aperto ed in evoluzione
Esempi di pattern

Navigazione
Moduli e controlli

Piramide
Valori predefiniti ottimali

Mappa di una sequenza

Briciole di pane
Gestione dell’errore

Errori nella stessa pagina

Information design
Scudo di protezione

Griglia costante

Spazio principale

Allineamento destra/sinistra

Connotazione cromatica
Piramide

Cosa: collegare una sequenza di
pagine con link “precedente-
successivo”; ciascuna pagina è
collegata ad un indice;

Quando: presentazioni, help in
linea, capitoli di un testo, corsi di
formazione;

Come:

Mettere in ogni pagina un link alla
pagina successiva e uno alla pagina
precedente della sequenza;

In ogni pagina, inserire un link “Torna
all’indice”

Perché: index

si riduce il numero di passaggi per
raggiungere ogni unità informativa;

il modello di funzionamento è
familiare;

è semplice annullare una scelta (1) (2) (3)
errata;
Mappa di una sequenza

Cosa: in ogni pagina di una sequenza,
Come:
includere una mappa di tutte le pagine in
ordine e fornire una chiara indicazione
della posizione attuale nella sequenza
stessa;

Quando: nelle strutture sequenziali e
lineari come processi di registrazione su
più pagine, questionari, procedure di
acquisto ecc.;

Perché:

Rende l’utente consapevole della propria
posizione;

Aiuta a capire in che punto ci si trova della
sequenza;

Se attiva, è a sua volta un potente
strumento di navigazione che l’utente può
usare per spostarsi rapidamente da un
punto all’altro della sequenza;

Inserire in un angolo della pagina,
preferibilmente in alto, una sequenza di
elementi;

Unire questi elementi con frecce, linee o
altri indicatori della sequenzialità;

È preferibile accompagnare ogni elemento
con un titolo che riprenda i titoli delle
pagine coinvolte;

Per indicare la posizione, demarcare
l’elemento corrente con un buon contrasto
cromatico e stilistico;

Nel caso, l’elemento corrente non
dovrebbe mai essere un link;
Pagina 1 Pagina 2 Pagina 3 Pagina 4
Pagina 3
Indirizzo:

Città:
Briciole di pane

Cosa: in ogni pagina di una
gerarchia, mostrare una mappa
delle pagine-genitore;

Quando: il sito ha una struttura
gerarchica molto profonda (3 o più
livelli)

Perché:

Rende l’utente consapevole della
propria posizione;

Aiuta a capire in che punto ci si trova
della sequenza;

Se formata da link, è a sua volta un
potente strumento di navigazione
che l’utente può usare per spostarsi
rapidamente da un punto all’altro
della sequenza;

Se l’utente entra nel sito in una
pagina “profonda” è facile
comprendere il contesto e risalire ai
livelli superiori

Come:

Nella parte superiore della pagina, inserire
una linea di testo che, partendo dalla
pagina iniziale, ripercorra la sequenza di
passaggi necessaria a raggiungere la
pagina visualizzata;

Tra un elemento e l’altro inserire una
piccola immagine, una freccia, un carattere
di maggiore (“>”);

La label di ogni elemento dovrebbe essere
identica al titolo della corrispondente
pagina;

Ogni label dovrebbe essere un link;

L’ultimo elemento della sequenza
(corrispondente alla pagina visualizzata)
non deve essere un link;
Home > Mammiferi > Felini > Gatti > Birmano
Birmano
Indique apellae tertium canestrae
illustrum indicatio und frementisque
Allorquandunquem gurdam horati est
Tenacis multique cum julius.
Griglia costante

Cosa: costruire ogni pagine
utilizzando la medesima struttura e i
medesimi elementi stilistici;

Quando: è una regola base del web
design, quindi sempre da applicare
tranne in casi eccezionali;

Perché:

La presenza di una costanza
strutturale e stilistica favorisce
l’apprendimento dell’interfaccia da
parte dell’utente;

Incrementa l’identità e la
riconoscibilità del sito;

È molto più semplice accorgersi di
quello che è differente;

Come:

Disegnare uno schema di pagina
capace di accogliere tutti i contenuti
del sito;

Devono essere presenti indicatori che
indichino in modo chiara la posizione
della pagina all’interno del sito;

Se necessario, devono essere
presenti i differenti livelli di
navigazione (globale, locale e
contestuale);

Si preveda una posizione anche per
altri strumenti di navigazione (es. le
briciole di pane);

Verificare che la griglia sia in grado di
garantire buoni risultati di accogliere
sia testi molto lunghi che brevi
Spazio principale

Cosa: mettere la parte più
importante del interfaccia nella
sezione più ampia; raggruppare gli
elementi secondari in blocchi di
informazione più periferici e di
dimensioni minori;

Quando: è una regola base del web
design, quindi sempre da applicare
tranne in casi eccezionali;

Perché:

Dare un maggior rilievo spaziale
all’elemento più importante consente
all’utente di dirigere la propria
attenzione a colpo sicuro;

Si stabilisce in modo chiaro una
gerarchia di importanza tra gli
elementi della pagina;

Come:

La parte principale dovrebbe
occupare una larghezza almeno
doppia rispetto alla larghezza degli
elementi periferici, così come in
altezza;

Il colore di sfondo della parte
principale dovrebbe essere
sufficientemente contrastata rispetto
allo sfondo delle sezioni periferiche;

Inserire titoli in un carattere di
dimensioni maggiori per attrarre lo
sguardo dell’utilizzatore;

Non è importante che lo spazio
principale sia anche centrale;
Allineamento destra/sinistra

Cosa: allineare le label a destra
della prima colonna e gli elementi
(campi o dati) a sinistra della Nome
seconda colonna;
Cognome

Quando: in presenza di tabelle o di Indirizzo
form con una struttura a due
colonne; Telefono

Perché:

Avvicinando la label all’elemento di
riferimento si stabilisce una chiara
relazione visiva tra gli oggetti;

Indipendentemente dalla larghezza Nome
delle label o degli elementi, si crea
un effetto visivamente gradevole che Cognome
accompagna lo sguardo dell’utente
verso il basso; Indirizzo
Telefono
Connotazione cromatica

Cosa: uso del colore per connotare
in modo univoco le sezioni in cui è
suddiviso un sito;

Quando: il sito è composto da un
buon numero di sezioni ed è
necessario/si vuole associare a
ciascuna un’identità chiara;

Perché:

Il colore offre all’utente un
demarcatore intuitivo della propria
posizione nel sito;

È molto evidente il passaggio da una
sezione all’altra: sono molto chiari i
confini tra di esse;

Il cambiamento di colore rende
l’interfaccia più varia, gradevole e
meno noiosa;

Come:

In ciascuna sezione del sito web
modificare il colore di elementi ben
visibili;

La variazione deve essere evidente
ma non intrusiva: evitare di cambiare
il colore di sfondo della pagina ma
limitarsi a titoli, margini, bordi e
decorazioni;

Mantenere un medesimo livello di
saturazione e di luminosità pur tra
colori diversi;

Aiutare l’utente ad apprendere il
significato dei colori, ponendo in
relazione l’associazione cromatica fin
dallo stile del menu di navigazione
globale

Esempio: www.apple.com
Valori predefiniti ottimali

Cosa: inserire nei campi di un form
dei valori predefiniti che
probabilmente corrispondo a quanto
l’utente stesso inserirebbe;

Quando: si vuole ridurre l’impegno
richiesto all’utente per compilare un
form;

Perché:

Si riduce lo sforzo richiesto all’utente
per interagire con la pagina;

La presenza di valori predefiniti
istruisce l’utente su come
eventualmente inserire altre
informazioni;

Come:

Nei campi di testo libero, inserire un
valore che presumibilmente
corrisponde alla risposta che l’utente
darebbe autonomamente;

Lasciare sempre la possibilità di
modificare il valore predefinito;

Esempio: www.trenitalia.com

Non utilizzare questo pattern quando
si vuole che i dati inseriti nel modulo
siano frutto di una decisione
consapevole razionale: i valori
predefiniti possono essere mantenuti
in quanto accettabili;
Errori nella stessa pagina

Cosa: inserire i feedback relativi ad
errori nella stessa pagina in cui gli
errori sono stati commessi;

Quando: il sistema effettua controlli
automatici sulla validità dei dati
immessi o sulla compilazione di tutte
le richieste obbligatorie di un form;

Perché:

Il feedback non viene fornito in
un’altra pagina, nella quale l’utente
non può ricordare a memoria le
richieste che gli sono state avanzate;

Si fa risparmiare all’utente il ritorno
alla maschera di immissione dati;

Riportando l’utente nel punto in cui è
stato commesso un errore si
diminuisce la frustrazione dell’utente
e, di conseguenza, le possibilità di
abbandono;

Come:

Disegnare la form in modo tale che
gli errori più frequenti siano evitati
(usando buoni valori di default,
offrendo alternative chiuse in luogo
di campi a risposta aperta, favorendo
il riconoscimento anziché il richiamo);

A seguito dell’errore, tornare
automaticamente alla pagina di
inserimento dati;

I campi che hanno generato l’errore,
al ritorno, dovrebbero essere
evidenziati (colorati di rosso, in
grassetto, accompagnati da un’icona
ecc.)

I feedback di errore dovrebbero
essere altrettanto visibili: un riepilogo
ad inizio pagina e accanto ai campi in
cui l’errore è stato commesso;

Oltre alla segnalazione di errore, il
feedback dovrebbe anche aiutare a
comprendere come l’errore possa
essere superato;
Scudo di protezione

Cosa: prima dell’esecuzione di
un comando potenzialmente
pericoloso, il sistema chiede
all’utente una conferma
esplicita;

Quando: in presenza di funzioni
dall’esito irreversibile;

Perché:

Si evitano errori di disattenzione
o di imprecisione;

Al prezzo di aumentare il tempo
necessario per eseguire l’azione,
si incrementa il senso di
sicurezza e la soddisfazione
dell’utente;

Come:

Individuare i punti del sito web in cui
non è possibile annullare
un’operazione: per esempio la
conferma di un acquisto o l’invio di
dati personali che non sarà più
possibile modificare;

Inserire un passaggio intermedio tra
l’invio del comando e la sua
esecuzione;

In questo, riepilogare l’azione
richiesta ed evidenziare gli eventuali
rischi cui si va incontro confermando
il comando stesso;

Il testo dello “scudo” deve essere
chiaro, indubbio e comprensibile a
tutti;

Dovrebbe essere difficile dare
conferma inavvertitamente o
involontariamente (per esempio
posizionando il bottone di conferma
in un luogo diverso da dove è
solitamente collocato quando le
operazioni non sono pericolose;
Esercizio: progettare i wireframes
delle pagine

Provate a disegnare la home page, la pagina interna e la pagina di registrazione a un servizio del vostro
sito (per esempio a una newsletter);

Utilizzate un software di grafica, Powerpoint o al limite gli strumenti di disegno di un Word Processor (si
ricorda la possibilità di ricorrere ad OpenOffice.org, suite di prodotti opensource gratuita);

Le pagine vanno progettate prevedendo tutti gli elementi di navigazione e un anteprima della struttura
che avranno i contenuti;

L’information design, per quanto prototipale, dovrebbe cercare il più possibile di avvicinarsi al risultato
finale (proporzioni degli elementi, uso del colore, font dei testi ecc.);

Trattandosi di uno strumento di lavoro interno al team di progetto e sviluppo, i wireframes dovrebbero
essere arricchiti dalle annotazioni necessarie a togliere ogni dubbio in vista della realizzazione grafica
definitiva;

Si cerchi di testare il design delle pagine alla luce delle linee guida di usabilità di Nielsen;

Importante: documentare i punti di forza e le problematiche di usabilità del wireframe;

Si cerchi di applicare alcuni dei pattern presentati a lezione adattandoli al contesto del proprio sito;

Come ispirazione, si veda l’esempio della diapositiva successiva;

 Il logo è un collegamento
Utilizzare immagini di sfondo Utilizzare immagini di
all’home page
collegate all’idea di… bandiere?

ENG | ESP | ITA

Il menu si deve
aprire fino al terzo Titolo del sito
livello ricerca
Home page | Contatti | Mappa del sito

• Il Progetto Titolo pagina Eventi

• Il coordinatore Lorem ipsum dolor sit amet, • alfa (12.02.2006)
consectetuer adipiscing elit. bla bla bla bla…
• I Partners
Pellentesque ornare augue
• il Comitato di progetto nec odio. Cum sociis • beta (13.03.2006)
natoque penatibus et bla bla bla bla..
• Il progetto in movimento magnis dis parturient
montes, nascetur ridiculus [archivio]
• Newsletter
mus. Cras enim. Sed aliquet
• I documenti rhoncus urna. Nunc varius
lacinia odio. Pellentesque
• Links
consequat luctus nisi. News
• alfa (12.02.2006)
Lorem ipsum dolor sit amet, consectetuer bla bla bla bla…
adipiscing elit. Pellentesque ornare augue nec
odio. Cum sociis natoque penatibus et magnis dis • beta (13.03.2006)
Banner parturient montes, nascetur ridiculus mus. bla bla bla bla..
Questionario (Link a contenuti correlati) [archivio]

Icona per accedere

alla versione
stampabile
Email – credits - copyright
Siti web di riferimento

Jackob Nielsen, Useit.com

(http://www.useit.com/)

Donald Norman
(http://www.jnd.org/)

Welie.com – Interaction design patterns

(http://www.welie.com/);

Usability Special Interest Group

(http://www.stcsig.org/usability/)
Bibliografia di base

A. Cooper e R. Reimann, “About Face 2.0”, John Wiley & Sons;

A. Crevola, C. Gena, “Web Design”, UTET 2006;

S. Krug, “Don’t make me think”, HopsLibri 2001;

J. Nielsen, “Web usability”, Apogeo 2000;

D. Norman, “La caffettiera del masochista”, Giunti 1997;

B. Tognazzini, “Tog on interface”, Addison Wesley, 1992

J. Tidwell, “Designing Interfaces”, O’Reilly, 2006