Slides delle lezioni di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13 12 marzo 2013

1. 1 IL PROGETTO D'ESAME
Corso di Interazione Uomo Macchina
AA 2012-2013
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
3
2-1
2 01
e
i on
Ediz
R.Polillo - Marzo 2013

2. Il progetto
 Realizzazione del prototipo di un'applicazione mobile usabile
(smartphone, tablet), proposto dagli studenti e approvato dai
docenti
 No programmazione, ma semplici strumenti di
prototipazione
 Progettazione centrata sull'utente, processo di progettazione
iterativo, con test di usabilità e scenari d'uso
 In gruppo (di 4), ripartendosi i compiti
R.Polillo -Marzo 2013

3. Scelta del progetto
Scegliete un tema che:
conoscete bene
sia semplice
sia tecnologicamente fattibile
Abbia caratteristiche innovative
Anche un tema in apparenza banale può portare a un
progetto innovativo
R.Polillo -Marzo 2013

4. Il vostro progetto: deliverable
6
1. Requisiti
Progettazione 2. Video-scenario
3. Protipo lo-fi
4. Protipo med-fi
Realizzazione
5. Video test usabilità
Requisiti
6. Report test usabilità
Revisione
Esame
Test
R.Polillo - Marzo 2013

5. Prima fase
Revisione
Document Prototipo a
Video
o dei bassa 1
scenario
requisiti fedeltà
Slides PowerPoint Video Prototipo di carta Presto
(utilizzare l'apposito max 3 minuti eseguibile (aprile)
template)
Alle revisioni devono
partecipare TUTTI
i componenti del gruppo

6. Il documento dei requisiti
 Sintetico ma completo, ben strutturato,
 Userete un template PowerPoint molto semplice,
da personalizzare
R.Polillo -Marzo 2013

7. Documento dei requisiti: template
Parte Prima: Generalità
 Descrizione generale del prodotto
 Obiettivi del prodotto
 Utenti
 Contesti d’uso
 Scenari d’uso Verrà valutato su forma e contenuti
 Fattibilità tecnologica (chiarezza, proprietà di linguaggio,
Parte Seconda: Posizionamento sinteticità/esaustività, originalità)
 Situazione attuale
 Analisi della concorrenza
 Posizionamento competitivo
Parte Terza: Requisiti
 Casi d’uso
 Analisi dei compiti
 Requisiti per la esperienza utente
 Altri requisiti
Riferimenti
R.Polillo -Marzo 2013

8. Concept video scenario
 Un video di max 3 minuti che mostri tipici casi
d'uso del sistema, collocati nel contesto d'uso
 Non deve illustrare in dettaglio l'interfaccia
utente, ma il "concept" generale: quando,
dove e perché si usa
 Non interessa la qualità tecnica (usate il
telefonino): ciò che importa è la chiara
illustrazione del concept del prodotto
R.Polillo -Marzo 2013

9. Esempi di video-scenario
 Con prototipo di carta (3’)
Applicazione per PDA per incontrare amici all’Università
http://it.youtube.com/watch?v=c4-A-9hGn0U
 Order processing (2')
https://www.youtube.com/watch?v=k0AiPRtcD5w
 Videoconferencing col ristorante in macchina (2')
https://www.youtube.com/watch?v=ZSMPKIe578w
 Orologio intelligente (2')
http://www.youtube.com/watch?v=lJLI4Aw897U
 Motorola new life forms (3,4')
https://www.youtube.com/watch?v=78QBVEJUqXs
11 R.Polillo - Marzo 2013

10. (segue)
 Lampade programmabili (4')
https://www.youtube.com/watch?v=Vf0nLCDcTDc
 Recharge your health in car (1') (con disegni)
https://www.youtube.com/watch?v=1vYQFt_7OjI
R.Polillo -Marzo 2013

11. Il prototipo a bassa fedeltà
 Schermate disegnate grossolanamente su
foglietti di carta
 Esecuzione simulata con un paio di utenti
R.Polillo -Marzo 2013

12. Iniziate così…
R.Polillo -Marzo 2013

13. Poi così…
R.Polillo -Marzo 2013

14. 16
R.Polillo - Marzo 2013

15. POP: Prototyping on Paper
17
R.Polillo -
Marzo 2013
App per iPhone / iPad
Le schermate del
prototipo vengono
fotografate e linkate

16. POP: Prototyping on Paper
18
R.Polillo -
Marzo 2013

17. La prima revisione
 Deliverable:
- Requisiti
- Video scenario
- Prototipo di carta
R.Polillo -Marzo 2013

18. Seconda fase
Revisione
Prototipo a
media 2
fedeltà
• Prototipo cliccabile, realizzato con PowerPoint o
altro strumento adatto (no HTML): 30-40 slides
• Schermate disegnate con forme, colori e
Alle revisioni devono proporzioni del prodotto finale
partecipare TUTTI • Usare templates e stencils del device scelto,
i componenti del gruppo disponibili in rete
R.Polillo -Marzo 2013

19. R.Polillo -Marzo 2013

20. 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
22 R.Polillo - Marzo 2013

21. 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
23 R.Polillo - Marzo 2013

22. Esempio (segue)
Elettrodomestici
Seleziona uno dei link o delle
icone sottostanti per accedere
alle funzionalità:
Frigorifero
Lavastoviglie
Lavatrice
Torna al menù principale
HELP
24 R.Polillo - Marzo 2013

23. Esempio (segue)
Lavatrice
generale dettagli
Programma di lavaggio
delicato a bassa
temperatura in corso…
Esecuzione lavoro (interrotto)
10% completato… (in pausa)
1 Riprendi
Avvia
Torna al menù elettrodomestici
HELP
25 R.Polillo - Marzo 2013

24. 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
26 R.Polillo - Marzo 2013

25. Chiamata
da contatto
Chiamata da
sconosciuto
SMS
ricevuto
Chiamata
persa
R.Polillo -Marzo 2013

26. Componi numero
1 2 3
4 5 6
7 8 9
0 #
*
Chiama Salva Canc
Indietro
R.Polillo -Marzo 2013

27. R.Polillo -Marzo 2013

28. Esempio
 Guida turistica su iPhone (dagli studenti)
R.Polillo -Marzo 2013

29. Suggerimenti
 Tenete sempre presenti gli obiettivi del prototipo, e
concentratevi sugli aspetti importanti, lasciando
perdere i dettagli irrilevanti (es. messaggi di errore,
login, …)
 Un prototipo PowerPoint è di tipo “usa e getta”: non
lasciatevi prendere la mano
 Deve permettere un test di usabilità significativo,
quindi...
- deve essere navigabile
- deve funzionare
- non deve contenere meta-commenti
R.Polillo -Marzo 2013

30. Ultima fase
Test Prototipo a
Raporto
3 usabilità media
di test
(video) fedeltà
Esame
Breve documento
(template sul sito)
R.Polillo -Marzo 2013

31. Il test di usabilità
 Faremo una lezione sull'argomento
 Sul prototipo finale deve essere fatto un test di
usabilità strutturato (3 utenti), e descritto in un
rapporto di test (template Word sul sito)
 Durante il processo di prototipazione possono
essere fatti test di usabilità informali, non
documentati
R.Polillo -Marzo 2013

32. Il rapporto di test: indice di
massima
Obiettivi del test
Metodologia usata
Utenti
Compiti/scenari
Strumentazione
Modalità di svolgimento
Risultati del test
Analitici, con le misure
Raccomandazioni finali
Analitiche, con livelli di priorità
Allegati:
Eventuali questionari utilizzati
R.Polillo -Marzo 2013

33. Ed ora…
 Formazione dei gruppi
 Discussione delle proposte
 Buon lavoro!
R.Polillo -Marzo 2013

34. Per la prossima volta….
 Faremo una revisione insieme di un progetto
di un gruppo dell'anno scorso
 Scaricate requisiti e prototipo a media fedeltà
da qui:
http://bit.ly/WBYmWA
 Analizzatelo e fate i vostri commenti, ne
discutiamo in aula domani
R.Polillo -Marzo 2013