Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Usable
Information Visualisations
& Dashboards
1. How we process vision
2. Learnable interfaces
3. Asking the right questions
4. Choosing the right chart
5. Purpose of v...
How we process vision
The nuances of human visual perception 1
Visual Grouping
1 Group
12 circles
2 Groups
6 circles, 6 squares
3 Groups
1 red, 1 orange, 1 blue
4 Groups
4 boxes
Visual Grouping Hierarc...
Sharing a Common Region
Proximity is the first mechanism we intuitively group things by.
Colour & shape also create groups...
Gestalt Psychology
Some of the Gestalt “Principles of Perceptual Organisation” are
shown on the previous slides
They large...
Preattentive
Reading vs Perceiving
Which month had the best sales?
Is it easier to answer this question with the table or the chart?
Ja...
Reading Tables
It’s easier if the table is sorted by size with the same number of
decimal points for each number
Mar 753.8...
◉ Humans are bad at judging area. For
example which slice is larger?
◉ Hard to tell detail without looking at
the numbers
...
Preattentive Visual Properties
These are properties we can perceive without directing our
conscious attention to them:
Spa...
Reading vs Preattentive Properties
◉ Reading requires our conscious attention
◉ But our preattentive perceptions are not a...
Vision & Memory
Conscious Attention
We can only direct our conscious attention to one thing at a
time
Limited Capacity Short Term Memory
◉ To learn associations (say
colour/label) we slowly direct
our attention to each one i...
A Quick Recap of How We Process Vision
Methods of grouping
There are many ways that humans
intuitively group information.
...
Learnable Interfaces
On the constraints of human memory and perception 2
A Memory Test
In the house that you lived in three houses ago, as you entered the
front door, was the door knob on the lef...
Recall vs Recognition
Recall
To recall something requires us
to find a mental representation
that links a concept to some
...
Design for Recognition
◉ When we learn something we usually aim to learn recall,
e.g. learning to speak a new language wou...
Predictable UI
In order for something to be
learnable it also needs to be
predictable.
Otherwise people have to recall
wha...
Consistency
◉ In order for a user interface to be learnable it also needs to
be consistent
◉ E.g. If we allow users to fil...
Hiding Content & Discoverability
When you hide something, how are users supposed to learn that
it is there?
Users will not...
Conventional UI
There are many UI design
conventions. When users see
those conventions they
recognise their meaning.
Somet...
A Quick Recap of Learnable Interfaces
Recall vs Recognition
The process of recall is
remembering details from a
concept, w...
Asking the Right Questions
Avoiding data for the sake of data 3
Why We Visualise Information
◉ We aggregate raw data to display information
◉ Information tells us about the world; create...
Preparing Information Takes Time
◉ Collecting, cleaning & maintaining data is time consuming
◉ Understanding how to turn d...
What questions can we answer with
this information?
What useful things can we do with
the right answers?
Consider This Table
3 Measures
x 3 Dimensions
Not even a lot of
dimensionality
Hiding much
aggregation
What Might We Compare?
Is it likely that we would compare unrelated cells?
e.g. [Asia Pac/Retail/Volume] with [South Ameri...
Review The Table
What questions
might we ask of
this data?
What could we
do with the
answers?
What Questions Could We Ask?
◉ Which region…
◉ Makes the most money?
◉ Sells the most premium inventory?
◉ Within a region...
What Could We Do With The Answers?
◉ Award bonuses
◉ Split or aggregate territories
◉ Increase / decrease advertising
◉ Co...
That one table sure seems to get a lot
of mileage…
But how hard is it to achieve each of
our end-goals with that table?
Could we design one representation
that answers one question at a time?
Where Should This Company Increase Advertising?
How might we represent this information so that an end user
could answer t...
Once You Have a Design
◉ Test with end users
◉ Does this answer their questions?
◉ Can they do useful things with the answ...
A Quick Recap of Asking the Right Questions
Data Information Understanding
Questions Answers Useful Actions
Inform
ation
D...
Choosing the right chart
Applying design knowledge to answer the right questions 4
Three Key Types of Visualisations
Contribution &
Comparison
Relationships &
Outliers
Trends &
Causality
Other Types of Visualisations
◉ The 3 key types: Contribution, Relationships, Trends
◉ There are many other forms of visua...
What Questions Are We Answering?
◉ Do not choose the chart based on the data
◉ E.g. Time series data might exist but if se...
Contribution / Composition With Stacked Bar Charts
Contribution is easiest to see on a
stacked bar chart
It’s easier to ju...
Combine the Long Tail
When there are massive differences between the smallest and the
largest contributors combine the sma...
Alternative Contribution / Comparison - Bar Chart
Pros
◉ Easier to fit more data
◉ Can show more long-tail data (still
pos...
Tables: Lot’s of Contribution, Lot’s of DetailCountry
Electricity -
exports
(million kWh)
France 73,400
Germany 66,810
Can...
Don’t Use a
Pie Chart
Question:
But what if I have a really good use case for a pie chart?
Answer:
If any chart helps achieve a goal better anot...
Best Ways to Show Contribution / Comparison
Stacked Bar Chart
Use when:
● Ratios are important
● There are relatively
few ...
Relationships / Outliers
The sorts of questions we might ask:
◉ Is there a relationship between key measures?
◉ How can we...
Utility of a
Scatter Plot
Is there a relationship
between the value of the
your car and the number of
selfies you take each
month?
Does the data sho...
With more (serious) data
the correlations are harder
to see and clusters less
obvious.
Atmospheric temperature
and power o...
The Trouble With Scatter Plots
◉ They are highly analytical tools, often used by analysts to
preview data for further anal...
Alternative: Longitudinal Relationship
If there is a correlation between
measures and a time series exist...
Then you can ...
Alternative: Highlight Exceptions
We can use highlighting for
exceptions, outliers,
unusual value, etc.
This bland table i...
Best Ways to Show Relationships / Exceptions
Scatter Plot
Use when:
● There is no time
series (e.g.
demographics)
● Aiming...
Trends & Causality
Showing changes over time can answer a lot of questions
Is it just seasonal? Is it driven by volume or ...
Issues When Showing Time Series
◉ Dimensions that are too deep (or too much long tail) lead to
messy, hard to follow chart...
Tips For Trends / Causality
◉ Use highlighting and marks/icons to add dimensionality
◉ Year-on-Year (or other period) comp...
Best Ways to Show Tends / Causality
Time Series
● Useful for showing
trends, patterns and
relationships
● Use colour, symb...
Dealing With
BIG Data
Combine Contribution, Relationships & Trends
Sort Dimensions By Volume to Avoid Long Tail Data
Combine Multiple Charts To Maximise Screen Real Estate
Most importantly: think about what
questions can be answered, then
focus on how
Showing: Contribution
Showing: Relationships
Showing: Trends
Purposes of visualisation
Different motivations we have for showing users visualisations 5
Visualisations Can Persuade
◉ Visualisations designed to persuade have a point of view
◉ The purpose is not exploration bu...
“A man convinced against his will, is of
the same opinion still
- Dale Carnegie
“It is difficult to get a man to understand
something, when his salary depends on his not
understanding it
- Upton Sinclair
◉ There are times when visualisations can help identify work
to be done
◉ This could be identifying clients to call, plans...
◉ Up/downward trends can start, exceptions can pop up,
poor/high performers can shift
◉ A visualisation can serve as a too...
◉ Visualisations can also be used for analysis
◉ Is it guided or free form analysis? Does it go down to
line-item details,...
◉ Understand why the visualisation exists
◉ Persuasion, Operation, Indication, Analysis
◉ Understand what questions it wil...
Reports & dashboards
How to make reports and dashboards both useful and usable 6
Your End-Users’ Technical Literacy
◉ Building a dashboard or report for a data scientist will be
different to making one f...
“If something is “usable” it means that: a person of
average ability and experience can figure out how to
use [it] to acco...
Reports vs Dashboards: Outline
◉ Both reports and dashboards can be dynamic and
interactive, allowing users to perform gui...
Reports vs Dashboards: Comparison
Reports
◉ Tell specific users things
that they need to do
◉ Should be designed to be
eas...
Your report
Reports vs Dashboards: Wireframes
Your dashboard
List of things that need
your attention
Yesterday’s
stats
Sum...
Tasks
◉ When designing a report/dashboard we know who our users
are, we know what questions we can answer and we know
what...
Tasks & Attention Switching
◉ Possible types of task switching interactions:
◉ shift our gaze to a different part of the s...
But I thought users don’t scroll? Isn’t
scrolling the work of the devil?
If users didn’t scroll then every news
site would...
Things aren’t always black and white
Sometimes making the user perform
an action could be better than making
them scroll o...
Guided Analytics: Click vs Scroll
◉ During guided analytics we have the user specify
parameters which we use to build a re...
(1) Remember:
We can only focus our attention
on one thing at a time
(2) Remember:
Our short term memory only
has limited capacity
(3) Remember:
(4) Remember:Spatial PositionMovementFormColour
You Can Combine Dashboards and Reports
Your report
Your dashboard
Summary Trends
These should be greenList of things that ...
Filters With High Dimensionality
◉ When data has high dimensionality there are many possible
filters that can be added
◉ I...
Preference Configuration Over Filtering
◉ With complex dimensionality the users need to be really
familiar with the data t...
Do not assume that users will be
capable of filtering data on their own
Feedback, State & Options
Feedback
When users perform an
action (open a dashboard,
apply a filter, etc.) they will
want to...
Everyone is in it for themselves
Put yourself in the user’s shoes and ask
yourself “What will this do for me?”
How Do Users Work Out Where To Go?
◉ If there is a lot of data, it’s also likely you will have a lot of
dashboards and rep...
Users will not read the text you put on
the page. They might skim. But they
definitely will not read the text
A Quick Recap of Dashboards & Reports
Reports
Reports provide tangible actions
for users. Those actions may need
a high-le...
Design considerations
How the visual design impacts usability 7
Visual Design Impacts Usability
◉ Your choice of colour, alignment, layout and spacing has an
impact on the usability of y...
Easy Comparison: Colour
Using consistent colours aids
easy comparison
Colour is a preattentive property
and grouping metho...
Easy Comparison: Proximity & Alignment
When two charts are close to
each other and aligned, it’s easy
to compare across on...
Easy Comparison: Reduce Design Noise
Extra design elements like
gridlines cause visual noise that
makes comparisons diffic...
Visual Hierarchy: Grabbing Attention
Design a visual hierarchy that
follows reading patterns
But a prominent design elemen...
Visual Hierarchy: Groupings
Borders, backgrounds, proximity,
alignment & colour schemes all
impact visual groupings
Too mu...
Visual Hierarchy: Number of Options
When you present users all their
options at once it makes it hard to
find where they w...
Regions, Groupings & Tabs
When creating tabs it’s easiest to
see which tab is selected if it “joins”
to the content, there...
Show State With Multiple Indicators
Some visual indicators can be easily
missed by some people
If there are only two possi...
Types of Drill-down and Splitting
◉ We often allow users to filter and/or drill down into data
◉ Clicking (to filter or dr...
What Matters is What the User Sees
◉ Users do not care about back-end configuration
◉ If it looks like a tabs, then users ...
A Quick Recap of Design Considerations
Your Options
Your Next Options
• 5 active filters
• Days
• Weeks
• Months
• Years
Recap
The road so far 8
Human Perception Considerations
Spatial PositionMovementFormColour
A Quick Recap of How We Process Vision
Methods of grouping
There are many ways that humans
intuitively group information.
...
UI Considerations
Does clicking the “X” in this
pop-up apply the changes?
Some page title
Lorem ipsum dolor sit amet, cons...
A Quick Recap of Learnable Interfaces
Recall vs Recognition
The process of recall is
remembering details from a
concept, w...
What questions can we answer with
this information?
What useful things can we do with
the right answers?
A Quick Recap of Asking the Right Questions
Data Information Understanding
Questions Answers Useful Actions
Inform
ation
D...
Showing: Contribution
Showing: Relationships
Showing: Trends
Best Ways to Show Contribution / Comparison
Stacked Bar Chart
Use when:
● Ratios are important
● There are relatively
few ...
Best Ways to Show Relationships / Exceptions
Scatter Plot
Use when:
● There is no time
series (e.g.
demographics)
● Aiming...
Best Ways to Show Tends / Causality
Time Series
● Useful for showing
trends, patterns and
relationships
● Use colour, symb...
Combine Contribution, Relationships & Trends
Sort Dimensions By Volume to Avoid Long Tail Data
Combine Multiple Charts To Maximise Screen Real Estate
Most importantly: think about what
questions can be answered, then
focus on how
◉ Understand why the visualisation exists
◉ Persuasion, Operation, Indication, Analysis
◉ Understand what questions it wil...
Combining Dashboards & Reports
Your report
Your dashboard
Summary Trends
These should be greenList of things that need
you...
A Quick Recap of Dashboards & Reports
Reports
Reports provide tangible actions
for users. Those actions may
involve a summ...
Visual Design Impacts Usability
◉ Your choice of colour, alignment, layout and spacing has an
impact on the usability of y...
What Matters is What the User Sees
◉ Users do not care about back-end configuration
◉ If it looks like a tabs, then users ...
A Quick Recap of Design Considerations
Your Options
Your Next Options
• 5 active filters
• Days
• Weeks
• Months
• Years
Key Takeaways
◉ Remember we are designing for our users
◉ We have preattentive ways to perceive and group visuals
◉ Consid...
Inform
ation
Data
Understanding
Design a way
to get the
right answer
Identify what
questions we
can answer
Review use
case...
THANKS!
Any questions?
You can find me at
t: @rickdzekman
w: www.rickdzekman.com
Upcoming SlideShare
Loading in …5
×

Usable Information Visualizations & Dashboards

346 views

Published on

Designing visualisations and dashboards can be a difficult task. It involves working out how to condense large amounts of data into easy to understand visualisations, understanding how the information presented will be used, and even choosing the right kinds of charts.

This presentation covers elements of design thinking, usability, and an understanding of human perception. The goal end goal is to try and enhance the user experience of visualisations and dashboards.

Published in: Data & Analytics
  • Be the first to comment

Usable Information Visualizations & Dashboards

  1. 1. Usable Information Visualisations & Dashboards
  2. 2. 1. How we process vision 2. Learnable interfaces 3. Asking the right questions 4. Choosing the right chart 5. Purpose of visualisations 6. Reports & dashboards 7. Design considerations 8. Recap
  3. 3. How we process vision The nuances of human visual perception 1
  4. 4. Visual Grouping
  5. 5. 1 Group 12 circles 2 Groups 6 circles, 6 squares 3 Groups 1 red, 1 orange, 1 blue 4 Groups 4 boxes Visual Grouping Hierarchy
  6. 6. Sharing a Common Region Proximity is the first mechanism we intuitively group things by. Colour & shape also create groups we instantly notice. But sharing a “Common Region” surpases most* other perceptual grouping mechanisms in the brain *Most others mechanisms most of the time, depending on your definition of most
  7. 7. Gestalt Psychology Some of the Gestalt “Principles of Perceptual Organisation” are shown on the previous slides They largely describe intuitive phenomena in technical terms If the technical terms interest you see Gestalt Psychology on Wikipedia
  8. 8. Preattentive
  9. 9. Reading vs Perceiving Which month had the best sales? Is it easier to answer this question with the table or the chart? Jan 51.704 Feb 72.359 Mar 753.81 Apr 258.764 May 649.078 Jun 230.248 Jul 722.377 Aug 44.168
  10. 10. Reading Tables It’s easier if the table is sorted by size with the same number of decimal points for each number Mar 753.810 Jul 722.377 May 649.078 Apr 258.764 Jun 230.248 Feb 72.359 Jan 51.704 Aug 44.168 But this table is less effective as it loses chronology
  11. 11. ◉ Humans are bad at judging area. For example which slice is larger? ◉ Hard to tell detail without looking at the numbers ◉ But it is easy to see that they are all about the same Comparing Ratios ◉ But we are good with spatial and size differences (best at spatial pos.) ◉ It’s still possible to see lengths are about the same ◉ But it’s also possible to see the subtleties of the difference
  12. 12. Preattentive Visual Properties These are properties we can perceive without directing our conscious attention to them: Spatial PositionMovementFormColour
  13. 13. Reading vs Preattentive Properties ◉ Reading requires our conscious attention ◉ But our preattentive perceptions are not as precise ◉ To quickly spot a pattern rely on preattentive properties ◉ To understand detail rely on reading comprehension
  14. 14. Vision & Memory
  15. 15. Conscious Attention We can only direct our conscious attention to one thing at a time
  16. 16. Limited Capacity Short Term Memory ◉ To learn associations (say colour/label) we slowly direct our attention to each one in turn ◉ In our short term memory we can only hold 7 +/- 2 items ◉ How many colours/countries can you keep track of at once in the scatter plot?
  17. 17. A Quick Recap of How We Process Vision Methods of grouping There are many ways that humans intuitively group information. Consider the colour groupings on this slide. Reading vs Perceiving We can perceive certain aspects of our vision much faster than we can read the same information. But reading is needed for detail. Conscious attention We can only direct our conscious attention to one thing at a time. We are aware of other things but can only pay attention to one. Power of “Common Region” Visual elements that share a “Common Region” are more likely to be seen as grouped - even if they lack other commonalities. Preattentive Properties Of the four preattentive properties we can perceive without conscious attention, the strongest is our perception of spatial position Short Term Memory: 7 +/- 2 We have to learn associations gradually. In our short term memory we can only keep track of 7 +/- 2 of these associations.
  18. 18. Learnable Interfaces On the constraints of human memory and perception 2
  19. 19. A Memory Test In the house that you lived in three houses ago, as you entered the front door, was the door knob on the left or the right? - From “The Design of Everyday Things” by Don Norman Most people can recall the house after a little thought but have trouble remembering the door knob. They could easily picture it on either the left or the right.
  20. 20. Recall vs Recognition Recall To recall something requires us to find a mental representation that links a concept to some required details. What is the 3rd line of the nursery rhyme “Twinkle Twinkle Little Star”? Recognition On the other hand recognition is usually an instant realisation of a concept after being presented with the details. What nursery rhyme has the line: “Out came the sun and dried up all the rain”?
  21. 21. Design for Recognition ◉ When we learn something we usually aim to learn recall, e.g. learning to speak a new language would not be helpful if you could only recognise words after you heard them ◉ When designing something that people have to learn to use we should aim for recognition. That way our users don’t have to recall how to find something but can quickly recognise what something is for.
  22. 22. Predictable UI In order for something to be learnable it also needs to be predictable. Otherwise people have to recall what something does rather than recognise its purpose. + + New + Open new tab What would clicking each of these buttons do?
  23. 23. Consistency ◉ In order for a user interface to be learnable it also needs to be consistent ◉ E.g. If we allow users to filter, then where filters are placed in our application will be different to most other applications they use. If it’s also different on each screen then they have to learn every screen not just the whole app.
  24. 24. Hiding Content & Discoverability When you hide something, how are users supposed to learn that it is there? Users will not try every button and toggle just to see what it does If something has to be hidden to conserve space it should be recognisable, predictable and consistent. This feeds into the discoverability of the UI.
  25. 25. Conventional UI There are many UI design conventions. When users see those conventions they recognise their meaning. Sometimes the same UI pattern can have multiple meanings. E.g. an “X” can mean close; but also remove, cancel, or delete Does clicking the “X” in this pop-up apply the changes? Some page title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at massa vel diam eleifend porta quis et nulla. Fusce ultrices dui nulla, vitae imperdiet nunc viverra sit amet. Duis sagittis pharetra sapien ut vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Make changes x
  26. 26. A Quick Recap of Learnable Interfaces Recall vs Recognition The process of recall is remembering details from a concept, while recognition is remembering concept from detail. Predictable design Users should be able to predict what an action will do without having to experiment with trial and error. Discoverability Make sure that everything in the app is easily discoverable. If it can’t be discovered it can’t be learned. Design for recognition Recall is harder for humans and requires more training. We should design UIs so that people can quickly recognise what to do. Consistent design If users not only have to learn our app but also learn the quirks of each screen they will be much more frustrated at the experience. Be conventional Design conventions allow users to quickly recognise what something does based on past experience. Don’t defy convention for no reason.
  27. 27. Asking the Right Questions Avoiding data for the sake of data 3
  28. 28. Why We Visualise Information ◉ We aggregate raw data to display information ◉ Information tells us about the world; creates understanding ◉ Improved understanding helps in decision making ◉ Improved understanding builds awareness
  29. 29. Preparing Information Takes Time ◉ Collecting, cleaning & maintaining data is time consuming ◉ Understanding how to turn data into information is hard ◉ Preparing good visualisations is a lot of work ◉ Spending all this energy better be worth it!
  30. 30. What questions can we answer with this information? What useful things can we do with the right answers?
  31. 31. Consider This Table 3 Measures x 3 Dimensions Not even a lot of dimensionality Hiding much aggregation
  32. 32. What Might We Compare? Is it likely that we would compare unrelated cells? e.g. [Asia Pac/Retail/Volume] with [South America/Automotive/Price] On the other hand we are very likely to compare: ◉ All sales across regions ◉ Industries within a region ◉ Widget types within a region And likely to compare like-for-like: one measure at a time
  33. 33. Review The Table What questions might we ask of this data? What could we do with the answers?
  34. 34. What Questions Could We Ask? ◉ Which region… ◉ Makes the most money? ◉ Sells the most premium inventory? ◉ Within a region... ◉ What industries are the most profitable? ◉ What colour widget are sold the most? ◉ About widgets… ◉ Where are each colours sold the most? ◉ Which industries buy the most of a colour?
  35. 35. What Could We Do With The Answers? ◉ Award bonuses ◉ Split or aggregate territories ◉ Increase / decrease advertising ◉ Continue / discontinue support of products by region
  36. 36. That one table sure seems to get a lot of mileage… But how hard is it to achieve each of our end-goals with that table?
  37. 37. Could we design one representation that answers one question at a time?
  38. 38. Where Should This Company Increase Advertising? How might we represent this information so that an end user could answer this question themselves? Could it even be answered using our previous table? For Example...
  39. 39. Once You Have a Design ◉ Test with end users ◉ Does this answer their questions? ◉ Can they do useful things with the answers? ◉ Also important… do your users end up with the correct understanding / comprehensions? ◉ Usability might be high but comprehension low!
  40. 40. A Quick Recap of Asking the Right Questions Data Information Understanding Questions Answers Useful Actions Inform ation Data Understanding Design a way to get the right answer Identify what questions we can answer Review use cases with end-users Answers are for tangible actions Users
  41. 41. Choosing the right chart Applying design knowledge to answer the right questions 4
  42. 42. Three Key Types of Visualisations Contribution & Comparison Relationships & Outliers Trends & Causality
  43. 43. Other Types of Visualisations ◉ The 3 key types: Contribution, Relationships, Trends ◉ There are many other forms of visualisation ◉ Intensity (e.g. heatmap) ◉ Spread (e.g. candlestick chart) ◉ Distribution (e.g. geographic map) ◉ And many more ◉ But many questions these can answer can better be answered with the key 3
  44. 44. What Questions Are We Answering? ◉ Do not choose the chart based on the data ◉ E.g. Time series data might exist but if seeing a trend does not answer our questions then we can aggregate without time ◉ Don’t try to answer every question with one single chart ◉ Think about how the answers will be used, and design visualisations that make the action easy ◉ What if making the action easy makes discovery hard?
  45. 45. Contribution / Composition With Stacked Bar Charts Contribution is easiest to see on a stacked bar chart It’s easier to judge than area but conveys the same message. We can see that even though the A-Team does not have the most sales by volume they bring in the most revenue
  46. 46. Combine the Long Tail When there are massive differences between the smallest and the largest contributors combine the smallest together. If you need the smaller ones break them into their own chart.
  47. 47. Alternative Contribution / Comparison - Bar Chart Pros ◉ Easier to fit more data ◉ Can show more long-tail data (still possible to collapse) ◉ Also usable to compare items that don’t sum (e.g. best times in a race) Cons ◉ Ratios not as obvious ◉ Takes up more room
  48. 48. Tables: Lot’s of Contribution, Lot’s of DetailCountry Electricity - exports (million kWh) France 73,400 Germany 66,810 Canada 57,970 Paraguay 46,120 Switzerland 34,570 Sweden 31,280 Czech Republic 27,450 Norway 22,170 Austria 20,460 Spain 19,590 Russia 19,140 China 18,670 South Africa 15,040 Netherlands 15,020 Slovakia 13,080 Poland 12,640 Bulgaria 12,110 Uzbekistan 12,090 United States 12,000 Denmark 10,710 Pros ◉ Tables allow lots of data - include lots of long tail ◉ Colours, symbols and mini charts can be added to tables to add extra preattentive properties ◉ Exact values are easy to extract and use Cons ◉ Reading is slower than perceiving ◉ Spatial position (the fastest preattentive property) is difficult to take advantage of
  49. 49. Don’t Use a Pie Chart
  50. 50. Question: But what if I have a really good use case for a pie chart? Answer: If any chart helps achieve a goal better another method then use it... but this is unlikely to be true with a pie chart
  51. 51. Best Ways to Show Contribution / Comparison Stacked Bar Chart Use when: ● Ratios are important ● There are relatively few contributors ● It’s suitable to aggregate the long tail Bar Chart Use when: ● Ratios less important ● There is more data ● More long tail is necessary (aggregate still possible) Table Use when: ● There is a lot of data ● The long tail matters ● End users need details
  52. 52. Relationships / Outliers The sorts of questions we might ask: ◉ Is there a relationship between key measures? ◉ How can we group/cluster characteristics? ◉ Are there any exceptions / outliers? ◉ Where are there correlations?
  53. 53. Utility of a Scatter Plot
  54. 54. Is there a relationship between the value of the your car and the number of selfies you take each month? Does the data show any interesting clusters? Are there outliers or exceptions in the trends?
  55. 55. With more (serious) data the correlations are harder to see and clusters less obvious. Atmospheric temperature and power output are correlated but is anything else?
  56. 56. The Trouble With Scatter Plots ◉ They are highly analytical tools, often used by analysts to preview data for further analysis or evaluate a model ◉ Outliers push the scale out, making it harder to see relationships between denser data points ◉ Adding bubble size for a third measure causes points to obscure each other ◉ Adding colours/labels can make the chart harder to use because of trouble people have memorising associations
  57. 57. Alternative: Longitudinal Relationship If there is a correlation between measures and a time series exist... Then you can plot the relationship between measures over time The relationship is more obvious than a scatter plot but this hides variance
  58. 58. Alternative: Highlight Exceptions We can use highlighting for exceptions, outliers, unusual value, etc. This bland table is now better able to answer questions and even provides hints at relationships. Doesn’t have to be colour. You can use another preattentive attribute: form (e.g. symbols)
  59. 59. Best Ways to Show Relationships / Exceptions Scatter Plot Use when: ● There is no time series (e.g. demographics) ● Aiming to show relationship between measures Stacked Line Chart Use when: ● Showing correlation over time ● Individual dimensions don’t matter as much Highlighting Use when: ● Trying to show relationships / exceptions in another type of visualisation
  60. 60. Trends & Causality Showing changes over time can answer a lot of questions Is it just seasonal? Is it driven by volume or price? Will we hit budget?
  61. 61. Issues When Showing Time Series ◉ Dimensions that are too deep (or too much long tail) lead to messy, hard to follow charts that stretch our attention ◉ A lot of software makes more than 2 units/axes hard to plot ◉ If there is more than one measure plotted it can be hard to put exact values on points (text overlap issues)
  62. 62. Tips For Trends / Causality ◉ Use highlighting and marks/icons to add dimensionality ◉ Year-on-Year (or other period) comparison can be done without a trend line (simple +/- numbers) ◉ You can use a combination of bars and lines to show different measures (human eyes easily track along a line, so lines are generally better than bars for trends)
  63. 63. Best Ways to Show Tends / Causality Time Series ● Useful for showing trends, patterns and relationships ● Use colour, symbols and labels to add more information Period-On-Period ● Can be added to other charts / tables ● Quantify a relative difference ● Can also be used for variance (e.g. target vs actual) Combo Charts ● When measuring multiple measures and dimensions ● Combine lines, bars, values, symbols and colours
  64. 64. Dealing With BIG Data
  65. 65. Combine Contribution, Relationships & Trends
  66. 66. Sort Dimensions By Volume to Avoid Long Tail Data
  67. 67. Combine Multiple Charts To Maximise Screen Real Estate
  68. 68. Most importantly: think about what questions can be answered, then focus on how
  69. 69. Showing: Contribution Showing: Relationships Showing: Trends
  70. 70. Purposes of visualisation Different motivations we have for showing users visualisations 5
  71. 71. Visualisations Can Persuade ◉ Visualisations designed to persuade have a point of view ◉ The purpose is not exploration but exposition ◉ They can be used to manipulate and deceive, or inform and enlighten
  72. 72. “A man convinced against his will, is of the same opinion still - Dale Carnegie
  73. 73. “It is difficult to get a man to understand something, when his salary depends on his not understanding it - Upton Sinclair
  74. 74. ◉ There are times when visualisations can help identify work to be done ◉ This could be identifying clients to call, plans to review, items to exclude, tools to use, and more ◉ These often focus on the detail rather than the overview Functional / Operational Information
  75. 75. ◉ Up/downward trends can start, exceptions can pop up, poor/high performers can shift ◉ A visualisation can serve as a tool to alert people to a change or show indicators of new trends ◉ Being able to spot a (possibly unknown) indicator amongst the noise of data is important Showing Indicators and Alerts
  76. 76. ◉ Visualisations can also be used for analysis ◉ Is it guided or free form analysis? Does it go down to line-item details, or aggregate over time? ◉ Do the users know what they will be looking for before they start the analysis? How data literate are they? Performing Strategic Analysis
  77. 77. ◉ Understand why the visualisation exists ◉ Persuasion, Operation, Indication, Analysis ◉ Understand what questions it will answer ◉ What can be done with the right answer? ◉ Understand the limitations of human perception ◉ What preattentive properties can help find an answer? ◉ Choose a chart suitable for representing the answer ◉ Contribution, Relationship, Trend, or some combination? Right Charts for the Right Question for the Right Purpose
  78. 78. Reports & dashboards How to make reports and dashboards both useful and usable 6
  79. 79. Your End-Users’ Technical Literacy ◉ Building a dashboard or report for a data scientist will be different to making one for customer facing retail staff ◉ If our visualisations are being put together to convince anyone and everyone we have to assume even less aptitude ◉ Even if you know your end users don’t assume their technical literacy
  80. 80. “If something is “usable” it means that: a person of average ability and experience can figure out how to use [it] to accomplish something without it being more trouble than it’s worth - “Don’t Make Me Think” by Steve Krug
  81. 81. Reports vs Dashboards: Outline ◉ Both reports and dashboards can be dynamic and interactive, allowing users to perform guided analysis ◉ Reports provide very specific information needed to achieve a tangible goal ◉ Dashboards provide a summary of key information that can lead to further investigation and analysis
  82. 82. Reports vs Dashboards: Comparison Reports ◉ Tell specific users things that they need to do ◉ Should be designed to be easily actionable ◉ Only provide summaries or high-level information if it’s necessary for context Dashboards ◉ Show specific users things they need to know ◉ Highlight concerning trends, outliers and exceptions ◉ Make sure there is a way to access more detail
  83. 83. Your report Reports vs Dashboards: Wireframes Your dashboard List of things that need your attention Yesterday’s stats Summary Trends Things to worry about These should be green
  84. 84. Tasks ◉ When designing a report/dashboard we know who our users are, we know what questions we can answer and we know what useful things they can do with answers ◉ Our goal is to make an interface that allows them to complete a task that leads to something useful
  85. 85. Tasks & Attention Switching ◉ Possible types of task switching interactions: ◉ shift our gaze to a different part of the screen, scroll to reveal more information, and click/tap on an action item ◉ These interactions require us to switch our attention ◉ The design should aim to minimise attention switching, generally in this order: ◉ Shift gaze over scrolling, scrolling over clicking/tapping
  86. 86. But I thought users don’t scroll? Isn’t scrolling the work of the devil? If users didn’t scroll then every news site would have to write articles that fit on a single mobile screen
  87. 87. Things aren’t always black and white Sometimes making the user perform an action could be better than making them scroll or shift their gaze (especially if they have to scroll a lot or look across lot’s of pixels)
  88. 88. Guided Analytics: Click vs Scroll ◉ During guided analytics we have the user specify parameters which we use to build a report/dashboard ◉ When the user specifies some criteria it’s often unlikely they need to see/change that criteria again ◉ So we can make the user click through or expand/collapse steps in the guide - better utilising screen real estate
  89. 89. (1) Remember: We can only focus our attention on one thing at a time
  90. 90. (2) Remember: Our short term memory only has limited capacity
  91. 91. (3) Remember:
  92. 92. (4) Remember:Spatial PositionMovementFormColour
  93. 93. You Can Combine Dashboards and Reports Your report Your dashboard Summary Trends These should be greenList of things that need your attention Yesterday’s stats Put the detailed report below the fold Your dashboard Summary Trends Things to worry about 8 things require your attention These should be green View report > You can also put it in a new page
  94. 94. Filters With High Dimensionality ◉ When data has high dimensionality there are many possible filters that can be added ◉ It should be possible to add any dimensional filter somehow ◉ But for any single task there should be a set of core filters necessary to achieve a goal - make these prominent
  95. 95. Preference Configuration Over Filtering ◉ With complex dimensionality the users need to be really familiar with the data to filter properly ◉ But they can be guided through configuration instead ◉ If they are asked about who they are and what they want then logical filters can be set for them
  96. 96. Do not assume that users will be capable of filtering data on their own
  97. 97. Feedback, State & Options Feedback When users perform an action (open a dashboard, apply a filter, etc.) they will want to know: ◉ Did my action work? ◉ What was the result? ◉ What does this mean for me? State We only have limited short term memory and are easily distracted, so users need to know: ◉ Where am I? ◉ What have I done? ◉ What is the current state of the system? Options Our goal is to help users perform useful actions, so at any stage of interaction users need to know: ◉ What can I do? ◉ What should I do? ◉ Where can I find out about things that interest me?
  98. 98. Everyone is in it for themselves Put yourself in the user’s shoes and ask yourself “What will this do for me?”
  99. 99. How Do Users Work Out Where To Go? ◉ If there is a lot of data, it’s also likely you will have a lot of dashboards and reports ◉ How will people find the right place to go? ◉ Preference personalisation and automation ◉ Don’t try to put everything on one screen
  100. 100. Users will not read the text you put on the page. They might skim. But they definitely will not read the text
  101. 101. A Quick Recap of Dashboards & Reports Reports Reports provide tangible actions for users. Those actions may need a high-level summary but only if it helps achieve their goal. Don’t assume technical literacy Don’t assume users... ◉ Know how to filter ◉ Know what filters to apply ◉ Know where to go ◉ Know where to click ◉ Will read the screen Feedback, state & options Make sure users get feedback on their actions, can see the active state and know their options. Dashboards Tell users things that they need to know. They provide a high level summary and should let users drill into detail if they need to. Everyone’s in it for themselves Put yourself into your user’s shoes. Think about what they want to achieve. Think about their personal motivations. Simplify filtering Guide users through setting up a configuration that’s useful to them rather than making them select filters they might not understand.
  102. 102. Design considerations How the visual design impacts usability 7
  103. 103. Visual Design Impacts Usability ◉ Your choice of colour, alignment, layout and spacing has an impact on the usability of your reports & dashboards ◉ Good design aids the user in making comparison, selecting options, and understanding what the app is doing ◉ Bad design decisions lead to confusion, frustration, and an overall decline in the user experience
  104. 104. Easy Comparison: Colour Using consistent colours aids easy comparison Colour is a preattentive property and grouping method Even if charts are not close to each other people see series as related if they share colour
  105. 105. Easy Comparison: Proximity & Alignment When two charts are close to each other and aligned, it’s easy to compare across one axis For example, it’s easier to see the relationship between the blue and green lines when they are on top of each other. Why? (Note how the eye has to dart back and forth in the lower version)
  106. 106. Easy Comparison: Reduce Design Noise Extra design elements like gridlines cause visual noise that makes comparisons difficult Notice how much easier it is to focus and make a comparison without the gridlines
  107. 107. Visual Hierarchy: Grabbing Attention Design a visual hierarchy that follows reading patterns But a prominent design element can break a visual hierarchy Your dashboard Your dashboard Smaller heading Smaller heading Small heading
  108. 108. Visual Hierarchy: Groupings Borders, backgrounds, proximity, alignment & colour schemes all impact visual groupings Too much grouping fighting for our attention has no hierarchy The eye has no logical order to focus on things (one at a time) Your dashboard
  109. 109. Visual Hierarchy: Number of Options When you present users all their options at once it makes it hard to find where they want to go You can group options and then nest them, now at each step users have to read fewer options Doesn’t have to be buttons but also well named & distinct headings Your Options Your Options Your Next Options
  110. 110. Regions, Groupings & Tabs When creating tabs it’s easiest to see which tab is selected if it “joins” to the content, thereby sharing a common region The other possible tabs should be made to look clickable by following the design pattern of buttons Keep things consistent Your tabs
  111. 111. Show State With Multiple Indicators Some visual indicators can be easily missed by some people If there are only two possible states it can be particularly confusing Use multiple visual indicators to make it obvious what is happening No active filters • 5 active filters Filter region ✓ North ✓ South ✓ East ✓ West Intervals • Days • Weeks • Months • Years
  112. 112. Types of Drill-down and Splitting ◉ We often allow users to filter and/or drill down into data ◉ Clicking (to filter or drill down) ◉ Pop-ups / modals (for access to configuration, e.g. all filters) ◉ Tooltips (for detailed information on hover) ◉ Menus and options (e.g. dropdowns for cyclic dimensions) ◉ We also provide the ability to view data in different ways ◉ Navigation (for accessing different dashboards) ◉ Tabs (for accessing different data in the same dashboard) ◉ Toggles (for changing what’s being displayed on a dashboard)
  113. 113. What Matters is What the User Sees ◉ Users do not care about back-end configuration ◉ If it looks like a tabs, then users think of it as tabs ◉ The same for navigation, dropdowns, modals and toggles ◉ Filtering, drill down and splitting can be done by: ◉ Use case or role (e.g. manager vs salesperson) ◉ Measure (e.g. unique visitors vs impressions) ◉ Dimension (e.g. state vs city) ◉ The interaction needs to be designed so that it’s obvious what it does and why it’s needed
  114. 114. A Quick Recap of Design Considerations Your Options Your Next Options • 5 active filters • Days • Weeks • Months • Years
  115. 115. Recap The road so far 8
  116. 116. Human Perception Considerations Spatial PositionMovementFormColour
  117. 117. A Quick Recap of How We Process Vision Methods of grouping There are many ways that humans intuitively group information. Consider the colour groupings on this slide. Reading vs Perceiving We can perceive certain aspects of our vision much faster than we can read the same information. But reading is needed for detail. Conscious attention We can only direct our conscious attention to one thing at a time. We are aware of other things but can only pay attention to one. Power of “Common Region” Visual elements that share a “Common Region” are more likely to be seen as grouped - even if they lack other commonalities. Preattentive Properties Of the four preattentive properties we can perceive without conscious attention, the strongest is our perception of spatial position Short Term Memory: 7 +/- 2 We have to learn associations gradually. In our short term memory we can only keep track of 7 +/- 2 of these associations.
  118. 118. UI Considerations Does clicking the “X” in this pop-up apply the changes? Some page title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at massa vel diam eleifend porta quis et nulla. Fusce ultrices dui nulla, vitae imperdiet nunc viverra sit amet. Duis sagittis pharetra sapien ut vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Make changes x + + New + Open new tab What would clicking each of these buttons do?
  119. 119. A Quick Recap of Learnable Interfaces Recall vs Recognition The process of recall is remembering details from a concept, while recognition is remembering concept from detail. Predictable design Users should be able to predict what an action will do without having to experiment with trial and error. Discoverability Make sure that everything in the app is easily discoverable. If it can’t be discovered it can’t be learned. Design for recognition Recall is harder for humans and requires more training. We should design UIs so that people can quickly recognise what to do. Consistent design If users not only have to learn our app but also learn the quirks of each screen they will be much more frustrated at the experience. Be conventional Design conventions allow users to quickly recognise what something does based on past experience. Don’t defy convention for no reason.
  120. 120. What questions can we answer with this information? What useful things can we do with the right answers?
  121. 121. A Quick Recap of Asking the Right Questions Data Information Understanding Questions Answers Useful Actions Inform ation Data Understanding Design a way to get the right answer Identify what questions we can answer Review use cases with end-users Answers are for tangible actions Users
  122. 122. Showing: Contribution Showing: Relationships Showing: Trends
  123. 123. Best Ways to Show Contribution / Comparison Stacked Bar Chart Use when: ● Ratios are important ● There are relatively few contributors ● It’s suitable to aggregate the long tail Bar Chart Use when: ● Ratios less important ● There is more data ● More long tail is necessary (aggregate still possible) Table Use when: ● There is a lot of data ● The long tail matters ● End users need details
  124. 124. Best Ways to Show Relationships / Exceptions Scatter Plot Use when: ● There is no time series (e.g. demographics) ● Aiming to show relationship between measures Stacked Line Chart Use when: ● Showing correlation over time ● Individual dimensions don’t matter as much Highlighting Use when: ● Trying to show relationships / exceptions in another type of visualisation
  125. 125. Best Ways to Show Tends / Causality Time Series ● Useful for showing trends, patterns and relationships ● Use colour, symbols and labels to add more information Period-On-Period ● Can be added to other charts / tables ● Quantify a relative difference ● Can also be used for variance (e.g. target vs actual) Combo Charts ● When measuring multiple measures and dimensions ● Combine lines, bars, values, symbols and colours
  126. 126. Combine Contribution, Relationships & Trends
  127. 127. Sort Dimensions By Volume to Avoid Long Tail Data
  128. 128. Combine Multiple Charts To Maximise Screen Real Estate
  129. 129. Most importantly: think about what questions can be answered, then focus on how
  130. 130. ◉ Understand why the visualisation exists ◉ Persuasion, Operation, Indication, Analysis ◉ Understand what questions it will answer ◉ What can be done with the right answer? ◉ Understand the limitations of human perception ◉ What preattentive properties can help find an answer? ◉ Choose a chart suitable for representing the answer ◉ Contribution, Relationship, Trend, or some combination? Right Charts for the Right Question for the Right Purpose
  131. 131. Combining Dashboards & Reports Your report Your dashboard Summary Trends These should be greenList of things that need your attention Yesterday’s stats Put the detailed report below the fold Your dashboard Summary Trends Things to worry about 8 things require your attention These should be green View report > You can also put it on a new page
  132. 132. A Quick Recap of Dashboards & Reports Reports Reports provide tangible actions for users. Those actions may involve a summary but only if it helps achieve their goal. Don’t assume technical literacy Don’t assume users... ◉ Know how to filter ◉ Know what filters to apply ◉ Know where to go ◉ Know where to click ◉ Will read the screen Feedback, state & options Make sure users get feedback on their actions, can see the active state and know their options. Dashboards Tell users things that they need to know. They provide a high level summary and should let users drill into detail if they need to. Everyone’s in it for themselves Put yourself into your user’s shoes. Think about what they want to achieve. Think about their personal motivations. Simplify filtering Guide users through setting up a configuration that’s useful to them rather than making them select filters they might not understand.
  133. 133. Visual Design Impacts Usability ◉ Your choice of colour, alignment, layout and spacing has an impact on the usability of your reports & dashboards ◉ Good design aids the user in making comparison, selecting options, and understanding what the app is doing ◉ Bad design decisions lead to confusion, frustration, and an overall decline in the user experience
  134. 134. What Matters is What the User Sees ◉ Users do not care about back-end configuration ◉ If it looks like a tabs, then users think of it as tabs ◉ The same for navigation, dropdowns, modals and toggles ◉ Filtering, drill down and splitting can be done by: ◉ Use case (e.g. find best vs worst performers) ◉ Role (e.g. manager vs salesperson) ◉ Measure (e.g. unique visitors vs impressions) ◉ Dimension (e.g. state vs city) ◉ The interaction needs to be designed so that it’s obvious what it does and why it’s needed
  135. 135. A Quick Recap of Design Considerations Your Options Your Next Options • 5 active filters • Days • Weeks • Months • Years
  136. 136. Key Takeaways ◉ Remember we are designing for our users ◉ We have preattentive ways to perceive and group visuals ◉ Consider constraints on our ability to recognise and recall ◉ Think about the purpose of our visualisations ◉ What problem do we solve or need do we fulfill? ◉ What kind of pattern are we trying to show? ◉ Contribution, Relationship, and/or Trend? ◉ Don’t assume technical literacy about our users ◉ Think about the purpose of a report or dashboard ◉ Apply good design principles to improve usability
  137. 137. Inform ation Data Understanding Design a way to get the right answer Identify what questions we can answer Review use cases with end-users Answers are for tangible actions Users
  138. 138. THANKS! Any questions? You can find me at t: @rickdzekman w: www.rickdzekman.com

×