Slide 1   

Design Guidelines for the Web

Slide 2  Design Guidelines for the Web  

 Lessen burden on user’s memory:

‰ Use recognition instead of recall
‰ Help users chunk information
‰ Require as little short-term memory as possible

 Consider user’s mental models

 Provide visual clues and memory aids
 Provide feedback: let users know their input
was received

Slide 3  Definitions
 

 Cognitive psychology: the study of how

people perceive, learn, and remember
 Cognition: the act or process of knowing
 The issue: confronted with a new experience
(or website) how does a user draw on past
experience to make sense of it?
 Example: underlined blue text is understood
to be a link

Slide 4  Why do we care?

 

 Because when people try to understand

something, they use a combination of:
‰ What their senses are telling them
‰ The past experience they bring to the situation
‰ Their expectations

Slide 5  Senses Have a little list of other visual metaphors, or invite

suggestions from class. “I can’t see Dan playing
 Senses (sight, hearing, smell, taste, touch) Falstaff” is a possibility.
provide data about what is happening around
us
 We are visual beings (“See what I mean?”)  
 Designing good Web materials requires
knowledge about how people perceive

Inls490 – information architecture  Serena Fenton  Page | 1 

Slide 6  Constructivism
 

 Our brains do not create pixel-by-pixel

images
 Our minds create, or construct, models that
summarize what comes from our senses
 These models are what we perceive
 When we see something, we don’t remember
all the details, only those that have meaning
for us

Slide 7  Context Collective Memory

 Context plays a major role in what people see  

in an image
„ Geographic
„ Cultural
„ Social
„ Age

 Mind set: factors that we know and bring to a

situation
 Mind set can have a profound effect on the
usability of a web site
 

Slide 8  Max Wertheimer Wertheimer noticed that vision was retained, even if
interrupted by passing poles or other objects
 Gestalt theory of Visual Perception began
with a train ride by Max Wertheimer (1910)
 The eye collects data  
 The brain arranges data into a coherent
image

Slide 9  Gestalt
 

Slide  Rubin - Meaning Portrait of a man – a general?

10 
 

Inls490 – information architecture  Serena Fenton  Page | 2 

Slide  What do you see now?
11  How is your eye directed?

Slide   
12 

David Hockney, Place Furstenberg, Paris, 7,8 et 9 Août 1985 #1 Collage Photographique, 88.9 x 80 cm,
 

Slide  Example of context: What do you see?

 
13 

Slide  Hint: it’s an animal, facing you . . .

 
14 

Slide  Hint: this animal gives milk, and her face  

takes up the left half of the picture . . .
15 

Inls490 – information architecture  Serena Fenton  Page | 3 

Slide  Figure and ground
 
16 
 Images are partitioned into
‰ Figure (foreground) and
‰ Ground ( background)
 Sometimes figure and ground are ambiguous

Slide  Gestalt Principles Based on Opposites  

17 
 Proximity  Seperation

 Similarity  Difference

 Continuation  Discontinuity

Slide  Figure - ground: A much-used example, but some students will not
18  have seen it. It’s either a vase/birdbath/whatever, or it’s
two profiles of people facing each other. Which is a
pottery student more likely to see? A photography
student? Mind set at work again.

Slide  Figure - Ground One of the first uses of Geatalt in visual perception
19 
 

Slide  Figure - Ground

 
20 
 A small object contained by a
large one will tend to be seen
as an object overlaid on a
ground

(not as a hole in the larger

one).

Inls490 – information architecture  Serena Fenton  Page | 4 

Slide  Ambiguity
 
21 

 Balance of size allows

ambiguity of figure and
ground.

Slide  Five principles of Gestalt psychology “Gestalt” is capitalized because it’s a German noun,
22  and nouns are capitalized in German. “Gestalt” is not
 We organize things into meaningful units the name of an early psychologist.
using
‰ Proximity: we group by distance or location
‰

‰
Similarity: we group by type
Symmetry: we group by meaning
 
‰ Continuity: we group by flow of lines (alignment)
‰ Closure: we perceive shapes that are not
(completely) there

Slide  Gestalt Laws of Perception Common fate is listed in our book as one law – not
23  consistently recongized
Closure is another that is a sub group of continutaion

Slide  Continuity: flow, or alignment We see curves AB and CD, not AC and DB, and not AD
24  and BC
We see two rows of circles, not two L-shaped groups
In fact there are two different ways to make L-shaped
groups of the circles.

Slide  Closure: we mentally “fill in the blanks” All are seen as circles
25 
 

Inls490 – information architecture  Serena Fenton  Page | 5 

Slide  Continuance 9and closure)
26  Mind prefers a continuous line

Slide  similarity
27 
 

Slide   
28 

Slide  continuation, proximity, similarity and figure-ground.

29 
 

Slide  Proximity & continuation

30 
 

Inls490 – information architecture  Serena Fenton  Page | 6 

Slide  Proximity & continuation
31 
 

Slide  Similarity
32 
 

Slide  Area- we see shapes that are small in comparison to

33  total visual field
Meaning – we pay more attention to the areas that we
can discern
Orientation – object's shape influences figure-ground
understanding

 
 

Slide  “impossible” figures are part of the constructivist's

34  focus.

Slide  Constructivist 1970 – Julian Hochberg –

35  Constructivist – follows the physiological movements of
‘reading an image’

Inls490 – information architecture  Serena Fenton  Page | 7 

Slide   
36 

Slide   
37  Â Fixation Order
The numbers
superimposed over
the pink blocks show
the order in which
fixation clusters
(definition) occurred
on this first, or front,
page (definition).
Follow the numbers
and note the roaming
pattern. Note, too, the
dark "x" to the right of
photo that indicates a
mouse click for calling
up a hyperlinked
story. Density of color
is not significant.

From Stanford-Poynter Eyetracking Study

 

Slide  Steve Krug – Don’t Make Me Think

38 
 

Steve Krug – Don’t Make Me Think

Slide  Memory: Hierarchical Model Practice and effort needed to make this transfer from
39  short term to long term
Sensory
 
Short
Term

Long
Term
 

Slide  The Magic Number 7, Plus or Minus 2 Miller did speak in terms of chunks. Some people
40  George Miller, 1956 dismiss his paper as irrelevant because it only has to
 Chunking do with remembering phone numbers, but that’s not an
‰ 2125685382 vs. 919-DanHome
‰ 10 chunks vs. 3 accurate reading. It is also true, however, that we try
 Can you remember:
‰ Vsdfnjejn7dknsdnd33s
not to force users to remember lists. If they need the
list, keep it visible. The paper is a good read; Google
Try not to force users to remember lists.
Â

 If they need the list, keep it visible.

will find it for you.

   

Inls490 – information architecture  Serena Fenton  Page | 8 

Slide  Recognition vs. recall Multiple choice: you can recognize the answer
41  Essay: you must recall the answer

 Why is a multiple choice test easier than an

essay test?
 

Slide  Gui’s allow you to recognize commands rather than

42  forcing you to recall them

Slide  Interruptions  
43 
 Focusing attention and handling interruptions
are related to memory
 In website design you need to give cues or
memory aids for resuming tasks:
‰ Back button
‰ Followed links change color
‰ When filling in forms, blank boxes show where
input is needed

Slide  How fast must a system respond before the  

user’s attention is diverted?
44 
Response time User reaction

< 0.1 second Seems instantaneous

< 1 sec Notices delay, but does not

lose thought

> 10 sec Switches to another task

Robert Miller, 1968

Slide  Mental Models Before you can parallel park a car, you need to have a
45  mental model of how to parallel park a car.
 How do people use knowledge to
understand or make predictions about new
situations?  
 People build mental models

Inls490 – information architecture  Serena Fenton  Page | 9 

Slide  Metaphors  
46 
 Way to relate a difficult or more
abstract concept to a familiar one

‰ Open file

‰ Save file

Slide  Metaphors have problems

 
47 
 Disadvantage: metaphor may not be
widely known or correctly understood

 The mailbox icon meant nothing

outside rural United States until
explained.

 And it’s backwards: we put the flag up

to tell the mailman that we have put
mail in the box to be picked up.
 

Slide  Affordance http://www.jnd.org/dn.mss/affordance_conv.html

48 
 invented by the perceptual psychologist J. J.  
Gibson in 1977
 Affordance refers to the actionable properties
between the world and an actor (a person or
animal).

 To Gibson, affordances are relationships.

They exist naturally: they do not have to be
visible, known, or desirable.
Don Norman

Slide  Example of affordance

 
49 
An actor steps into a room
with an armchair and a
softball
Gibson's original definition of
affordances allows that:
1- the actor may throw the
recliner
2 - and sit on the softball,
because that is objectively
possible.

Slide  Affordance  
50 
 Affordance: “The functions or services that an
interface provides”
‰ A door affords entry to a room
‰ A radio button affords a 1-of-many choice
‰ On a door, a handle affords pulling; a crash bar
affords pushing

Inls490 – information architecture  Serena Fenton  Page | 10 

Slide  Perceived affordance
 
51 
 Refer to just those action possibilities which
are readily perceivable by an actor.
‰ Physical constraints
‰ Logical Restraints
‰ Cultural Constraints

Slide  Example of perceived affordance

 
52 
An actor steps into a room
with an armchair and a
softball
Gibson's original definition of
affordances allows that:
1- the actor may throw the
softball
2 - and sit on the recliner,
because that is a logical
response to the perceived
affordance

Slide  Design Guidelines for the Web  

53 
 Lessen burden on user’s memory:
‰ Use recognition instead of recall
‰ Help users chunk information
‰ Require as little short-term memory as possible

 Consider user’s mental models

 Provide visual clues and memory aids
 Provide feedback: let users know their input
was received

Slide  Resources
 
54 
 User-Centered Web Development by McCracken and
Wolfe; 0-13-041161-2
 Apple Human Interface Guidelines
Â

Inls490 – information architecture  Serena Fenton  Page | 11