Using
to elevate
your data visualisations
SHREYA ARYA
About Me
Tableau / Alteryx Consultant
The Information Lab • The Data School UK (DS39)
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
P1 BI Adoption Team
About Me
Tableau / Alteryx Consultant
The Information Lab • The Data School UK (DS39)
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
P1 BI Adoption Team
About Me
Tableau / Alteryx Consultant
The Information Lab • The Data School UK (DS39)
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
P1 BI Adoption Team
About Me
X5 Viz of The Days
Tableau Public
Tableau Public Featured Author
June 2023
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
About Me
Back 2 Viz Basics (B2VB)
Co-lead
Tableau Community Project
Great for both New and Experienced Users!
Bi-weekly Challenge Prompts
Shreya Arya
Clean, easy-to-visualize data
@datavizfairy
This project is here to help you practice some of the basics to
arya.shreya
help you form or rebuild that foundation.
datavizfairy.co.uk
thetableaustudentguide.com/vizbasics
About Me
Back 2 Viz Basics (B2VB)
Co-lead
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
LAST WEEK: Build a Line Chart (MLB Player Salaries)
thetableaustudentguide.com/vizbasics
About Me
Jewellery Making
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
About Me
Watercolouring
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
Clay
Crochet
About Me
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk
What I will be covering…
Colour
Relativity
UI Tip 2
Colour
Psychology
Colour Palette
Inspiration
UI Tip 3
UI Tip 1
Researchers estimate that most
humans can see around one million
different colors.
This is because a healthy human eye has three types
of cone cells, each of which can register about 100
different colour shades, amounting to around a
million combinations.
Of course, this will vary for people who have a colour
impairment (or are ‘colourblind’).
(Source: Pantone)
Humans are visual creatures
Connected emotions and experiences…
Shades of orange and gold…
How it made you feel…
Who you were with…
What you were doing…
How does this relate to data visualisation?
• Deliver key insights quicker and more effectively
• Establish trust within the user (and the data)
• Increase appeal / usage of dashboards
How does this relate to data visualisation?
• Deliver key insights quicker and more effectively
• Establish trust within the user (and the data)
• Increase appeal / usage of dashboards
How does this relate to data visualisation?
• Deliver key insights quicker and more effectively
• Establish trust within the user (and the data)
• Increase appeal / usage of dashboards
Colour Relativity
Colour Theory
How different colours interact with each other…
COLOUR RELATIVITY | ANALOGOUS COLOURS | COMPLIMENTARY COLOURS…
Colour Relativity
How colours influence each others perception…
Colour Relativity
How colours influence each others perception…
How many different shades of blue for the inner circle do you see?
1, 2 or 3?
Colour Relativity
How colours influence each others perception…
They’re all the same colour!
Colour Relativity
How colours influence each others perception…
Colour Relativity
How colours influence each others perception…
Colour Relativity
How colours influence each others perception…
Colour Relativity
How colours influence each others perception…
Let’s now change the circles to text….
Colour Relativity
How colours influence each others perception…
Let’s now change the circles to text...
Abc
Abc
Can you read the text clearly for each?
Abc
Colour Relativity
How colours influence each others perception…
According to the Web Content Accessibility Guidelines (WCAG)…
Abc
Abc
Abc
Colour Relativity
How colours influence each others perception…
coolors.co/contrast-checker
Abc
Colour Relativity
How colours influence each others perception…
coolors.co/contrast-checker
Abc
Colour Relativity
How colours influence each others perception…
coolors.co/contrast-checker
Abc
Avoid using Red and
Green together...
Avoid using Red and Green together...
“8% of men and 0.5% of women have a red/green type of colour vision deficiency.” – Colour Blind Awareness
It’s not accessible.
NORMAL VISION
DEUTERANOMALY
Avoid using Red and Green together...
Using Red-Green
A
B
Using a Colour-blind friendly palette
A
B
Avoid using Red and Green together...
Well-chosen and accessible colours help
deliver key insights quickly and create
more of an impact.
Avoid using pure black
(#00000) and pure
white (#fffff)
together...
Avoid using pure black (#00000) and pure white (#fffff)
together…
It’s too high-contrast. This results in eye-strain.
Tip 2:
Tip 2:
Avoid using pure black (#00000) and
pure white together (#fffff)
Avoid using pure black (#00000) and
pure white together (#fffff)
Avoid using pure black (#00000) and pure white (#fffff)
together…
It’s too high-contrast. This results in eye-strain.
Tip 2:
Tip 2:
Avoid using pure black (#00000) and
pure white together (#fffff)
Avoid using pure black (#00000) and
pure white together (#fffff)
Avoid using pure black (#00000) and pure white (#fffff)
together…
It’s too high-contrast. This results in eye-strain.
Tip 2:
Tip 2:
Avoid using pure black (#00000) and
pure white together (#fffff)
Avoid using pure black (#00000) and
pure white together (#fffff)
Avoid using pure black (#00000) and pure white (#fffff)
together…
Instead, deviate ever so slightly away from pure black / pure white
Tip 2:
Tip 2:
Avoid using pure black
(#00000) and pure white
together (#fffff)
Avoid using pure black
(#00000) and pure white
together (#fffff)
Colour Psychology
Colour Psychology
Subconscious associations we have of colours…
Colour Psychology
Subconscious associations we have of colours…
We subconsciously
associate colours with
certain emotions, places,
objects and experiences…
Colour Psychology
Subconscious associations we have of colours…
Religion in the UK |
Makeover Monday
Religion / Spirituality
Colour Psychology
Subconscious associations we have of colours…
Cost of a Dozen Red
Roses | B2VB
Valentine’s themed
Love / Sweetness /
Romance
Colour Psychology
Subconscious associations we have of colours…
Professional / Elegant
Blacks, Whites, Neutrals
Colour Psychology
Subconscious associations we have of colours…
Blue
 Calm
 Sadness
 Loyalty
 Coldness
 Trust
 Loneliness
 Knowledge
 Stability
 Peace
Bodies of water, Sky, Travel, Neptune...
Colour Psychology
Subconscious associations we have of colours…
Associations vary between cultures….
Red
 Negative connotations, especially when used with
regards to data visuals.
Luck
Fortune
Success
Beauty
Colour Psychology
Subconscious associations we have of colours…
Information is Beautiful Colours in Culture
Colour Psychology
Subconscious associations we have of colours…
Colour Psychology
Subconscious associations we have of colours…
You’re going on a trip to an aquarium… which one do you think would provide a better
experience?
Splash Spectra Aquarium
Gills Galore Aquarium
Colour Psychology
Subconscious associations we have of colours…
You’re going on a trip to an aquarium… which one do you think would provide a better
experience?
Splash Spectra Aquarium
• Not as strong of a
subconscious
association.
• Isn’t as powerful.
Gills Galore Aquarium
• Water
• Sea creatures
• Calming
• Relaxing
• Trust
Colour Psychology
Subconscious associations we have of colours…
It all comes down to trust.
We naturally trust something more if it matches the subconscious associations we
hold.
Intentionally use colour and their subconscious associations
to establish more trust in the user, and in turn the data.
The 60:30:10 rule
of UI design
The 60:30:10 rule of UI design
How we utilise our colour palette within a design
Commonly used in UI design
The 60:30:10 rule of UI design
Originates from Interior Design
The 60:30:10 rule of UI design
This formula can help you apply colours
intentionally, to create a well-balanced
and visually pleasing design.
The 60:30:10 rule of UI design
How we utilise our colour palette within a design
Accent
60%
30%%
Main Colour
Secondary Colour
10%
The 60:30:10 rule of UI design
Extra Tips:
 Use a light colour as your main
 Use the most impactful / vibrant colour
as your accent
Colour Palette
Inspiration
Coolors
Pinterest
Thank you for listening
Shreya Arya
@datavizfairy
arya.shreya
datavizfairy.co.uk