11. Progettare la grafica
Upcoming SlideShare
Loading in...5
×
 

11. Progettare la grafica

on

  • 2,304 views

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2009-2010 - Lezione 2

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2009-2010 - Lezione 2
(vedi anche www.rpolillo.it

Statistics

Views

Total Views
2,304
Views on SlideShare
2,293
Embed Views
11

Actions

Likes
4
Downloads
58
Comments
0

1 Embed 11

http://www.slideshare.net 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • www.fanta.it Nel sito della coca-cola italiana, dic 003 R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • Questa legge è detta anche “legge della continuità di direzione” R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • This experiment shows that past experience can affect your perception of such properties as form or depth. Consider what happens when you view this illustration. At first most people cannot tell what this picture depicts, but with continued inspection or a hint, the fragments suddenly are perceptually reorganized and recognized, in this case, as a Dalmatian dog. A recognizable image emerges that had no perceptual reality before. Hence, there is some sort of perceptual change among the neurons in your brain. This also leads to a change in the way in which you perceive the shape and depth of the scene. Perhaps most importantly, the figure now looks like the object it was supposed to represent - it now has the shape and depth relations of a Dalmatian dog. Once you have recognized the Dalmatian dog, it becomes almost impossible to see the picture in its original meaningless interpretation. The picture becomes permanently meaningful. This is in contrast to a truly bistable or ambiguous figure that has two equally likely interpretations. The bistable or ambiguous figure will "flip" between two states perennially, because your brain cannot decide which one is more meaningfully biased over the other one. In the case of the Dalmatian dog, however, once your brain perceives the "correct" image and ascribes meaning to the picture, your brain will not be able to perceive a meaningless image again, because the meaningless interpretation is no longer equally biased with that of your past experience with Dalmatian dogs. During all the time you were staring at the picture, the image on your retina did not change. Rather, your brain worked to construct a correct interpretation of the image, trying out different interpretations, until your brain "recognized" something. This emphasizes that perception is an active process of constructing a scene description. R.Polillo, Interazione uomo macchina - Parte terza, 2
  • This experiment shows that past experience can affect your perception of such properties as form or depth. Consider what happens when you view this illustration. At first most people cannot tell what this picture depicts, but with continued inspection or a hint, the fragments suddenly are perceptually reorganized and recognized, in this case, as a Dalmatian dog. A recognizable image emerges that had no perceptual reality before. Hence, there is some sort of perceptual change among the neurons in your brain. This also leads to a change in the way in which you perceive the shape and depth of the scene. Perhaps most importantly, the figure now looks like the object it was supposed to represent - it now has the shape and depth relations of a Dalmatian dog. Once you have recognized the Dalmatian dog, it becomes almost impossible to see the picture in its original meaningless interpretation. The picture becomes permanently meaningful. This is in contrast to a truly bistable or ambiguous figure that has two equally likely interpretations. The bistable or ambiguous figure will "flip" between two states perennially, because your brain cannot decide which one is more meaningfully biased over the other one. In the case of the Dalmatian dog, however, once your brain perceives the "correct" image and ascribes meaning to the picture, your brain will not be able to perceive a meaningless image again, because the meaningless interpretation is no longer equally biased with that of your past experience with Dalmatian dogs. During all the time you were staring at the picture, the image on your retina did not change. Rather, your brain worked to construct a correct interpretation of the image, trying out different interpretations, until your brain "recognized" something. This emphasizes that perception is an active process of constructing a scene description. R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • Options dialog from MultiEdit 8.0 . To date, we consider this the definitive example of how not to design a tabbed dialog. The sheer number of tabs, combined with the use of iconic labels and the gratuitous use of graphics on the tabs themselves results in a veritable visual assault. Once your eyes recover from the initial assault, you may be able to spot another problem: the use of nested tabs (note that two separate tabs on the dialog are highlighted). R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • R.Polillo, Interazione uomo macchina - Parte terza, 2
  • If you really want to make things difficult for your users, just slap a screen together without regard for order or organization. This image is taken from IBM's Aptiva Communication Center , and demonstrates to us at least, that the developers simply wanted to get the settings on the screen, rather than make it easy for people to adjust the settings. There is no flow to the screen; your eyes just jump around from place to place as your brain tries to elicit some sort of order. A well-designed screen, in stark contrast to this image, uses position, alignment, and grouping to organize the information, to provide an information flow . This not only makes it easier to locate a specific piece of information, it relieves the brain from having to subconsciously apply order. Some hints: Vertically-arranged options are scanned much easier Make sure fields are long enough to contain the informatio Left-align labels and their fields within a group Assign mnemonics to significant letters in the label ('a' for Wait?, 'i' for Fine?) In all fairness, IBM did not develop the Communication Center ; the application was purchased from a third-party provider. IBM could have saved themselves some embarrassment if they had reviewed the application before the purchase. R.Polillo, Interazione uomo macchina - Parte terza, 2
  • http://www.ibm.com/ibm/hci/guidelines/design/designers_iceberg.html R.Polillo, Interazione uomo macchina - Parte terza, 2
  • Here is the IBM RealCD user interface, that is, about all that most users will likely see. There is a great deal more to it, such as the list of songs contained on the CD, and the "Help Book", as IBM prefers to call it, which explains how to use the application. The problem is, there is no indication from the main interface that these features exist, nor does the interface provide any clue as to how the user can access them. Strangely, this is by design, and the IBM design team is quite proud of this fact: their main goal was to reduce all of the "clutter" created by standard GUI controls. The end result of their efforts to reduce clutter is an interface in which 88% of the space is devoted to a logo , and the remaining 12% provides absolutely no direction to the user. http://www.iarchitect.com/mshame.htm IBM RealCD(TM) is an object-oriented user interface design for listening to digital audio. The real-world interface, modeled on a plastic CD case and combined with controls for playing music, represents the state of the art for on-line music R.Polillo, Interazione uomo macchina - Parte terza, 2
  • Www.bluemountain.com Invio di e-cards gratuite per ogni occasione Ha anche I-Ching R.Polillo, Interazione uomo macchina - Parte terza, 2

11. Progettare la grafica 11. Progettare la grafica Presentation Transcript

  • PROGETTARE LA GRAFICA Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
  • Scopo di questa lezione
    • Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi.
    • Seguirà una lezione specificamente dedicata agli aspetti tipografici
  • Temi
    • Comunicazione visiva e interaction design
    • Le leggi della Gestalt
    • Esempi da discutere
    View slide
  • Comunicazione visiva e interaction design View slide
  • Comunicazione visiva e interaction design
    • 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
  • Gli obiettivi della comunicazione visiva
    • La grafica di un sistema interattivo può perseguire obiettivi diversi:
      • Comprensibilità
      • Usabilità
      • Gradevolezza
      • Capacità di suscitare emozioni
      • Originalità
    • Occorre grande chiarezza nella definizione dei requisiti, perché ciascuno di questi obiettivi richiede tecniche e approcci differenti, che potrebbero essere fra loro in conflitto
  • Un esempio analogo
  • Un esempio analogo
  • Originalità Gradevolezza Emozione Comprensibilità Usabilità
  • 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 9241-12, “Presentation of information”
  • La grafica per la usabilità (segue)
    • Nel progettare l’informazione visiva si devo considerare le seguenti caratteristiche:
      • Chiarezza
      • Discriminabilità
      • Concisione
      • Consistenza
      • Scopribilità
      • Leggibilità
      • Comprensibilità
    • ISO 9241-12, “Presentation of information”
  • Le leggi della Gestalt
  • GESTALT
    • “ Nella percezione visiva, il tutto è più della somma delle sue parti”
    Luci “in movimento”
  • Salvador Dalì, 1935 “ Face of Mae West which may be used as an apartement”
  • Le 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
  • 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)
  • Legge della somiglianza Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità (a parità di altre condizioni)
  • 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)
  • Esempio: conflitto fra chiusura e vicinanza a b
  • Legge della continbuità 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
  • Legge della “buona forma” Il campo percettivo si segmenta in modo che risultino entità per quanto possibile equilibrate, armoniche, costi-tuite secondo un medesimo principio in tutte le loro parti
  • Legge della “buona forma”: altri esempi
  • Legge dell’esperienza passata L’esperienza modella le nostre impressioni a b
  • Legge dell’esperienza passata: altri esempi a b
  • Leggi della gestalt: applicazione al design delle interfacce grafiche
  • Vicinanza
  • L’ esempio precedente, ristrutturato
  • Da PowerPoint 2007
  • Perché questa immagine è poco comprensibile?
  • (segue)
  • (segue)
  • Somiglianza a b c Yahoo (2009) British-airways (2003) Vista (2009)
  • Vista (2009)
  • iPhone OS version 3.0 on the iPhone 3GS
  • Siete d’accordo con l’uso dei colori nella tabella seguente?
  • (MAC OS 8)
  • Chiusura
  • L’importanza dei riquadri: esempio (I )
  • L’importanza dei riquadri: esempio (II)
  • Colore
  • EXIT PERICOLO ! AVANTI STOP
  • Percorsi visivi: siete d’accordo con questo layout?
  • Percorsi visivi
  • Yarbus, 1967 1 2 3 4 5 6 7
  • 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
  • RUMORE
  • RUMORE
  • RUMORE L’informazione utile è solo questa
  • OK, ma troppo minimalista?
  • CONFUSIONE E RUMORE
  • CONTRASTO?
  • CocaCola tedesca nel 2003
  • CocaCola USA nel 2003
  • www.cocacola.com nel 2003