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


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


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

It is a relative concept

Visual weight


Hello

Figure and ground relation


Directing the viewer’s eye


Primary scanning pattern is vertical-horizontal referents

Secondary scanning pattern is the left-lower perceptual pull



Primary scanning



Secondary scanning



How do your eyes move?

Visual recognition


Layout

Visual recognition


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


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


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


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


Perceptual layering


Can link related but non-contiguous areas

Allows more effective scanning

Provides consistency

Reduces clutter

Colour coding

Perceptual layering


Colour coding

Perceptual layering


Colour coding

http://www.enjoyburlington.com/

http://www.bbc.co.uk



http://www.bbc.co.uk/

Experimental conclusions


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



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



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

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

http://www.espc/co/uk

Summary


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


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


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.

week 5 - visual hierarchies

Technology

napier university users

perceptual layering

napier university middle

napier universityhello

summary version

visual weight version

development unit

napier universitypoints