Usable Information Visualizations & Dashboards

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 visualisations

6. Reports & dashboards

7. Design considerations

8. Recap

How we process visionThe nuances of human visual perception 1

Visual Grouping

1 Group12 circles

2 Groups6 circles, 6 squares

3 Groups1 red, 1 orange, 1 blue

4 Groups4 boxes

Visual Grouping Hierarchy

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

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

https://en.wikipedia.org/wiki/Gestalt_psychology

Preattentive

Reading vs Perceiving

Which month had the best sales?Is it easier to answer this question with the table or the chart?

Jan 51.704Feb 72.359Mar 753.81Apr 258.764May 649.078Jun 230.248Jul 722.377Aug 44.168

Reading Tables

It’s easier if the table is sorted by size with the same number of decimal points for each number

Mar 753.810Jul 722.377May 649.078Apr 258.764Jun 230.248Feb 72.359Jan 51.704Aug 44.168

But this table is less effective as it loses chronology

◉ 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

Preattentive Visual Properties

These are properties we can perceive without directing our conscious attention to them:

Spatial PositionMovementFormColour

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

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 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?

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.


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.

Learnable InterfacesOn 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 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.

Recall vs Recognition

RecallTo 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”?

RecognitionOn 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”?

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.

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?

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.

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.

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

A Quick Recap of Learnable Interfaces


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.

Asking the Right QuestionsAvoiding data for the sake of data 3

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

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!

What questions can we answer with this information?

What useful things can we do with the right answers?

Consider This Table

3 Measuresx 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 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

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 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?

What Could We Do With The Answers?

◉ Award bonuses◉ Split or aggregate territories◉ Increase / decrease advertising◉ Continue / discontinue support of products by region

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 this question themselves?

Could it even be answered using our previous table?

For Example...

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!

A Quick Recap of Asking the Right Questions

Data Information Understanding

Questions Answers Useful Actions

Informatio

nData

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

Choosing the right chartApplying 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 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

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?

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

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.

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

Tables: Lot’s of Contribution, Lot’s of DetailCountry

Electricity - exports (million kWh)

France 73,400Germany 66,810Canada 57,970Paraguay 46,120Switzerland 34,570Sweden 31,280Czech Republic 27,450Norway 22,170Austria 20,460Spain 19,590Russia 19,140China 18,670South Africa 15,040Netherlands 15,020Slovakia 13,080Poland 12,640Bulgaria 12,110Uzbekistan 12,090United States 12,000Denmark 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

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 another method then

use it... but this is unlikely to be true with a pie chart

Best Ways to Show Contribution / Comparison

Stacked Bar ChartUse when:● Ratios are important● There are relatively

few contributors● It’s suitable to

aggregate the long tail

Bar ChartUse when:● Ratios less

important● There is more data● More long tail is

necessary (aggregate still possible)

TableUse when:● There is a lot of data● The long tail matters● End users need

details

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?

Utility of aScatter Plot

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?

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?

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

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

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)

Best Ways to Show Relationships / Exceptions

Scatter PlotUse when:● There is no time

series (e.g. demographics)

● Aiming to show relationship between measures

Stacked Line ChartUse when:● Showing correlation

over time● Individual

dimensions don’t matter as much

HighlightingUse when:● Trying to show

relationships / exceptions in another type of visualisation

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?

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)

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)

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

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 visualisationDifferent 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 but exposition

◉ They can be used to manipulate and deceive,or inform and enlighten

“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 to review, items to exclude, tools to use, and more

◉ These often focus on the detail rather than the overview

Functional / Operational Information

◉ 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

◉ 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

◉ 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

Reports & dashboardsHow 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 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

“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

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

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

Your report

Reports vs Dashboards: Wireframes

Your dashboardList of things that need your attention

Yesterday’s stats Summary Trends

Things to worry about These should be green

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

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

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

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)

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

(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 dashboardSummary Trends

These should be greenList of things that need your attention

Yesterday’s stats

Put the detailed report below the fold


Things to worry about

8 things require your attention

These should be green

View report >

You can also put it in a new page

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

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

Do not assume that users will be capable of filtering data on their own

Feedback, State & Options

FeedbackWhen 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?

StateWe 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?

OptionsOur 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?

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 reports

◉ How will people find the right place to go?

◉ Preference personalisation and automation

◉ Don’t try to put everything on one screen

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-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.

Design considerationsHow 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 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

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

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)

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

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 dashboardSmaller heading

Smaller heading

Small heading

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

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

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 buttonsKeep things consistent

Your tabs

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

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)

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

A Quick Recap of Design Considerations

Your Options

Your Next Options

• 5 active filters


RecapThe 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. Consider the colour groupings on this slide.


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.

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?

A Quick Recap of Learnable Interfaces


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.

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

Informatio

nData

Understanding



can answer



Users

Showing: Contribution

Showing: Relationships

Showing: Trends

Best Ways to Show Contribution / Comparison

Stacked Bar ChartUse when:● Ratios are important● There are relatively

few contributors● It’s suitable to

aggregate the long tail

Bar ChartUse when:● Ratios less

important● There is more data● More long tail is

necessary (aggregate still possible)

TableUse when:● There is a lot of data● The long tail matters● End users need

details

Best Ways to Show Relationships / Exceptions

Scatter PlotUse when:● There is no time

series (e.g. demographics)

● Aiming to show relationship between measures

Stacked Line ChartUse when:● Showing correlation

over time● Individual

dimensions don’t matter as much

HighlightingUse when:● Trying to show

relationships / exceptions in another type of visualisation

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

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 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

Combining Dashboards & Reports

Your report


These should be greenList of things that need your attention

Yesterday’s stats

Put the detailed report below the fold


Things to worry about

8 things require your attention

These should be green

View report >

You can also put it on a new page

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.

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

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

A Quick Recap of Design Considerations

Your Options

Your Next Options

• 5 active filters


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

Informatio

nData

Understanding



can answer



Users

THANKS!Any questions?

You can find me att: @rickdzekman

w: www.rickdzekman.com

Data & Analytics

Usable Information Visualizations & Dashboards