WEB DESIGN
Agenda
1. Progettazione centrata sull’utente
2. Come si progetta un sito web
3. Paper prototyping
4. Evoluzione dei siti web
Progettazione centrata
sull’utente
Progettazione centrata sull’utente
(User Centered Design, UCD)
Mettere l’utente
al centro
del processo di
progettazione
Progettazione centrata sull’utente
Le domande a cui rispondere:
• Quale utente?
• Quali sono i compiti che deve svolgere?
• Qual è il contesto d’uso?
Quale utente?
• A quali categorie di utenti è destinato il prodotto
che dobbiamo progettare ?
• Di queste categorie, quali sono quelle prioritarie e
quali quelle secondarie?
• Come possiamo definire con precisione ciascuna
categoria di utenti, in rapporto al prodotto che
dobbiamo progettare? (sesso, età, cultura,
esperienza, abilità/disabilità, interessi, …)
La usabilità di un prodotto è relativa al
tipo di utente
Grafico riassuntivo SODDISFAZIONE
Tipo di utente
5
4
Valutazioni
Esempio: valutazioni espresse da
10 utenti di diversa esperienza
ntivo SODDISFAZIONE
relativamente a efficienza, efficacia
e soddisfazione nell’uso del sito web
www.dvd.it (0: pessimo, 5:ottimo)
esper
0
inesperto
a
b
5
4
4
inesperto
3
occasionale
2esperto
h
i
l
2
1
d
e
f
g
h
i
l
Grafico riassuntivo EFFICACIA
5
g3
c
SoddisfazioneUtenti
Valutazioni
Valutazioni
nti
occas
2
1
occasionale
Grafico riassuntivo
esperto EFFICIENZA
f
inesp
3
Inespe
occasi
espert
1
0
0
a
b
c
Efficienza
d
e
f
Utenti
g
h
i
l
a
b
c
Efficacia
d
e
f
Utenti
g
h
i
l
Quali compiti?
• Quali sono i compiti che le diverse categorie di utenti
dovranno svolgere con il prodotto?
• Quali sono quelli principali e quali quelli accessori?
COMPITI:
UTENTI:
Categoria A
Categoria B
Categoria C
A
B
C
***
***
***
*
*
**
• Quali metriche di efficacia e di efficienza possiamo
introdurre in rapporto a questi compiti?
Quale contesto d’uso?
• In quali diversi contesti le varie categorie di
utenti dovranno svolgere i diversi compiti
individuati?
• Quali contesti sono prevalenti, e quali
occasionali, in rapporto ai diversi compiti?
• Come possiamo caratterizzare con precisione
i diversi contesti?
Esempio: contenitore per acqua minerale
Utenti:
• Generico consumatore di acqua minerale
• Trasportatori di confezioni multiple
Contesto d’uso:
Quali utenti,
• Acquisto in supermercato o in negozio
• Conservazione in frigorifero
contesti e compiti
• Consumo in tavola
sono prioritari?
Compiti:
• Trasporto manuale di confezione multipla
• Estrazione del contenitore singolo dalla confezione multipla
• Trasporto manuale di contenitore singolo
• Stoccaggio/estrazione nel/dal frigorifero
• Apertura e chiusura del contenitore
• Mescita nel bicchiere
• Schiacciamento verticale per dismissione
Contenitore per acqua minerale: una
possibile proposta
Come si progetta
un sito web
Come nascono gli artefatti
Visione statica:
Visione evolutiva:
Necessità
Necessità
Il ciclo “compito - artefatto”
Artefatto
“FORM FOLLOWS FUNCTION”
Artefatto
“FORM FOLLOWS FAILURE”
“Quando si introduce un nuovo strumento, si
verifica una co-evoluzione fra lo strumento ed
il suo utente”
D.C.Engelbart
Un corollario importante
Non è possibile, se non nei casi più semplici,
specificare completamente le funzioni di un
sistema complesso prima della sua
realizzazione:
il sistema cambierà i comportamenti dell’utente,
e questi richiederanno modifiche al sistema !
Il ciclo di vita del del software:
visione statica
Requisiti
“Waterfall model”
Funzioni
Design
Sviluppo
Concettualmente
sbagliato: nessun
artefatto di successo
può nascere così
Test
Rilascio
Il ciclo di vita del del software:
visione dinamica
Sviluppo per
prototipi
successivi
Design
Prototype
Test
Concettualmente corretto
Progettazione di un sito
Define
goals
• Quali obbiettivi
• Quali contenuti
• Quali utenti
• Quali compiti
• Quale contesto
• Concept grafico
Design
Prototype
Test
Progettazione di un sito
Define
goals
• Struttura del sito
• Grafica
• Scenari utente
• Interazioni
Design
Prototype
Test
Struttura del sito: esempio
Grafica: esempio (home page)
Grafica: esempio (secondo livello)
Grafica: esempio (secondo livello)
Grafica: esempio (terzo livello)
Grafica: esempio (artisti e dischi)
Scenari utente: esempi
Progettazione di un sito
Define
goals
• LO-FI prototyping
• HI-FI prototyping
Design
Prototype
Test
Fedeltà nei prototipi
- Alta fedeltà (HI-FI): il prototipo “assomiglia” in
tutti gli aspetti al prodotto finale
- Bassa fedeltà (LO-FI): il prototipo “assomiglia”
alla lontana al prodotto finale, con molti dettagli
mancanti (es.: paper prototyping)
Uso di prototyping tools per il web:
un’indagine
http://guuui.com/issues/01_03_02.asp (settembre 2002)
Progettazione di un sito
Define
goals
• Test funzionale
• Test di usabilità
• Controllo dei
contenuti
Design
Prototype
Test
Test funzionale
• Che cosa: esercizio sistematico di tutte le
funzioni presenti nel sito
(links e forms in tutte le condizioni, comprese quelle di errore)
• Chi: sviluppatori del sito (eventualmente con il
committente in fase di accettazione)
• Come: si possono utilizzare check-list
strutturate, e tools appositi (ad es. per la
scoperta di link aperti)
• Quando: durante lo sviluppo, e prima del primo
rilascio
Test di usabilità
• Che cosa: utilizzo del sito in scenari d’uso
predefiniti
• Chi: utenti campione
• Come: vedi lezione relativa
• Quando: quando opportuno, durante lo sviluppo
per prototipi successivi
(anche all’inizio: paper sketch & simulation)
Controllo dei contenuti
• Che cosa: verifica dei contenuti (correttezza,
adeguatezza, stile)
• Chi: responsabile dei contenuti
• Come: lettura delle pagine web
• Quando: prima del rilascio
Paper prototyping
Che cos’è un prototipo?
Un modello approssimato o parziale del sistema che
vogliamo sviluppare, realizzato allo scopo di
valutarne le caratteristiche
Ci permette di condurre dei test prima di avere il
prodotto finale
Perchè creare prototipi di un sito web?
• Per avere un feedback anticipato da parte
degli utenti, per correggere il design prima di
scrivere il codice
• Per sperimentare design alternativi
• … rapidamente e a costi contenuti
Paper prototyping
Il sito viene prototipato sulla carta, e il suo
funzionamento viene simulato a mano, per
condurre rapidamente test di usabilità
Esempi:
- user testing della home page
- user testing della struttura del sito
- user testing di funzioni specifiche
Esempio: usability enquiry di una home page
Realizzazione della
home page di Sun,
(Jakob Nielsen, 1995)
A
B
C
D
E
F
G
H
I
8 anni dopo…
(aprile 2003)
Usability test & paper simulation
Alcuni scenari d’uso vengono simulati manualmente,
alla presenza di utenti-cavia…
FACILITATORE
UTENTE-CAVIA
“COMPUTER”
Paper simulation: materiali
Schema generale del sito
Singole pagine su cartoncino
Componenti dell’interfaccia (menu, forms, messaggi di
errore,…) su cartoncino
Vantaggi e svantaggi
• Vantaggi
–
–
–
–
non è richiesto lavoro di programmazione
si possono avere subito le reazioni dell’utente
si possono confrontare rapidamente soluzioni diverse
si possono analizzare in dettaglio interazioni particolarmente
complesse (forms, menu, …)
• Svantaggi
– non si coprono tutti i casi
– bisogna poi trasporre il disegno manualmente in forma
elettronica
Come fare
• Minimo tre persone:
- facilitatore: l’unico che parla (dà istruzioni, incoraggia
commenti, non fa commenti)
- computer: conosce l’applicazione e la controlla,
simulando le risposte; non fornisce mai spiegazioni
- osservatori: prendono note
• Sessione tipica: 1 ora tutto compreso
Valutazione dei risultati
• Riordinate le osservazione
– che cosa era importante?
– Ci sono m olti problemi correlati?
• Riassumete i risultati per iscritto
• Effettuate le modifiche al prototipo
• Ripetete le prove
Ed. Morgan Kaufmann;
(Aprile 2003)
Evoluzione di un sito web
Il concetto di “release” del software
• Ogni prodotto software evolve per versioni
successive, dette “release”
• Ogni nuova release costituisce un
“miglioramento” rispetto alla release
precedente:
- correzione di errori
- perfezionamenti di funzionalità esistenti
- introduzione di nuove funzionalità
- compatibilità con ambiente più evoluto
Evoluzione del software:
classificazione delle modifiche
Perfective
31%
New
Functionality
38%
Fix/Repairs
31%
Source: IT Metrics, March 1997
Evoluzione dei prodotti tecnologici in
rapporto ai bisogni dell’utente
Prestazioni del prodotto
Punto di transizione in cui
la tecnologia soddisfa le
necessità primarie
prestazioni in
eccesso
necessità non
soddisfatte
Fase centrata sulla tecnologia
prestazioni
necessarie
Livello di
prestazioni
richiesto
dall’utente
medio
t
Fase centrata sull’utente
da: D.A.Norman, Il computer invisibile, 1998
Evoluzione di un sito web
Un sito web è un prodotto software particolare, in
quanto:
• come gli altri prodotti software, tende a “crescere” nel
tempo
• è utilizzabile dalla rete
(quindi nuove release possono essere rese disponibili
“immediatamente”)
• è costituito logicamente da un contenitore e da un
contenuto
(contenitore e contenuto devono poter essere modificati con
procedure diverse)
La crescita di un sito web
Evoluzione di un sito web
modifiche
major releases
minor releases
r1
software
contenuti
r2
r3
r4
tempo
Fluidità dei media
MEDIA
PERMANENTI
libro
MEDIA
FLUIDI
MEDIA
VOLATILI
CD-ROM
giornali
WEB
TV
Lifetime: indagini sperimentali
Tempo medio di vita per:
Files HTML
Immagini
Worrell, 1994
Gwertzman et al,1996
75 gg
50 gg
107 gg
85 gg