1. IconsandCartoons

• Mohan.r Psyc 579 9 Mar 2011

2. Outline

What is an Icon? 3. What is a Cartoon? 4. How do they work? 5. How to design a good icon?

6. What is an Icon? 7. What is an icon? An image that represents an entity.

Concrete

• • Person, place, thing

Abstract

• • Idea, concept, philosophy

8. What is an icon? Two types of icon:

Representational

• • Appearance Perceived meaning

Symbolic abstractions

• • Appearance Perceived meaning 9. Requires learning

10. What is a cartoon?

Collection of icons

• Character icon 11. Speech bubble 12. Alphabets 13. Sound icons 14. Other conventions

15. How does it work? 16. How does it work?

• Amplification through simplification
  • 'Stripping down to its essential meaning' 17. 'all but the most characteristic elements are removed' 18. free of interference and background clutter 19. reduce signal-to-noise ratio

20. How does it work? Simplification results in:

Effective imagery

• Possesses perceptual immediacy
  • Recognizing at a glance 21. Less (or no) training

22. How does it work? Abstraction:

• A sign of intelligence
  • Human race 23. Children learning
• Computer interface & interaction 24. Expands class of artifacts referred

25. How does it work? Representational forms:

• Less learning 26. Fast processing 27. Take priority over abstract forms 28. Low cost of consumption

29. How does it work? Universality 30. How does it work? Universality 31. How does it work?

Universality

Details 32. How does it work? Over simplification 33. How does it work? Over simplification 34. How does it work? Over simplification 35. How does it work? Reflection

• A way of seeing 36. Mould into which we pour life 37. We see ourselves 38. Roles vs Goals
  • 'icons demand participation to make them work'

39. How does it work? Reflection ORTHIS?? 40. How does it work? Internal representations 41. How does it work? Simplification 42. Beauty of art Beauty of ideas Beauty of nature 43. How to design a good icon? 44. How to design? Three-way relation

• Syntactics
  • sign itself
• Semantics
  • that which it represents
• Pragmatics
  • Intelligence which connects both

45. How to design? Syntactics Semantics - Pragmatics 46. How to design? Syntactics

• Choose attributes that fit the communicative goal 47. Keep number of attributes to low 48. Shared rules
  • Strong contrast (solid forms)
    • Complete absence of internal details
  • Neutral contours 49. Orientation

50. How to design? Syntactics - Orientation 51. How to design? Pragmatics 52. Summary

Icon and Cartoons:

• Simplified abstract representations of objects 53. SimplificationUniversality 54. UniversalityReflection 55. Reflection$$$:) 56. Syntactics Semantics Pragmatics

57.

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 yourthumb-nail .

• • Thoreau, Henry David

58. Bibliography

Lukas Mathis, Realism in UI Design http://ignorethecode.net/blog/2010/01/21/realism_in_ui_design 59. >

60. Humour 61. Thank you