Visual hierarchy in a visualisation

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. A dashboard has one key figure the manager must see first. Which choice builds a visual hierarchy?

A Make every number the same size so none stands out

B Make the key figure the largest and boldest text on the page

2. Which title style gives the strongest contrast against a white background?

A Dark navy bold text

B Pale yellow bold text

3. In a left-to-right reading culture, where should the most important element usually go?

A Top left of the page

B Bottom right corner

4. Which statement about reading order is true?

A Viewers will always work out the right order, so the layout does not matter

B The layout should guide the eye from the main message to the supporting details

5. A chart has ten bright, bold colours that all compete for attention. What is the problem?

A No element is emphasised, so the hierarchy is weak

B The hierarchy is strong because there is so much colour

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1font-size: 36px; font-weight: bold;		A<h1>Sales up 12%</h1>
2color: #FFFFFF; background: #1F3864;		BUses strong contrast between text and background so a key figure stands out
3Position: place the most important element at the top left, where readers start looking		CMakes the main title large and heavy so it is the first thing the viewer reads
4Reading order: use smaller, lighter text for supporting detail below the main message		D<h1>Sales up 12%</h1><p style="font-size:12px">Source: Term 3 data</p>
5<h1 style="font-size:10px">Key finding</h1><p style="font-size:30px">Notes</p>		EWith no differences in size, colour or weight there is no hierarchy, so the viewer cannot tell what to read first. Emphasise the key element.
6Every title, chart and note is the same size, colour and weight		FThe key finding is smaller than the minor notes, so the eye goes to the wrong element first. Make the heading the largest text.

Definitions

visual hierarchy

Fill in the Blanks

Complete each line of code by filling in the missing parts.

h1 { _________: 36px; }

h1 { font-weight: ____; }

.key { _____: #C00000; }

.title { ________: absolute; top: 0; }

<h1>Sales up 12%</h1> <__>By region</h2> <p>Source: school data</p>

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A h1 {

B font-size: 32px;

C font-weight: lighter;

D color: #1a1a1a;

E }

Question 2

A body {

B background: white;

C color: #f5f5f5;

D }

Question 3

A headline.size = 12

B subtitle.size = 18

C footer.size = 10

Question 4

A title.position = top

B main_chart.position = centre

C notes.position = top-left

Question 5

A 1. Title

B 2. Source and date note

C 3. Supporting chart

D 4. Source note

Answer Key

Visual hierarchy in a visualisation

Section A: Quick Questions

B — Make the key figure the largest and boldest text on the page

A — Dark navy bold text

A — Top left of the page

B — The layout should guide the eye from the main message to the supporting details

A — No element is emphasised, so the hierarchy is weak

Section B: Match the Pairs

font-size: 36px; font-weight: bold; → Makes the main title large and heavy so it is the first thing the viewer reads

color: #FFFFFF; background: #1F3864; → Uses strong contrast between text and background so a key figure stands out

Position: place the most important element at the top left, where readers start looking → <h1>Sales up 12%</h1>

Reading order: use smaller, lighter text for supporting detail below the main message → <h1>Sales up 12%</h1><p style="font-size:12px">Source: Term 3 data</p>

<h1 style="font-size:10px">Key finding</h1><p style="font-size:30px">Notes</p> → The key finding is smaller than the minor notes, so the eye goes to the wrong element first. Make the heading the largest text.

Every title, chart and note is the same size, colour and weight → With no differences in size, colour or weight there is no hierarchy, so the viewer cannot tell what to read first. Emphasise the key element.

Section C: Definitions

visual hierarchy — Using size, colour, weight and position so the viewer's eye goes to the most important element first, then follows a clear reading order to the rest.

Section D: Fill in the Blanks

h1 { font-size: 36px; }

h1 { font-weight: bold; }

.key { color: #C00000; }

.title { position: absolute; top: 0; }

<h1>Sales up 12%</h1>
<h2>By region</h2>
<p>Source: school data</p>

Section E: Spot the Error

C — The title is the most important element, so it should be bold to draw the eye first. A lighter weight makes it fade into the page. It should be font-weight: bold;

C — Near-white text on a white background has almost no contrast, so it is hard to read. Use dark text such as #222222 so the content stands out.

A — The headline is smaller than the subtitle, so the hierarchy is upside down. The most important element should be the largest, for example headline.size = 36.

C — Notes are the least important item, but this puts them in the top-left spot where viewers look first. They belong at the bottom: notes.position = bottom.

B — The reading order should run from most to least important. A minor source note is placed before the key figure. Line 2 should be the key figure.