Sei sulla pagina 1di 34

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  Come:
pagine con link “precedente-  Mettere in ogni pagina un link alla
successivo”; ciascuna pagina è pagina successiva e uno alla pagina
collegata ad un indice; precedente della sequenza;
 In ogni pagina, inserire un link “Torna
all’indice”
 Quando: presentazioni, help in
linea, capitoli di un testo, corsi di
formazione;

 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  Inserire in un angolo della pagina,
ordine e fornire una chiara indicazione preferibilmente in alto, una sequenza di
della posizione attuale nella sequenza elementi;
stessa;  Unire questi elementi con frecce, linee o
altri indicatori della sequenzialità;
 È preferibile accompagnare ogni elemento
 Quando: nelle strutture sequenziali e con un titolo che riprenda i titoli delle
lineari come processi di registrazione su pagine coinvolte;
più pagine, questionari, procedure di  Per indicare la posizione, demarcare
acquisto ecc.; l’elemento corrente con un buon contrasto
cromatico e stilistico;
 Nel caso, l’elemento corrente non
 Perché: dovrebbe mai essere un link;
 Rende l’utente consapevole della propria
posizione;
 Aiuta a capire in che punto ci si trova della
sequenza; Pagina 1 Pagina 2 Pagina 3 Pagina 4
 Se attiva, è a sua volta un potente
strumento di navigazione che l’utente può
usare per spostarsi rapidamente da un Pagina 3
punto all’altro della sequenza;
Indirizzo:

Città:
Briciole di pane
 Cosa: in ogni pagina di una  Come:
gerarchia, mostrare una mappa  Nella parte superiore della pagina, inserire
delle pagine-genitore; una linea di testo che, partendo dalla
pagina iniziale, ripercorra la sequenza di
passaggi necessaria a raggiungere la
pagina visualizzata;
 Quando: il sito ha una struttura  Tra un elemento e l’altro inserire una
gerarchica molto profonda (3 o più piccola immagine, una freccia, un carattere
livelli) di maggiore (“>”);
 La label di ogni elemento dovrebbe essere
identica al titolo della corrispondente
 Perché: pagina;
 Rende l’utente consapevole della  Ogni label dovrebbe essere un link;
propria posizione;  L’ultimo elemento della sequenza
(corrispondente alla pagina visualizzata)
 Aiuta a capire in che punto ci si trova non deve essere un link;
della sequenza;
 Se formata da link, è a sua volta un
potente strumento di navigazione
che l’utente può usare per spostarsi Home > Mammiferi > Felini > Gatti > Birmano
rapidamente da un punto all’altro
della sequenza; Birmano
 Se l’utente entra nel sito in una Indique apellae tertium canestrae
pagina “profonda” è facile illustrum indicatio und frementisque
comprendere il contesto e risalire ai Allorquandunquem gurdam horati est
livelli superiori Tenacis multique cum julius.
Griglia costante
 Cosa: costruire ogni pagine  Come:
utilizzando la medesima struttura e i  Disegnare uno schema di pagina
medesimi elementi stilistici; capace di accogliere tutti i contenuti
del sito;
 Devono essere presenti indicatori che
 Quando: è una regola base del web indichino in modo chiara la posizione
design, quindi sempre da applicare della pagina all’interno del sito;
tranne in casi eccezionali;  Se necessario, devono essere
presenti i differenti livelli di
 Perché: navigazione (globale, locale e
contestuale);
 La presenza di una costanza
strutturale e stilistica favorisce  Si preveda una posizione anche per
l’apprendimento dell’interfaccia da altri strumenti di navigazione (es. le
parte dell’utente; briciole di pane);
 Incrementa l’identità e la  Verificare che la griglia sia in grado di
riconoscibilità del sito; garantire buoni risultati di accogliere
sia testi molto lunghi che brevi
 È molto più semplice accorgersi di
quello che è differente;
Spazio principale
 Cosa: mettere la parte più  Come:
importante del interfaccia nella  La parte principale dovrebbe
sezione più ampia; raggruppare gli occupare una larghezza almeno
elementi secondari in blocchi di doppia rispetto alla larghezza degli
informazione più periferici e di elementi periferici, così come in
dimensioni minori; altezza;
 Il colore di sfondo della parte
principale dovrebbe essere
 Quando: è una regola base del web sufficientemente contrastata rispetto
design, quindi sempre da applicare allo sfondo delle sezioni periferiche;
tranne in casi eccezionali;  Inserire titoli in un carattere di
dimensioni maggiori per attrarre lo
sguardo dell’utilizzatore;
 Perché:  Non è importante che lo spazio
 Dare un maggior rilievo spaziale principale sia anche centrale;
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;
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  Come:
in modo univoco le sezioni in cui è  In ciascuna sezione del sito web
suddiviso un sito; modificare il colore di elementi ben
visibili;
 La variazione deve essere evidente
 Quando: il sito è composto da un ma non intrusiva: evitare di cambiare
buon numero di sezioni ed è il colore di sfondo della pagina ma
necessario/si vuole associare a limitarsi a titoli, margini, bordi e
ciascuna un’identità chiara; decorazioni;
 Mantenere un medesimo livello di
saturazione e di luminosità pur tra
 Perché: colori diversi;
 Il colore offre all’utente un  Aiutare l’utente ad apprendere il
demarcatore intuitivo della propria significato dei colori, ponendo in
posizione nel sito; relazione l’associazione cromatica fin
 È molto evidente il passaggio da una dallo stile del menu di navigazione
sezione all’altra: sono molto chiari i globale
confini tra di esse;  Esempio: www.apple.com
 Il cambiamento di colore rende
l’interfaccia più varia, gradevole e
meno noiosa;
Valori predefiniti ottimali
 Cosa: inserire nei campi di un form  Come:
dei valori predefiniti che  Nei campi di testo libero, inserire un
probabilmente corrispondo a quanto valore che presumibilmente
l’utente stesso inserirebbe; corrisponde alla risposta che l’utente
darebbe autonomamente;
 Lasciare sempre la possibilità di
 Quando: si vuole ridurre l’impegno modificare il valore predefinito;
richiesto all’utente per compilare un  Esempio: www.trenitalia.com
form;
 Non utilizzare questo pattern quando
 Perché: si vuole che i dati inseriti nel modulo
 Si riduce lo sforzo richiesto all’utente siano frutto di una decisione
per interagire con la pagina; consapevole razionale: i valori
predefiniti possono essere mantenuti
 La presenza di valori predefiniti in quanto accettabili;
istruisce l’utente su come
eventualmente inserire altre
informazioni;
Errori nella stessa pagina
 Cosa: inserire i feedback relativi ad  Come:
errori nella stessa pagina in cui gli  Disegnare la form in modo tale che
errori sono stati commessi; gli errori più frequenti siano evitati
(usando buoni valori di default,
offrendo alternative chiuse in luogo
 Quando: il sistema effettua controlli di campi a risposta aperta, favorendo
automatici sulla validità dei dati il riconoscimento anziché il richiamo);
immessi o sulla compilazione di tutte  A seguito dell’errore, tornare
le richieste obbligatorie di un form; automaticamente alla pagina di
inserimento dati;
 I campi che hanno generato l’errore,
 Perché: al ritorno, dovrebbero essere
 Il feedback non viene fornito in evidenziati (colorati di rosso, in
un’altra pagina, nella quale l’utente grassetto, accompagnati da un’icona
non può ricordare a memoria le ecc.)
richieste che gli sono state avanzate;  I feedback di errore dovrebbero
 Si fa risparmiare all’utente il ritorno essere altrettanto visibili: un riepilogo
alla maschera di immissione dati; ad inizio pagina e accanto ai campi in
 Riportando l’utente nel punto in cui è cui l’errore è stato commesso;
stato commesso un errore si  Oltre alla segnalazione di errore, il
diminuisce la frustrazione dell’utente feedback dovrebbe anche aiutare a
e, di conseguenza, le possibilità di comprendere come l’errore possa
abbandono; essere superato;
Scudo di protezione
 Cosa: prima dell’esecuzione di  Come:
un comando potenzialmente  Individuare i punti del sito web in cui
pericoloso, il sistema chiede non è possibile annullare
all’utente una conferma un’operazione: per esempio la
conferma di un acquisto o l’invio di
esplicita; dati personali che non sarà più
possibile modificare;
 Inserire un passaggio intermedio tra
 Quando: in presenza di funzioni l’invio del comando e la sua
dall’esito irreversibile; esecuzione;
 In questo, riepilogare l’azione
richiesta ed evidenziare gli eventuali
 Perché: rischi cui si va incontro confermando
 Si evitano errori di disattenzione il comando stesso;
o di imprecisione;  Il testo dello “scudo” deve essere
chiaro, indubbio e comprensibile a
 Al prezzo di aumentare il tempo tutti;
necessario per eseguire l’azione,  Dovrebbe essere difficile dare
si incrementa il senso di conferma inavvertitamente o
sicurezza e la soddisfazione involontariamente (per esempio
dell’utente; 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