Professional Documents
Culture Documents
Designing Dashboards
That Yield Insights
FusionCharts
The No-Blink Guide To
Designing Dashboards
That Yield Insights
by FusionCharts
FusionCharts
Chapter Four: Create 47
Embrace curiosity 49
Clean up inessentials 49
About FusionCharts 57
References 58
FusionCharts
CH 01
Understand
Whether you’re making recruitment plans for the next quarter or analyzing
revenues to decide if the product is viable in the long run, the right data will
increase your chances of success.
The figures agree – global pharmaceutical company Pfizer used the power of
data to cut down decision-making time from weeks or even months to hours
at about 1/10 of the cost.
CH 01 / Understand 07
With the stakes, this high, businesses are investing heavily in ideas that take
raw data and transform them into actionable insights. Information
dashboards work by black boxing critical data, taking what’s relevant and
offering a systematic overview customized according to the user’s needs.
- Adele Simor
Customer Marketing & Advocacy
Manager at Geckoboard
In case of an ‘event’ (positive or negative) the user can drill down to the
factors and circumstances around it. If positive, say a surge in sales, she can
then effectively replicate and recreate the scenario. If negative – like high
attrition in HR – she can take measures to prevent the event from recurring.
CH 01 / Understand 09
attrition in HR – she can take measures to prevent the event from recurring.
Creating reports from a dashboard can be as simple as adding the right data
filters, drilling down to the required layer(s) and taking a static image grab or
hard-copy print of what we see. More robust tools offer separate report
generation capabilities that remove dependencies on IT teams.
U nlike text, the visual language is more intrinsic, and a lot subtler – we’re
trained in using the eye to comprehend the world around us since the very
day we’re born, and these rules cut across geographies, ages, and commercial
markets.
Rationality defines the human mind; as a result, the user will try and assign
meaning to every element they see. In case the difference in color is simply
ornamental rather than indicative, she could end up building a false narrative
around the same.
The more data you show, the more probable it is that the user will blend it all
into one large aggregate – diluting focus and impact.
Simply put, we can only see a few things at once, and data should be selective
and segmented to boost understanding.
And underneath all this, lies a bedrock of visual conventions and metaphors,
like red suggests warning signs, or that time moves from le! to the right.
The next chapter delves deeper into this aspect of visualization, and the
psychological principles driving our perception of surroundings.
Define
Tailoring visualization to
analytics
CH 02 / Define 15
F irst, let’s get a popular myth out of the way. Many believe that creating a
dashboard is a complicated, confusing process, but it needn’t be. Even the
most complex information dashboards are inspired by a single idea, a simple
point of origin – what is the user trying to achieve?
Is the user trying to just monitor Key Performance Indicators (KPIs) across
the organization over an indefinite period?
Based on answers to above questions, you define your dashboard and plan
the design. Great design is essential for successful dashboard projects
because unless the interface is smart, intuitive, and user- friendly, the data
becomes incomprehensible and the insights - lost.
CH 02 / Define 16
Data is the new oil of the 21st century, and like oil, it’s next to useless unless
filtered, refined, and packaged perfectly. The following 3 parameter helps
you take business data, and translate them into a consumable ‘information
gallery’.
Based on the user persona and her functional role, dashboards can be broadly
classified into three types:
Operational Dashboards
Used primarily by department heads, functional leaders, and the like, these
interfaces are marked by their hyper real-time changeability. Basically, they tell
the user what’s happening right now and allow managers to maintain
These are viewed multiple times a day, o!en mapping progress towards a
target, and must be data heavy while showing all changes.
Analytical dashboards
These are used mainly by data scientists and BI professionals, users with high
levels of technical proficiency who also demand deep drill-down capabilities.
Unlike the other two types, insights are o!en embedded beneath several
visualization stacks.
Large volumes of data are scanned to investigate trends and predict outcomes –
that’s why the data needs to be accurate and up to date, though not at the same
Begin
frequency as operational dashboards. In fact, given By Askingupdates
the volume, The Right Questions
must be
planned and periodic.
CH 02 / Define 18
Large volumes of data are scanned to investigate trends and predict outcomes
– that’s why the data needs to be accurate and up to date, though not at the
same frequency as operational dashboards. In fact, given the volume, updates
must be planned and periodic.
Strategic dashboards
These depend the most on visuals and offer a top-down view of important KPIs.
Strategic dashboards are typically geared for upper management and C-level
executives. They could even be built on department-specific operational
dashboards, drawing relevant data to create a performance snapshot.
Once the user persona is identified, the metrics required also start becoming
clear.
Any business will generate huge amounts of data in several fields and
verticals – for HR; this could mean employee satisfaction scores, number of
new hires in a month, and so on. For admin, on the other hand, it’d include
parameters like third-party provider details and pantry expenses.
When you phrase the question as ‘X will use the dashboard for Y,’ it becomes
simpler to zero-in on the metrics required.
Let’s carry on with the HR example – if the HR Lead is using the dashboard to
reduce attrition, then your dashboard should include historical attrition data,
employee satisfaction scores, top complaints in the workplace, leadership
details, and information in this area. New hires, in that case, would not be
relevant.
- Alejandro Perez
CEO , Komet Sales
These metrics must also be actionable. Should you highlight the top
numbers? Should the values be converted to percentage? Should you show
absolute values, or should you show the difference from the mean, or from
zero?
At these levels, the metrics become more actionable than ever before.
It’s essential to spot these data events and build your dashboard around it.
Having a two-way dialogue with users on which numbers would make their
decisions easier and then mapping secondary causes is a good start. And
once numbers begin to hit exceptional highs, terrible lows, or the targeted
‘sweet spot,’ alerts (notifications, or even visual cues) must let the user know.
You have identified the user and selected the data to be portrayed – now
comes the all-important question of how the data will be arranged. This
depends in part on your personal design aesthetic, brand design guidelines if
applicable, and the data itself.
All dashboards tell a story and the top le! corner of the layout is the starting
line. This can be used to show the most impressive number, the primary factor
influencing the insight, or even a piece of text that ties all the metrics together.
The eye moves in le!-right/top-bottom directions – a truly glanceable
dashboard will factor this in while arranging the panels.
Similarity
Continuation
Closure
Proximity
- Adele Simor
Customer Marketing & Advocacy Manager
Geckoboard
A!er defining the dashboard requirements, and planning the project, all
stakeholders must be clear on its real value proposition. A dashboard for
monitoring employee productivity at a manufacturing unit, for example, isn’t
tailored for revenue analysis and has a very different value proposition.
Act as an interface used across the company for interacting with data
Put yourself in the end user’s shoes so you can build it for them.
I’m totally open to evolving the dashboards so they show more
of what people want to see’’
- Alexandra Mangold
Senior Director of Business Operations & Analytics
at Drone-as-a-Service company, Measure
The data vs. visuals war is subjective; however, a good dashboard must
always encourage and facilitate easy analysis.
Here are the 4 broad steps that comprise the data to insight flowchart:
CH 02 / Define 28
Note that the user is responsible for most of these moves, with the
technology working only as an enabler. As a result, dashboards need to be
equipped with a complete set of manipulation tools to support visualizations,
and graphical elements must hinge on the data it represents. This could
involve some difficult questions:
Does the user have to know coding to get the most out of your dashboard?
Are you using graphs and diagrams, when a simple table would suffice?
Can the user trust what she sees to be a faithful and accurate depiction of reality?
Each answer will add a little more work to your dashboard project, and take
the final result a little closer to perfection.
Ideate
F rom the layman's vantage point, the dashboard is not a collection of huge
data streams – at first glance, it’s not even a dynamic display of constantly
changing metrics.
As users spend more time using the dashboard, their perspective evolves.
Summary View
Multi-dimensional view
Summarized view
You could also call this a visual summary – entirely focused on performance
metrics, it has all the bells and whistles needed to keep the user’s eye on the
ball.
This is the face of your dashboard that experiences heavy usage and frequent
interactions – it’s important to keep the UX smooth and glitch-free.
Multi-dimensional view:
Revealing all the data behind the output, this layer has filters, navigation
features, drill-down capabilities, and more.
Detailed view:
Less a dashboard and more a reporting platform, this lets users directly
connect with the data source. Information appears in the form of intricate
tables and records – covering numbers-heavy aspects, like transactions,
invoices, attendance, and the like.
The USP of this layer is that it’s o"en the only way to locate the cause of a
problem, so minute that regular visualizations struggle to flag it.
The user can then print or save the final report or query outcome, usually
displayed in a new window for clarity.
Keep these three layers – and the three approaches that go with it – in mind,
when conceptualizing your dashboard. The end product will be one that not
only meets staple requirements but goes one step further to really wow the
user.
Now is that time when you assign each element a visual identity, and there
are several ways to go about it. Here are a few best practices to help you get
started:
Showing comparisons
Columns and bars might be old-school, but are generally recommended for
comparative dashboards, especially when plotting one measure. For
multiple measures, like plotting department-wise revenues on a year-on-
year basis, consider line charts.
CH 03 / Ideate 37
VARIABLE WIDTH
TWO VARIABLES PER ITEM
CHART
EMBEDED CHART
TABLE WITH
AMONG ITEMS MANY CATEGORIES
HORIZONTAL
BAR CHART
ONE VARIABLE
PER ITEM
FEW
CATEGORIES
BAR VERTICAL
CHART
COMPARISONS
AREA CHART
CIRCULAR
CYCLICAL
DATA
MANY
PERIODS
LINE CHART
NON CYCLICAL
DATA
OVER TIME
VERTICAL BAR
SINGLE
CHART
OR FEW
CATEGORIES
FEW PERIODS
LINE CHART
MANY
CATEGORIES
Line charts are simple and easy on the eye – using just one shape and relying
only on color variations minimizes the cognitive overload and makes it easier
to spot upticks/downswings.
And with enough space, you could even add gridlines to the mix.
Showing compositions
Pie charts are the go-to option for all things composition – but it isn’t always
the best choice. If the whole comprises over five elements, or if the
composition numbers are on the lines of 37%, 32%, and 31%, the real data
could get lost in translation.
Here, you could use a stacked bar chart instead. Even with five different
components, this makes excellent use of space and helps the user spot vital
elements of the whole.
Another interesting, but less used option is the waterfall chart – this smartly
shows how an increase or decrease in value, contributed to the total amount.
Change in Initial Value by a series of Intermediate Values, leading to a Final Value (Waterfall Chart without data values)
Here, a pain point is that the human eye automatically assumes that the top
limit shows the final value. The downward or ‘waterfall’-like movement of the
columns might not immediately register. That's why showing data values in a
waterfall chart is a must-have.
Change in Initial Value by a series of Intermediate Values, leading to a Final Value (Waterfall Chart with data values)
Pie Chart
Simple share
of total
Waterfall Chart
Accumulaton
Static
or substraction
of total
Subcomponents
Bar Chart with
Stacked 100%
Components of
components
Tree Map
Accumulation
to total &
COMPOSITIONS absolute diff.
matters
Stacked 100%
Bar Chart
Only relative
differences
matter
Bar Chart
Stacked
Relative &
absolute
differences
Changing over matter
time
Stacked area
100% Chart
Only relative
differences
matter
Many
Stacked area
periods
Relative &
Chart
absolute
differences
matter
Showing distributions
You could also show Netflix viewers segmented by gender and distributed by
age group – a slightly more complex, but still a possible ask or distribution of
IMDB ratings plotted against the number of ratings for TV show or movies.
Two
Bar Histogram
Variables
Line Histogram
DISTRIBUTIONS
Few Data
points
Single
Variable
Scatter plot
Many Data
points
Showing relationships
What these charts do, then, is that they combine many relationships to provide
an overarching data. So expectedly, a blend of multiple chart types is o!en
deployed – take a cartogram, for example. It superimposes bubble charts on
traditional maps, to create a visualization that shows geographic distribution
as well as volume compositions.
On the other hand, scatter charts could also help highlight the absence of any
relationship at all.
What’s needed is to take a broad, unbiased approach, and try and test until you
arrive at a visualization that adds clarity to the data that’s already there.
Chart selection has got the industry polarized – on one hand, are theorists, BI
experts, and domain veterans who believe a one-size-fits-all approach spells
Two
variables
Scatter Plot
RELATIONSHIPS
Scatter Plot
Bubble Size
Three or
more variables
disaster for information dashboards. On the other hand, those new to the
visualization game o!en have little to go on, in a terrain that’s rapidly evolving.
I sit down with people so they can let me know what metrics
they want on their dashboard and how they want it presented.
This allows the new users to focus on getting the data they want
onto their very first dashboard without having to worry about
the practicalities.’
- Perez
Komet Sales CEO
Create
Embrace curiosity
Clean up inessentials
1 Embrace Curosity: Identifying the need to become data-driven is step #1, and this is
not a simple assumption. In this phase, all gaps in existing data
need to be located, relevant sources are determined, and you
bring it all together into an initial data dump'. The guiding
principle, In this case, is curiosity - you are exploring available
resources for more.
2 Play with Data: The first - and mostly rough - dra! has been created. This
dashboard will see several iterations but offers an excellent
platform for dry runs, beta users, and anyone who might assist in
ironing out the chinks. The precise tools required for optimum
performance hasn't yet been identified, and the stage involved
more play than work.
Add some Now the dashboard (v2) is shared with a larger audience, which
3
necessary Clutter: might include colleagues and select members of the
organization. Their inputs are incorporated into the dashboard,
ensuring the tool fulfills end-user expectations. It is at this stage
that the most important metrics begin to emerge, beyond on-
paper discussions.
4 Clean up essentials: A highly collaborative stage, conversations with peers, users, and
stakeholders can help trim down the elements that's been
assembled till this point. The product - version #4 - should be
simple, problem-specific, objective, and ripe for insight
generation.
5 Focus on the outcome: Add the final set of features and plug-ins that helps maxmize the
data in place. With real business goals in place and accurate
demarcation of user groups, this stage helps narrow down
applications, and ensures your information dashboard isn't
generic. The output - information dashboard v5 - is user-driven
and geared for real-world decision making.
Showcase
A truly effective dashboard will not try to tick all the boxes but will know
exactly which boxes to tick.
Highlights at a glance
The first things that catches the user’s eye are the 5 metrics on top – the top 5
spenders in the most recent year.
This can offer some interesting insights, like the US, arguably the most
developed nation in the world, sits side by side with Monaco and Norway –
smaller and economically less robust regions.
An overarching element like this can quickly give the user a broad picture of
what the data means. Now, for instance, the user could deep-dive into African
and Asian countries in a bid to uncover spend patterns there. Or the user might
attempt to discover trace how Europe’s focus on healthcare spend has
evolved.
On the visual side of things, the dashboard keeps it pretty simple – no colors
have been used, and the numbers are highlighted instead of the country
names, clearly directing the eye.
Note the use of closure – each amount is followed by a separating line that
helps establish difference.
The dashboard comes with four simple parameters on the le": one measure*
(the first question which determines which values to depict), two dimensions*
(region and time), and one hierarchy (country).
The user knows exactly what to do to view the dataset she requires. Want to
know where US citizens’ personal health care spend stands, as compared to
the US governments?
Having the right filters makes such analyses easy, even for lay users.
2500
2000
29th Jan
value: 1836
1500
1000
500
9Jan 12Jan 15Jan 18Jan 21Jan 24Jan 27Jan 30Jan 2Feb 5Feb 8Feb 11Feb 14Feb
For dashboards condensing reams of data into digestible chunks, it’s crucial
that markers and separators are not lost. This means, aggregated insights
over 2 or 3 years shouldn’t meld into a single time unit – without each year
shown individually, you run the risk of users overlooking the distinction.
On the other hand, if you were to have a ticker for each year, the Y axis would
be severely cluttered.
Tooltips appear when the user hovers on a point on the line chart indicated
by circles, and shows the region name, country, and the values according to
the first parameter on the chart.
Gridlines are even more crucial for line charts, as there are no horizontal
markers across the image (for bars and columns, the rectangular shape itself
markers across the image (for bars and columns, the rectangular shape itself
suffices). The chances that the eye can retain the exact location of 7%, 14% or
21% as it travels from le" to right, are very slim.
You could even add vertical gridlines, but again, this could add to the noise.
The tooltips plus gridlines combination is an intelligent answer.
About FusionCharts
Learn more about how you can add delight to your products at
www.fusioncharts.com
58
References
https://www.slideshare.net/geckoboard/why-dashboards-fail
http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/gestaltprinc.htm
https://files.eric.ed.gov/fulltext/EJ1079541.pdf
https://www.fusioncharts.com/dashboards/twitter/
https://blogs.cisco.com/datacenter/data-driven-decision-making-at-pfizer-a-case-study-in-data-
virtualization
Performance Dashboards: Measuring, Monitoring, and Managing Your Business By Wayne W. Eckerson
http://www.liesdamnedlies.com/2006/09/are_dashboards_.html
https://www.fusioncharts.com/blog/10-dashboard-design-mistakes/
https://www.isixsigma.com/methodology/metrics/build-a-visual-dashboard-in-10-steps/
https://medium.com/@_dmusic/value-from-dashboards-the-real-story-921b772a8d1e
https://www.fusioncharts.com/charting-best-practices/conceptualizing-business-dashboard/
http://www.liesdamnedlies.com/2006/09/are_dashboards_.html
https://www.fusioncharts.com/blog/10-dashboard-design-mistakes/
https://www.isixsigma.com/methodology/metrics/build-a-visual-dashboard-in-10-steps/
https://medium.com/@_dmusic/value-from-dashboards-the-real-story-921b772a8d1e
https://www.fusioncharts.com/charting-best-practices/conceptualizing-business-dashboard/
http://www.aptude.com/blog/entry/defining-personas-for-business-intelligence-dashboards
https://www.kaushik.net/avinash/digital-dashboards-strategic-tactical-best-practices-tips-examples/
https://www.nextadvisor.com/blog/2017/09/22/we-signed-up-for-equifaxs-trustedid-premier-and-
heres-what-happened/
Good Charts: The HBR Guide to Making Smarter, More Persuasive Data Visualizations - by Scott Berinato
http://www.perceptualedge.com/blog/wp-content/uploads/2015/07/Abelas-Chart-Selection-
Diagram.jpg