Icons and Cartoons


Published on

Presented as part of the 'Visual display design' course that I took at UBC by Professor Ron Rensink. Readings behind the presentation can be found at http://www2.psych.ubc.ca/~rensink/courses/psyc579/07-2.html

Published in: Design, Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • An entity = an object. Pictorial representation of an object. something that stands for something else. I like to see the icon as a pointer to a higher level abstraction. Sort of like a visual macro – a “visual shorthand” that expands in your mind. 'by calling to mind one or more essential characteristics of the sign object'
  • Representational icons can have varying levels of resemblance (which we will see in detail later) Concepts, ideas – typically symbolic Abstractions can be of varying levels of standardization: strictly standardized e.g alphabets, traffic signs, loosely standardized e.g restaurant signs. Strictness of standardization depends on cost of mis-communication. (note that both the equal to signs are themselves symbolic abstractions).
  • Structured collection of iconic representations: Other visual conventions: such as depiction of time ..etc Activity: classify each of the 4 icons into representational vs abstract forms
  • 'all but the most characteristic elements are removed' free of interference and background clutter reduce signal-to-noise ratio ----------------- I think of Simplification as the same as abstraction, or the result of abstraction 'careful abstraction in which all but the most characteristic elements are removed' Signal = message to be communicated Noise = all irrelevant details => There is a Study that showed cartoons were recognized more rapidly than images
  • less or no training based on shared tacit knowledge lesser the knowledge required the more useful it is
  • human race Started with representational symbols for communication moved on to more abstract forms to handle more complexity (evolution of symbols from the earlier class) Children learning: start associating representational images with labels move on to more and more symbolic abstractions through school, univ (alphabet, math, science) computers interface & interaction from more abstract to representational – to reach the common user. From interacting using abstract metaphors such as programming & command line to representational metaphors such as desktops & touch interface. Object – class, abstraction – instantiation => icon – class of objects
  • What about representational forms. They have their own advantages. take priority over abstract forms We process image before 'This is not a pipe' low cost of consumption: we skim pictures first, might be the reason why graphic novels and cartoons are popular But, they are not as flexible for manipulation as abstract forms But in comics, artists prefer one form or another and stick to it, or they mix forms depending upon what the scene demands – e.g tintin (one of my favorite) has detailed backgrounds against simple characters
  • Now lets switch back to abstraction. Abstraction & simplification lead to Universality. From a particular face to a class of faces – object to class. A particular house to the concept of home (in UI).
  • Focusing on the functionality rather than the form – can now be used to represent any class of calculating devices
  • If simplification is so good, why don't we keep on simplifying. The result is * Balance of simplification, too much simplification = loss of message
  • House or arrow ? Too much simplification -> loss of 1:1 mapping
  • Reflection A way of seeing Mould into which we pour life We see ourselves Roles vs Goals 'icons demand participation to make them work' -------------------------------------------------------------------- Universality leads to 'a way of seeing' – reflection. Cartoons/icons in them become moulds into which we pour our life using imagination. We see ourselves, self-identification: "where we interpret a sign, we become part of it for the time of that interpretation" Mc.Luhan noted that ppl in the late 20 th century didn't want goals as much as they wanted roles. Maybe this explains the insane popularity of the role playing games.
  • The more specific details there are, that are not flexible to your own interpretation, the more our mind tends to hate or like things imho. For e.g i am not sure I like scott mc cloud as much through this photograph when compared to his icon. I think that this is one of the reasons why book adaptations typically suck for those who have read the book. When reading the book/comic, you are rendering the scenes inside your head. Whereas in the movie it is rendered for you – less flexible – representational. Whereas inside your head it is more flexible and hence more enjoyable / engaging.
  • I also think that the simpler vector like representations of cartoons resemble our internal representations - which could then triggers similar neural responses. This might be one of the reasons that they are so effective.
  • Summarizing: simplification from complex to simple, makes it more universal and hence more involved in interpretation
  • I would like to close this section with this classification from scott mc cloud – representing the total pictorial vocabulary of any visual arts including comics. An artist is drawn to one or the other corner depending upon his likes and values. Those who approach the top corner, e.g, are attracted by the beauty of art. similarly lower left and lower right..
  • 3 ways of designing a sign represent the actual object loose 1:1 mapping works at syntactic level represent something that reminds us of the actual object no 1:1 mapping works at semantic level purely agreed upon convention strict 1:1 mapping works at pragmatic level
  • how to design choose attributes that best fit the communicative goal while minimizing cognitive effort so as to reduce the time for processing context helps as with any object identification sort of primes for the interpretation of the icon thus number of attributes must be kept low carefully selecting attrs that have greater diagnostic power e.g birds of flight -> feathers shared rules neutral contours drawn with mechanical aids strong contrast black on white background orientation shows the most informative side avoid depth cues except when necessary for informative needs chosen objects are protypical of their class
  • Choosing Canonical point of views is important. The pov that will bring out the most effective recall: Based on viewer's experience Showing the parts that most effectively characterize the image (& that has less resemblance with other images) Sometime exaggerating some parts (ratio) to achieve desired effect (e.g sign on taxi, blades of the heli-copter) (comparison images for aeroplane / helicopter are not icons but line drawings)
  • effect of syntactic/semantic aspects w.r.t to the interpreter in their social/cultural/personal-psychological context Depends on the culture, familiarity of these notions with the viewer. when metaphors are used, its a 2 way translation. The user has to understand to understand the metaphor to understand the reference.
  • $$$ for the artists and studios <<If time is there>> talk about FFA – seeing faces everywhere and the social implication – and thats how maybe the simple representations in comics work
  • I think of his reference to thumb-nail as reference to cartoon/icon :)
  • Icons and Cartoons

    1. 1. Icons and Cartoons <ul>Mohan.r Psyc 579 9 Mar 2011 </ul>
    2. 2. Outline <ul><li>What is an Icon?
    3. 3. What is a Cartoon?
    4. 4. How do they work?
    5. 5. How to design a good icon? </li></ul>
    6. 6. What is an Icon?
    7. 7. What is an icon? An image that represents an entity. <ul><li>Concrete </li><ul><ul><li>Person, place, thing </li></ul></ul><li>Abstract </li><ul><ul><li>Idea, concept, philosophy </li></ul></ul></ul>
    8. 8. What is an icon? Two types of icon: <ul><li>Representational </li><ul><ul><li>Appearance Perceived meaning </li></ul></ul><li>Symbolic abstractions </li><ul><ul><li>Appearance Perceived meaning
    9. 9. Requires learning </li></ul></ul></ul>
    10. 10. What is a cartoon? <ul>Collection of icons <ul><li>Character icon
    11. 11. Speech bubble
    12. 12. Alphabets
    13. 13. Sound icons
    14. 14. Other conventions </li></ul></ul>
    15. 15. How does it work?
    16. 16. How does it work? <ul><ul><li>Amplification through simplification </li><ul><li>'Stripping down to its essential meaning'
    17. 17. 'all but the most characteristic elements are removed'
    18. 18. free of interference and background clutter
    19. 19. reduce signal-to-noise ratio </li></ul></ul></ul>
    20. 20. How does it work? Simplification results in: <ul><li>Effective imagery </li><ul><li>Possesses perceptual immediacy </li><ul><li>Recognizing at a glance
    21. 21. Less (or no) training </li></ul></ul></ul>
    22. 22. How does it work? Abstraction: <ul><ul><li>A sign of intelligence </li><ul><li>Human race
    23. 23. Children learning </li></ul><li>Computer interface & interaction
    24. 24. Expands class of artifacts referred </li></ul></ul>
    25. 25. How does it work? Representational forms: <ul><ul><li>Less learning
    26. 26. Fast processing
    27. 27. Take priority over abstract forms
    28. 28. Low cost of consumption </li></ul></ul>
    29. 29. How does it work? Universality
    30. 30. How does it work? Universality
    31. 31. How does it work? <ul>Universality </ul>Details
    32. 32. How does it work? Over simplification
    33. 33. How does it work? Over simplification
    34. 34. How does it work? Over simplification
    35. 35. How does it work? Reflection <ul><ul><li>A way of seeing
    36. 36. Mould into which we pour life
    37. 37. We see ourselves
    38. 38. Roles vs Goals </li><ul><li>'icons demand participation to make them work' </li></ul></ul></ul>
    39. 39. How does it work? Reflection OR THIS ??
    40. 40. How does it work? Internal representations
    41. 41. How does it work? Simplification
    42. 42. Beauty of art Beauty of ideas Beauty of nature
    43. 43. How to design a good icon?
    44. 44. How to design? Three-way relation <ul><ul><li>Syntactics </li><ul><li>sign itself </li></ul><li>Semantics </li><ul><li>that which it represents </li></ul><li>Pragmatics </li><ul><li>Intelligence which connects both </li></ul></ul></ul>
    45. 45. How to design? Syntactics – Semantics - Pragmatics
    46. 46. How to design? Syntactics <ul><ul><li>Choose attributes that fit the communicative goal
    47. 47. Keep number of attributes to low
    48. 48. Shared rules </li><ul><li>Strong contrast (solid forms) </li><ul><li>Complete absence of internal details </li></ul><li>Neutral contours
    49. 49. Orientation </li></ul></ul></ul>
    50. 50. How to design? Syntactics - Orientation
    51. 51. How to design? Pragmatics
    52. 52. Summary <ul>Icon and Cartoons: <ul><li>Simplified abstract representations of objects
    53. 53. Simplification Universality
    54. 54. Universality Reflection
    55. 55. Reflection $$$ :)
    56. 56. Syntactics – Semantics – Pragmatics </li></ul></ul>
    57. 57. <ul>“ Our life is frittered away by detail. Simplify , simplify , simplify ! I say, let your affairs be as two or three, and not a hundred or a thousand; instead of a million count half a dozen, and keep your accounts on your thumb-nail . ” </ul><ul><ul><ul><li>Thoreau, Henry David </li></ul></ul></ul>
    58. 58. Bibliography <ul><li>Lukas Mathis, Realism in UI Design http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design
    59. 59. << Course Readings >> </li></ul>
    60. 60. Humour
    61. 61. Thank you