week 5 - visual hierarchies
TRANSCRIPT
![Page 1: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/1.jpg)
IMD09117 and IMD09118 Web Design and Development Unit 5
Visual hierarchies and perceptual layering
![Page 2: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/2.jpg)
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
![Page 3: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/3.jpg)
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
![Page 4: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/4.jpg)
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
![Page 5: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/5.jpg)
Visual weight
Version A Unit 5 ©2008 Napier University
Hello
![Page 6: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/6.jpg)
Visual weight
Version A Unit 5 ©2008 Napier University
Hello
![Page 7: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/7.jpg)
Visual weight
Version A Unit 5 ©2008 Napier University
Hello
![Page 8: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/8.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 9: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/9.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 10: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/10.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 11: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/11.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 12: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/12.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 13: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/13.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 14: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/14.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 15: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/15.jpg)
Figure and ground relation
Version A Unit 5 ©2008 Napier University
![Page 16: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/16.jpg)
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
![Page 17: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/17.jpg)
Directing the viewer’s eye
Version A Unit 5 ©2008 Napier University
Primary scanning
![Page 18: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/18.jpg)
Directing the viewer’s eye
Version A Unit 5 ©2008 Napier University
Secondary scanning
![Page 19: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/19.jpg)
Directing the viewer’s eye
Version A Unit 5 ©2008 Napier University
How do your eyes move?
![Page 20: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/20.jpg)
Directing the viewer’s eye
Version A Unit 5 ©2008 Napier University
How do your eyes move?
![Page 21: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/21.jpg)
Visual recognition
Version A Unit 5 ©2008 Napier University
Layout
![Page 22: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/22.jpg)
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
![Page 23: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/23.jpg)
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
![Page 24: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/24.jpg)
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
![Page 25: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/25.jpg)
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
![Page 26: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/26.jpg)
Perceptual layering
Version A Unit 5 ©2008 Napier University
![Page 27: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/27.jpg)
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
![Page 28: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/28.jpg)
Perceptual layering
Version A Unit 5 ©2008 Napier University
Colour coding
![Page 29: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/29.jpg)
Perceptual layering
Version A Unit 5 ©2008 Napier University
Colour coding
![Page 30: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/30.jpg)
Perceptual layering
Version A Unit 5 ©2008 Napier University
Colour coding
http://www.enjoyburlington.com/
http://www.bbc.co.uk
![Page 31: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/31.jpg)
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
![Page 32: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/32.jpg)
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
![Page 33: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/33.jpg)
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
![Page 34: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/34.jpg)
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
![Page 35: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/35.jpg)
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
![Page 36: Week 5 - Visual Hierarchies](https://reader035.vdocuments.mx/reader035/viewer/2022062704/55574f9bd8b42a63448b4d87/html5/thumbnails/36.jpg)
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.