Slides dal corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-

1. 1
PROGETTARE LA GRAFICA
(I)
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
R.Polillo - Aprile 2013

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 - Aprile 2013

3. Scopo di questa lezione
3
Discutere le problematiche i principi base del
design grafico delle interfacce, discutendo
numerosi esempi.
R.Polillo - Aprile 2013

4. Comunicazione visiva e interaction design
4
 La comunicazione visiva ha un ruolo preponderante
nell’interazione uomo-macchina:
immagini, testo, animazioni, video
 Quindi la cura degli aspetti grafici nell’interaction design
è di grande importanza
 Occorre considerare aspetti
percettivi, psicologici, culturali
 Grande tradizione e cultura dell’immagine, ma poche
indicazioni scientificamente dimostrabili
R.Polillo - Aprile 2013

5. Chiarire gli obbiettivi
5
La grafica di un sistema interattivo può avere obiettivi diversi,
che possono essere fra loro in conflitto:
R.Polillo - Aprile 2013

6. 6 R.Polillo - Aprile 2013

7. Un esempio analogo
7 R.Polillo - Aprile 2013

8. Un esempio analogo
8 R.Polillo - Aprile 2013

9. La grafica per la usabilità
9
“La presentazione dell’informazione visiva dovrebbe
abilitare l’utente ad eseguire i compiti percettivi (per
esempio, la ricerca di informazioni sullo schermo) in
modo efficace, efficiente e con soddisfazione […]
Nel progettare l’informazione visiva si devono
considerare le seguenti caratteristiche:
Chiarezza Discriminabilità Concisione
Consistenza
Scopribilità Leggibilità Comprensibilità"
ISO 9241-12, “Presentation of information”
R.Polillo - Aprile 2013

10. Siete d'accordo con questa
sitemap?
10
R.Polillo - Aprile 2013

11. E con questa?
(Sitemap dei siti della Regione Toscana)
11
R.Polillo - Aprile 2013

12. E con questa?
12
R.Polillo - Aprile 2013

13. Minimalismo vs massimalismo
13
"La perfezione si raggiunge non quando non
c'è più niente da aggiungere, ma quando
non c'è più niente da togliere"
Antoine de St-Exupery
R.Polillo - Aprile 2013

14. Minimalismo
14
www.google.com
R.Polillo - Aprile 2013

15. Minimalismo
15
www.dropbox.com
R.Polillo - Aprile 2013

16. Massimalismo
16
www.glamour.it
R.Polillo - Aprile 2013

17. Il ruolo delle immagini
17
 A che cosa serve un'immagine nel contesto
della schermata complessiva?
 Come decorazione ?
 Come riempitivo?
 Per illustrare un contenuto?
 Per veicolare un messaggio?
 Per dirigere l'attenzione su un contenuto
(es.banner)?
R.Polillo - Aprile 2013

18. Ruolo delle immagini: esempio
18
www.ibm.com
R.Polillo - Aprile 2013

19. Ruolo delle immagini: esempio
19
R.Polillo - Aprile 2013

20. Il ruolo delle immagini: esempio
20
R.Polillo - Aprile 2013

21. Ruolo delle immagini: esempio
21
www.fiat.com
R.Polillo - Aprile 2013

22. Ruolo delle immagini: esempio
22
R.Polillo - Aprile 2013

23. (segue)
23
R.Polillo - Aprile 2013

24. Organizzazione delle pagine
24
 Strutturare le pagine in modo facilmente
riconoscibile, semplice, ordinato, suggerendo
percorsi visivi coerenti con i casi d'uso
 Usare griglie logiche coerenti
 Curare gli allineamenti
 Evitare rumore visivo
 Evitare ridondanze
 Tenere presenti i principi della teoria della Gestalt
 Usare il colore per migliorare la comprensione della pagina
R.Polillo - Aprile 2013

25. Griglie e allineamenti: esempio
25
R.Polillo - Aprile 2013

26. I disallineamenti
generano una
percezione di
complessità
26 R.Polillo - Aprile 2013

27. 27 R.Polillo - Aprile 2013

28. Griglie e allineamenti
28
 Le slides che seguono mostrano il progressivo
miglioramento del layout di una pagina Web
R.Polillo - Aprile 2013

29. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
29 R.Polillo - Aprile 2013

30. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
30 R.Polillo - Aprile 2013

31. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
31 R.Polillo - Aprile 2013

32. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
32 R.Polillo - Aprile 2013

33. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
33 R.Polillo - Aprile 2013

34. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
34 R.Polillo - Aprile 2013

35. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
35 R.Polillo - Aprile 2013

36. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
36 R.Polillo - Aprile 2013

37. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
37 R.Polillo - Aprile 2013

38. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
38 R.Polillo - Aprile 2013

39. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
39 R.Polillo - Aprile 2013

40. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
40 R.Polillo - Aprile 2013

41. AFDGH
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
41 R.Polillo - Aprile 2013

42. AFDGH
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
42 R.Polillo - Aprile 2013

43. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Siamo partiti da
qui ….
43 R.Polillo - Aprile 2013

44. AFDGH
Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
… e siamo
arrivati qui ….
44 R.Polillo - Aprile 2013

45. Va bene?
45
R.Polillo - Aprile 2013

46. L’ esempio precedente, ristrutturato
46
R.Polillo - Aprile 2013

47. Come migliorarla?
47
R.Polillo - Aprile 2013

48. Percorsi visivi
48
 Strutturare la pagina in modo da suggerire dei
percorsi visivi coerenti con i diversi casi
d'uso…
 … ricordando quello che abbiamo visto
dall'analisi degli scanpath con gli strumenti di
eye tracking
R.Polillo - Aprile 2013

49. Dov’è
Waldo?
49
R.Polillo - Aprile 2013

50. Percorsi visivi: siete d’accordo con questo
layout?
50
R.Polillo - Aprile 2013

51. Percorsi visivi: siete d’accordo con questo
layout?
51
R.Polillo - Aprile 2013

52. Questo è migliore?
52
PowerPoint
2008 e 2011,
Mac
R.Polillo - Aprile 2013

53. E questo? PowerPoint 2010,
Windows
53
R.Polillo - Aprile 2013