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 message: sales fell 12% this quarter. Which choice shows good visual hierarchy?

A Make the sales figure the largest text and place it at the top left

B Make every number the same size so none is favoured

2. Which statement about size in visual hierarchy is correct?

A Size has no effect on which element viewers read first

B Larger elements are noticed first, so the main title or key figure should be bigger

3. In a left-to-right language like English, where do viewers usually begin reading a visualisation?

A Top left

B Bottom right

4. A poster uses one bold red number among grey text to show the key finding. What is this an example of?

A Poor hierarchy because the elements differ

B Emphasis using colour and weight

5. Which design makes the reading order clearest?

A Title first, then the main chart, then the supporting notes in smaller text

B Place the title, chart and notes at random positions in similar sizes

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;		AMakes the main title larger and heavier so it is read first
2<h1>Sales Up 12%</h1> <p>Term 2 results</p>		Bh1 { font-size: 40px; } p { font-size: 14px; }
3Size: the most important element is made the biggest so the eye goes to it first		C.key { color: red; font-weight: bold; }
4Emphasis: one bold accent colour makes the key figure stand out from the muted rest		DEvery element has the same strong emphasis, so nothing stands out and the reading order is unclear
5h1 { font-size: 12px; } p { font-size: 24px; }		EPlaces the key message above the supporting detail so the reading order is clear
6.a, .b, .c, .d { color: red; font-weight: bold; }		FThe title is smaller than the body text, so the hierarchy is upside down and viewers read the detail first

Definitions

visual hierarchy

Fill in the Blanks

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

h1 { _________: 36px; }

.key-number { font-weight: ____; }

.highlight { _____: #D62728; }

<__>Sales rose 20% this term</h1>

.headline { order: _; }

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: bold;

D color #1a1a1a;

E }

Question 2

A .kpi {

B font-size: 48px;

C font-weight: 100;

D color: #d62728;

E }

Question 3

A .title { font-size: 10px; }

B .note { font-size: 12px; }

C .body { font-size: 18px; }

Question 4

A title.position = bottom-right

B chart.position = centre

C source.position = bottom

Question 5

A SET headline size TO 32

B SET subtitle size TO 40

C SET footnote size TO 12

Answer Key

Visual hierarchy in a visualisation

Section A: Quick Questions

A — Make the sales figure the largest text and place it at the top left

B — Larger elements are noticed first, so the main title or key figure should be bigger

A — Top left

B — Emphasis using colour and weight

A — Title first, then the main chart, then the supporting notes in smaller text

Section B: Match the Pairs

font-size: 36px; font-weight: bold; → Makes the main title larger and heavier so it is read first

<h1>Sales Up 12%</h1> <p>Term 2 results</p> → Places the key message above the supporting detail so the reading order is clear

Size: the most important element is made the biggest so the eye goes to it first → h1 { font-size: 40px; } p { font-size: 14px; }

Emphasis: one bold accent colour makes the key figure stand out from the muted rest → .key { color: red; font-weight: bold; }

h1 { font-size: 12px; } p { font-size: 24px; } → The title is smaller than the body text, so the hierarchy is upside down and viewers read the detail first

.a, .b, .c, .d { color: red; font-weight: bold; } → Every element has the same strong emphasis, so nothing stands out and the reading order is unclear

Section C: Definitions

visual hierarchy — Using size, position, colour and weight to show which element viewers should read first, so the key message stands out and the reading order is clear.

Section D: Fill in the Blanks

h1 { font-size: 36px; }

.key-number { font-weight: bold; }

.highlight { color: #D62728; }

<h1>Sales rose 20% this term</h1>

.headline { order: 1; }

Section E: Spot the Error

D — The colon is missing between the property and its value. It should be color: #1a1a1a; so the dark, bold heading gets applied and stands out as the first thing read.

C — A weight of 100 makes the key figure thin and weak, which works against the large size and bright colour. It should be font-weight: bold; so the main number stands out.

A — The title is now smaller than the body text and the note, so it no longer shows what to read first. The title should be the largest size, such as 36px.

A — Viewers usually start reading at the top-left. Putting the title at the bottom-right breaks the reading order. It should be title.position = top-left.

B — The subtitle is set larger than the headline, so it competes with the main message. Size should step down: headline 32, subtitle 20 and footnote 12.