Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca (Prof.R.Polillo) - Lezione del 26 marzo 2014

1. 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
MOBILE DESIGN1
R.Polillo - Marzo 2014
Edizione
2013-14

2. 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.
R.Polillo - Marzo 2014
2

3. Mobile: dispositivi di input/output
sistema utente
• Vista
• Udito
• Mani
• Voce
INPUT
mondo
INPUT / OUTPUT
- connessione internet
- connessione telefonica
- connessione bluetooth
altri
device
- foto & video camera (2)
- sound recorder
- GPS, bussola
- sensori di prossimità

4. Esempio: QRCODE
R.Polillo - Marzo 20144

5. Esempio: Realtà aumentata
R.Polillo - Marzo 20145

6. Esempio: Realtà aumentata
R.Polillo - Marzo 20146

7. Esempio: Realtà aumentata
R.Polillo - Marzo 20147

8. Device mobili: funzioni tipiche
R.Polillo - Marzo 2014
8
 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

9. Output: Screen size
R.Polillo - Marzo 2014
9

10. La crescita del mobile
Il numero dei device mobili ha superato quello
dei desktop/laptop
R.Polillo - Marzo 2014

11. Contesti d’uso molto vari: smartphone
Thks Lara Ciccarelli
R.Polillo - Marzo 2014

12. Contesti d’uso molto vari: tablet
Thks Lara Ciccarelli
R.Polillo - Marzo 2014

13. Contesti d’uso molto vari: desktop
Thks Lara Ciccarelli
R.Polillo - Marzo 2014

14. Contesti d’uso molto vari: TV
Thks Lara Ciccarelli
R.Polillo - Marzo 2014

15. Thks Lara Ciccarelli
R.Polillo - Marzo 2014

16. Thks B.Fling http://www.slideshare.net/fling/designing-mobile-experiences
Orizzontale vs verticale
R.Polillo - Marzo 2014
16

17. Multi-touch gestures
R.Polillo - Marzo 2014
17
https://developer.apple.com/library/ios/documentation/userexperience/
conceptual/mobilehig/InteractivityInput.html

18. La dimensione dei pulsanti
R.Polillo - Marzo 2014
18
La dimensione
dei pulsanti!
Es.: Waze (iPad)

19. Layout preferenziali:
smartphone
R.Polillo - Marzo 2014
19

20. La keyboard
R.Polillo - Marzo 2014
20

21. Layout preferenziali: tablet
R.Polillo - Marzo 2014
21

22. Esempio: Waze (iPad)
R.Polillo - Marzo 2014
22

23. Esempio: Waze (iPad)
R.Polillo - Marzo 2014
23

24. Layout preferenziali: touch
laptop
R.Polillo - Marzo 2014
24

25. La posizione migliore per i
menu
R.Polillo - Marzo 2014
25
Phone Tablet Touch Keyboard

26. Esempio: Pinterest
R.Polillo - Marzo 2014
26

27. Esempio: trovacinema
R.Polillo - Marzo 2014
27

28. App nativa o Responsive web app?
R.Polillo - Marzo 201428
oppure
App native
specifiche per il
device e scaricate
da un App store
Responsive
web site
Gestito da un
mobile browserApp
server

29. Media query (HTML5)
Da HTML si possono identificare alcune
caratteristiche del dispositivo che riceve la
pagina, e comporre layout diversi a seconda dei
casi:
responsive design
una sola pagina web per tutti i device
R.Polillo - Marzo 201429

30. Responsive design
R.Polillo - Marzo 2014
30
L'immagine si modifica in funzione delle dimensioni del
video

31. Esempio
R.Polillo - Marzo 2014
31

32. Esempio
R.Polillo - Marzo 2014
32

33. Esempio
R.Polillo - Marzo 201433

34. Esempio: menu
R.Polillo - Marzo 2014
34

35. Esempio: form
R.Polillo - Marzo 2014
35

36. Esempi
Sito responsive:
http://thenextweb.com
www.rpolillo.it
Non confondere i siti responsive con i siti
cosiddetti a layout liquido (in uso da molti anni):
http://www.governo.it
R.Polillo - Marzo 201436

37. La soluzione più corretta: Considerare i
diversi dispositivi parte di un’unica
esperienza.

38. Voi che ne pensate?
R.Polillo - Marzo 201438
(Agosto
2010)
… O NO?

39. Esempi possibili
 Pop
 TouchPro
 Trovacinema
 Giallo Zafferano
 Waze
 Flickr (varie app)
R.Polillo - Marzo 2014
39