Visual literacy

55
Visual literacy Gunnar Stevens Human Computer Interaction University of Siegen, Germany #4

description

Visual literacy. #4. Gunnar Stevens Human Computer Interaction University of Siegen, Germany. Agenda. Part I: Some remarks about visual grammar gestalt theory CRAP – A screen design heuristic Part II: Sketching screen design Wireframes. Lecture Goals. - PowerPoint PPT Presentation

Transcript of Visual literacy

Page 1: Visual  literacy

Visual literacy

Gunnar StevensHuman Computer InteractionUniversity of Siegen, Germany

#4

Page 2: Visual  literacy

2

Agenda

‣Part I: Some remarks about visual grammar ‣gestalt theory‣CRAP – A screen design heuristic

‣Part II: Sketching screen design‣Wireframes

Page 3: Visual  literacy

Lecture Goals

‣Principle of the orderliness of the social reality // “grammar” of the visual perception

‣Difference between descriptive/empricial theories of human perception and normative design rules about the good form

‣Design critique applying the laws of the gestalttheory // CRAP-rules

Page 4: Visual  literacy

4

Gestalt theory

„Es gibt Zusammenhänge, bei denen nicht, was im Ganzen geschieht, sich daraus herleitet, wie die einzelnen Stücke sind und sich zusammensetzen, sondern umgekehrt, wo – im prägnanten Fall – sich das, was an einem Teil dieses Ganzen geschieht, bestimmt von inneren Strukturgesetzen dieses seines Ganzen. … Gestalttheorie ist dieses, nichts mehr und nichts weniger.“ Wertheim, 1924

„The world generally appears to us as ordered; that is, as predictable, familiar, normal, and largely devoid of surprises. This order derives from the fact that the world is organized. Whatever is presented to us in direct and immediate experience is structured and organized to a greater or lesser extent” – G. Fele (2008)

Page 5: Visual  literacy

5

On the language of the visual‣ Visual language has grammar. It is based on the

brain’s perceptual processes, and its organizational structure is key to stimulating viewer

‣ Random musical notes produce audible noise, random letters or words produce literary noise (gibberish) and lacking any cohesive structure, random visual elements produce visual noise.

‣ Visual elements, like notes in music or words in a sentence, are associative in application. It is in this context that the basic principles of perception – organization and meaning – become operational.

Page 6: Visual  literacy

6

Main principles

‣Early Gestalt psychologists formulated several laws or principles related to the organization of visual fields, asking

How order is constructed

Page 7: Visual  literacy

7

GESTALTS-LAWSSome examples

Page 8: Visual  literacy

8

Proximity

The horses in this photo appear to be in two groups.

AFTER THE SWIM, 2004, MARJON B.

Example

Page 9: Visual  literacy

9

Proximity‣ Visual elements that are

close together unite and are easily seen as a figure.

‣ Elements that are near to one another join together to form patterns or “groupings,” figures against the ground

‣ How many groups do you see?

Page 10: Visual  literacy

10

Similarity

Our eye picks out the white geese from the black and our brain treats them as a group.

BIRDS OF DIFFERENT FEATHERS, 2004, HUUB LINTHORST

Example

Page 11: Visual  literacy

11

Similarity‣ Visual elements that

resemble one another, whether in size, shape, or color, unite to form a homogeneous group and are seen as a figure.

‣ How many groups do you see?

Page 12: Visual  literacy

12

Continuity

This photograph succeeds because of the principle of continuity.YELLOW BICYCLES, 2004, STEPHEN NUNNEY

Example

Page 13: Visual  literacy

13

Continuity‣ Perceptual organization

tends to flow in one direction. We have no difficulty following the path of any single line or contour even through a maze of many overlapping lines.

‣ Modern psychologists believe that the orientation, or slope of lines is a major factor of similarity.

‣ How many lines do you see?

Page 14: Visual  literacy

14

Closure

Although partially obscured by the plant stem, we perceive this anole as a whole figure.

Example

Page 15: Visual  literacy

15

Closure‣ We possess an innate

tendency to perceive multiple elements as a group or totality. If it can find evidence of continuation, our brain will connect disjointed edges, contours or masses.

‣ Closure is a confirmation by the brain of a preexisting idea. When we can achieve it, we are psychologically rewarded.

‣ Do you see two circles?

Page 16: Visual  literacy

16

Equilibrium

We know the rear swan is just as complete as the one in front.IN PAIR, 2004, MARCELL PAÅL

Example

Page 17: Visual  literacy

17

Equilibrium‣ Equilibrium is a principle

which states that figures tend to assume their most regular form.

‣ The brain expects occluded objects to appear the same as their non-occluded counterparts.

‣ Are the blue and red objects overlapping? Are the figures more like those in a or in b?

Page 18: Visual  literacy

18

Assimilation

You are probably familiar with the item and recognize it immediately.

Example

Page 19: Visual  literacy

19

Assimilation‣ Assimilation is the process

by which a meaningful impression is obtained from a vast storehouse of past experience and knowledge.

‣ It is responsible for a characteristic psychologists call isomorphic correspondence, such as when we recoil at the sight of a child about to touch a hot stove.

‣ Which pattern at left holds more meaning?

Page 20: Visual  literacy

20

Summary I

‣Main principles related to the organization of visual fields:

Similarity – Things that resemble each other unite.

Equilibrium – Balance and orientation are key to meaning.

Proximity – Things close together unite.

Continuity – Perceptual organization tends to move in one direction.

Closure – The brain has an innate ability to close gaps in order to make things whole.

Assimilation – Past experiences create meaningful impressions.

Page 21: Visual  literacy

21

Summery II

‣Gestalt principles examine the ways parts of the visual field are organized into figures and grounds.

‣Gestalt theory proposes that patterns and groups are the fundamental elements of perception.

‣Gestalt psychology unifies the concept of wholeness with ideas of form, shape and pattern.

‣These concepts have provided a reliable psychological basis for spatial organization and visual communications

Page 22: Visual  literacy

22

CRAP DESIGN PRINCIPLESThe Non-Designer's Design Book (Williams 2008)

Page 23: Visual  literacy

23

CRAP

‣Contrast ‣Repetition ‣Alignment ‣Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

Page 24: Visual  literacy

24

CRAP

‣Contrast Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.

‣Repetition ‣Alignment ‣Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

Page 25: Visual  literacy

25

CRAP

‣Contrast ‣ make different things different‣ brings out dominant elements‣ mutes lesser elements‣ creates dynamism

‣Repetition ‣Alignment ‣Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

12

3

4

5

Page 26: Visual  literacy

26

CRAP

‣Contrast ‣Repetition

Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.

‣Alignment ‣Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

Page 27: Visual  literacy

27

CRAP

‣Contrast ‣Repetition

‣repeat design throughout the interface‣consistency‣creates unity

‣Alignment ‣Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

1

2 3

4

Page 28: Visual  literacy

28

CRAP

‣Contrast ‣Repetition‣Alignment

Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.

‣Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

Page 29: Visual  literacy

29

CRAP

‣Contrast ‣Repetition ‣Alignment

‣creates a visual flow‣visually connects elements

‣Proximity

Robin Williams Non-Designers Design Book, Peachpit Press

1

2

3

4

Page 30: Visual  literacy

30

CRAP

‣Contrast ‣Repetition‣Alignment‣ProximityProximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.

Robin Williams Non-Designers Design Book, Peachpit Press

Page 31: Visual  literacy

31

CRAP

‣Contrast ‣Repetition ‣Alignment ‣Proximity

‣groups related elements‣separates unrelated ones

Robin Williams Non-Designers Design Book, Peachpit Press

1

23

Page 32: Visual  literacy

32

EXAMPLES

Page 33: Visual  literacy

33

Where does your eye go?‣Boxes do not create a strong structure

‣CRAP fixes it

Robin Williams Non-Designers Design Book, Peachpit Press

ü

û

Page 34: Visual  literacy

34

Where does your eye go?‣Some contrast and weak proximity

‣ambiguous structure‣interleaved items

Robin Williams Non-Designers Design Book, Peachpit Press

û

Page 35: Visual  literacy

35

Where does your eye go?‣Strong proximity (left/right split)

‣unambiguous

Robin Williams Non-Designers Design Book, Peachpit Press

ü

Page 36: Visual  literacy

36

Where does your eye go?‣the strength of proximity

‣alignment‣white (negative) space‣explicit structure a poor replacement

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

ü

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

û

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Page 37: Visual  literacy

37 Original

Page 38: Visual  literacy

38 Proximity

Page 39: Visual  literacy

39 Alignment

Page 40: Visual  literacy

40 Contrast

Page 41: Visual  literacy

41 Repetition

Page 42: Visual  literacy

42Webforms

Bad design example

‣ Terrible alignment ‣ no flow

‣ Poor contrast ‣ cannot distinguish colored

labels from editable fields

‣ Poor repetition‣ buttons do not look like

buttons

‣ Poor explicit structure replaces proximity‣ blocks compete with

alignment

Page 43: Visual  literacy

43Webforms

Bad design example‣ No regard for order and

organization

IBM`s Aptiva Communication Center

Page 44: Visual  literacy

44Webforms

Bad design example‣ Haphazzard layout

Mullet & Sano

Page 45: Visual  literacy

45Webforms

‣ Repairing the layout

Mullet & Sano

Page 46: Visual  literacy

46Webforms

Bad design example‣ Spatial tension

Mullet & Sano

Page 47: Visual  literacy

47Webforms

Design tricks‣ Using explicit structure as

a crutch

Page 48: Visual  literacy

48Webforms

Design tricks‣ Using explicit structure as

a crutch

Page 49: Visual  literacy

49Webforms

Design tricks‣ Improving a layout using alignment and factoring

Page 50: Visual  literacy

50

Interesting examples

‣ Try to see how many of the "CRAP Principles" you can findin Webbyawards winners (http://www.webbyawards.com) :

‣ HOME/WELCOME PAGE LIFE.com‣ VISUAL DESIGN – FUNCTION The Economist Thinking Space‣ VISUAL DESIGN – AESTHETIC We're All Fans‣ NAVIGATION/STRUCTURE www.hboimagine.com

‣ COPY/WRITING NewYorker‣ ACTIVISM Make It Right ‣ AUTOMOTIVE Porsche Panamera

Page 51: Visual  literacy

51

WIREFRAMES

Page 52: Visual  literacy

52

Wireframes

‣ A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in interface design to suggest the structure of a website and relationships between its pages.

‣ A webpage wireframe is a similar illustration of the layout of fundamental elements in the interface. Typically, wireframes are completed before any artwork is developed.

Page 53: Visual  literacy

53

Basic elements

‣Information architecture‣Determine the site

content and the way it structured

‣Reference zones‣Layout major

positioning of content blocks

‣Page design style‣Define the visualize

identity of the site, page and basic elements

Page 55: Visual  literacy

55

Next Class Topics

‣ Next Topic‣ The Single image