Fundamentals of accessibility in

New Media

Dimitris Vayenas MIEE, CEng

vayenas@metadata.gr

Georges Braque, Man with a Guitar, 1911

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

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

Example

Traditional Media- Mix of topics- Limited Relation

between today’s, yesterday’s news

- No relation whatsoever to “tomorrow”

Example

New Media- Correlated- Customised- Feedback

channels- Ability to measure

accurately the impact of each story

- 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

Few fundamentals (taught at City University in the Electronic Publishing MSc Course

by Neil Thurman)

Point Lines Forms

Attributes:

VolumeSizeColourValue/toneTexture

Behaviour and InterelationshipsStructureBalanceContrastDirectionMovementPosition Space

So what?

The Line- Horizontal lines denote stability- Vertical Lines represent balance

and order- Diagonal Lines are dynamic- Thin lines denote delicacy- 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

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

Arcimboldo, The Librarian

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

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

Gestalt Principles

SimilaritySimilar things appear to be grouped together

Gestalt Principles

SimilaritySimilar things appear to be grouped together

Gestalt Principles - similarity

Gestalt Principles - similarity

Gestalt Principles - similarity

Understanding Concrete Poetry

Art Center College of Design

Gestalt Principles - similarity

Gestalt Principles

Proximitythat things near each other appear to be grouped together

Gestalt Principles

Proximitythat things near each other appear to be grouped together

Gestalt Principles - proximity

Gestalt Principles

Closureclosed 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.

Closureclosed 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.

Gestalt Principles

Closureclosed shapes are more visually stable than unclosed shapes. We have a natural tendency to close gaps and complete an unfinished form

Gestalt Principles - closure

American Honda Motor Company,http://www.honda.com/. ©1998 American Honda Motor Co., Inc.

Gestalt Principles - closure

Gestalt Principles

ContinuationThis 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.

ContinuationThis 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.

Gestalt Principles

Continuationthe 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

Gestalt Principles - continuation

Gestalt Principles - continuation

Gestalt Principles - smallness

Smallness -Smaller areas tend to be seen as figures against a larger background.

Smallness -Smaller areas tend to be seen as figures against a larger background.

Gestalt Principles - Symmetry

Symmetry - symmetrical areas tend to be seen as figures against asymmetrical backgrounds.

Symmetry - symmetrical areas tend to be seen as figures against asymmetrical backgrounds.

Gestalt Principles

Figure/GroundThe 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.

Gestalt Principles

Figure/GroundThe 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.

Gestalt Principles - figure/ground

Structure and harmony

C.3100 B.C Sumerians structured pictographic tables by horizontal & vertical divisions into zones

Artists use highly elaborated systems to:– create perspective– scale their work– position compositional elements on the canvas

Sumerian cuniform inscription, C.3000 B.C.

Perspective in Leonardo’s Last Supper

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.

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.

Structure and harmony

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

Structure and harmony - the golden section

Based on the proportion 1: 618 Can be expressed as line (Golden Mean)

8 Units 5 Units

or as a rectangle (the Golden Rectangle!)

The Golden rectangle

A E

A B

C

E

FC

D F C

A B

D

Structure and harmony - the golden mean

Structure and harmony - the golden mean

The Golden Section in Architecture

Golden section can be applied to page layout. Here the print area is as deep as the full page is wide:

The Golden Section

. . . but only a few magazines and books can affordthis style of layout

Jerome’s Epistle to PaulinusGutenberg Bible, Mainz (1454-5)

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”

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

Newspaper design

In mid 1700’s text only be reproduced in columns of fixed width

– 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

Newspaper design - the modern era

The move from mechanical to photographic and computerised typesetting has produced:

Bigger fonts Different number of columns on the same page More ‘design’ ‘Quadrant’, ‘modular’ and ‘diagonal’ styles

But why hasn’t newspaper

design changed more?

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

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

Consistent placement of elements that appear on multiple screens.

Grids in use - magazines

Grids

Grids on the web

Grids on the web

The Poynter EyeTrack Test

Aim: To find out what the visitors are really looking at

The Example

First Visit

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”

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

- “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