Slides dalle lezioni del corso di Interazione Uomo Macchina per la laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-13 Lezione del 21 marzo 2013 Vedi anche www.rpolillo.it

1. 1
PROGETTARE PER
L'UTENTE (II)
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
-1
12
20
ne
di zio
R.Polillo - Marzo 2013
E

2. Queste slides…
2
… 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.
R.Polillo - Marzo 2013

3. Come si descrivono i casi d’uso
3
Un caso d’uso ha un nome e una descrizione
Spesso, verbo + complemento oggetto
 Chiama l’ascensore al piano
 Seleziona canale televisivo
 Acquista prodotto
 Prenota volo
 Iscriviti al forum
R.Polillo - Marzo 2013

4. Esempio: cellulare
4
R.Polillo - Marzo 2013

5. Descrizione
di un caso
d’uso
5
Esempio
R.Polillo - Marzo 2013

6. Definizione dei requisiti: temi principali
 Analisi dell’utente: a quali utenti è destinato il prodotto?
 Analisi dei bisogni: quali sono le necessità di tali utenti?
 Analisi del contesto: quale sarà il contesto d’uso del
prodotto?
 Analisi dei casi d’uso: in quali modi i diversi utenti
interagiranno con il prodotto?
 Analisi della concorrenza: quali sono i punti di forza e di
debolezza rispetto ai prodotti concorrenti?
6 R.Polillo - Marzo 2013

7. Esempio: progetto di un contenitore per acqua
minerale
Utenti:
 A. Generico consumatore di acqua minerale
 B. Trasportatori di confezioni multiple
Bisogni:
 Trasporto e stoccaggio più efficienti
Contesto d’uso:
 A. Acquisto in supermercato o in negozio
 A. Conservazione in frigorifero
 A. Consumo in tavola
 B. Trasporto ai punti di vendita in furgoni
Casi d’uso:
 A-B. Trasporto manuale di confezione multipla
 A. Estrazione del contenitore singolo dalla confezione multipla
 A. Trasporto manuale di contenitore singolo
 A. Stoccaggio/estrazione nel/dal frigorifero
 A. Apertura e chiusura del contenitore
 A. Mescita nel bicchiere
 A. Schiacciamento verticale per dismissione
7 R.Polillo - Marzo 2013

8. Contenitore per acqua minerale: una possibile
proposta
8
R.Polillo - Marzo 2013

9. Scenari d’uso
Storie immaginarie d’uso del sistema da parte di
persone fittizie, ma concrete, che rappresentano
bisogni, contesti e modalità d’uso tipiche del sistema da
progettare (“personae”)
Gli scenari "mettono in scena" una serie di casi d'uso,
collocandoli nel contesto:
 Contesto, concretezza, visione oggettiva
 Mettono in evidenza re q uis iti ine s p re s s i
10 R.Polillo - Marzo 2013

10. Knowledge Navigator (Apple, 1987) (5')
http://www.youtube.com/watch?v=S63eGkNUMLU
12 R.Polillo - Marzo 2013

11. Scenari d’uso: esempi
Esempi di scenari d’uso per device mobili,
realizzati con semplici video:
 http://www.youtube.com/watch?v=lJLI4Aw897U
(2’)
 http://www.youtube.com/watch?v=htW-uOAqz8s
(1’)
13 R.Polillo - Marzo 2013

12. Personae: esempi
15 R.Polillo - Marzo 2013

13. Un esempio
Da: Steve Mulder, http://www.slideshare.net/MulderMedia/the-user- R.Polillo - Marzo 2013
17
is-always-right-making-personas-work-for-your-site

14. 18 R.Polillo - Marzo 2013

15. Scenario d’uso (I)
19 R.Polillo - Marzo 2013

16. Scenario d’uso (II)
Francis and Michael have agreed that she’ll take charge of learning more about the home-buying process. She goes online,
does a Google search for “Atlanta real estate,” and follows a link to the site’s home page. She sees that she can search for
houses from the home page, so just for fun, she does a quick Atlanta search to see what kinds of houses show up. There
are lots of houses in many different neighborhoods, and she easily narrows her results down to the area where she and
Michael live, using a map. There are still many results, and she’s not quite sure which search options to use to narrow the
search further. Then she notices a link for first-time home buyers and follows, it hoping for basic how-to information.
The link takes Francis to a step-by-step tutorial that explains the whole process, and she immediately feels like she’s found
the right site from which to begin her house search. She carefully reads some articles for first-time home buyers, taking
notes as she reads. She bookmarks other articles she wants to go back and read later. She also comes across the site’s
calculator and starts trying different combinations of numbers to find out what she and Michael can afford. She
particularly likes the glossary of terms so that she can finally figure out what “points” are and learn more about different
types of mortgages. After an hour and a half of reading, her brain is full, and she shuts her computer down for the day,
feeling like she got an excellent start.
The next day, she comes back to the site to look up information specific to Atlanta neighborhoods and finds lots of
information on each. She’s able to focus on five neighborhoods that look particularly good. The fun begins that night,
when she takes Michael through all that she has learned, and they set up a regular schedule for looking at online house
listings.
20 R.Polillo - Marzo 2013

17. Casi d’uso
Search for houses from home page
1. Enter location by city and state, or zip code
2. Enter price range
3. Enter number of bedrooms and/or bathrooms
4. Submit search
View and narrow results
1. Browse first page of results: photo, price, address, basic stats, and
description
2. Click to show results on map
3. Click map to narrow results to one neighborhood
4. Browse new results
Read tutorial
1. Click link for first-time home buyers
2. Read landing page for learning area
3. Click teaser for step-by-step tutorial
And so on…
21 R.Polillo - Marzo 2013

18. Device mobili: funzioni tipiche
 Accesso alla rete (via operatore telefonico o
Wi-Fi)
 Comunicazione con altri device (Bluetooth,
NFC)
 Funzioni telefoniche
 Dati conservati sulla nuvola (sincronizzazione
fra i device e backup automatici)
 Geolocalizzazione
 Fotocamera/e
 Sensori 24 R.Polillo - Marzo 2013

19. Input
25
Gesture interface Keyboard Voce
R.Polillo - Ottobre 2010

20. Output: Screen size
26
R.Polillo - Ottobre 2010

21. Esempio: menu
27
R.Polillo - Ottobre 2010

22. Responsive design
28
L'immagine si modifica in funzione delle dimensioni del
video
R.Polillo - Ottobre 2010

23. Esempio

24. Esempio
30
R.Polillo - Ottobre 2010

25. Orizzontale vs verticale
Thks B.Fling http://www.slideshare.net/fling/designing-mobile-
experiences

26. Layout: smartphone
32
Non coprire le risposte con la mano!
R.Polillo - Ottobre 2010

27. Layout: tablet
33
R.Polillo - Ottobre 2010

28. Layout: touch laptop
34
R.Polillo - Ottobre 2010

29. La posizione migliore per i
35
menu
Phone Tablet Touch Keyboard
R.Polillo - Ottobre 2010

30. Esempio: Pinterest
36
R.Polillo - Ottobre 2010

31. Esempio: Waze (iPad)
37
R.Polillo - Ottobre 2010

32. Esempio: Waze (iPad)
38
R.Polillo - Ottobre 2010

33. Esempio: trovacinema
39
R.Polillo - Ottobre 2010