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