Presentation is loading. Please wait.

Presentation is loading. Please wait.

#4 Visual literacy Gunnar Stevens Human Computer Interaction

Similar presentations


Presentation on theme: "#4 Visual literacy Gunnar Stevens Human Computer Interaction"— Presentation transcript:

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

2 Agenda Part I: Some remarks about visual grammar gestalt theory
CRAP – A screen design heuristic Part II: Sketching screen design Wireframes

3 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 (sinn-)strukturiertheit”

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)

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.

6 How order is constructed
Main principles Early Gestalt psychologists formulated several laws or principles related to the organization of visual fields, asking How order is constructed

7 Some examples Gestalts-Laws

8 The horses in this photo appear to be in two groups.
Example Proximity Proximity (Gestalt der Nähe) AFTER THE SWIM, 2004, MARJON B. The horses in this photo appear to be in two groups.

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? Gesetz der Nähe

10 Example Similarity Similarity (Gesetz der Gleichheit) BIRDS OF DIFFERENT FEATHERS, 2004, HUUB LINTHORST Our eye picks out the white geese from the black and our brain treats them as a group.

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? Gesetz der Gleichheit

12 This photograph succeeds because of the principle of continuity.
Example Continuity Continuity Gesetz der Kontinuität YELLOW BICYCLES, 2004, STEPHEN NUNNEY This photograph succeeds because of the principle of continuity.

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? Gesetz der Kontinuität

14 Example Closure Closure Gesetz der Geschlossenheit Although partially obscured by the plant stem, we perceive this anole as a whole figure.

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? Gesetz der Geschlossenheit

16 We know the rear swan is just as complete as the one in front.
Example Equilibrium Equilibirium Gesetz der Regelmäßigkeit IN PAIR, 2004, MARCELL PAÅL We know the rear swan is just as complete as the one in front.

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? Gesetz der Regelmäßigkeit

18 You are probably familiar with the item and recognize it immediately.
Example Assimilation Assimilation Gesetz der Aneignung You are probably familiar with the item and recognize it immediately.

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? Gesetz der Aneignung

20 Summary I Main principles related to the organization of visual fields: Proximity – Things close together unite. Similarity – Things that resemble each other 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. Equilibrium – Balance and orientation are key to meaning. Assimilation – Past experiences create meaningful impressions.

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

22 CRAP Design Principles
The Non-Designer's Design Book (Williams 2008) CRAP Design Principles

23 Contrast Repetition Alignment Proximity CRAP
Robin Williams Non-Designers Design Book, Peachpit Press

24 CRAP Contrast Repetition Alignment Proximity
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

25 CRAP Contrast Repetition Alignment Proximity
make different things different brings out dominant elements mutes lesser elements creates dynamism Repetition Alignment Proximity 1 2 3 4 5 Robin Williams Non-Designers Design Book, Peachpit Press

26 Contrast Repetition Proximity CRAP Alignment
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

27 Contrast Repetition Alignment Proximity CRAP
repeat design throughout the interface consistency creates unity Alignment Proximity 1 3 2 4 Robin Williams Non-Designers Design Book, Peachpit Press

28 Contrast Repetition Alignment Proximity CRAP
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

29 Contrast Repetition Alignment Proximity CRAP creates a visual flow
visually connects elements Proximity 1 3 4 2 Robin Williams Non-Designers Design Book, Peachpit Press

30 Contrast Repetition Alignment Proximity CRAP
Proximity 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

31 Contrast Repetition Alignment Proximity CRAP groups related elements
separates unrelated ones 1 2 3 Robin Williams Non-Designers Design Book, Peachpit Press

32 Examples

33 Where does your eye go? Boxes do not create a strong structure
CRAP fixes it Robin Williams Non-Designers Design Book, Peachpit Press

34 Where does your eye go? Some contrast and weak proximity
ambiguous structure interleaved items Robin Williams Non-Designers Design Book, Peachpit Press

35 Where does your eye go? Strong proximity (left/right split)
unambiguous Robin Williams Non-Designers Design Book, Peachpit Press

36 Where does your eye go? the strength of proximity alignment
white (negative) space explicit structure a poor replacement Mmmm: Mmmm: Mmmm:

37 Original

38 Proximity

39 Alignment

40 Contrast

41 Repetition

42 Bad design example Terrible alignment Poor repetition Poor contrast
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 Webforms

43 Bad design example No regard for order and organization
IBM`s Aptiva Communication Center Webforms

44 Bad design example Haphazzard layout Mullet & Sano Webforms

45 Repairing the layout Mullet & Sano Webforms

46 Bad design example Spatial tension Mullet & Sano Webforms

47 Design tricks Using explicit structure as a crutch Webforms

48 Design tricks Using explicit structure as a crutch Webforms

49 Design tricks Improving a layout using alignment and factoring
Webforms

50 Interesting examples Try to see how many of the "CRAP Principles" you can find in Webbyawards winners ( : HOME/WELCOME PAGE LIFE.com VISUAL DESIGN – FUNCTION The Economist Thinking Space VISUAL DESIGN – AESTHETIC We're All Fans NAVIGATION/STRUCTURE COPY/WRITING NewYorker ACTIVISM Make It Right AUTOMOTIVE Porsche Panamera

51 Wireframes

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.

53 Basic elements Information architecture Reference zones
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

54 Further information Lectures/Tuturials
Wireframes-for-the-wicked: one hour lecture on wireframes for-the-wicked Examples dribbble-ui-sketching-designers/ Tools support Balsamiq WireframeSketcher (Eclipse Plugin) OmniGraffle raffle/

55 Next Class Topics Next Topic The Single image


Download ppt "#4 Visual literacy Gunnar Stevens Human Computer Interaction"

Similar presentations


Ads by Google