SlideShare a Scribd company logo
1 of 45
Download to read offline
1

Progettazione per prototipi
successivi
Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione

di
E

ne
zio

4
-1
13
20
Queste slides…
2

R.Polillo Marzo 2014

… 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.
Scopo di questa lezione
3

Discutere il processo di progettazione e
sviluppo di sistemi interattivi per prototipi
successivi, e indicare alcune semplici tecniche
di prototipazione

R.Polillo - Marzo 2014
L’ingegneria del software
4





La disciplina che si occupa de problemi tecnici e
di gestione dello sviluppo dei sistemi software
Studia, tra l’altro, i vari modelli dei processi di
progettazione e sviluppo dei sistemi software

R.Polillo - Marzo 2014
Il modello tradizionale di progettazione e sviluppo
5

Requisiti

Modello “a cascata”:
Analisi e
progettazione

dopo una decisione, non si
torna indietro

Realizzazione

Test

Rilascio
R.Polillo - Marzo 2014
Test
6

Termine generico che denota due tipi di controlli diversi:


Verifica (verification)
controllo che il prodotto sia congruente con quanto specificato (“make
the thing right”)



Convalida (validation)
controllo che il prodotto soddisfi effettivamente i bisogni del suo utente
(“make the right thing”).

La convalida è molto più difficile della verifica, e richiede il
coinvolgimento dell’utente

R.Polillo - Marzo 2014
Modello tradizionale: pro e contro
7

PRO:
 fasi logiche ben definite
 ogni fase fornisce gli input alla fase successiva
 possibilità di mettere check-point fra una fase e l’altra
 processo (apparentemente) ben controllabile
CONTRO:
 il sistema prodotto si vede solo alla fine, e può non
essere soddisfacente
 Gli utenti sono coinvolti solo all'inizio (requisiti) e alla
fine (test)
 il modello è concettualmente sbagliato, e non
funziona…
R.Polillo - Marzo 2014
Il modello corretto (iterativo)
8

Sviluppo per
prototipi
successivi

Inizio
Requisiti
NOTA BENE:
anche i requisiti
evolvono durante
il processo!

Progettazione

Test

Prototipazione

R.Polillo - Marzo 2014

Rilascio
Modello iterativo: pro e contro
9

PRO:
 Il prodotto si vede (anche se in modo parziale), fin dall’inizio e viene
perfezionato per aggiustamenti successivi
 le scelte effettuate possono essere sperimentate anticipatamente: si
possono scartare quelle sbagliate
 è il modello concettualmente corretto per la realizzazione di sistemi
complessi
CONTRO:
 Difficoltà di stima dei costi a preventivo
 Si rischia di far divergere il processo, per troppe richieste di
modifiche
 La fluidità delle specifiche rende più difficile la comunicazione fra le
persone coinvolte (team di progetto, committente)
R.Polillo - Marzo 2014
10

Meglio: rappresentazione "a
spirale"
Progettazione

Realizzazione

Requisiti
Rilascio fnale

Test

R.Polillo - Marzo 2014

Prototipi
successivi
User Centred Design (UCD)
11

Progettazione

In alcuni metodi,
l'utente viene
coinvolto anche
qui

Coinvolgimento
dell'utente
Realizzazione

Requisiti
Rilascio fnale

Test

R.Polillo - Marzo 2014

Prototipi
successivi
Quante iterazioni?
12




Dipende…
È opportuno definire una strategia: quali
obiettivi per i diversi prototipi successivi

Esempio (sviluppo di un sito Web):
Documento
dei requisiti

Piano di
qualità

1

2

Definizione
dei requisiti

Avviamento
del progetto

Prototipo di
navigazione

Prototipo di
comunicazione

3
Web
design

4
Visual
design

Da R.Polillo, Plasmare il Web, Apogeo, 2006
R.Polillo - Marzo 2014

Prototipo
funzionale

Prototipo
editoriale

5

6

Sviluppo

Redazione
dei contenuti

Sistema
on line

7
Pubblicazione
ISO 13407: “Human-centred design process for
interactive systems”
13

il sistema soddisfa
i requisiti dell’utente e
dell’organizzazione

Identifica le
necessità per la
progettazione
centrata sull’utente

Comprendi e
specifica il
contesto d’uso
Specifica i requisiti
dell’utente e
dell’organizzazione

Valuta il progetto
rispetto ai requisiti
Produci soluzioni
di progetto
R.Polillo - Marzo 2014
Il documento dei requisiti
14





Descrive in forma organica le proprietà
richieste al sistema da realizzare
Non solo requisiti funzionali (…!)

R.Polillo - Marzo 2014
Progettazione
15

Si utilizzano diversi strumenti di
rappresentazione:
Informali (es. schizzi, storyboard,
diagrammi)
Formali (es. diagrammi UML)

R.Polillo - Marzo 2014
16

Diagrammi informali:
navigazione

R.Polillo - Marzo 2014
17

R.Polillo - Marzo 2014
Storyboard
18

R.Polillo - Marzo 2014
Prototipi
19

Proto-typos: "primo modello"
Modello aprossimato o parziale del sistema
in corso di sviluppo, realizzato per valutarne
le caratteristiche e, se necessario,
"aggiustare il tiro"

R.Polillo - Marzo 2014
Perchè creare prototipi?
20






Per avere un rapido feedback sul progetto,
effettuando dei test iniziali di convalida con
l’utente
Per sperimentare design alternativi
Per migliorare il progetto prima e durante la
sua realizzazione

I test con l’utente fanno parte del processo di
progettazione
R.Polillo - Marzo 2014
Prototipi: differenti scopi
21

 Ruolo
per sperimentare il ruolo del prodotto nella vita del
suo utente
 User experience
per sperimentare l'esperienza dell’uso del prodotto
 Implementazione
per sperimentare tecniche e componenti usati nella
realizzazione del prodotto

R.Polillo - Marzo 2014
Prototipi interattivi e non
22







I prototipi più utili sono quelli interattivi, perché possono
essere utilizzati per test con gli utenti
Questi sono essenziali per valutare la usabilità del
prodotto in corso di progettazione
Attenzione: l’interazione non può essere descritta a
parole e immaginata: l’utente deve “metterci le mani
sopra”

R.Polillo - Marzo 2014
Prototipi non interattivi: esempio
23

Prototipo di
cartone di iPhone

R.Polillo - Marzo 2014
Prototipi interattivi: quali tipi
24







Alta o bassa fedeltà
“assomigliano” o meno al prodotto finale
"Usa e getta" o evolutivo
realizzato con tecnolgia provvisoria (viene poi
buttato) o con quella definitiva (evolve fino al
prodotto finale)
Orizzontale o verticale
fornisce tutte le funzioni (anche se in versione
limitata) o solo alcune (realizzate in dettaglio)
R.Polillo - Marzo 2014
Prototipi orizzontali / verticali
25

funzionalità

dettaglio

prototipo
verticale
R.Polillo - Marzo 2014

sistema completo

prototipo orizzontale
I prototipi iniziali
26







Molto utili nelle prime fasi del progetto, per
esplorare e valutare diverse soluzioni possibili, a
costi contenuti
Bassa fedeltà, molto spesso del tipo “usa e
getta”, realizzati a costi molto bassi
Possono essere usati vari strumenti di
prototipazione, di solito molto semplici, per es.:
carta, HTML, PowerPoint, …

R.Polillo - Marzo 2014
Prototipi di carta
27

L’interfaccia viene disegnata a bassa fedeltà su fogli di
carta …

R.Polillo - Marzo 2014
Prototipi di carta: simulazione
28

Osservatori
Utente

"Sistema"

R.Polillo - Marzo 2014
Il prototipo a bassa fedeltà
29

R.Polillo - Marzo 2014
30

R.Polillo - Marzo 2014
Video
31





Prototipi di carta (2’):
http://it.youtube.com/watch?v=GrV2SZuRPv0
Prototipi di carta e scenari (3’)
d’uso: un’applicazione per PDA per incontrare
amici all’Università
http://it.youtube.com/watch?v=c4-A-9hGn0U

R.Polillo - Marzo 2014
Prototipi di carta
32

VANTAGGI:
 Velocità e basso costo di realizzazione
 Permettono di provare l’interazione in modo semplice
 Bassissimo costo delle modifiche
SVANTAGGI:
 L’interazione è lenta e quindi innaturale, perché
simulata
 Fedeltà molto bassa per gli aspetti di layout grafico

R.Polillo - Marzo 2014
La tecnica del mago di Oz
33

R.Polillo - Marzo 2014
Prototipi PowerPoint
35



PowerPoint può essere usato per realizzare
facilmente prototipo navigabili:





Ogni schermata è una slide Power Point
Su ogni schermata vengono realizzate aree sensibili,
con link ad altre slide
Cliccando sulle aree sensibili, l’utente “naviga”
nell’interfaccia

R.Polillo - Marzo 2014
Prototipi PowerPoint
36

VANTAGGI:
 Facili da realizzare e da modificare
 La interattività non richiede un mago di Oz
 Gli aspetti grafici possono essere definiti
“abbastanza” bene
SVANTAGGI:
 Modello di interazione limitato (“point & click”)
 Limiti pratici alla complessità dell’ipertesto (oltre
un centinaio di slide diventa poco gestibile)
R.Polillo - Marzo 2014
Esempio

Login
Benvenuto nel sistema di
controllo degli elettrodomestici.
Ti preghiamo di autenticarti,
inserendo il tuo nome utente e
la password.
NOME UTENTE michele
PASSWORD

********
OK

HELP

37

R.Polillo - Marzo 2014
Login
Benvenuto nel sistema di
controllo degli elettrodomestici.
Ti preghiamo di autenticarti,
inserendo il tuo nome utente e
la password.
NOME UTENTE michele
PASSWORD

********
OK

HELP

38

R.Polillo - Marzo 2014
Esempio (segue)

Elettrodomestici
Seleziona uno dei link o delle
icone sottostanti per accedere
alle funzionalità:
Frigorifero
Lavastoviglie
Lavatrice
Torna al menù principale
HELP

39

R.Polillo - Marzo 2014
Esempio (segue)

Lavatrice
generale

dettagli

Programma di lavaggio
delicato a bassa
temperatura in corso…
Esecuzione lavoro (interrotto)

1

10% completato… (in pausa)
Riprendi

Avvia
Torna al menù elettrodomestici
HELP

40

R.Polillo - Marzo 2014
Esempio (segue)

Lavatrice
generale

dettagli

Produttore: Ariston
Modello: Lavasciuga 2000
Installata il 18/07/2002.
Driver aggiornato al 16/10/2002.
Ore di funzionamento: 92.

2
Interventi tecnici: nessuno.
Media interventi: non disponibile.
Torna al menù elettrodomestici
HELP

41

R.Polillo - Marzo 2014
Prototipi HTML
42






Vanno bene per i siti web, indipendentemente
dalla tecnologia utilizzata per la realizzazione
del sito finale
Tipicamente, prototipi "wireframe"
Meglio non utilizzarli per altre applicazioni:




gli aspetti grafici sono poco controllabili (a basso
costo)
lo strumento usato tende a influenzare le scelte di
design

R.Polillo - Marzo 2014
Prototipi wireframe
43

R.Polillo - Marzo 2014
Suggerimenti
44

E’ bene evitare strumenti di prototipazione
che:




pongano difficoltà tecniche nella realizzazione
(devo pensare al prototipo, non allo
strumento)
possano influenzare, con le loro peculiarità, il
design del sistema prototipato
(“questo non riesco a farlo, quindi cambio il
design”)
R.Polillo - Marzo 2014
L'ingegneria dell'usabilità
45

La disciplina che si occupa dei metodi e delle tecniche
che permettano di specificare, raggiungere e verificare
gli obiettivi di usabilità nella progettazione e sviluppo dei
sistemi interattivi
Vari approcci, ma aspetti chiave comuni:





modello di sviluppo per prototipi successivi
Coinvolgimento dell’utente durante tutto il processo
inserimento di “usability engineer” nel team di sviluppo
definizione di metriche e effettuazione di misure di usabilità

R.Polillo - Marzo 2014
Il vostro progetto: deliverable
46

Requisiti
iniziali

Progettazione

Requisiti

Realizzazione

Test

Protipo a
bassa fedeltà
Protipo a
media fedeltà
Test usabilità
Scenario
d'uso (video)
Revisione
Esame

R.Polillo - Marzo 2014

More Related Content

What's hot

22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corsoRoberto Polillo
 
4.Progettazione e sviluppo per prototipi successivi
4.Progettazione e sviluppo per prototipi successivi4.Progettazione e sviluppo per prototipi successivi
4.Progettazione e sviluppo per prototipi successiviRoberto Polillo
 
17. Principi e linee guida (ii)
17. Principi e linee guida (ii)17. Principi e linee guida (ii)
17. Principi e linee guida (ii)Roberto Polillo
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)Roberto Polillo
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'Roberto Polillo
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'erroreRoberto Polillo
 
17. Conclusione del corso
17. Conclusione del corso17. Conclusione del corso
17. Conclusione del corsoRoberto Polillo
 
10. conoscere l'utente (i)
10. conoscere l'utente (i)10. conoscere l'utente (i)
10. conoscere l'utente (i)Roberto Polillo
 
6. Progettare per l'utente (II)
6. Progettare per l'utente (II)6. Progettare per l'utente (II)
6. Progettare per l'utente (II)Roberto Polillo
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla graficaRoberto Polillo
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corsoRoberto Polillo
 
5. progettare per l'utente (i)
5. progettare per l'utente (i)5. progettare per l'utente (i)
5. progettare per l'utente (i)Roberto Polillo
 
7.Ingegneria e creativita'
7.Ingegneria e creativita'7.Ingegneria e creativita'
7.Ingegneria e creativita'Roberto Polillo
 
12.Visione e progettazione grafica
12.Visione e progettazione grafica12.Visione e progettazione grafica
12.Visione e progettazione graficaRoberto Polillo
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorioRoberto Polillo
 

What's hot (20)

3. Usabilita
3. Usabilita3. Usabilita
3. Usabilita
 
4. Usabilita
4. Usabilita4. Usabilita
4. Usabilita
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corso
 
4.Progettazione e sviluppo per prototipi successivi
4.Progettazione e sviluppo per prototipi successivi4.Progettazione e sviluppo per prototipi successivi
4.Progettazione e sviluppo per prototipi successivi
 
1.Introduzione al corso
1.Introduzione al corso1.Introduzione al corso
1.Introduzione al corso
 
17. Principi e linee guida (ii)
17. Principi e linee guida (ii)17. Principi e linee guida (ii)
17. Principi e linee guida (ii)
 
20. Principi e linee guida (I)
20. Principi e linee guida (I)20. Principi e linee guida (I)
20. Principi e linee guida (I)
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'
 
14. Progettare il testo
14. Progettare il testo14. Progettare il testo
14. Progettare il testo
 
21. Progettare per l'errore
21. Progettare per l'errore21. Progettare per l'errore
21. Progettare per l'errore
 
9. Mobile design
9. Mobile design9. Mobile design
9. Mobile design
 
17. Conclusione del corso
17. Conclusione del corso17. Conclusione del corso
17. Conclusione del corso
 
10. conoscere l'utente (i)
10. conoscere l'utente (i)10. conoscere l'utente (i)
10. conoscere l'utente (i)
 
6. Progettare per l'utente (II)
6. Progettare per l'utente (II)6. Progettare per l'utente (II)
6. Progettare per l'utente (II)
 
15. Ancora sulla grafica
15. Ancora sulla grafica15. Ancora sulla grafica
15. Ancora sulla grafica
 
22. Conclusioni del corso
22. Conclusioni del corso22. Conclusioni del corso
22. Conclusioni del corso
 
5. progettare per l'utente (i)
5. progettare per l'utente (i)5. progettare per l'utente (i)
5. progettare per l'utente (i)
 
7.Ingegneria e creativita'
7.Ingegneria e creativita'7.Ingegneria e creativita'
7.Ingegneria e creativita'
 
12.Visione e progettazione grafica
12.Visione e progettazione grafica12.Visione e progettazione grafica
12.Visione e progettazione grafica
 
13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio13. Conoscere l'utente: il sistema motorio
13. Conoscere l'utente: il sistema motorio
 

Viewers also liked

Misurare la intranet
Misurare la intranetMisurare la intranet
Misurare la intranetGiacomo Mason
 
La comunicazione politica online - Le figure del testo
La comunicazione politica online - Le figure del testoLa comunicazione politica online - Le figure del testo
La comunicazione politica online - Le figure del testoGianluca Giansante
 
Usare (al meglio) le immagini nelle slide.
Usare (al meglio) le immagini nelle slide. Usare (al meglio) le immagini nelle slide.
Usare (al meglio) le immagini nelle slide. Giacomo Mason
 
Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...
Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...
Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...Gianluca Giansante
 
Presentazioni efficaci: come organizzare il discorso
Presentazioni efficaci: come organizzare il discorsoPresentazioni efficaci: come organizzare il discorso
Presentazioni efficaci: come organizzare il discorsoGianluca Giansante
 
Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...
Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...
Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...Gianluca Giansante
 
Alcuni consigli pratici per una presentazione efficace
Alcuni consigli pratici per una presentazione efficaceAlcuni consigli pratici per una presentazione efficace
Alcuni consigli pratici per una presentazione efficaceGianluca Giansante
 
Fight the Power(point)!
Fight the Power(point)!Fight the Power(point)!
Fight the Power(point)!Todd Reubold
 
7 Tips to Beautiful PowerPoint by @itseugenec
7 Tips to Beautiful PowerPoint by @itseugenec7 Tips to Beautiful PowerPoint by @itseugenec
7 Tips to Beautiful PowerPoint by @itseugenecEugene Cheng
 
4 intranet publishing models
4 intranet publishing models4 intranet publishing models
4 intranet publishing modelsMark Morrell
 
How to Harness the Power of the Pause #PresentationTips
How to Harness the Power of the Pause #PresentationTipsHow to Harness the Power of the Pause #PresentationTips
How to Harness the Power of the Pause #PresentationTipsNadine Hanafi
 
Realizzare presentazioni efficaci
Realizzare presentazioni efficaciRealizzare presentazioni efficaci
Realizzare presentazioni efficaciSerena Triacca
 
Visual Content Rule The World
Visual Content Rule The WorldVisual Content Rule The World
Visual Content Rule The WorldStefanos Karagos
 
Powerpoint e il fascino morboso dello sfondo
Powerpoint e il fascino morboso dello sfondoPowerpoint e il fascino morboso dello sfondo
Powerpoint e il fascino morboso dello sfondoGiacomo Mason
 
Trovare risorse su Slideshare
Trovare risorse su SlideshareTrovare risorse su Slideshare
Trovare risorse su SlideshareGiacomo Mason
 

Viewers also liked (17)

Misurare la intranet
Misurare la intranetMisurare la intranet
Misurare la intranet
 
Politica online
Politica onlinePolitica online
Politica online
 
La comunicazione politica online - Le figure del testo
La comunicazione politica online - Le figure del testoLa comunicazione politica online - Le figure del testo
La comunicazione politica online - Le figure del testo
 
Usare (al meglio) le immagini nelle slide.
Usare (al meglio) le immagini nelle slide. Usare (al meglio) le immagini nelle slide.
Usare (al meglio) le immagini nelle slide.
 
Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...
Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...
Comunicazione politica efficace: tre elementi per aumentare l'efficacia dei t...
 
Presentazioni efficaci: come organizzare il discorso
Presentazioni efficaci: come organizzare il discorsoPresentazioni efficaci: come organizzare il discorso
Presentazioni efficaci: come organizzare il discorso
 
Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...
Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...
Parlare in pubblico. Tenere viva l’attenzione, farsi capire, convincere chi a...
 
Alcuni consigli pratici per una presentazione efficace
Alcuni consigli pratici per una presentazione efficaceAlcuni consigli pratici per una presentazione efficace
Alcuni consigli pratici per una presentazione efficace
 
Fight the Power(point)!
Fight the Power(point)!Fight the Power(point)!
Fight the Power(point)!
 
7 Tips to Beautiful PowerPoint by @itseugenec
7 Tips to Beautiful PowerPoint by @itseugenec7 Tips to Beautiful PowerPoint by @itseugenec
7 Tips to Beautiful PowerPoint by @itseugenec
 
4 intranet publishing models
4 intranet publishing models4 intranet publishing models
4 intranet publishing models
 
How to Harness the Power of the Pause #PresentationTips
How to Harness the Power of the Pause #PresentationTipsHow to Harness the Power of the Pause #PresentationTips
How to Harness the Power of the Pause #PresentationTips
 
Realizzare presentazioni efficaci
Realizzare presentazioni efficaciRealizzare presentazioni efficaci
Realizzare presentazioni efficaci
 
Visual Content Rule The World
Visual Content Rule The WorldVisual Content Rule The World
Visual Content Rule The World
 
Presentazioni efficaci EFFETTO WOW
Presentazioni efficaci EFFETTO WOWPresentazioni efficaci EFFETTO WOW
Presentazioni efficaci EFFETTO WOW
 
Powerpoint e il fascino morboso dello sfondo
Powerpoint e il fascino morboso dello sfondoPowerpoint e il fascino morboso dello sfondo
Powerpoint e il fascino morboso dello sfondo
 
Trovare risorse su Slideshare
Trovare risorse su SlideshareTrovare risorse su Slideshare
Trovare risorse su Slideshare
 

Similar to 2. Progettazione per prototipi successivi

1. Introduzione al corso
1. Introduzione al corso1. Introduzione al corso
1. Introduzione al corsoRoberto Polillo
 
16. Principi e linee guida (i)
16. Principi e linee guida (i)16. Principi e linee guida (i)
16. Principi e linee guida (i)Roberto Polillo
 
6. Il progetto d’esame
6. Il progetto d’esame6. Il progetto d’esame
6. Il progetto d’esameRoberto Polillo
 
2. Progettazione per prototipi successivi
2. Progettazione per prototipi successivi2. Progettazione per prototipi successivi
2. Progettazione per prototipi successiviRoberto Polillo
 
10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)Roberto Polillo
 
8. Valutare la usabilita
8. Valutare la usabilita8. Valutare la usabilita
8. Valutare la usabilitaRoberto Polillo
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'Roberto Polillo
 
La prototipazione
La prototipazioneLa prototipazione
La prototipazioneOana Tatar
 
6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)Roberto Polillo
 
SocialUp
SocialUpSocialUp
SocialUpFPA
 
Ux in un decimo di secondo v1.0
Ux in un decimo di secondo v1.0Ux in un decimo di secondo v1.0
Ux in un decimo di secondo v1.0gabriele parpaiola
 
Gabriele Parpaiola - SMAU Milano 2017
Gabriele Parpaiola - SMAU Milano 2017Gabriele Parpaiola - SMAU Milano 2017
Gabriele Parpaiola - SMAU Milano 2017SMAU
 
12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)Roberto Polillo
 
1. Introduzione al corso
1. Introduzione al corso1. Introduzione al corso
1. Introduzione al corsoRoberto Polillo
 

Similar to 2. Progettazione per prototipi successivi (20)

1. Introduzione al corso
1. Introduzione al corso1. Introduzione al corso
1. Introduzione al corso
 
16. Principi e linee guida (i)
16. Principi e linee guida (i)16. Principi e linee guida (i)
16. Principi e linee guida (i)
 
1.Introduzione al corso
1.Introduzione al corso1.Introduzione al corso
1.Introduzione al corso
 
3. Il progetto di esame
3. Il progetto di esame3. Il progetto di esame
3. Il progetto di esame
 
6. Il progetto d’esame
6. Il progetto d’esame6. Il progetto d’esame
6. Il progetto d’esame
 
5. Il progetto di esame
5. Il progetto di esame5. Il progetto di esame
5. Il progetto di esame
 
1.Introduzione al corso
1.Introduzione al corso1.Introduzione al corso
1.Introduzione al corso
 
2. Progettazione per prototipi successivi
2. Progettazione per prototipi successivi2. Progettazione per prototipi successivi
2. Progettazione per prototipi successivi
 
10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)10. Conoscere l'utente (Parte I)
10. Conoscere l'utente (Parte I)
 
8. Valutare la usabilita
8. Valutare la usabilita8. Valutare la usabilita
8. Valutare la usabilita
 
1. Introduzione
1. Introduzione1. Introduzione
1. Introduzione
 
8. Valutare la usabilita'
8. Valutare la usabilita'8. Valutare la usabilita'
8. Valutare la usabilita'
 
La prototipazione
La prototipazioneLa prototipazione
La prototipazione
 
1. Introduzione
1. Introduzione1. Introduzione
1. Introduzione
 
6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)6. Progettare per l'utente (ii)
6. Progettare per l'utente (ii)
 
SocialUp
SocialUpSocialUp
SocialUp
 
Ux in un decimo di secondo v1.0
Ux in un decimo di secondo v1.0Ux in un decimo di secondo v1.0
Ux in un decimo di secondo v1.0
 
Gabriele Parpaiola - SMAU Milano 2017
Gabriele Parpaiola - SMAU Milano 2017Gabriele Parpaiola - SMAU Milano 2017
Gabriele Parpaiola - SMAU Milano 2017
 
12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)12.Visione e progettazione grafica (I)
12.Visione e progettazione grafica (I)
 
1. Introduzione al corso
1. Introduzione al corso1. Introduzione al corso
1. Introduzione al corso
 

More from Roberto Polillo

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroRoberto Polillo
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsRoberto Polillo
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniRoberto Polillo
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleRoberto Polillo
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)Roberto Polillo
 
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)Roberto Polillo
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)Roberto Polillo
 
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e seggRoberto Polillo
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sitesRoberto Polillo
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatoriRoberto Polillo
 
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microbloggingRoberto Polillo
 
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business modelsRoberto Polillo
 
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionRoberto Polillo
 

More from Roberto Polillo (20)

Future City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuroFuture City, Ipotesi sulla città del futuro
Future City, Ipotesi sulla città del futuro
 
Teaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerationsTeaching HCI to computing students: some considerations
Teaching HCI to computing students: some considerations
 
Conclusioni del corso
Conclusioni del corsoConclusioni del corso
Conclusioni del corso
 
ICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioniICT e sviluppo sociale: alcune riflessioni
ICT e sviluppo sociale: alcune riflessioni
 
Editoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitaleEditoria e industria dei media di fronte alla rivoluzione digitale
Editoria e industria dei media di fronte alla rivoluzione digitale
 
18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)18. Paradigmi di interazione uomo macchina (III)
18. Paradigmi di interazione uomo macchina (III)
 
Wikipedia
WikipediaWikipedia
Wikipedia
 
Open internet
Open internetOpen internet
Open internet
 
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)17. Evoluzione dei paradigmi di interazione uomo macchina (I)
17. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)16. Evoluzione dei paradigmi di interazione uomo macchina (I)
16. Evoluzione dei paradigmi di interazione uomo macchina (I)
 
20. Social networks
20. Social networks20. Social networks
20. Social networks
 
19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg19. Le organnizzazioni sul web e segg
19. Le organnizzazioni sul web e segg
 
18. Content sharing sites
18. Content sharing sites18. Content sharing sites
18. Content sharing sites
 
17. Web feed e aggregatori
17. Web feed e aggregatori17. Web feed e aggregatori
17. Web feed e aggregatori
 
16. Social media
16. Social media16. Social media
16. Social media
 
15. La forma breve e il microblogging
15. La forma  breve e il microblogging15. La forma  breve e il microblogging
15. La forma breve e il microblogging
 
14. I blog
14. I blog14. I blog
14. I blog
 
13. Internet business models
13. Internet business models13. Internet business models
13. Internet business models
 
12. Mobile web
12. Mobile web12. Mobile web
12. Mobile web
 
Internet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introductionInternet and sustainable telemedicine: an introduction
Internet and sustainable telemedicine: an introduction
 

2. Progettazione per prototipi successivi

  • 1. 1 Progettazione per prototipi successivi Corso di Interazione Uomo Macchina AA 2013-2014 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione di E ne zio 4 -1 13 20
  • 2. Queste slides… 2 R.Polillo Marzo 2014 … 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.
  • 3. Scopo di questa lezione 3 Discutere il processo di progettazione e sviluppo di sistemi interattivi per prototipi successivi, e indicare alcune semplici tecniche di prototipazione R.Polillo - Marzo 2014
  • 4. L’ingegneria del software 4   La disciplina che si occupa de problemi tecnici e di gestione dello sviluppo dei sistemi software Studia, tra l’altro, i vari modelli dei processi di progettazione e sviluppo dei sistemi software R.Polillo - Marzo 2014
  • 5. Il modello tradizionale di progettazione e sviluppo 5 Requisiti Modello “a cascata”: Analisi e progettazione dopo una decisione, non si torna indietro Realizzazione Test Rilascio R.Polillo - Marzo 2014
  • 6. Test 6 Termine generico che denota due tipi di controlli diversi:  Verifica (verification) controllo che il prodotto sia congruente con quanto specificato (“make the thing right”)  Convalida (validation) controllo che il prodotto soddisfi effettivamente i bisogni del suo utente (“make the right thing”). La convalida è molto più difficile della verifica, e richiede il coinvolgimento dell’utente R.Polillo - Marzo 2014
  • 7. Modello tradizionale: pro e contro 7 PRO:  fasi logiche ben definite  ogni fase fornisce gli input alla fase successiva  possibilità di mettere check-point fra una fase e l’altra  processo (apparentemente) ben controllabile CONTRO:  il sistema prodotto si vede solo alla fine, e può non essere soddisfacente  Gli utenti sono coinvolti solo all'inizio (requisiti) e alla fine (test)  il modello è concettualmente sbagliato, e non funziona… R.Polillo - Marzo 2014
  • 8. Il modello corretto (iterativo) 8 Sviluppo per prototipi successivi Inizio Requisiti NOTA BENE: anche i requisiti evolvono durante il processo! Progettazione Test Prototipazione R.Polillo - Marzo 2014 Rilascio
  • 9. Modello iterativo: pro e contro 9 PRO:  Il prodotto si vede (anche se in modo parziale), fin dall’inizio e viene perfezionato per aggiustamenti successivi  le scelte effettuate possono essere sperimentate anticipatamente: si possono scartare quelle sbagliate  è il modello concettualmente corretto per la realizzazione di sistemi complessi CONTRO:  Difficoltà di stima dei costi a preventivo  Si rischia di far divergere il processo, per troppe richieste di modifiche  La fluidità delle specifiche rende più difficile la comunicazione fra le persone coinvolte (team di progetto, committente) R.Polillo - Marzo 2014
  • 10. 10 Meglio: rappresentazione "a spirale" Progettazione Realizzazione Requisiti Rilascio fnale Test R.Polillo - Marzo 2014 Prototipi successivi
  • 11. User Centred Design (UCD) 11 Progettazione In alcuni metodi, l'utente viene coinvolto anche qui Coinvolgimento dell'utente Realizzazione Requisiti Rilascio fnale Test R.Polillo - Marzo 2014 Prototipi successivi
  • 12. Quante iterazioni? 12   Dipende… È opportuno definire una strategia: quali obiettivi per i diversi prototipi successivi Esempio (sviluppo di un sito Web): Documento dei requisiti Piano di qualità 1 2 Definizione dei requisiti Avviamento del progetto Prototipo di navigazione Prototipo di comunicazione 3 Web design 4 Visual design Da R.Polillo, Plasmare il Web, Apogeo, 2006 R.Polillo - Marzo 2014 Prototipo funzionale Prototipo editoriale 5 6 Sviluppo Redazione dei contenuti Sistema on line 7 Pubblicazione
  • 13. ISO 13407: “Human-centred design process for interactive systems” 13 il sistema soddisfa i requisiti dell’utente e dell’organizzazione Identifica le necessità per la progettazione centrata sull’utente Comprendi e specifica il contesto d’uso Specifica i requisiti dell’utente e dell’organizzazione Valuta il progetto rispetto ai requisiti Produci soluzioni di progetto R.Polillo - Marzo 2014
  • 14. Il documento dei requisiti 14   Descrive in forma organica le proprietà richieste al sistema da realizzare Non solo requisiti funzionali (…!) R.Polillo - Marzo 2014
  • 15. Progettazione 15 Si utilizzano diversi strumenti di rappresentazione: Informali (es. schizzi, storyboard, diagrammi) Formali (es. diagrammi UML) R.Polillo - Marzo 2014
  • 19. Prototipi 19 Proto-typos: "primo modello" Modello aprossimato o parziale del sistema in corso di sviluppo, realizzato per valutarne le caratteristiche e, se necessario, "aggiustare il tiro" R.Polillo - Marzo 2014
  • 20. Perchè creare prototipi? 20    Per avere un rapido feedback sul progetto, effettuando dei test iniziali di convalida con l’utente Per sperimentare design alternativi Per migliorare il progetto prima e durante la sua realizzazione I test con l’utente fanno parte del processo di progettazione R.Polillo - Marzo 2014
  • 21. Prototipi: differenti scopi 21  Ruolo per sperimentare il ruolo del prodotto nella vita del suo utente  User experience per sperimentare l'esperienza dell’uso del prodotto  Implementazione per sperimentare tecniche e componenti usati nella realizzazione del prodotto R.Polillo - Marzo 2014
  • 22. Prototipi interattivi e non 22    I prototipi più utili sono quelli interattivi, perché possono essere utilizzati per test con gli utenti Questi sono essenziali per valutare la usabilità del prodotto in corso di progettazione Attenzione: l’interazione non può essere descritta a parole e immaginata: l’utente deve “metterci le mani sopra” R.Polillo - Marzo 2014
  • 23. Prototipi non interattivi: esempio 23 Prototipo di cartone di iPhone R.Polillo - Marzo 2014
  • 24. Prototipi interattivi: quali tipi 24    Alta o bassa fedeltà “assomigliano” o meno al prodotto finale "Usa e getta" o evolutivo realizzato con tecnolgia provvisoria (viene poi buttato) o con quella definitiva (evolve fino al prodotto finale) Orizzontale o verticale fornisce tutte le funzioni (anche se in versione limitata) o solo alcune (realizzate in dettaglio) R.Polillo - Marzo 2014
  • 25. Prototipi orizzontali / verticali 25 funzionalità dettaglio prototipo verticale R.Polillo - Marzo 2014 sistema completo prototipo orizzontale
  • 26. I prototipi iniziali 26    Molto utili nelle prime fasi del progetto, per esplorare e valutare diverse soluzioni possibili, a costi contenuti Bassa fedeltà, molto spesso del tipo “usa e getta”, realizzati a costi molto bassi Possono essere usati vari strumenti di prototipazione, di solito molto semplici, per es.: carta, HTML, PowerPoint, … R.Polillo - Marzo 2014
  • 27. Prototipi di carta 27 L’interfaccia viene disegnata a bassa fedeltà su fogli di carta … R.Polillo - Marzo 2014
  • 28. Prototipi di carta: simulazione 28 Osservatori Utente "Sistema" R.Polillo - Marzo 2014
  • 29. Il prototipo a bassa fedeltà 29 R.Polillo - Marzo 2014
  • 31. Video 31   Prototipi di carta (2’): http://it.youtube.com/watch?v=GrV2SZuRPv0 Prototipi di carta e scenari (3’) d’uso: un’applicazione per PDA per incontrare amici all’Università http://it.youtube.com/watch?v=c4-A-9hGn0U R.Polillo - Marzo 2014
  • 32. Prototipi di carta 32 VANTAGGI:  Velocità e basso costo di realizzazione  Permettono di provare l’interazione in modo semplice  Bassissimo costo delle modifiche SVANTAGGI:  L’interazione è lenta e quindi innaturale, perché simulata  Fedeltà molto bassa per gli aspetti di layout grafico R.Polillo - Marzo 2014
  • 33. La tecnica del mago di Oz 33 R.Polillo - Marzo 2014
  • 34. Prototipi PowerPoint 35  PowerPoint può essere usato per realizzare facilmente prototipo navigabili:    Ogni schermata è una slide Power Point Su ogni schermata vengono realizzate aree sensibili, con link ad altre slide Cliccando sulle aree sensibili, l’utente “naviga” nell’interfaccia R.Polillo - Marzo 2014
  • 35. Prototipi PowerPoint 36 VANTAGGI:  Facili da realizzare e da modificare  La interattività non richiede un mago di Oz  Gli aspetti grafici possono essere definiti “abbastanza” bene SVANTAGGI:  Modello di interazione limitato (“point & click”)  Limiti pratici alla complessità dell’ipertesto (oltre un centinaio di slide diventa poco gestibile) R.Polillo - Marzo 2014
  • 36. Esempio Login Benvenuto nel sistema di controllo degli elettrodomestici. Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password. NOME UTENTE michele PASSWORD ******** OK HELP 37 R.Polillo - Marzo 2014
  • 37. Login Benvenuto nel sistema di controllo degli elettrodomestici. Ti preghiamo di autenticarti, inserendo il tuo nome utente e la password. NOME UTENTE michele PASSWORD ******** OK HELP 38 R.Polillo - Marzo 2014
  • 38. Esempio (segue) Elettrodomestici Seleziona uno dei link o delle icone sottostanti per accedere alle funzionalità: Frigorifero Lavastoviglie Lavatrice Torna al menù principale HELP 39 R.Polillo - Marzo 2014
  • 39. Esempio (segue) Lavatrice generale dettagli Programma di lavaggio delicato a bassa temperatura in corso… Esecuzione lavoro (interrotto) 1 10% completato… (in pausa) Riprendi Avvia Torna al menù elettrodomestici HELP 40 R.Polillo - Marzo 2014
  • 40. Esempio (segue) Lavatrice generale dettagli Produttore: Ariston Modello: Lavasciuga 2000 Installata il 18/07/2002. Driver aggiornato al 16/10/2002. Ore di funzionamento: 92. 2 Interventi tecnici: nessuno. Media interventi: non disponibile. Torna al menù elettrodomestici HELP 41 R.Polillo - Marzo 2014
  • 41. Prototipi HTML 42    Vanno bene per i siti web, indipendentemente dalla tecnologia utilizzata per la realizzazione del sito finale Tipicamente, prototipi "wireframe" Meglio non utilizzarli per altre applicazioni:   gli aspetti grafici sono poco controllabili (a basso costo) lo strumento usato tende a influenzare le scelte di design R.Polillo - Marzo 2014
  • 43. Suggerimenti 44 E’ bene evitare strumenti di prototipazione che:   pongano difficoltà tecniche nella realizzazione (devo pensare al prototipo, non allo strumento) possano influenzare, con le loro peculiarità, il design del sistema prototipato (“questo non riesco a farlo, quindi cambio il design”) R.Polillo - Marzo 2014
  • 44. L'ingegneria dell'usabilità 45 La disciplina che si occupa dei metodi e delle tecniche che permettano di specificare, raggiungere e verificare gli obiettivi di usabilità nella progettazione e sviluppo dei sistemi interattivi Vari approcci, ma aspetti chiave comuni:     modello di sviluppo per prototipi successivi Coinvolgimento dell’utente durante tutto il processo inserimento di “usability engineer” nel team di sviluppo definizione di metriche e effettuazione di misure di usabilità R.Polillo - Marzo 2014
  • 45. Il vostro progetto: deliverable 46 Requisiti iniziali Progettazione Requisiti Realizzazione Test Protipo a bassa fedeltà Protipo a media fedeltà Test usabilità Scenario d'uso (video) Revisione Esame R.Polillo - Marzo 2014

Editor's Notes

  1. login
  2. login
  3. login