8/14/2019 hci_3565.pdf

1/26

3. Perception & Representation

3. Perception & Representation

8/14/2019 hci_3565.pdf

2/26

3. Perception & Representation

Perception

Constructivist theoristsbelieve that seeingis an active process in which our view isconstructed from both information in the

environment and from previously storedknowledge.

Ecological theoristsbelieve that perceptionis a process of picking up information fromthe environment, with no construction orelaboration needed. We exploreobjects inthe environment.

8/14/2019 hci_3565.pdf

3/26

3. Perception & Representation

Gestalt Laws

8/14/2019 hci_3565.pdf

4/26

3. Perception & Representation

Gestalt Laws

Gestalt psychology is a movement inexperimental psychology that began just priorto World War I.

The Gestalt approach emphasizes that weperceive objects as well-organized patternsrather than separate component parts. TheGestalt psychologists were constructivists.

The focal point of Gestalt theory is the idea of"grouping," or how we tend to interpret avisual field or problem in a certain way.

8/14/2019 hci_3565.pdf

5/26

3. Perception & Representation

Gestalt - Proximity

8/14/2019 hci_3565.pdf

6/26

3. Perception & Representation

Gestalt - similarity

8/14/2019 hci_3565.pdf

7/26

3. Perception & Representation

Gestalt - closure

8/14/2019 hci_3565.pdf

8/26

3. Perception & Representation

Gestalt - continuity

8/14/2019 hci_3565.pdf

9/26

3. Perception & Representation

Gestalt - application

8/14/2019 hci_3565.pdf

10/26

3. Perception & Representation

Affordances

The ecological approach argues that perception is a directprocess

Information is simply detected rather than being constructed(Gibson, 1979).

A central concept of the ecological approach is the idea ofaffordance (Norman, 1988).

The possible behaviour of a system is the behaviour affordedbythe system.

A door affords opening, for example.

A vertical scrollbar in a graphical user interface affordsmovement up or down.

The affordance is a visual clue that suggests that an action ispossible.

8/14/2019 hci_3565.pdf

11/26

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 shouldbe 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."

8/14/2019 hci_3565.pdf

12/26

3. Perception & Representation

Affordances in Software

Both scrollbars afford

movement up or

down.

What visual clues indesign on the right

make this affordance

obvious?

8/14/2019 hci_3565.pdf

13/26

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.

8/14/2019 hci_3565.pdf

14/26

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

8/14/2019 hci_3565.pdf

15/26

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 boththeories can be useful in thedesign of interfaces:

the Gestalt lawscan help in laying out interface

components to make use of the context and prior

knowledge of the user paying careful attention to the affordancesof objects

ensures that the information required to use them can

easily be detected by the user.

8/14/2019 hci_3565.pdf

16/26

3. Perception & Representation

Representation

A graphical user interface must representinformation visually in a way which is meaningful tothe user. The representations may be highlysophisticated, for example 3-dimensional simulated

walkthroughs. To represent 3D objects on a 2Dsurface, perceptual depth cues are used: size

interposition

contrast, clarity and brightness

shadow texture

motion parallax

8/14/2019 hci_3565.pdf

17/26

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

8/14/2019 hci_3565.pdf

18/26

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 whichrepresent the objects they portray, for

example: The wastebin icon

A paper file to represent a file.

8/14/2019 hci_3565.pdf

19/26

3. Perception & Representation

Colour coding

Use of colour improves effectiveness of

recognition process

detection of patterns search (scanning)

8/14/2019 hci_3565.pdf

20/26

3. Perception & Representation

Colour coding

Usage: segmentation: color is a powerful way of dividing a display

into separate regions. Areas/items belonging to each othershould 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 tasksless powerful in tasks requiring

categorization/memorization experience of users: more valuable to novice than to

experts

8/14/2019 hci_3565.pdf

21/26

3. Perception & Representation

Colour Theory

Coloured screens are the primary sensory stimulus

Poor colour choices can significantly reduce theusability

An application which uses clashing or discordantcolours will often provoke a negative reaction inusers, who will not enjoy using it

Good use of colour can be powerful in anyapplication, but is particularly important in webpages

Choice of harmonious colours can be helped by abasic understanding of colour theory

8/14/2019 hci_3565.pdf

22/26

3. Perception & Representation

The Colour Wheel

The black triangle in thecentre points out theprimary colours

If you mix two primary

colours, you will get thesecondary colourthat'spointed out by the lightergrey triangle

When you mix a primary

with either of its closestsecondary colours, youget a tertiary colour

8/14/2019 hci_3565.pdf

23/26

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

8/14/2019 hci_3565.pdf

24/26

3. Perception & Representation

Analogous Scheme

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

http://www.zeldman.com/http://www.zeldman.com/http://www.zeldman.com/http://www.zeldman.com/http://www.zeldman.com/http://www.zeldman.com/http://www.zeldman.com/http://www.zeldman.com/

8/14/2019 hci_3565.pdf

25/26

3. Perception & Representation

Complimentary Scheme

Example - http://www.ufl.edu

http://www.ufl.edu/http://www.ufl.edu/http://www.ufl.edu/http://www.ufl.edu/http://www.ufl.edu/http://www.ufl.edu/http://www.ufl.edu/http://www.ufl.edu/

8/14/2019 hci_3565.pdf

26/26

3. Perception & Representation

Monochromatic Scheme

Example - http://www.yakima.com

http://www.yakima.com/http://www.yakima.com/http://www.yakima.com/http://www.yakima.com/http://www.yakima.com/http://www.yakima.com/http://www.yakima.com/http://www.yakima.com/