Figure dal libro Facile da Usare

transcript

Figure dal libro:

Facile da usare Una moderna introduzione all’ingegneria dell’usabilità

di Roberto Polillo

Apogeo, 2010

Queste slides…… contengono tutte le figure del libro citato in copertina, nell’ordine in cui compaiono nel libro. Per le didascalie, si rimanda al libro stesso, reperibile anche in rete, in www.rpolillo.it

Queste slide vengono rese 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.

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.

Cap. 1 Sistemi interattivi e interfacce d’uso

dialogouomo-sistema sistemautente

mondo esterno

Interfaccia d’uso

sistemautente

azioni dell’utente

(input)

risposte del sistema

(output)

mani tastiera, mouse,touchpad, joystick, touch screen, tavoletta grafica, guanto, riconoscimento scrittura

voce riconoscimento vocale

sguardo eye tracking

postura sensori

tatto guanto

vista schermi video, stampanti, occhiali, caschi

udito dispositivi sonori, sintesi vocale

I DI O

complessità

strutturale

complessità funzionalebassa alta

SISTEMA FP (x 103)

SLOC (x 106)

SLOC/FP

U.S. Air Traffic Control 306 65.3 213

SAP 297 23.7 80

MS Vista 158 10.1 64

MS Office Professional 93 6.0 64

MS Word 2007 3 0.2 64

MS DOS 1.3 0.3 213

Google search engine 19 1.2 64

Amazon.com 18 0.5 27

Mozilla Firefox 1.3 0.075 53

F115 avionics package 22 2.1 91

complessità

d’uso

complessità funzionalebassa alta

Complessità d’uso

Complessità strutturale

Complessità funzionale

BISOGNI DELL’UTENTE

PRODOTTO TECNOLOGIACONCORRENZA

ECOSISTEMA TECNOLOGICO

Legge di Moore

1980 1985 1990 1995 2000 2005 2010

ità (

Livello di prestazioni richiesto dall’utente medio

Fase centrata sulla tecnologia Fase centrata sull’utente

Punto di transizione in cui la tecnologia soddisfa le necessità primarie

necessità non soddisfatte

prestazioni in eccesso

evoluzione del prodotto

prestazioninecessarie

Sistema interattivoutente Filtro

Complessità - funzionale - strutturale

Cap. 2 Evoluzione dei paradigmi di interazione

TECNOLOGIE DI INTERAZIONE

PARADIGMI DI INTERAZIONE

permettono nuovi

suggeriscononuove

(1) Patient’s name: (first-last)**FRED SMITH(2) Sex:**MALE(3) Age:**55(4) Have you been able to obtain positive cultures from

a site at which Fred Smith has an infection?**YES(5) What is the infection?**PRIMARY-BACTEREMIA(6) Please give the date and approximate time when signs

of symptoms first appeared**

card script

area sensibile(bottone invisibile)

Siti web nel mondo (x 1000)

Cap. 3 Usabilità

Utente

Dispositividi output

Dispositividi input

Sistema

azione feedback

Novizio

Principiante

Competente

Esperto

ilità

Focus sull’utente novizio

Focus sull’utente esperto

HELP ONLINE

TUTORIAL USER

MANUAL

REFERENCE

MANUAL

REFERENCE

HELP DESK

COMMUNITY

PRODOTTO

STARTER KIT

CARTACEO ELETTRONICO(CD)

ELETTRONICO(download)

ONLINE(navigazione)

HELP DESK

COMMUNITY

SERVIZIO APPLICATIVO

ONLINE

contestod’uso

utentispecifici generici

contestod’uso

utenti

usabilità universale

usabilità

specifici generici

Utenti per cui il sistema è usabile

Utenti per cui il sistema è accessibile

Cap. 4 Conoscere l’utente

Una persona, un ruolo

Una persona con più ruoli

Più persone con lo stesso ruolo

Un ruolo non attribuito

Persone Ruoli

PERSONA

LIVELLO COGNITIVO

DIVERSITÀ DEGLI UTENTI

Sistema

Utente

COMPORTAMENTI

Tempo (sec) fra presentazione e rievocazione

75Riconoscimento

Rievocazione

20 min1 ora 4 ore 1 giorno 2 giorni

Tempo trascorso dalla presentazione

0° 10° 20° 30°10°20°30° 80°70°

Angolo visuale dalla fovea (gradi)

ConiConi

Bastonce

Bastoncelli

400 450 500 550 600 650Lunghezza d’onda (nm = 10-9 m)

Coni R

Coni G

Coni B

azzurro arancione

Spettro visibile380 680

n = numero delle prove

Inizialmente si migliora rapidamente…

…poi, sempre più lentamente

Bersaglio

T0 - ΔT

OKT0 - ΔT

Qui tutta l’area grigia è cliccabile

Qui è cliccabile solo il testo

STRUMENTI

COMPORTAMENTI

BISOGNI

Ambiente Cultura

Caratteristiche psico-fisiche

Dominio della ricerca etnografica

Dominio della progettazione

Dominio della psicologia

Società

Cap. 5 Progettare per l’utente

Disegno di Alberto Iobbolo

FUNZIONALITÀ

Cercare nome in rubrica

Chiamare il numero selezionato nella rubrica

Creare un nuovo SMS

Inserire il testo in SMS

Inserire il numero selezionato nella rubrica in SMS Inviare SMS

CASI D’USO

Fa una telefonata

Invia un SMS

Interaction

design

Psicologia e scienze della comunicazione

Informatica e tecnologie della comunicazione

Progettualità orientata a prodotti / servizi interattivi

Cap. 6 L’ingegneria della usabilità

Requisiti

Analisi e progettazione

Realizzazione

Rilascio

BISOGNI DELL’UTENTE

STRUMENTO

Progettazione

Inizio

RilascioTest

Prototipazione

Requisiti

risorse

Requisiti

Progettazione

Prototipazione

Rilascio

Definizionedei requisiti

3 4 5 6 7

Web design

Visual design Sviluppo

Redazionedei contenuti

Pubblicazione

Documento dei requisiti

Prototipo di navigazione

Prototipo funzionale

Prototipo editoriale

Sistema on line

Prototipo di comunicazione

Avviamentodel progetto

Piano di qualità

Gestione del sito

Cap. 7 Requisiti

Ricerca prodotto

Acquista prodotto

Visualizza profiloutente

Inserisci nuovo

prodotto

Modifica prodotto

Sistema bancarioUtente

Gestore del negozio

Sito di e-commerce

Utente

Acquista prodotto

ATTORE:

CASO D’USO:

Utente

Acquistaprodotto

Utente

Acquistaprodotto

significa:L’Utente esegue il caso d’uso Acquista prodotto

Cliente

Acquistaprodotto

Acquista CD

Acquista libro

Cliente privato

Cliente società

Acquistaprodotto

Autenticazione

Verifica stato ordini

<<include>><<inclu

de>>Utente

Acquistaprodotto

Help on line

Verifica stato ordini

<<extend>><<exte

nd>>Utente

1.Sommario2.Generalità - Scopo del prodotto - Situazione attuale - Caratteristiche degli utenti - Contesto d’uso - Scenari d’uso - Fattibilità tecnologica3. Posizionamento - Analisi della concorrenza - Posizionamento competitivo4. Casi d’uso- Diagramma dei casi d’uso- Descrizione dei singoli casi d’uso5. Altri requisiti - Requisiti per l’esperienza utente - Requisiti prestazionali - ….Appendici- Glossario - …..- Riferimenti

Cap. 8 Ingegneria e creatività

MIMESI

PRODOTTI ESISTENTI

NUOVO PRODOTTO

Mimesi: esempi (1)

Chi et al., CHI 2005

Mimesi: esempio (3)

IBRIDAZIONE

PRODOTTI ESISTENTI

NUOVO PRODOTTO

METAFORA

PRODOTTI ESISTENTI

NUOVO PRODOTTO

Donatore

Ricevente

? ? ? ? ?

VARIAZIONE

PRODOTTI ESISTENTI

NUOVO PRODOTTO

COMPOSIZIONE

PRODOTTI ESISTENTI

NUOVO PRODOTTO

Design pattern

• Problem• Solution• Use when• How• Why• More examples• Implementation• Literature

• Problem summary• Example• Usage• Solution• Rationale• [Discussion]• [Sources]• More examples

Cap. 9 Prototipi

Implementazione

Interfaccia

E [C] / A significa:

quando il sistema è nello stato S1, se si verifica l’evento E e se vale la condizione C,il sistema effettua l’azione A e va nello stato,S2

Attesa selezionebevanda

Erogazione bevanda

Macchina spenta

Attesainserimento

monete

[bevanda erogata]Prelievo bevanda

Annullamento richiesta / restituzione monete

Selezione bevanda

Inserimento monete

[bevanda non erogata]

Chiamata da contatto

Chiamata da sconosciuto

SMS ricevuto

Chiamata persa

Componi numero

Chiama

Indietro

#* 099

Salva Canc

Cap. 10 Principii e linee guida

coercitività

generalità

standard

regoledi progetto

linee guida

principi

Part 1: General introduction Part 2: Guidance on task requirements Part 4: Keyboard requirements Part 5: Workstation layout and postural requirements Part 6: Guidance on the work environment Part 9: Requirements for non-keyboard input devices Part 11: Guidance on usability Part 12: Presentation of information Part 13: User guidance Part 14: Menu dialogues Part 15: Command dialogues Part 16: Direct manipulation dialogues Part 17: Form filling dialogues Part 20: Accessibility guidelines for ICT equipment and services Part 100: Introduction to standards related to software ergonomicsPart 110: Dialogue principles Part 129: (DIS) Guidance on software individualization Part 151: Guidance on World Wide Web user interfaces Part 171: Guidance on software accessibility Part 210: Human-centred design for interactive systemsPart 300: Introduction to electronic visual display requirements Part 302: Terminology for electronic visual displays Part 303: Requirements for electronic visual displays Part 304: User performance test methods for electronic visual displays Part 305: Optical laboratory test methods for electronic visual displays Part 306: Field assessment methods for electronic visual displays Part 307: Analysis and compliance test methods for electronic visual displays Part 308: Surface-conduction electron-emitter displays (SED) Part 309: Organic light-emitting diode (OLED) displays Part 400: Principles and requirements for physical input devices Part 410: Design criteria for physical input devices Part 420: (DIS) Selection procedures for physical input devices Part 910: (DIS) Framework for tactile and haptic interaction Part 920: Guidance on tactile and haptic interactions

ità a

ttativ

ll’ute

ontrollabilità

Adeguatezzaall’apprendimento

Usabilità

Auto-descrizione

Adeguatezza

al compitoAdeguatezza alla

individualizzazione

Link interni al sito Link esterni al sito Link alla homepage

Motore di ricerca interno Banner pubblicitari Login /registrazione

Carrello degli acquisti Help Link ai prodotti

Cap. 11 Progettare per l’errore

AZIONE NONINTENZIONALE(“LAPSUS”)

AZIONE INTENZIONALE MA ERRATA(“MISTAKE”)

c’era l’intenzione

di agire?

AZIONE CORRETTASI

AZIONE NON INTENZIONALENO

AZIONE SPONTANEA

MacPaint, 1984

Per informazioni sulle nuove offerte, premi 1; per informazioni sulle tariffe del servizio, premi 2; se sei interessato a conoscere i nuovi servizi, premi 3; se desideri comunicare furto o smarrimento del tuo telefonino, premi 4; se desideri ricevere informazioni sul credito premi 5; se desideri parlare con un operatore premi 0; per risentire questo annuncio premi 7

AZIONE CORRETTA

Stato iniziale Stato finale

Stato di errore

FORWARD RECOVERY

BACKWARD RECOVERY

AZIONE CORRETTA

Stato iniziale Stato finale

Stato di errore

Stato finaleapprossimato

Stato inizialeapprossimato

FORWARD RECOVERY

BACKWARD RECOVERY

Cap. 12 Progettare la grafica

IBM's Aptiva Communication Center

STOPSTOPSTOPSTOP

GOGOGOGO

13. Progettare il testo

semanticasintassilessico

lettereglifitratti

Readability

Legibility

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo. Donec vel metus sit amet enim euismod tincidunt. Duis aliquam sapien eu elit. Integer mattis tellus ac diam. Duis volutpat lacus a ante. Suspendisse vel eros sed augue sodales interdum. Aenean neque lectus, porttitor non, tempus quis, feugiat in, justo

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Sed commodo. Donec vel

metus sit amet enim euismod tincidunt. Duis

aliquam sapien eu elit. Integer mattis tellus ac

diam. Duis volutpat lacus a ante. Suspendisse vel eros

sed augue sodales interdum. Aenean neque

lectus, porttitor non, tempus quis, feugiat in,

TipografiaTipografiaTipografiaTipografiaTipografia

Times New Roman

Georgia

Verdana

Courier New

Reaction time (sec)

pattern PATTERN

La leggibilità di un testo dipende da molti fattori

TESTO CALCOLA INDICESCRIVI

VOCABOLARIO DI BASE(7000 parole)

VOCABOLARIO COMUNE

VOCABOLARIO FONDAMENTALE(2000 parole)

1. Scrivere frasi brevi2. Usare parole del linguaggio comune3. Usare pochi termini tecnici e spiegarli4. Usare poco abbreviazioni e sigle5. Usare verbi nella forma attiva e affermativa6. Legare le parole e le frasi in modo breve e chiaro7. Usare in maniera coerente le maiuscole,

le minuscole e la punteggiatura8. Evitare neologismi, parole straniere e latinismi9. Uso del congiuntivo10. Usare in maniera corretta le possibilità

di composizione grafica del testo

SINTESI

DETTAGLIO

MATERIALEAGGIUNTIVO

Cap. 14 Valutare la usabilità

Riconoscere piuttosto che ricordareFlessibilità ed efficienza d’uso

Visibilità dello stato del sistema

Corrispondenza fra mondo reale e sistemaConsistenza e standard

Guida e documentazione

Libertà e controllo da parte degli utenti

Prevenzione degli erroriAiutare gli utenti a riconoscere gli errori, …

Design minimalista ed estetico

Adeguatezza al compito

Autodescrizione

Conformità alle aspettative

Adeguatezza all’apprendimento

Controllabilità

Tolleranza verso gli errori

Adeguatezza alla individualizzazione

Principi del dialogo (ISO 9241) Euristiche di Nielsen

Problemi segnalati

con entrambi i metodi

ProblemiProblemi non segnalati

Falsi problemisegnalati con valutazioni euristiche

Problemi segnalaticon valutazioni euristiche

Problemi segnalaticon i test di usabilità

Falsi problemisegnalati con i test di usabilità

Problemisegnalati

solo con i test di usabilità

Problemisegnalati solo con valutazioni euristiche

Sala delle proveSala di osservazione

telecamera

utente osservatore

facilitatore

sistema in prova

appunti

think aloud

istruzioni

Difetti Difetti

Iterazione n Iterazione n+1

Numero di utenti campione

conoscenza del dominio del sistema

ità c

bassa alta

Compito 1 Compito 2 Compito 3 Compito 4 Compito 5 Compito 6

Utente 1 F F S F F S

Utente 2 F F P F P F

Utente 3 S F S S P S

Utente 4 S F S F P S

Legenda: S=successo F=fallimento P=successo parziale

PIANIFICAZIONE(a inizio progetto)

PREPARAZIONE

Rapporto divalutazione

ESECUZIONEANALISI

E PROPOSTE

Utenti

• Modulo per informazioni anagrafiche• Descrizione compiti/scenari• Modulo per raccolta annotazioni e misure• Questionario per intervista finale

• Stazione di test

• Appunti , misure e registrazioni• Interviste finali

Piano di test

Requisiti

Appendice

e [c] / aA B

si può anche scrivere come:

e [a>0]

e [ a<0]

C Ce [ a=0] e

equivale a:

Seleziona bevanda

Erogazione bevanda

Macchina spenta

Inserisci monete

prelievo bevanda

annullamento / restituzione moneta

bevandaselezionata

moneteinserite

bevanda esaurita

Seleziona bevanda

entry / display “Seleziona bevanda”

[ctr aranciata = 0] / display “Aranciata terminata”

[ctr minerale = 0] / display “Minerale terminata”

exit / display “Grazie!”

Inserisci monete

Inserisci moneta

moneta accettata /incr importo

importo < prezzo

moneta non accettata / restituzione moneta

importo = prezzo

importo > prezzo/ erogazione resto

pseudo-stato di ingresso

pseudo-stato di uscita

SOTTOMACCHINA

può essere rappresentato anche così:

(a) (b)

dove:e = e1 | e2e1 B

può essere rappresentato anche così:

dove: e3= e3.1 A | e3.2 B | e3.3 C

terminatoFrequenza laboratorio

Preparazione corso

Realizzazione progetto di esame

Frequenza lezioni

Revisione progetto

terminato

terminate Esecuzione ripasso finale

terminato Esecuzione compito scritto

revisione ok

revisione non ok

compito non ok

Esame superato