UXD4_Gestaltstheoryx

bugenigmaΛογισμικό & κατασκευή λογ/κού

30 Οκτ 2013 (πριν από 3 χρόνια και 9 μήνες)

65 εμφανίσεις

Visual
literacy

Gunnar Stevens

Human Computer Interaction

University of Siegen, Germany

#4

Agenda


Part I: Some remarks about visual grammar


gestalt theory


CRAP


A screen design heuristic


Part II: Sketching screen design


Wireframes


2

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

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

4


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)


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.


5

Main
principles


Early Gestalt
psychologists

formulated

several

laws

or

principles

related

to

the

organization

of

visual

fields
,
asking


How

order

is

constructed




6

GESTALTS
-
LAWS

Some examples

7

Proximity

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

AFTER THE SWIM, 2004, MARJON B.

Example


8

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?


9

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

10

Example

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?


11

Continuity

This photograph succeeds because of the principle of continuity.

YELLOW BICYCLES, 2004, STEPHEN NUNNEY

12

Example

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?

13

Closure

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

14

Example

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?


15

Equilibrium

We know the rear swan is just as complete as the one in front.

IN PAIR, 2004, MARCELL PAÅL

16

Example

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?

17

Assimilation

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

18

Example

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?

19

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.

20

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

21

CRAP DESIGN PRINCIPLES

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

22

CRAP


C
ontrast



R
epetition


A
lignment


P
roximity

Robin Williams Non
-
Designers Design Book, Peachpit Press

23

CRAP


C
ontrast



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.


R
epetition


A
lignment


P
roximity

Robin Williams Non
-
Designers Design Book, Peachpit Press

24

CRAP


C
ontrast



make different things different


brings out dominant elements


mutes lesser elements


creates dynamism


R
epetition


A
lignment


P
roximity

Robin Williams Non
-
Designers Design Book, Peachpit Press

1

2

3

4

5

25

CRAP


C
ontrast


R
epetition


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.


A
lignment


P
roximity

Robin Williams Non
-
Designers Design Book, Peachpit Press

26

CRAP


C
ontrast



R
epetition


repeat design throughout the interface


consistency


creates unity


A
lignment


P
roximity


Robin Williams Non
-
Designers Design Book, Peachpit Press

1

2

3

4

27

CRAP


C
ontrast


R
epetition


A
lignment


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.


P
roximity

Robin Williams Non
-
Designers Design Book, Peachpit Press

28

CRAP


C
ontrast



R
epetition



A
lignment



creates a visual flow


visually connects elements


P
roximity

Robin Williams Non
-
Designers Design Book, Peachpit Press

1

2

3

4

29

CRAP


C
ontrast


R
epetition


A
lignment


P
roximity


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

30

CRAP


C
ontrast



R
epetition


A
lignment


P
roximity



groups related elements


separates unrelated ones

Robin Williams Non
-
Designers Design Book, Peachpit Press

1

2

3

31

EXAMPLES

32

Where does your eye go?


Boxes do not create a strong structure


CRAP fixes it

Robin Williams Non
-
Designers Design Book, Peachpit Press







33

Where does your eye go?


Some contrast and weak proximity


ambiguous structure


interleaved items

Robin Williams Non
-
Designers Design Book, Peachpit Press




34

Where does your eye go?


Strong proximity (left/right split)


unambiguous

Robin Williams Non
-
Designers Design Book, Peachpit Press




35

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:









36

Original

37

Proximity

38

Alignment

39

Contrast

40

Repetition

41

Webforms

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



42

Webforms

Bad design example


No regard for order and
organization

IBM`s Aptiva Communication Center


43

Webforms

Bad design example


Haphazzard layout

Mullet & Sano

44

Webforms


Repairing the layout

Mullet & Sano

45

Webforms

Bad design example


Spatial tension

Mullet & Sano

46

Webforms

Design tricks


Using explicit structure as a
crutch

47

Webforms

Design tricks


Using explicit structure as a
crutch

48

Webforms

Design tricks


Improving a layout using alignment and factoring

49

Interesting examples


Try to see how many of the "CRAP Principles" you can find

in
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


50

WIREFRAMES

51

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.

52

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





53

Further
information


Lectures/
Tuturials


Wireframes
-
for
-
the
-
wicked
:
one

hour

lecture

on
wireframes

http
://www.slideshare.net/nickf/wireframes
-
for
-
the
-
wicked



Examples


http://wireframes.linowski.ca/2012/04/12
-
dribbble
-
ui
-
sketching
-
designers
/



T
ools
support


Balsamiq

http
://
www.balsamiq.com



WireframeSketcher

(Eclipse
Plugin
)
http://wireframesketcher.com
/



OmniGraffle

http://www.omnigroup.com/products/OmniG
raffle
/




54

Next Class Topics


Next Topic


The Single image


55