3.

Perception & Representation

3. Perception & Representation

Perception
 Constructivist theorists believe that seeing
is an active process in which our view is
constructed from both information in the
environment and from previously stored
knowledge.
 Ecological theorists believe that perception
is a process of ‘picking up” information from
the environment, with no construction or
elaboration needed. We explore objects in
the environment.
3. Perception & Representation
Gestalt Laws

3. Perception & Representation

Gestalt Laws
 Gestalt psychology is a movement in
experimental psychology that began just prior
to World War I.
 The Gestalt approach emphasizes that we
perceive objects as well-organized patterns
rather than separate component parts. The
Gestalt psychologists were constructivists.
 The focal point of Gestalt theory is the idea of
"grouping," or how we tend to interpret a
visual field or problem in a certain way.
3. Perception & Representation
Gestalt - Proximity

3. Perception & Representation

Gestalt - similarity

3. Perception & Representation

Gestalt - closure

3. Perception & Representation

Gestalt - continuity

3. Perception & Representation

Gestalt - application

3. Perception & Representation

Affordances
 The ecological approach argues that perception is a direct
process
 Information is simply detected rather than being constructed
(Gibson, 1979).
 A central concept of the ecological approach is the idea of
affordance (Norman, 1988).
 The possible behaviour of a system is the behaviour afforded by
the system.
 A door affords opening, for example.
 A vertical scrollbar in a graphical user interface affords
movement up or down.
 The affordance is a visual clue that suggests that an action is
possible.

3. Perception & Representation

Affordances
 When the affordance of an object is perceptually
obvious, it is easy to know how to interact with it.
 Norman's first and ongoing example is that of a
door. Some doors are difficult to see if they should
be pushed or pulled. Other doors are obvious. The
same is true of ring controls on a cooker. How do
you turn on the right rear ring?
 "When simple things need labels or instructions,
the design is bad."

3. Perception & Representation

Affordances in Software
 Both scrollbars afford
movement up or
down.
 What visual clues in
design on the right
make this affordance
obvious?

3. Perception & Representation

Affordances in Software
 The following list suggests the actions
afforded by common user interface controls:
 Buttons are to push.
 Scroll bars are to scroll.
 Checkboxes are to check.
 List boxes are to select from. etc.

3. Perception & Representation

Link Affordances
 It is important for web sites users to know
what objects on the page can be clicked to
follow links.
 This is known as link affordance
 Text links
 Graphical links

3. Perception & Representation

Influence of theories on HCI
 The constructivist and ecological theorists
fundamentally disagree on the nature of perception.
 However, interface and web designers should
recognise that both theories can be useful in the
design of interfaces:
 the Gestalt laws can help in laying out interface
components to make use of the context and prior
knowledge of the user
 paying careful attention to the affordances of objects
ensures that the information required to use them can
easily be detected by the user.
3. Perception & Representation
Representation
 A graphical user interface must represent
information visually in a way which is meaningful to
the user. The representations may be highly
sophisticated, for example 3-dimensional simulated
‘walkthroughs’. To represent 3D objects on a 2D
surface, perceptual depth cues are used:
 size
 interposition
 contrast, clarity and brightness
 shadow
 texture
 motion parallax

3. Perception & Representation

Graphical coding
 Abstract, where there is no relation, other
than established convention, for example:
 Abstract codes to represent files
 Abstract shapes to represent different objects
 Reverse video to represent status
 Colour to represent different options

3. Perception & Representation

Graphical coding
 Other codings are more direct, for example:
 Different icon sizes to reflect different file sizes
 Different line widths to represent different tool
widths in a drawing package
 Bar charts to show trends in numerical data
 The most direct codings are icons which
represent the objects they portray, for
example:
 The wastebin icon
 A paper file to represent a file.
3. Perception & Representation
Colour coding
 Use of colour improves effectiveness of
 recognition process
 detection of patterns
 search (scanning)

3. Perception & Representation

Colour coding
 Usage:
 segmentation: color is a powerful way of dividing a display
into separate regions. Areas/items belonging to each other
should have the same color (note that this is also related to
the Gestalt law of similarity)
 amount of color: too many will increase search time –
colour pollution
 task demands: most powerful in search tasks
less powerful in tasks requiring
categorization/memorization
 experience of users: more valuable to novice than to
experts

3. Perception & Representation

Colour Theory
 Coloured screens are the primary sensory stimulus
 Poor colour choices can significantly reduce the
usability
 An application which uses clashing or discordant
colours will often provoke a negative reaction in
users, who will not enjoy using it
 Good use of colour can be powerful in any
application, but is particularly important in web
pages
 Choice of harmonious colours can be helped by a
basic understanding of colour theory
3. Perception & Representation
The Colour Wheel
 The black triangle in the
centre points out the
primary colours
 If you mix two primary
colours, you will get the
secondary colour that's
pointed out by the lighter
grey triangle
 When you mix a primary
with either of its closest
secondary colours, you
get a tertiary colour

3. Perception & Representation

Colour Schemes
 A harmonious set of colours for an interface
is known as a colour scheme
 Colour schemes are based on the colour
wheel
 There are three main sets of colour schemes:
 Analogous
 Complimentary
 Monochromatic

3. Perception & Representation

Analogous Scheme

Example of an analogous scheme - http://www.zeldman.com

3. Perception & Representation

Complimentary Scheme

Example - http://www.ufl.edu

3. Perception & Representation

Monochromatic Scheme

Example - http://www.yakima.com

3. Perception & Representation