Progettazione di un sito
Corso IFTS
Informatica, Modulo 3
Progettazione pagine web statiche
(50 ore)
Credits
• Prof. Roberto Polillo
– Università degli Studi di Milano Bicocca
• Prof. Marina Ribaudo
– Dipartimento di Informatica e Scienze
dell'Informazione, Università degli Studi di Genova
• Prof. Fabio Vitali
– Università degli Studi di Bologna
C. Braghin - Web Usability
2
Il ciclo di vita del software:
visione statica
Analisi dei requisiti
Modello a cascata
Progettazione
Sviluppo
Test
Concettualmente
sbagliato: nessun
artefatto di successo
può nascere così
C. Braghin - Web Usability
Integrazione
Manutenzione
3
Il ciclo di vita del del software:
visione dinamica
Sviluppo per
prototipi
successivi
Design
Prototype
Test
Concettualmente corretto
C. Braghin - Web Usability
4
Progettazione di un sito
Define
goals
• Quali obbiettivi
• Quali contenuti
• Quali utenti
• Quali compiti
• Quale contesto
• Concept grafico
Design
Prototype
C. Braghin - Web Usability
Test
5
Progettazione di un sito
Define
goals
• Struttura del sito
• Grafica
• Scenari utente
• Interazioni
Design
Prototype
C. Braghin - Web Usability
Test
6
Specifica ed Analisi dei
Requisiti
Progettazione centrata sull’utente
(User Centered Design, UCD)
Mettere l’utente
al centro
del processo di
progettazione
C. Braghin - Web Usability
8
Progettazione centrata
sull’utente
Le domande a cui rispondere:
• Quale utente?
• Quali sono i compiti che deve svolgere?
• Qual è il contesto d’uso?
C. Braghin - Web Usability
9
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, …)
C. Braghin - Web Usability
10
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
C. Braghin - Web Usability
g
h
i
l
a
b
c
Efficacia
d
e
f
Utenti
g
h
i
l
11
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?
C. Braghin - Web Usability
12
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?
C. Braghin - Web Usability
13
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 !
C. Braghin - Web Usability
14
Progettazione
dell’architettura
dell’informazione e
dell’interfaccia grafica
Progettazione (1)
– Si crea un modello (blueprint) dell’architettura dell’informazione,
uno schema in cui chiarire il modello concettuale del sistema.
About the
organization
Purchase
products
Pagina
principale
Search and
browse
Sotto-siti
risulutati
Interfaccia di
ricerca
prodotti
Naviga per
autore
feedback
Naviga per
argomento
Naviga per titolo
news
C. Braghin - Web Usability
16
Progettazione (2)
– Si crea un wireframe, prototipo della pagina.
Branding + servizi stabili (B)
Contesto ( C )
Utente (U)
Task (T)
Multifunzione (MF)
Report ( R )
C. Braghin - Web Usability
17
Progettazione (3)
•Si descrive ogni area, il suo funzionamento e i suoi stati possibili. Ad
esempio progettiamo l’area utente di un sito.
•ESEMPIO:
•Area utente:
– Contiene tutte le informazioni necessarie per identificare l’utente al sistema o
viceversa
– Permette all’utente di vedere la situazione attuale (abbonamenti, messaggi
etc).
•Ha due aspetti completamente diversi a seconda che l’utente abbia già
fatto login o meno.
–
–
Nel primo caso, dunque, il sistema proporrà tutti i meccanismi per permettere all’utente
di identificarsi, come maschera di login, meccanismo per accedere ai dati dimenticati,
ecc.
Nel secondo caso invece l’area conterrà informazioni rispetto alla modifica del profilo e
dei dati personali (inclusa la password), e alla privacy.
C. Braghin - Web Usability
18
Progettazione (4)
• Si descrive graficamente (interfaccia) il
funzionamento
C. Braghin - Web Usability
19
Esempio: Struttura del sito
C. Braghin - Web Usability
20
Esempio: Interfaccia Home page
C. Braghin - Web Usability
21
Esempio: Interfaccia (secondo livello)
C. Braghin - Web Usability
22
Grafica: esempio (secondo livello)
C. Braghin - Web Usability
23
Esempio: Interfaccia (terzo livello)
C. Braghin - Web Usability
24
Esempio: Interfaccia (artisti e dischi)
C. Braghin - Web Usability
25
Esempio: Scenari utente
C. Braghin - Web Usability
26
Sviluppo
Progettazione di un sito
Define
goals
• LO-FI prototyping
• HI-FI prototyping
Design
Prototype
C. Braghin - Web Usability
Test
28
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)
C. Braghin - Web Usability
29
Uso di prototyping tools per il web:
un’indagine
C. Braghin - Web Usability
http://guuui.com/issues/01_03_02.asp (settembre 2002)
30
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
C. Braghin - Web Usability
31
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
C. Braghin - Web Usability
32
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
C. Braghin - Web Usability
33
Esempio: usability enquiry di una home page
Realizzazione della
home page di Sun,
(Jakob Nielsen, 1995)
C. Braghin - Web Usability
34
C. Braghin - Web Usability
A
35
C. Braghin - Web Usability
44
C. Braghin - Web Usability
8 anni dopo…
45
(aprile 2003)
Usability test & paper simulation
Alcuni scenari d’uso vengono simulati manualmente,
alla presenza di utenti-cavia…
FACILITATORE
“COMPUTER”
UTENTE-CAVIA
C. Braghin - Web Usability
46
Paper simulation: materiali
Schema generale del sito
Singole pagine su cartoncino
Componenti dell’interfaccia (menu, forms, messaggi di
errore,…) su cartoncino
C. Braghin - Web Usability
47
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
C. Braghin - Web Usability
49
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
C. Braghin - Web Usability
50
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
C. Braghin - Web Usability
51
Implementazione
• Bisogna scrivere tutte le pagine del sito a
mano???
• No!!
–
–
–
–
Adobe Dreamweaver
Adobe GoLive
Word
…..
C. Braghin - Web Usability
52
Test
Progettazione di un sito
Define
goals
• Test funzionale
• Test di usabilità
• Controllo dei
contenuti
Design
Prototype
C. Braghin - Web Usability
Test
54
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
C. Braghin - Web Usability
55
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)
C. Braghin - Web Usability
56
Controllo dei contenuti
• Che cosa: verifica dei contenuti (correttezza,
adeguatezza, stile)
• Chi: responsabile dei contenuti
• Come: lettura delle pagine web
• Quando: prima del rilascio
C. Braghin - Web Usability
57
La qualità di un sito
• Non può essere una grandezza assoluta, ma
deve essere relativa a:
•
- lo scopo del sito
•
- la tipologia di utenti a cui si indirizza
•
- il suo contesto d’uso
• Noi useremo un modello basato su 6 macroattributi
C. Braghin - Web Usability
58
Una visione globale
Comunicazione
3
2
Accessibilità
Usabilità
1
0
Gestione
Funzionalità
Contenuto
C. Braghin - Web Usability
59
Comunicazione
Accessibilità
3
2
1
0
Usabilità
Funzionalità
Gestione
Contenuto
• Il sito funziona correttamente ?
• Le funzionalità sono adeguate agli
scopi del sito ?
C. Braghin - Web Usability
60
C. Braghin - Web Usability
61
Link spezzati
Uno studio sperimentale ha rilevato che il 5-8%
dei link seguiti durante la navigazione erano
interrotti
(Xerox, 1997)
C. Braghin - Web Usability
62
Missing links
La presenza di pagine “in costruzione”, anche se
correttamente segnalate, comunica all’utente una
impressione di provvisorietà e di scarsa professionalità, e va assolutamente evitata.
C. Braghin - Web Usability
63
Funzioni incomplete o mancanti: esempi
• Non riuscire a comprare via Internet un
regalo a un amico (dati del destinatario
diversi da quelli della carta di credito)
• Non riuscire a prenotare un albergo perchè
non c’è alcuna indicazione della zona della
città in cui è situato
• Non riuscire a comunicare un cambio di
indirizzo senza che il sito perda le
informazioni che ha accumulato su di me
C. Braghin - Web Usability
64
Comunicazione
Accessibilità
3
2
1
0
Usabilità
Funzionalità
Gestione
Contenuto
• Il contenuto informativo del sito è
adeguato ai suoi scopi?
– L’informazione è rilevante?
– È completa?
– È affidabile?
– È aggiornata?
C. Braghin - Web Usability
65
Potrebbe essere giudicato
insufficiente !
C. Braghin - Web Usability
66
Comunicazione
Accessibilità
3
2
1
0
Usabilità
Funzionalità
Gestione
Contenuto
• Il sito è correttamente gestito ?
– Il sito è sempre attivo ?
– il sito è adeguatamente presidiato ?
– il sito viene costantemente migliorato ?
C. Braghin - Web Usability
67
C. Braghin - Web Usability
68
Comunicazione
Accessibilità
3
2
1
0
Usabilità
Funzionalità
Gestione
Contenuto
• Il sito è facilmente accessibile?
– Le prestazioni di accesso sono sempre adeguate ?
– il sito è facilmente raggiungibile tramite i più comuni
motori di ricerca ?
– E’ adeguatamente referenziato da altri siti ?
– L’URL si ricorda facilmente ?
– Il sito è indipendente dal browser usato ?
– E’ accessibile a utenti disabili ?
C. Braghin - Web Usability
69
Monitoraggio tempi di accesso
Es.: www.visualroute.com
C. Braghin - Web Usability
70
Fattori che influenzano le prestazioni
di accesso
Banda verso UAP
User
Caratteristiche
dell’UAP
User Access Provider
Itinerario sulla rete
Internet
Caratteristiche
del SAP
Site Access Provider
Banda verso SAP
Web Server
Dimensionamento
del server
C. Braghin - Web Usability
“peso” delle pagine
web del sito
71
Comunicazione
Accessibilità
3
2
1
0
Usabilità
Funzionalità
Gestione
Contenuto
• Il sito raggiunge i suoi obbiettivi di comunicazione?
– Lo scopo del sito è immediatamente comprensibile
dalla sua home page?
– Il sito comunica correttamente il brand dell’azienda?
– Lo stile della comunicazione è coerente con gli
obbiettivi del sito?
– Problematiche legate all’internazionalizzazione /
localizzazione
C. Braghin - Web Usability
72
Qual è lo scopo di questo sito?
C. Braghin - Web Usability
73
E di questo ?
C. Braghin - Web Usability
74
Le “tagline”
• Sono frasi che caratterizzano sinteticamente lo scopo
del sito
• Sono quasi sempre accostate al logo
• Spesso sono accompagnate da una descrizione più
estesa dello scopo del sito
C. Braghin - Web Usability
76
C. Braghin - Web Usability
77
Internazionalizzazione e
localizzazione
• Internazionalizzazione
– Quando lo stesso sito può essere usato in tutti i paesi
• Localizzazione
– Quando vengono realizzate diverse versioni locali del sito
C. Braghin - Web Usability
78
Esempio di internazionalizzazione: www.europarl.eu.int
C. Braghin - Web Usability
79
su ogni pagina posso
cambiare la lingua
C. Braghin - Web Usability
80
C. Braghin - Web Usability
81
La pagina corrente è disponibile in tutte le lingue
La pagina corrente non è disponibile in tutte le lingue
C. Braghin - Web Usability
82
Esempio di localizzazione
C. Braghin - Web Usability
83
C. Braghin - Web Usability
84
Che cosa può cambiare da un
paese all’altro
•
•
•
•
•
•
•
•
La lingua
L’alfabeto
La valuta
Gli indirizzi
L’ora
I sistemi di misura
La cultura
Le convenzioni sociali
C. Braghin - Web Usability
86
Differenze culturali: esempio
comprensibile solo negli USA
internazionale
C. Braghin - Web Usability
87
Le bandiere rappresentano
i paesi, non le lingue
C. Braghin - Web Usability
88
Comunicazione
Accessibilità
3
2
1
0
Usabilità
Funzionalità
Gestione
Contenuto
• Il sito è usabile ?
C. Braghin - Web Usability
89
OK, ma
da dove devo
cominciare?
Perchè lo
chiamano
così?
E’ lì che devo
cliccare?
Questi due link
sembrano
uguali.
Perchè?
Perchè lo
hanno messo
lì?
C. Braghin - Web Usability
90
Usabilità dei siti:
alcuni problemi tipici
•
•
•
•
•
Ricerca dell’informazione difficoltosa
Funzionalità non auto-esplicative
Disorientamento durante la navigazione
Leggibilità sul video scarsa
Tempi di accesso eccessivi
C. Braghin - Web Usability
91
Messa in opera del sito Web
Vi ricordate?
File HTML
browser
Internet
URL
Client
Server
C. Braghin - Web Usability
web server
il protocollo: HTTP
93
Caricamento su di un server
• Un server web è un programma che si
occupa di fornire, su richiesta del browser,
una pagina web
– Le informazioni inviate dal web server viaggiano
in rete trasportate dal protocollo HTTP.
– L'insieme di server web dà vita al Web
• Per caricare I file su di un server si utilizza il
protocollo ftp
C. Braghin - Web Usability
94
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
C. Braghin - Web Usability
96
Evoluzione del software:
classificazione delle modifiche
Perfective
31%
New
Functionality
38%
Fix/Repairs
31%
Source: IT Metrics, March 1997
C. Braghin - Web Usability
97
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
C. Braghin - Web Usability
prestazioni
necessarie
Livello di
prestazioni
richiesto
dall’utente
medio
t
Fase centrata sull’utente
98
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)
C. Braghin - Web Usability
99
La crescita di un sito web
C. Braghin - Web Usability
100
Evoluzione di un sito web
modifiche
major releases
minor releases
r1
r2
r3
r4
tempo
software
contenuti
C. Braghin - Web Usability
101
Fluidità dei media
MEDIA
PERMANENTI
libro
MEDIA
FLUIDI
MEDIA
VOLATILI
CD-ROM
giornali
TV
WEB
C. Braghin - Web Usability
102
Lifetime: indagini sperimentali
Tempo medio di vita per:
Files HTML
Immagini
Worrell, 1994
Gwertzman et al,1996
C. Braghin - Web Usability
75 gg
50 gg
107 gg
85 gg
103