This document discusses fundamentals of accessibility and design principles for new media. It covers Gestalt psychology principles like similarity, proximity and closure that influence human perception. It also discusses the use of grids and the golden ratio in structuring pages and images. An eye-tracking study found that people first notice visual/pictorial elements on a page before reading text or headlines. The document emphasizes the importance of understanding human perception and psychology in responsible new media design.

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

5. Limited Relation between today’s, yesterday’s news

7. Customised

8. Feedback channels

9. Ability to measure accurately the impact of each story

11. Few fundamentals (taught at City University in the Electronic Publishing MSc Course by Neil Thurman) Point Lines Forms

13. Vertical Lines represent balance and order

14. Diagonal Lines are dynamic

15. Thin lines denote delicacy

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

44. Artists use highly elaborated systems to:

45. create perspective

46. scale their work

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.

52. Systems evolved to allow the harmonious placement of pictorial elements on the canvas

54. Can be expressed as line (Golden Mean)

56. Structure and harmony - the golden mean

57. Structure and harmony - the golden mean

58. The Golden Section in Architecture

61. Invention of printing with movable type (C.15th) imposed a system of control over letters and other elements of page

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

70. Bigger fonts

71. Different number of columns on the same page

72. More ‘design’

73. ‘Quadrant’, ‘modular’ and ‘diagonal’ stylesBut why hasn’t newspaper design changed more?

75. Helps ensure accurate alignment of elements within a single screen, and . . .

77. Grids

78. Grids on the web

79. Grids on the web

86. The Poynter EyeTrack Test Aim: To find out what the visitors are really looking at

87. The Example

88. First Visit

92. “Readers look 1st at the illustration, then at the headline, then at the copy”