Your SlideShare is downloading. ×
0
Fundamentals of accessibility in New Media	<br />Dimitris Vayenas <br />MIEE, CEng<br />vayenas@metadata.gr<br />Georges B...
Modern Societies and New Media<br />Looking Backward to see Ahead (RAND)<br />Few fundamentals (City University)<br />The ...
Main Characteristics<br />Limited Predictability<br />Relations became asynchronous<br />Relations from time driven become...
Example<br />Traditional Media<br /><ul><li>Mix of topics
Limited Relation between today’s, yesterday’s  news
No relation whatsoever to “tomorrow”</li></li></ul><li>Example<br />New Media<br /><ul><li>Correlated
Customised
Feedback channels
Ability to measure accurately the impact of each story
Event driven</li></li></ul><li>James A. Dewar (RAND) produced an intriguing proposal for all to consider:<br />Parallels b...
Few fundamentals (taught at City University in the Electronic Publishing MSc Course by Neil Thurman)<br />Point <br />Line...
So what?<br />The Line<br /><ul><li>Horizontal lines denote stability
Vertical Lines represent balance and order
Diagonal Lines are dynamic
Thin lines denote delicacy
Thick lines imply boldness</li></li></ul><li>A few additional generalisations<br />Placing an object on the right hand sid...
Gestalt psychology<br />1890 German psychologist Christian von Ehrenfels published “On Gestalt Qualities”<br />Suggested t...
Arcimboldo, The Librarian<br />
Gestalt psychology<br />Humans’ natural tendency to organize visual patterns.<br />Compelled to resolve ambiguous situatio...
Max Wertheimer research why we perceive some images are belonging together and some not<br />Wolfgan Kohler, Kurt Koffha a...
Gestalt Principles<br />Similarity<br />	Similar things appear to be grouped together<br />
Gestalt Principles<br />Similarity<br />	Similar things appear to be grouped together<br />
Gestalt Principles - similarity<br />
Gestalt Principles - similarity<br />
Gestalt Principles - similarity<br />
Gestalt Principles - similarity<br />Understanding Concrete Poetry<br />Art Center College of Design<br />
Gestalt Principles<br />Proximity<br />	that things near each other appear to be grouped together<br />
Gestalt Principles<br />Proximity<br />	that things near each other appear to be grouped together<br />
Gestalt Principles - proximity<br />
Gestalt Principles<br />Closure<br />closed shapes are more visually stable than unclosed shapes. We have a natural tenden...
Gestalt Principles<br />Closure<br />	closed shapes are more visually stable than unclosed shapes. We have a natural tende...
Gestalt Principles - closure<br />
Gestalt Principles - closure<br />American Honda Motor Company,http://www.honda.com/.  ©1998 American Honda Motor Co., Inc...
Gestalt Principles<br />Continuation<br />This principle is that contours based on smooth continuity are preferred to abru...
Gestalt Principles<br />Continuation<br />the viewer's eye will follow a line or curve. The eye is pleased by shapes that ...
Gestalt Principles - continuation<br />
Gestalt Principles - continuation<br />
Gestalt Principles - smallness<br />Smallness -Smaller areas tend to be seen as figures against a larger background.<br />
Gestalt Principles - Symmetry<br />Symmetry- symmetrical areas tend to be seen as figures against asymmetrical backgrounds...
Gestalt Principles<br />Figure/Ground<br />	The fundamental law of perception which allows us to discern objects. The eye ...
Gestalt Principles<br />Figure/Ground<br />	The fundamental law of perception which allows us to discern objects. The eye ...
Gestalt Principles - figure/ground<br />
Structure and harmony<br /><ul><li>C.3100 B.C Sumerians structured pictographic tables by horizontal & vertical divisions ...
Artists use highly elaborated systems to:
create perspective
scale their work
position compositional elements on the canvas</li></li></ul><li>Sumerian cuniform inscription, C.3000 B.C.<br />
Perspective in Leonardo’s Last Supper<br />
Linear design. The interwoven, linear pattern of Leonardo da Vinci's panel painting "Virgin and Child with St. Anne," c. 1...
Structure and harmony<br /><ul><li>Formal systems were used for more than just creating the illusion of depth and space
Systems evolved to allow the harmonious placement of pictorial elements on the canvas
One of the best known such systems is the  Golden Section</li></li></ul><li>5 Units<br />8 Units<br />Structure and harmon...
Can be expressed as line (Golden Mean)
or as a rectangle (the Golden Rectangle!) </li></li></ul><li>The Golden rectangle<br />A<br />A<br />B<br />E<br />D<br />...
Structure and harmony - the golden mean<br />
Structure and harmony - the golden mean<br />
The Golden Section in Architecture<br />
The Golden Section<br /><ul><li>Golden section can be applied to page layout. Here the print area is as deep as the full p...
. . . but only a few magazines and books can affordthis style of layout</li></li></ul><li><ul><li>Jerome’s Epistle to Paul...
Invention of printing with movable type (C.15th) imposed a system of control over letters and other elements of page
The ‘formes’ stifled innovative use of structure, c.f Newspaper design</li></li></ul><li>Newspaper design<br /><ul><li>In ...
News was told as it was received by the newspaper
Columns were filled one one by one
Font were as small as 4.5 pt
Daily Mail 1890
By this time headlines, illustrations and adverts were breaking across columns
Moving to a more horizontal format
Greater use of illustrations attracts the eye</li></li></ul><li>Newspaper design - the modern era<br /><ul><li>The move fr...
Upcoming SlideShare
Loading in...5
×

Fundamentals of Accessibility in New Media: Gestalt Principles of Perception

2,181

Published on

A presentation I gave back in 2002 as a charitable work for a charity established by Nokia's founding family, to a group of leading European Psychologists involved with drug addiction prevention.
It contains foundamentals that most tend professionals in our indystry tend to ignore. The section about Gestalt and forward is included here as taught at City University, London.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,181
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Fundamentals of Accessibility in New Media: Gestalt Principles of Perception"

  1. 1. Fundamentals of accessibility in New Media <br />Dimitris Vayenas <br />MIEE, CEng<br />vayenas@metadata.gr<br />Georges Braque, Man with a Guitar, 1911<br />
  2. 2. Modern Societies and New Media<br />Looking Backward to see Ahead (RAND)<br />Few fundamentals (City University)<br />The Gesthalt Approach <br />The Application of Metaphors from Art & Craft to New Media<br />What people are really looking at in their monitors (Poynter – Standford University)<br />Summary<br />
  3. 3. Main Characteristics<br />Limited Predictability<br />Relations became asynchronous<br />Relations from time driven become event driven and services from time/context driven become Content Driven<br />”Freedom of Choice” On demand subscriber services <br />Modern Societies<br />
  4. 4. Example<br />Traditional Media<br /><ul><li>Mix of topics
  5. 5. Limited Relation between today’s, yesterday’s news
  6. 6. No relation whatsoever to “tomorrow”</li></li></ul><li>Example<br />New Media<br /><ul><li>Correlated
  7. 7. Customised
  8. 8. Feedback channels
  9. 9. Ability to measure accurately the impact of each story
  10. 10. Event driven</li></li></ul><li>James A. Dewar (RAND) produced an intriguing proposal for all to consider:<br />Parallels between the Printing Press and New Media based on E. Eisenstein’s Work the ”Printing Press as an Agent of Change”<br />i.e. Parallel the Era of One to Many Communication with that of ”Many to Many”. Many are the similarities:<br />Dramatic Changes<br />Uninteded Consequences<br />It may take us decades to find out the winners and losers of our Era<br />Read the paper! www.rand.org – www.intranews.gr/columns<br />Looking Backwards to see Ahead<br />
  11. 11. Few fundamentals (taught at City University in the Electronic Publishing MSc Course by Neil Thurman)<br />Point <br />Lines <br />Forms<br />
  12. 12. So what?<br />The Line<br /><ul><li>Horizontal lines denote stability
  13. 13. Vertical Lines represent balance and order
  14. 14. Diagonal Lines are dynamic
  15. 15. Thin lines denote delicacy
  16. 16. Thick lines imply boldness</li></li></ul><li>A few additional generalisations<br />Placing an object on the right hand side of a composition gives it more weight than placing it on the left<br />Larger objects have more weight than smaller objects<br />Warm colours have more weight than cool colours<br />Bright colours are heavier than dull ones<br />Objects in the upper part of a composition are heavier than those lower down<br />Isolation makes for weight - a sun or moon in an empty sky will be heavier than an object of similar appearance surrounded by other things<br />Regular shapes seem heavier than irregular ones<br />
  17. 17. Gestalt psychology<br />1890 German psychologist Christian von Ehrenfels published “On Gestalt Qualities”<br />Suggested that whole is larger than sum of it’s parts - the parts interact to form a new whole<br />Our perception of an object is influenced by the arrangement of objects around it<br />The Gestalt Approach<br />
  18. 18. Arcimboldo, The Librarian<br />
  19. 19. Gestalt psychology<br />Humans’ natural tendency to organize visual patterns.<br />Compelled to resolve ambiguous situations in order to stabilize a design and make sense of its meaning <br />The Gestalt Approach<br />
  20. 20. Max Wertheimer research why we perceive some images are belonging together and some not<br />Wolfgan Kohler, Kurt Koffha and Rudolf Arnheim further applied these principles to art and visual perception<br />The eye seeks a unified whole or ‘gestalt’ - knowing how can help analyse and create successful designs<br />Knowing the connections the eye will draw for itself can help eliminate clutter and produce clearly articulated designs<br />Think of designs as ‘perceptual structures’<br />The Gestalt Approach<br />
  21. 21. Gestalt Principles<br />Similarity<br /> Similar things appear to be grouped together<br />
  22. 22. Gestalt Principles<br />Similarity<br /> Similar things appear to be grouped together<br />
  23. 23. Gestalt Principles - similarity<br />
  24. 24. Gestalt Principles - similarity<br />
  25. 25. Gestalt Principles - similarity<br />
  26. 26. Gestalt Principles - similarity<br />Understanding Concrete Poetry<br />Art Center College of Design<br />
  27. 27. Gestalt Principles<br />Proximity<br /> that things near each other appear to be grouped together<br />
  28. 28. Gestalt Principles<br />Proximity<br /> that things near each other appear to be grouped together<br />
  29. 29. Gestalt Principles - proximity<br />
  30. 30. Gestalt Principles<br />Closure<br />closed shapes are more visually stable than unclosed shapes. We have a natural tendency to close gaps and complete an unfinished form <br />interpretations which produce 'closed' rather than 'open' figures are favoured.<br />
  31. 31. Gestalt Principles<br />Closure<br /> closed shapes are more visually stable than unclosed shapes. We have a natural tendency to close gaps and complete an unfinished form<br />
  32. 32. Gestalt Principles - closure<br />
  33. 33. Gestalt Principles - closure<br />American Honda Motor Company,http://www.honda.com/. ©1998 American Honda Motor Co., Inc.<br />
  34. 34. Gestalt Principles<br />Continuation<br />This principle is that contours based on smooth continuity are preferred to abrupt changes of direction. Here, for instance, we are more likely to follow the longer, smoother line than the shorter one which changes direction abruptly.<br />
  35. 35. Gestalt Principles<br />Continuation<br />the viewer's eye will follow a line or curve. The eye is pleased by shapes that are not interrupted but form harmonious relationships with adjoining shapes<br />
  36. 36. Gestalt Principles - continuation<br />
  37. 37. Gestalt Principles - continuation<br />
  38. 38. Gestalt Principles - smallness<br />Smallness -Smaller areas tend to be seen as figures against a larger background.<br />
  39. 39. Gestalt Principles - Symmetry<br />Symmetry- symmetrical areas tend to be seen as figures against asymmetrical backgrounds.<br />
  40. 40. Gestalt Principles<br />Figure/Ground<br /> The fundamental law of perception which allows us to discern objects. The eye and mind separate an object (figure) from its surroundings (ground) Made possible by contrast.<br />
  41. 41. Gestalt Principles<br />Figure/Ground<br /> The fundamental law of perception which allows us to discern objects. The eye and mind separate an object (figure) from its surroundings (ground) Made possible by contrast.<br />
  42. 42. Gestalt Principles - figure/ground<br />
  43. 43. Structure and harmony<br /><ul><li>C.3100 B.C Sumerians structured pictographic tables by horizontal & vertical divisions into zones
  44. 44. Artists use highly elaborated systems to:
  45. 45. create perspective
  46. 46. scale their work
  47. 47. position compositional elements on the canvas</li></li></ul><li>Sumerian cuniform inscription, C.3000 B.C.<br />
  48. 48.
  49. 49. Perspective in Leonardo’s Last Supper<br />
  50. 50. Linear design. The interwoven, linear pattern of Leonardo da Vinci's panel painting "Virgin and Child with St. Anne," c. 1501-12. In the Louvre, Paris. 1.68 m 1.3 m.<br />
  51. 51. Structure and harmony<br /><ul><li>Formal systems were used for more than just creating the illusion of depth and space
  52. 52. Systems evolved to allow the harmonious placement of pictorial elements on the canvas
  53. 53. One of the best known such systems is the Golden Section</li></li></ul><li>5 Units<br />8 Units<br />Structure and harmony - the golden section<br /><ul><li>Based on the proportion 1: 618
  54. 54. Can be expressed as line (Golden Mean)
  55. 55. or as a rectangle (the Golden Rectangle!) </li></li></ul><li>The Golden rectangle<br />A<br />A<br />B<br />E<br />D<br />F<br />D<br />C<br />E<br />A<br />B<br />C<br />C<br />F<br />
  56. 56. Structure and harmony - the golden mean<br />
  57. 57. Structure and harmony - the golden mean<br />
  58. 58. The Golden Section in Architecture<br />
  59. 59. The Golden Section<br /><ul><li>Golden section can be applied to page layout. Here the print area is as deep as the full page is wide:
  60. 60. . . . but only a few magazines and books can affordthis style of layout</li></li></ul><li><ul><li>Jerome’s Epistle to PaulinusGutenberg Bible, Mainz (1454-5)</li></li></ul><li>Structure and harmony<br /><ul><li>In the Middle Ages, Scribes established many of the parameters and constraints used in layout and printing today. Columns, different font sizes, justification, pullout quotes and other “page furniture”
  61. 61. Invention of printing with movable type (C.15th) imposed a system of control over letters and other elements of page
  62. 62. The ‘formes’ stifled innovative use of structure, c.f Newspaper design</li></li></ul><li>Newspaper design<br /><ul><li>In mid 1700’s text only be reproduced in columns of fixed width
  63. 63. News was told as it was received by the newspaper
  64. 64. Columns were filled one one by one
  65. 65. Font were as small as 4.5 pt
  66. 66. Daily Mail 1890
  67. 67. By this time headlines, illustrations and adverts were breaking across columns
  68. 68. Moving to a more horizontal format
  69. 69. Greater use of illustrations attracts the eye</li></li></ul><li>Newspaper design - the modern era<br /><ul><li>The move from mechanical to photographic and computerised typesetting has produced:
  70. 70. Bigger fonts
  71. 71. Different number of columns on the same page
  72. 72. More ‘design’
  73. 73. ‘Quadrant’, ‘modular’ and ‘diagonal’ styles</li></ul>But why hasn’t newspaper<br />design changed more?<br />
  74. 74. What are Grids?<br />“In the world of print designing without a grid is like sailing without a compass. The grid gives physical reference points to the otherwise uncharted space on a blank page”<br /><ul><li>A system of 2-d guidelines for positioning elements in a layout
  75. 75. Helps ensure accurate alignment of elements within a single screen, and . . .
  76. 76. Consistent placement of elements that appear on multiple screens.</li></li></ul><li>Grids in use - magazines<br />
  77. 77. Grids<br />
  78. 78. Grids on the web<br />
  79. 79. Grids on the web<br />
  80. 80.
  81. 81.
  82. 82.
  83. 83.
  84. 84.
  85. 85.
  86. 86. The Poynter EyeTrack Test<br />Aim: To find out what the visitors are really looking at<br />
  87. 87. The Example<br />
  88. 88. First Visit<br />
  89. 89.
  90. 90.
  91. 91. The Results<br />http://www.poynter.org/eyetrack2000/<br /><ul><li>“Every time a new page is looked at, the 1st element to be noticed and studied is the visual non-textual one”
  92. 92. “Readers look 1st at the illustration, then at the headline, then at the copy”
  93. 93. “The pictorial . . items are looked at first when a new page is revealed. They are glanced at and studied before the text and often before the title is read”</li></li></ul><li>Conclusions<br />New Media requires a lot of study for responsible use<br />Creation of web pages is a too serious business to be left to poorly trained graphic designers, especially when dealing with the psyche of vulnerable people<br />The very fact that, nowadays, it takes just minutes to start printing our first web page – does not mean that we became printers. The London Guild of Printers still requires 7 years of apprenticeship to accept a full member! <br />Looking for ideas in related pages (i.e. pharmaceutical companies) is not a bad thing to do as long as we know what is good design<br />Design has benefited already and has a lot more to benefit from the involvement of psychologists on the web<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×