Fundamentals of Accessibility in New Media: Gestalt Principles of Perception
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Fundamentals of Accessibility in New Media: Gestalt Principles of Perception

on

  • 2,590 views

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.

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.

Statistics

Views

Total Views
2,590
Views on SlideShare
2,585
Embed Views
5

Actions

Likes
2
Downloads
44
Comments
0

1 Embed 5

http://www.linkedin.com 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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

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

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