Slides dalle lezioni del corso di Interazione Uomo Macchina per la laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo (a.a.2014-15) - Lezione del 19 marzo 2015

1. Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
MOBILE DESIGN
Edizione
2014-15

2. 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à
R.Polillo - Marzo 2015
3

3. Esempio: QRCODE
R.Polillo - Marzo 20154

4. Esempio: Realtà aumentata
R.Polillo - Marzo 20155

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

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

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

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

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

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

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

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

13. Thks Lara Ciccarelli
R.Polillo - Marzo 2015
14

14. La soluzione più corretta: Considerare i
diversi dispositivi parte di un’unica
esperienza.
R.Polillo - Marzo 201515

15. Problematiche nel design dell’interfaccia16
R.Polillo - Marzo 2015

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

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

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

19. Layout preferenziali:
smartphone
R.Polillo - Marzo 2015
20

20. La keyboard
R.Polillo - Marzo 2015
21

21. Layout preferenziali: tablet
R.Polillo - Marzo 2015
22

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

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

24. Layout preferenziali: touch
laptop
R.Polillo - Marzo 2015
25

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

26. (Molti tratti da
Menu: esempi27
R.Polillo - Marzo 2015
www.slideshare.net/Codemotion/tech-webinar-user-interface-design-patterns-per-mobile-web-apps-mauro-del-gaudio

27. Pattern 1
R.Polillo - Marzo 2015
28

28. Pattern 2
R.Polillo - Marzo 2015
29

29. (segue)
R.Polillo - Marzo 2015
30

30. Pattern 3 e 4
R.Polillo - Marzo 2015
31

31. (segue)
R.Polillo - Marzo 2015
32

32. Esempio: Pinterest
R.Polillo - Marzo 2015
33

33. Esempio: trovacinema
R.Polillo - Marzo 2015
34

34.  Mobile UI design patterns (esempio)
http://www.pttrns.com
R.Polillo - Marzo 2015
35

35. Responsive design36
R.Polillo - Marzo 2015

36. Output: Screen size
R.Polillo - Marzo 2015
37

37. R.Polillo - Marzo 201538

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

39. 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 201540

40. Responsive design
R.Polillo - Marzo 2015
41
L'immagine si modifica in funzione delle dimensioni del
video

41. Esempio
R.Polillo - Marzo 2015
42

42. Esempio
R.Polillo - Marzo 2015
43

43. Esempio
R.Polillo - Marzo 201544

44. Esempio: menu
R.Polillo - Marzo 2015
45

45. Esempio: form
R.Polillo - Marzo 2015
46

46. 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 201547

47. Esempi possibili
 http://www.awwwards.com/websites/responsiv
e-design/
R.Polillo - Marzo 2015
48