![Page 1: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/1.jpg)
Web Usability
Sistemi Distribuiti Corso di laurea in Ingegneria Informatica
Facoltà di Ingegneria - Università di Bologna7 giugno 2002
![Page 2: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/2.jpg)
IndiceDefinizioneIl contesto economico, strutturale, sociale e tecnologicoInverse Acquisition Process
Lo sviluppo dell’interfacciaDesigner Conceptual ModelUser Conceptual Model
L’implementazioneElementi di Site DesignElementi di Page e Content Design
![Page 3: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/3.jpg)
Definizione
Web Usability: concetto di ergonomia applicato agli ambienti digitali
Quindi tutto ciò che è volto a:
• facilitare
• ottimizzare
• velocizzare
• semplificare l’uso
![Page 4: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/4.jpg)
Le Macro Componenti del ContestoEconomiche:
Ciclo di vita delle tecnologie
Strutturali:Peculiarità del supporto tecnologico (hardware)Peculiarità delle infrastrutture (connessioni)
Sociologiche:Comportamentali (bisogno, evoluzione cognitiva, aspettativa, abitudine, fiducia)
Inerenti i processi aziendali:Dinamiche di creazione del prodotto
![Page 5: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/5.jpg)
Donald A. Norman, Il Computer Invisibile
Economiche
Ciclo di vita delle tecnologie
![Page 6: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/6.jpg)
World Internet Project Italia - Bocconi, Economia&Management
Economiche
Tempo di diffusione della tecnologia
Da quanto tempo utilizza Internet?
5,3
4,9
19,8
33,9
18
12,3
2,8
2,8
0,3
0 10 20 30 40
meno di 3 mesi
da 3 mesi a 6 mesi
da 6 mesi a 1 anno
da 1 a 2 anni
da 2 a 3 anni
da 3 a 4 anni
da 4 a 5 anni
da più di 5 anni
non sa/ non risponde
Espe
rienz
a
Percentuale degli intervistati
![Page 7: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/7.jpg)
Jupiter MMXI - At Home Panels
Economiche
Crescita della popolazione online
2.0003.0004.0005.0006.0007.0008.0009.000
10.00011.00012.00013.00014.00015.00016.00017.000
Janua
ry 01
Februa
ry 20
01Marc
h 2001
April 2
001
May 20
01Ju
ne 20
01Ju
ly 20
01Aug
ust 20
01
Septem
ber 20
01Octo
ber 20
01
Novem
ber 20
01
Decem
ber 20
01
FranceGermanyUKSpainItaly
Italy: + 47%
![Page 8: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/8.jpg)
Jupiter MMXI - At Home Panels
Strutturali
Tipologia di connessione utilizzata Europa
38,8 47,4 52,9 55,3 55,6 54,2 51,5
7,211,7 17,3 23,7 30,5
3,5
1,2
0
20
40
60
80
100
2000 2001 2002 2003 2004 2005 2006
Dial-up Broadband
![Page 9: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/9.jpg)
World Internet Project Italia - Bocconi, Economia&Management
Strutturali
Tipologia di connessione utilizzata Italia
Che tipo di connessione a Internet utilizza?
69,4
4,20,9
5,9
19,6
0
10
20
30
40
50
60
70
80
fino a 56k broadband(Adsl,
Fastweb, …)
mobileattraversocellulare
altro non sa/nonrisponde
Tipo di connessione
Perc
en
tuale
deg
li i
nte
rvis
tati
![Page 10: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/10.jpg)
World Internet Project Italia - Bocconi, Economia&Management
Sociologiche
Percezione capacità di utilizzo del computerIn una scala da 1 (min) a 10 (max) valuti la sua capacità di
utilizzo del computer
27,8
4,2 4,6 5,1
11,810,2 10
4,72 2,6
17
0
5
10
15
20
25
30
1 (m
in) 2 3 4 5 6 7 8 9
10 (m
ax)
non
sa/ n
on ri
spon
de
Perc
en
tuale
deg
li i
nte
rvis
tati
![Page 11: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/11.jpg)
Jupiter MMXI - At Home Panels
Sociologiche
Demographics popolazione online
Men : 63%Men : 63%
High Standard High Standard of Living : 41%of Living : 41%
Men : 50%
<35 years old : 52%<35 years old : 52% <35 years old : 53%
€€ $ High Standard High Standard of Living : 32%of Living : 32%$
Europe: France, Uk, Germany, Spain, Italy, Switzerland
![Page 12: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/12.jpg)
Donald A. Norman, Il Computer Invisibile
Prospettive nella creazione di un prodotto
Aziendali
![Page 13: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/13.jpg)
Inverse Acquisition Process
processo tradizionale
buy use
in ambiente web
use buy
![Page 14: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/14.jpg)
Interface Design
Lo sviluppo dell’InterfacciaUser Conceptual Model
Immagine “mentale” che ciascun soggetto sviluppa inconsciamente interagendo con un sistema:
non necessariamente riflette esattamente la realtàma aiuta il soggetto a “predire” una reazione data un’azioneserve come modello di analisi di una situazione, comprensione e quindi genera l’azione
Processo iterativo
![Page 15: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/15.jpg)
Interface Design
Lo sviluppo dell’interfacciaUser vs. Designer Conceptual Model
![Page 16: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/16.jpg)
Interface Design
Interfaccia deve essere:Prevedibile Intuitiva
Elementi che devono convergere :
Tecnico-funzionaleComportamentaleEstetico
Efficiente, razionale ed organizzata
Rispondere alle aspettative ed al bisogno
Coerente, ordinata e semplice
![Page 17: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/17.jpg)
Premesse
Lo scenario è in costante evoluzioneTecnologie, infrastrutture, capacità cognitivaUtente non è una costante ma una variabile
“Codificazioni” sono dettate dalla consuetudine
Il concetto di “standard” è prematuro
![Page 18: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/18.jpg)
Site Design
Elementi di site design
Rispondere a due criteri fondamentali:gerarchiastrutturato in piccoli blocchi di informazioni
Processo si suddivide in 4 step:Dividere l’informazione in unità logicheIndividuare relazioniStabilire una gerarchiaAnalizzare la rispondenza ai criteri di funzionalità e ordine estetico
Non si legge on-screen
Coerenza conformità all’aspettativa abitudine fiducia
Necessità di orientare in un ambiente “libero”
![Page 19: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/19.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Site Design
Struttura – gerarchia web
![Page 20: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/20.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Site Design
La libertà di navigazione
![Page 21: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/21.jpg)
Site Design
Usability Checklist – site design
La struttura è razionale ed equilibrataLe informazioni sono organizzate in piccoli blocchiLa struttura è di supporto, ma non imbrigliaCoerente con le esigenze dell’utente
![Page 22: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/22.jpg)
Page Design
Elementi di page design
Rispondere a criteri fondamentali:Coerenza visiva e capacità di guida (fuoco, percorso)Compatibilità con il supporto tecnologico (peso e dimensioni)
Utente ha un approccio visivo in tre fasi:Visuale (grafica)Percettiva (struttura)Analitica (contenuto)
In media si perde l’attenzione dell’utente > 10 secondi
Coerenza conformità all’aspettativa abitudine fiducia
20% utenti utilizza le scroll bars
![Page 23: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/23.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Page Design
Struttura, contrasto e fuoco
![Page 24: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/24.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Page Design
Sequenza approccio visivo
![Page 25: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/25.jpg)
Page Design
Elementi fondamentali struttura pagina
Elementi grafici, colore e struttura fuocoAsse visuale occidentale (sx dx, top bottom)Occhio percepisce il contrastoInformazione deve essere strutturata con il supporto della grafica, del colore e del testo
Vincoli:monitor 800x600browserconnessionela stampa (A4: 535x320)gamma colori
![Page 26: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/26.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Page Design
Visibilità pagina sul monitor
![Page 27: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/27.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Page Design
Layout pagina
![Page 28: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/28.jpg)
Page Design
Usability Checklist – page design
Contenuti fondamentali sono nella parte alta della paginaLe informazioni sono organizzate verticalmente e da sinistra verso destraGli elementi testuali e di grafica sono coerentiLa necessità di scrolling è minimizzata
![Page 29: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/29.jpg)
Content Design
Elementi testuali
Occhio individua primariamente le forme ed il contrastoLe maiuscole sono meno distinguibiliI blocchi di testo devono essere brevi e con elementi in evidenzaUtilità degli elementi differenzianti (titoli, bold)
Vincoli:differenze tra sistemiimpossibilità di prevedere le impostazioni dell’utentevariazioni browser
![Page 30: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/30.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Content Design
Leggibilità
![Page 31: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/31.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Content Design
Font - differenze
![Page 32: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/32.jpg)
Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites
Content Design
Il colore
![Page 33: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/33.jpg)
Content Design
Usability Checklist – elementi testuali
Font di almeno 10-12 puntiChiarezza e contrasto con lo sfondoEvitare le maiuscoleBrevitàOmogeneità nell’utilizzo di font e colori
![Page 34: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/34.jpg)
Overall Design: Usability
Usability Checklist – navigazione
Risponde alle aspettative comportamentali ed al bisogno dell’ utente
E’ strutturata in modo da garantire all’80% degli utenti l’80% delle funzioni richieste
![Page 35: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/35.jpg)
…nel frattempo nel mondo reale…
Possiamo mettere a posto la nostra incomprensibile
interfaccia utente spendendo 1
milione di dollari…
..oppure possiamo chiudere gli occhi e sperare molto
intensamente che ai nostri utenti non importerà…
Lui sta risparmiando un milione di dollari.E tu che cosa hai
fatto oggi?
![Page 36: Web Usability - unibo.itlia.disi.unibo.it/Courses/SistDistrA0102/usability.pdf · Web Usability Sistemi Distribuiti Corso di laurea in Ingegneria Informatica Facoltà di Ingegneria](https://reader033.vdocuments.mx/reader033/viewer/2022053003/5f0776b97e708231d41d1c15/html5/thumbnails/36.jpg)
FontiJakob Nielsen Designing Web Usability
Tom Brinck, Darren Gergle, Scott D. WoodUsability for the Web
Patrick J. Lynch, Sarah HortonWeb Style Guide: Basic Design Principles for Creating Web Sites
Donald A. NormanIl Computer Invisibile
http://www.business2.com/webguide/0,,26399,00.html
Jupiter Media MetrixWorld Internet Project Italia – Università BocconiEconomia&Management