20. Principi e linee guida (I)

Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
PRINCIPI E LINEE GUIDA (I)
Edizione
2014-15
1

Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi www.rpolillo.it
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non commerciale, condividi allo stesso modo) a
chiunque desiderasse utilizzarle, per esempio a scopo didattico,
senza necessità di preventiva autorizzazione:
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini fotografiche e alle screen
shots, i cui diritti restano in capo ai rispettivi proprietari, che sono
stati indicati, ove possibile, nelle didascalie del libro. L’autore si
scusa per eventuali omissioni, e resta a disposizione per
correggerle.
Ρ.Πολιλλο
− Μαρζο
2015
2

Scopo di questa lezione
3
Discutere, con esempi, le indicazioni che
possono essere fornite al progettista per
guidarlo nella progettazione di sistemi usabili.
R.Polillo - Marzo 2015

Quali indicazioni per il design dell’interfaccia
utente?
4
coercitività
generalità
principi
bassa
bassa
alta
alta

utente?
5
coercitività
generalità
Linee
guida
principi
bassa
bassa
alta
alta

utente?
6
coercitività
generalità
Linee
guida
principi
Design
patterns
bassa
bassa
alta
alta

utente?
7
coercitività
generalità
regole
di progetto
Linee
guida
principi
Design
patterns
bassa
bassa
alta
alta

utente?
8
coercitività
generalità
standard
regole
di progetto
Linee
guida
principi
Design
patterns
bassa
bassa
alta
alta

Terminologia
 Principi
Principi generali per la progettazione di interfacce utente usabili, basati su evidenza
scientifica o sul generale consenso. Derivano dalla conoscenza degli aspetti psicologici,
computazionali e sociali e sono indipendenti dalla tecnologia. Sono espressi spesso in
forma molto generale.
 Linee guida
Insieme di raccomandazioni per il progetto dell’interfaccia utente per una particolare
classe di sistemi, espresse in modo generale ma meno astratte degli standard, con
esempi e motivazioni.
Non sono vincolanti, sta al progettista decidere sulla opportunità di applicarle caso per caso
 Standards
Insieme di regole da applicare nel progetto di una classe di sistemi. Sono vincolanti: i
progettisti devono applicarli. Sono di norma emesse da un Ente di standardizzazione. La
conformità allo standard deve essere valutabile in modo preciso.
 Regole di progetto
Insieme di regole da applicare nel progetto di un particolare sistema. Sono vincolanti
9

Indicazioni per il design: autorevolezza
Diversi livelli di autorevolezza:
A: Completamente supportate da risultati di ricerca e
dati empirici
B: Basate su pratica generalmente accettata (in modo
documentato)
C:Non ben documentate, ma supportate dall’opinione di
professionisti
D: Opinione individuale
Standard: solo livelli A e B
10

Indicazioni per il design: tipologia
11
coercitività
generalità
standa
rd
regole
di progetto
Linee
guida
principi
Design
patterns
bassa
bassa
alta
alta

Gli standard per la usabilità
12
 Situazione complessa: gli standard
sono in continua evoluzione
(www.iso.org; www.uninfo.it)
 Il processo è molto lento, e passa
attraverso diverse fasi
 Ci sono standard di prodotto e standard
di processo

ISO 9241: Ergonomics of human System
interaction
E’ uno standard composto dalle seguenti serie, ciascuna
delle quali composta di diversi documenti), in diverso
stadio di evoluzione (attualmente, una ventina di
documenti) appartenenti alle seguenti serie:
100 series: Software ergonomics
200 series: Human system interaction processes
300 series: Displays and display related hardware
400 series: Physical input devices – ergonomics principles
500 series: Workplace ergonomics
600 series: Environment ergonomics
700 series: Application domains - Control rooms
900 series: Tactile and haptic interactions
13

14
coercitività
generalità
standard
regole
di progetto
Linee
guida
principi
Design
patterns
bassa
bassa
alta
alta

User Interface Design
Guidelines
 Android:
http://developer.android.com/guide/topics/ui/index.html
 iOS:
https://developer.apple.com/library/ios/documentation/us
erexperience/conceptual/MobileHIG/index.html
15

Design patterns
 Soluzioni generali a problemi di progettazione che si
ripropongono in molte situazioni
 Non una soluzione “finita”, ma un modello da adattare
alla specifica situazione
 Il concetto è nato in architettura
alla fine degli anni ’70
(Christopher Alexander),
e applicato all’ingegneria del
software dalla fine degli anni ‘80
16

Design pattern in architettura
18
“Colloca la scala principale in una
posizione chiave, centrale e
visibile. Tratta l’intera scala come
una stanza (o, se all’esterno,
come un cortile). Disponila in
modo che la scala e la stanza
siano una cosa sola, con la scala
che scende attorno a una o due
pareti della stanza. Allarga il
fondo della scala con finestre
aperte o balaustre, e con ampi
gradini, in modo che le persone
che scendono lungo la scala
diventino parte dell’azione della
stanza mentre sono ancora sulla
scala, e che le persone in basso
usino naturalmente i gradini per
sedersi”.
Da C.Alexander, A Pattern Language

I pattern di interazione uomo macchina: esempio
Design pattern per le funzioni di ricerca in un sito web
(van Welie)
Advanced search Search Tips
Autocomplete Site Index
FAQ Site Map
Help Wizard Footer Sitemap
Search Box Tag Cloud
Search Area Topic Pages
Search Results
19

Mobile design patterns: esempi
 http://www.mobile-patterns.com
 http://http://pttrns.com
 http://inspired-ui.com (iPhone)
 http://www.sitepoint.com/examples-mobile-
design-patterns/
 Un libro:
http://www.mobiledesignpatterngallery.com
20

Pattern language per l’interazione
21
I formalismi di descrizione sono diversi, ma
normalmente ogni pattern è descritto in una
scheda che fornisce
 Il problema di cui si tratta
 Il pattern che lo risolve
 Le motivazioni
 L’ambito/limitazioni di applicazione
 Esempi di uso

Design pattern: vantaggi
 Raccolgono lo stato della pratica
 Suggeriscono soluzioni ai progettisti
 Formazione di un linguaggio comune
 Diffondono gli “standard di fatto”
 Evitano di “reinventare la ruota”
22

23
coercitività
generalità
standard
regole
di progetto
Linee
guida
princip
i
Design
patterns
bassa
bassa
alta
alta

Principi
 I “principi morali” sono principi che guidano il
“buon” comportamento umano
 Nella progettazione, possiamo definire quei
“principi morali” che dovrebbero guidarci, in
particolare, quando dobbiamo scegliere fra
soluzioni alternative
 Sono tanto più validi quanto più la pratica
mostri che derogare da questi principi genera,
prima o poi, delle difficoltà
24

ISO 9241-110: I 7 principi del dialogo uomo
macchina
25
1. Adeguatezza al compito
2. Autodescrizione
3. Conformità alle aspettative dell’utente
4. Adeguatezza all’apprendimento
5. Controllabilità
6. Tolleranza verso gli errori
7. Adeguatezza alla personalizzazione

26
2. Autodescrizione
3. Conformità alle aspettative
dell’utente
5. Controllabilità
7. Adeguatezza alla individualizzazione
La funzionalità del
sistema e il dialogo
sono basati sulle
caratteristiche del
compito, piuttosto
che sulla tecnologia
scelta per
effettuarlo
ISO 9241-110: I 7 principi del dialogo uomo
macchina

Adeguatezza al compito: esempio
27

Adeguatezza al compito, in pratica
Nel nostro progetto, abbiamo applicato in pratica
questo principio…
… nell’attenzione “spasmodica” alla corretta
individuazione dei casi d’uso, e alla stesura del
diagramma dei casi d’uso, come base di
partenza per orientare la progettazione; inoltre…
… la definizione di scenari d’uso tipici ci ha
aiutato a perfezionare l’analisi
28

Adeguatezza al compito: aspetti chiave
29
 Fasi dell’interazione e “navigazione” adeguate
al compito
 Informazioni e formati adeguati al compito
 Tecniche di interazione adeguate al compito
 Dialogo essenziale (no ridondanze non
necessarie per il compito)
 Default tipici
Nel nostro
caso, tutto
pensato per
mobiles
Nel nostro
caso, tutto
pensato per
mobiles

Dialogo essenziale
Analizzare accuratamente le
ridondanze:
servono?
a che cosa servono?
a chi servono?
ci sono degli svantaggi nella loro
eliminazione?
30

Dialogo essenziale
31

I 7 principi del dialogo secondo la ISO 9241-110:2006
32
2. Autodescrizione
3. Conformità alle aspettative
dell’utente
5. Controllabilità
7. Adeguatezza alla
individualizzazione
Agli utenti risulta
evidente, in ogni
momento, in che
contesto e fase
del dialogo si
trovano, quali
azioni possono
compiere e come
queste possono
essere effettuate

Autodescrizione, in pratica
Nel nostro progetto, abbiamo applicato questo
principio nell’attenzione “spasmodica” alla
segnalazione del contesto corrente, fin dal primo
prototipo (POP)
Esempi:
Il nome dell’app
I titoli delle varie schermate
Il nome dell’utente loggato
L’oggetto selezionato
Lo stato del sistema (!)
Feedback evidente
Descrizione dell’input atteso
33
Se non
indispensabile, no
ricorso alla
memoria a breve
termine
Se non
indispensabile, no
ricorso alla
memoria a breve
termine

Esempio: guida all’utente
34

Guida all’utente: che cosa non fare
35
Pagina web con
menu le cui
scritte appaiono
come roll-over:
da evitare!

www.brigaderia.com.br

20. Principi e linee guida (I)

More Related Content

What's hot

Viewers also liked

Similar to 20. Principi e linee guida (I)

More from Roberto Polillo

20. Principi e linee guida (I)

Editor's Notes