Topic 05: Effective Visual

Design

ICT601 Business Analytics

Dr Umera Imtinan and Dr Saeed Shariati
Resources for this topic

• See Topic 05 Readings in Moodle for links

• Interaction design and Gestalt Principles (YouTube)
• Perception in Visualisation (Healey)
• Tapping the Power of Visual Perception (Few)
Learning outcomes

At the completion of this topic, you should be able to:

• Apply your understanding of the concept of cognitive load to visualisation design
• Demonstrate how to remove “clutter” from visualisations
• Explain and give examples of the Gestalt Principles of Visual Perception in the
context of visualisations used in business intelligence
• Critique and improve a given visualisation
Lecture outline

• Cognitive Load
• Pre-attentive Attributes
• Gestalt Principles of Visual Perception
• Topic Summary
Topic 05: Part 02
Cognitive Load
 Cognitive Load

Is the mental effort required to learn new

“The eye and the visual
things
cortex of the brain form a
massively parallel • Recall that visualisations are there to “tell
processor that provides a story”
the highest-bandwidth • If we are to effectively tell the story we
channel into human want, then we need to reduce the effort
cognitive centers.” (Few, required by the audience to understand
2004, p. 1)
the story
 Memory in visualization design

Memory can be thought of as being:

• Iconic
“Just like computers, • Short term
our brains use various • Long term
types of storage to
hold information while
it’s being processes,
and, in some cases, to
store it for later use.”
(Few, 2004, p.2)

https://daydreamingnumbers.com/blog/visual-perception-data-visualization/
 Iconic memory
When we see something, the
information remains in the ‘iconic’
memory for only a fraction of a
second
• It is processed very quickly
• …before we even think about
it
• Some visual items are more easily
processed
• Pre-attentive attributes (later)
Short term memory

https://www.perceptualedge.c
om/articles/ie/visual_perceptio
n.pdf
 Clutter

Is the “stuff” in our visualisations that don’t add any

“There is a simple value to us telling the story
reason we should aim • ...making our visualisations more complicated
to reduce clutter: than necessary
because it makes our • It increases the cognitive load without adding to
visuals appear more the story
complicated than • The audience might not be bothered to try to
necessary.” (Knaflic, understand
2015, p.73)
 Reducing clutter

• If we think about visualisations as messages

“When our visuals feel
complicated. We run the that we are sending, then we can think about:
risk of our audience • Information as the signal
deciding they don’t want
to take the time to
• Clutter as the noise
understand what we’re • …we are trying to increase the signal to noise
showing, at which point ratio!
we’ve lost our ability to
communication with • Gestalt principles of Visual Perception tell us
them.” (Knaflic, 2015, p.73) how individuals tend to perceive order
Reduce clutter
Topic 05: Part 03:
Preattentive Attributes
Preattentive Attributes

• These are things that “pop out” from things you see

http://ed-informatics.org/2010/01/25/medical-computing-8/
 Categories of preattentive attributes

Few (2012) suggests there are three main

“…if we use preattentive
attributes strategically, categories of preattentive attributes that are
they can help us enable relevant to us:
our audience to see what • Form
we want them to see
before they even know
• Colour
they’re seeing it!” (Knaflic, • Spatial position
2015, p.104) • The other main category is Motion, though we make
less use of it than the others in the context of BI
 Form

• Length
For more information
about Form in Visual • Width
Design, see Ware, C • Orientation
(2004), Information
Visualization: Perception
• Shape
for design, 2nd Ed., Morgan • Size
Kaufman Publishers • Enclosure
 Form

• Length
“…if you were to
manipulate the size of an • Width
object you could use that • Orientation
size to indicate its
importance in a data set
• Shape
by making it larger.” • Size
Interaction Design • Enclosure https://www.interaction-design.org/literature/
article/preattentive-visual-properties-and-how-
Federation:
https://www.interaction-design.org/literature/articl to-use-them-in-information-visualization
e/preattentive-visual-properties-and-how-to-use-the
m-in-information-visualization
 Form

• Length
“By width, we’re referring
to variation along the • Width
secondary dimension of • Orientation
an object.” (Few, 2012,
p.69)
• Shape
• Size
• Enclosure https://www.interaction-design.org/literature/
article/preattentive-visual-properties-and-how-
to-use-them-in-information-visualization
 Form

• Length
Ask yourself, which one of
the lines stands out? • Width
Why? Is there a value • Orientation
implied?
• Shape
• Size
• Enclosure https://www.interaction-design.org/literature/
article/preattentive-visual-properties-and-how-
to-use-them-in-information-visualization
 Form

• Length
Ask yourself, which one of
the lines stands out? • Width
Why? Is there a value • Orientation
implied?
• Shape
• Size
• Enclosure https://www.interaction-design.org/literature/
article/preattentive-visual-properties-and-how-
to-use-them-in-information-visualization
 Form

• Length
Ask yourself, which one of
the boxes stands out? • Width
Why? Is there a value • Orientation
implied?
• Shape
• Size
• Enclosure https://www.interaction-design.org/literature/
article/preattentive-visual-properties-and-how-
to-use-them-in-information-visualization
 Form

• Length
Ask yourself, which one of
the lines stands out? • Width
Why? Is there a value • Orientation
implied?
• Shape
• Size
• Enclosure https://www.interaction-design.org/literature/
article/preattentive-visual-properties-and-how-
to-use-them-in-information-visualization
 Colour

• Hue
“Hue is a precise term for
what we normally think of • Intensity &
as color (red, green, blue, Brightness
pink, etc.). Color is made
up of three separate
attributes; hue is one.”
(Few, 2012, p.70)

http://colorbrewer2.org/
http://colorbrewer2.org/
 Colour

• Hue
“The primary system that
is used to describe color is • Intensity
known as the HSL (hue,
saturation, and lightness)
system.” (Few, 2012, p.70)

https://en.wikipedia.org/wiki/HSL_and_HSV
 Spatial position

• 2-D Position
“Our perception of space
is primarily two • Grouping
dimensional. We perceive
differences in vertical
position… and in
horizontal position clearly
and accurately. We also
perceive a third
dimension, depth, but not https://www.interaction-design.org/literature/
nearly as well.” (Few, 2012, article/preattentive-visual-properties-and-how-
p.71) to-use-them-in-information-visualization
 Applying visual attributes to design

“One word of warning…

• Encoding of quantitative values
when you highlight one • Form:
point in your story, it can
actually make other points • Length, width (limited), size (limited)
harder to see.” (Knaflic,
2015, p.112)
• Colour:
• Intensity (limited)
• Position:
• 2D position
 Context

Context will have an impact

“One fact that may on preattentive attributes
surprise you about our http://www.cse.dmu.ac.uk/
perception of visual ~sexton/WWWPages/Colou
r/colour4.html
attributes such as color or
size is that our visual
senses are not designed
to perceive absolute
values, but rather
differences in values.” http://www.thephilosophyresource.co.uk/wp-con
tent/uploads/2013/10/plato_akrasia_illusion.png
(Few, 2012, p.73)
 Limits to distinct perceptions

Preattentive symbols can become less useful if

“…an easy to test for we are not careful with how they are used
determining whether • There are limits to how many differences we can
preattentive attributes are
process preattentively
being used effectively. • E.g., about 8 hues, 4 orientations, 4 sizes
Create your visual… look • Use them wisely!
away for a moment… Do • Better to use fewer attributes than more
(your eyes) immediately
land where you want your
audience to focus?”
(Knaflic, 2015, p.120)
Topic 05: Part 04
Gestalt Principles of Visual Perception
 Gestalt principles of visual perception

There are six principles that are of interest to us in

“…the principles of visual terms of designing effective visualisations:
perception still accepted
today that define how
• Proximity
people interact with and • Similarity
create order out of visual • Enclosure
stimuli.” (Knaflic, 2015, • Connection
p.74) • Closure
• Continuity
Proximity

• Objects that are close together are seen to form

groups

https://au.pinterest.com/hannokoen/proximity
-in-gestalt/
Proximity

• Identify instances of
proximity that help to
tell the story in this
dashboard

https://tessellationtech.io/dashboard-design-essentials-basics-of-design/
Similarity

• Objects of a similar colour, shape, size or orientation

are seen to relate to one another or form a group

http://www.3rootsstudios.com/inspiration-gra
phic-design-gestalt/
 https://vizzendata.com/2020/07/06/utilizing-
gestalt-principles-to-improve-your-data-visual
ization-design/

Similarity

• Identify instances of
similarity that help to tell
the story in this dashboard
Enclosure

• Objects that are physically enclosed together

(perhaps by a boundary) are seen to be part of a
group

http://www.excelcharts.com/blog/data-visualiz
ation-excel-users/gestalt-laws/
Enclosure

• Identify instances of similarity that

help to tell the story in this
dashboard
Connection

• Objects that are connected

(e.g., by a line) are perceived
as a group
Closure

• Open structures are perceived as closed, complete,

and regular whenever there is a way that they can be
reasonably interpreted as such

https://au.pinterest.com/hannokoen/proximity
-in-gestalt/
Continuity

• Objects that are aligned together or appear to be a

continuation of one another are perceived as a group

https://au.pinterest.com/hannokoen/pr
oximity-in-gestalt/
Topic 05: Part 05
Topic Summary
Learning outcomes

At the completion of this topic, you should be able to:

• Apply your understanding of the concept of cognitive load to visualisation design
• Demonstrate how to remove “clutter” from visualisations
• Explain and give examples of the Gestalt Principles of Visual Perception in the
context of visualisations used in business intelligence
• Critique and improve a given visualisation
Where to from here…

Next topic is:

• Visualisation Best Practice
• Choosing the right chart type
• Creating effective views
• Designing holistic dashboards
• Perfecting your work
• Evaluating your work