week 5 - visual hierarchies

IMD09117 and IMD09118 Web Design and Development Unit 5

Visual hierarchies and perceptual layering

Visual hierarchy

Version A Unit 5 ©2008 Napier University

Users first see large masses of shape and colour

Secondarily see information in graphics

Finally read individual words and phrases from text

When users see a visual interface

Visual hierarchy

Version A Unit 5 ©2008 Napier University

Creates a centre of interest that attracts the viewer’s attention

Creates a sense of order and balance

Establishes a pattern of movement to guide a viewer through a composition

Visual weight

Version A Unit 5 ©2008 Napier University

Visual weight is the degree to which an element demands our attention and also keeps our interest

It is a relative concept

Visual weight

Version A Unit 5 ©2008 Napier University

Hello

Visual weight

Version A Unit 5 ©2008 Napier University

Hello

Visual weight

Version A Unit 5 ©2008 Napier University

Hello

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Figure and ground relation

Version A Unit 5 ©2008 Napier University

Directing the viewer’s eye

Version A Unit 5 ©2008 Napier University

Primary scanning pattern is vertical-horizontal referents

Secondary scanning pattern is the left-lower perceptual pull

Directing the viewer’s eye

Version A Unit 5 ©2008 Napier University

Primary scanning

Directing the viewer’s eye

Version A Unit 5 ©2008 Napier University

Secondary scanning

Directing the viewer’s eye

Version A Unit 5 ©2008 Napier University

How do your eyes move?

Directing the viewer’s eye

Version A Unit 5 ©2008 Napier University

How do your eyes move?

Visual recognition

Version A Unit 5 ©2008 Napier University

Layout

Visual recognition

Version A Unit 5 ©2008 Napier University

Points to consider

Visual recognition occurs in first few seconds of viewing

Squint test – tells you which elements are prominent

Graphic balance is important with visual contrast

Visual recognition

Version A Unit 5 ©2008 Napier University

Points to consider

Pastel shades are best for background and minor elements

Use bold, saturated primary colours in areas of maximum emphasis

But with caution

Perceptual layering

Version A Unit 5 ©2008 Napier University

Perceptual layering uses colour to create apparent layers on the screen

Place most important items on the upper layers and less important below

Allows viewers to concentrate on the important areas and ignore noise

Perceptual layering

Version A Unit 5 ©2008 Napier University

Perceptual layering is used in other application areas such as cartography

To be effective, take into consideration human factors, colour science and colour perception

Perceptual layering

Version A Unit 5 ©2008 Napier University

Perceptual layering

Version A Unit 5 ©2008 Napier University

Can link related but non-contiguous areas

Allows more effective scanning

Provides consistency

Reduces clutter

Colour coding

Perceptual layering

Version A Unit 5 ©2008 Napier University

Colour coding

Perceptual layering

Version A Unit 5 ©2008 Napier University

Colour coding

Perceptual layering

Version A Unit 5 ©2008 Napier University

Colour coding

http://www.enjoyburlington.com/

http://www.bbc.co.uk

Experimental conclusions

Version A Unit 5 ©2008 Napier University

Size - larger text dominates over smaller text.

Text style is secondary to size

Images must be much larger than text to act as entry points

Experimental conclusions

Version A Unit 5 ©2008 Napier University

Scanning – left-right, top-bottom used for text and bullet points, not between images, titles or links

Non-contiguous areas of common background colour did not cause sequencing

Experimental conclusions

Version A Unit 5 ©2008 Napier University

Middle top of the page appears dominant, the left hand bottom are secondary

Example http://www.espc/co/uk

Summary

Version A Unit 5 ©2008 Napier University

A visual hierarchy creates a centre of interest that attracts the viewer’s attention, creates a sense of order and balance, and guides a viewer through a page

Visual weight is the degree to which an element demands our attention and also keeps our interest

Summary

Version A Unit 5 ©2008 Napier University

The primary scanning pattern is vertical-horizontal referents. The secondary scanning pattern is the left-lower perceptual pull.

The overall graphic balance and organisation of the page is crucial to drawing the user into your content

Summary

Version A Unit 5 ©2008 Napier University

Perceptual layering uses colour to create apparent layers on the screen.

The most task relevant details are highlighted by being placed on the upper layers, whilst the lower layers are used to contain less important information.