Corso di Interazione Uomo-Macchina Paolo Bottoni

Transcript

1 Corso di Interazione Uomo-Macchina Paolo Bottoni Lezione 11: Progettare la grafica

2 Corso di Interazione Uomo Macchina AA Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione PROGETTARE LA GRAFICA 2 R.Polillo - Ottobre 2010

3 Scopo di questa lezione Discutere problematiche e principi base design grafico interfacce, discutendo numerosi esempi. R.Polillo - Ottobre

4 Comunicazione visiva e interaction design Comunicazione visiva ha ruolo preponderante per interazione uomo-macchina: immagini, testo, animazioni, video Cura aspetti grafici in interaction design importante Aspetti percettivi, psicologici, culturali Grande tradizione e cultura immagine, ma poche indicazioni scientificamente dimostrabili R.Polillo - Ottobre

5 Chiarire gli obbiettivi Grafica di sistema interattivo può avere obiettivi diversi, potenzialmente in conflitto: R.Polillo - Ottobre

6 R.Polillo - Ottobre

7 R.Polillo - Ottobre

8 La grafica per la usabilità 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 ISO , Presentation of information R.Polillo - Ottobre

9 La grafica per la usabilità (segue) Nel progettare informazione visiva si devono considerare le seguenti caratteristiche: Chiarezza Discriminabilità Concisione Consistenza Scopribilità Leggibilità Comprensibilità ISO , Presentation of information R.Polillo - Ottobre

10 R.Polillo - Ottobre

11 La teoria della Gestalt Nella percezione visiva, il tutto è più della somma delle sue parti Luci in movimento R.Polillo - Ottobre

12 Salvador Dalì, 1935 Face of Mae West which may be used as an apartement R.Polillo - Ottobre

13 Leggi della gestalt (M.Wertheimer, 1923) Legge della vicinanza Legge della somiglianza Legge della chiusura Legge della continuità di direzione (o della curva buona ) Legge della pregnanza (o della buona forma ) Legge dell esperienza passata R.Polillo - Ottobre

14 Legge della vicinanza Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità (a parità di altre condizioni) R.Polillo - Ottobre

15 R.Polillo - Ottobre

16 Legge della somiglianza Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità (a parità di altre condizioni) R.Polillo - Ottobre

17 R.Polillo - Ottobre

18 Legge della chiusura Le linee delimitanti una superficie chiusa si percepiscono come unità più facilmente di quelle che non si chiudono (a parità di altre condizioni) R.Polillo - Ottobre

19 Esempio: conflitto fra chiusura e vicinanza a b R.Polillo - Ottobre

20 Legge della continuità di direzione (o della curva buona ) Quelle parti di una figura che formano una curva buona o che vanno nella stessa direzione si costituiscono in unità più facilmente delle altre R.Polillo - Ottobre

21 Legge della buona forma Il campo percettivo si segmenta in modo che risultino entità per quanto possibile equilibrate, armoniche, costituite secondo un medesimo principio in tutte le loro parti R.Polillo - Ottobre

22 Legge della buona forma : altri esempi R.Polillo - Ottobre

23 Legge dell esperienza passata L esperienza modella le nostre impressioni a b R.Polillo - Ottobre

24 Legge dell esperienza passata a b R.Polillo - Ottobre

25 Vicinanza R.Polillo - Ottobre

26 L esempio precedente, ristrutturato R.Polillo - Ottobre

27 Da PowerPoint 2007 R.Polillo - Ottobre

28 Perché questa immagine è poco comprensibile? R.Polillo - Ottobre

29 Per farla stare su una riga Ma la leggiamo così R.Polillo - Ottobre

30 Somiglianza British-airways (2003) Yahoo (2009) Vista (2009) R.Polillo - Ottobre

31 R.Polillo - Ottobre

32 Windows Vista (2009) R.Polillo - Ottobre

33 iphone OS version 3.0 on the iphone 3GS R.Polillo - Ottobre

34 R.Polillo - Ottobre

35 R.Polillo - Ottobre

36 R.Polillo - Ottobre

37 R.Polillo - Ottobre

38 Siete d accordo con l uso dei colori nella tabella seguente? R.Polillo - Ottobre

39 (MAC OS 8) R.Polillo - Ottobre

40 R.Polillo - Ottobre

41 R.Polillo - Ottobre

42 R.Polillo - Ottobre

43 Chiusura R.Polillo - Ottobre

44 L importanza dei riquadri: esempio (I ) R.Polillo - Ottobre

45 L importanza dei riquadri: esempio (II) R.Polillo - Ottobre

46 R.Polillo - Ottobre

47 R.Polillo - Ottobre

48 R.Polillo - Ottobre

49 R.Polillo - Ottobre

50 Colore R.Polillo - Ottobre

51 R.Polillo - Ottobre

52 R.Polillo - Ottobre

53 STOP EXIT PERICOLO! AVANTI R.Polillo - Ottobre

54 R.Polillo - Ottobre

55 R.Polillo - Ottobre

56 Percorsi visivi R.Polillo - Ottobre

57 Yarbus, 1967 R.Polillo - Ottobre

58 R.Polillo - Ottobre

59 Heat map Heat-map di tre pagine web (da J.Nielsen, R.Polillo - Ottobre

60 Percorsi visivi: siete d accordo con questo layout? R.Polillo - Ottobre

61 In sintesi Una buona grafica dovrebbe: essere facilmente leggibile (testi, immagini) per tutti gli utenti a cui è destinata aiutarci a comprendere chiaramente la struttura di una pagina video, trasmettendoci una sensazione di semplicità aiutarci ad associare facilmente contenuti fra loro omogenei utilizzare codici visivi e convenzioni familiari agli utenti a cui è destinata utilizzare codici visivi coerenti all interno del prodotto (e del suo ecosistema ) non contenere elementi ridondanti o ambigui R.Polillo - Ottobre

62 R.Polillo - Ottobre

63 R.Polillo - Ottobre

64 R.Polillo - Ottobre

65 R.Polillo - Ottobre

66 R.Polillo - Ottobre

67 R.Polillo - Ottobre

68 R.Polillo - Ottobre

69 R.Polillo - Ottobre

70 R.Polillo - Ottobre 2010 CocaCola tedesca nel

71 R.Polillo - Ottobre 2010 CocaCola USA nel

72 R.Polillo - Ottobre nel

73 Un classico esempio di presentazione Un riassunto per dirigenti IUM Lezione 11 Progettazione grafica 73

74 Principi di visualizzazione di Tufte Mostrare confronti, contrasti, differenze Causalità, meccanismo, struttura, spiegazione Analisi multivariate Integrazione di Evidenze Documentazione Contenuto più importante di ogni altra cosa IUM Lezione 11 Progettazione grafica 74

75 Principi di visualizzazione di Schiff Semplicità Consistenza Compatibilità Congruenza Rilevanza Aderenza a convenzioni IUM Lezione 11 Progettazione grafica 75

76 Principi di base Domandarsi Pensare Cosa sta facendo utente? Quale informazione, confronti, ordine Progettare Forma segue funzione IUM Lezione 11 Progettazione grafica 76

77 Strumenti disponibili Raggruppamento di elementi Ordine elementi Decorazioni fonti, scatole, etc. Allineamento elementi Spazio bianco fra elementi IUM Lezione 11 Progettazione grafica 77

78 Implicazioni Rendere informazione evidente Usare tecniche che fanno risaltare elementi: ordinamento, spaziatura, sottolineatura, sequenzializzazione, animazione Evitare intasamento interfaccia: progetto nitido e semplice, es. Google Evitare di usare troppe caratteristiche solo perché software lo permette. IUM Lezione 11 Progettazione grafica 78

79 Implicazioni di progetto Rappresentazione informazione va progettata percepibile riconoscibile Icone e altre rappresentazioni suggeriscano rapidamente significato. Bordi e spaziature mezzi visivi efficaci per raggruppare informazione Suoni udibili e distinguibili Uscite audio devono permettere di distinguere fra insiemi di parole Testo leggibile e distinguibile dal background. IUM Lezione 11 Progettazione grafica 79

80 CONTROLLI FISICI Raggruppamento elementi Imposta scongelare Tipo di cibo Tempo di cottura IUM Lezione 11 Progettazione grafica 80

81 CONTROLLI FISICI Raggruppamento elementi Ordine elementi 1) Tipo di riscaldamento 2) Temperatura 3) Tempo per cucinare 4) Avvia IUM Lezione 11 Progettazione grafica 81

82 CONTROLLI FISICI Raggruppamento elementi Ordine elementi Decorazioni Colori diversi per funzioni diverse Linee attorno pulsanti correlati (temp su/giù) IUM Lezione 11 Progettazione grafica 82

83 CONTROLLI FISICI Raggruppamento elementi Ordine elementi Decorazioni Allineamento Testo centrato nei pulsanti Più facile da leggere? IUM Lezione 11 Progettazione grafica 83

84 CONTROLLI FISICI Raggruppamento elementi Ordine elementi Decorazioni Allineamento Spazio bianco Separazioni facilitano gruppo IUM Lezione 11 Progettazione grafica 84

85 Queste slides si basano sul libro Facile da usare, dell autore, dove si trovano tutte le necessarie spiegazioni. Vedi 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. 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. 85