The document provides 10 principles for effective data visualization and dashboard design on glass tables. It discusses choosing the right visualization for different types of data, using colors and fonts effectively, following principles of visual hierarchy and proximity, leveraging diagrams and flows, and using alerts and a dramatic approach when needed. It also recommends starting with paper prototypes, using simple tools like PowerPoint, and following current design trends like flat and minimalist styles.

1. © 2 0 2 0 S P L U N K I N C .
© 2 0 2 0 S P L U N K I N C .
The Top 10
Glasstable Design
Principles to Boost
Your Career and
Your Business
In order to avoid this
Stephane Estevez
Product Marketing Director EMEA, IT Markets | Splunk

2. During the course of this presentation, we may make forward‐looking statements regarding
future events or plans of the company. We caution you that such statements reflect our
current expectations and estimates based on factors currently known to us and that actual
events or results may differ materially. The forward-looking statements made in the this
presentation are being made as of the time and date of its live presentation. If reviewed after
its live presentation, it may not contain current or accurate information. We do not assume
any obligation to update any forward‐looking statements made herein.
In addition, any information about our roadmap outlines our general product direction and is
subject to change at any time without notice. It is for informational purposes only, and shall
not be incorporated into any contract or other commitment. Splunk undertakes no obligation
either to develop the features or functionalities described or to include any such feature or
functionality in a future release.
Splunk, Splunk>, Data-to-Everything, D2E, and Turn Data Into Doing are trademarks and registered trademarks of Splunk Inc. in the United States
and other countries. All other brand names, product names, or trademarks belong to their respective owners. © 2020 Splunk Inc. All rights reserved.
Forward-
Looking
Statements
© 2 0 2 0 S P L U N K I N C .

3. © 2 0 2 0 S P L U N K I N C .
TBD Product Marketing Director EMEA,
IT Markets | Splunk
Wine addict, guitar addict, product marketing addict
Stephane Estevez
Senior Sales Engineer | Splunk
xx addict, xx addict, xxxaddict
TBD

4. © 2 0 2 0 S P L U N K I N C .
Today’s Scope

5. © 2 0 2 0 S P L U N K I N C .
Deliver data and insights to every
business and IT function
Turn Data into Doing,
Everywhere in IT

6. © 2 0 2 0 S P L U N K I N C .
Turn Data into Doing, Everywhere in IT
See the Bigger Picture
with a unified experience for all of your teams across
all of your services, applications, and infrastructure.
Create Insights Across Silos
when you bring together data from every team and
tool to drive real-time visualizations of the metrics
and KPIs that matter most.
Empower Teams with Powerful Tools
that provide productive and efficient workspaces,
automation, and alerts, so your teams can deliver
the experiences customers demand.
Deliver data and insights to every business and IT function

7. © 2 0 2 0 S P L U N K I N C .
Make the Shift to Predictive IT
Find Problems Even Faster
with machine learning-powered Service Analyzer tree
to leverage the right data and determine root cause.
Solve Problems in Record Time
with Event Management to cluster events, reduce
noise, and helping the right teams focus on only what
is most important.
Predict Problems in Advance
with KPI Predictions and Predictive Cause Analysis,
trending data across services, apps, and infrastructure
so you can prevent outages before they have impact.
With Splunk ITSI, you can predict and prevent problems before they have impact

8. © 2 0 2 0 S P L U N K I N C .
Lack of design Applying basic design principles
If you want your career to take off, demonstrate that you
don’t need to be a data scientist to be effective. Embracing
data visualization and predictive analytics to communicate
imaginative business intelligence can propel your career.
—PwC
Glass Table Design Can Have the Same
Effect on Your Boss as on Phoebe.
“

9. © 2 0 2 0 S P L U N K I N C .
Data Visualization
Definition & History

10. © 2 0 2 0 S P L U N K I N C .
Data visualization is the practice of converting data
from raw figures into a graphical representation such
as maps, graphs, charts, and complex dashboards.”
Definition
“

11. © 2 0 2 0 S P L U N K I N C .
A Little Bit of History
2nd Cent CE
People start
arranging data into
tables (columns
and rows)
1160 BC
First documented data
visualization
Turin Papyrus Map
illustrates the distribution
of geological resources
and provides information
about quarrying of those
resources.
14,500 BC
First Star Map
Lascaux
painted
caves
17th Century
The idea of representing
quantitative information
graphically arise
Thank you Mr. René
Descartes, for the two-
dimensional coordinate
system for displaying
values
18th Century
Charts created
Thank you William Playfair
for exploiting the potential
of graphics for the
communication of
quantitative data.
He create a line moving up
and down from left to right
to show how values
changed through time (and
the bar and pie charts…)
©W.Playfair1786
2020+
Data Journalism,
‘Citizen Data
Scientists’…
Words meets numbers.
Complex things are
explained using simple
and engaging stories.
©Gartner

12. © 2 0 2 0 S P L U N K I N C .
Data Viz Becomes Mainstream
We are creating new
ways of converting
data into graphical
representations
Source : http://datavis.ca/milestones/

13. © 2 0 2 0 S P L U N K I N C .
How Meaningful is
Data Visualization?

14. © 2 0 2 0 S P L U N K I N C .
Human Cognition and Data Visualization
Data visualization has been created for human consumption,
so understanding human perception and cognition is key.
Human brains have a much harder time understanding
complex data when it is encoded in numbers and text
compared to graphics.
But human vision can “understand” an image in 13 ms and
process hit while the next image is displayed (source:
M.Potter-MIT).
Visually displayed (using graphs, shapes, color,
orientation…), data is easier to grasp and analyze, making it
faster for decision makers to find patterns, including new and
hidden, and to understand even difficult concepts.

15. © 2 0 2 0 S P L U N K I N C .
Time for the
Top 10 Principles

16. © 2 0 2 0 S P L U N K I N C .
Principle #1
Glass Tables & dashboards are not reports

17. © 2 0 2 0 S P L U N K I N C .
Glass Tables and Dashboards
are NOT Reports
Reports Glass Tables
Type of data As much as you can Most important data
Realtime No Yes
Presentation Detailed Consolidated
Format Static Dynamic
Allows quick action No Yes
Ease of use Complex Simple and easy
1

18. © 2 0 2 0 S P L U N K I N C .
Principle #2
Start with paper!

19. © 2 0 2 0 S P L U N K I N C .
Define your audience and understand user requirements
• What information do you need from me?
• What form do you need it in?
• What do you need or want to understand about this data?
Content
• Keep it relevant. Less really is more.
• Avoid overdesigning.
• Use iconography. Content isn’t limited to text and charts.
2 Start with Paper

20. © 2 0 2 0 S P L U N K I N C .
Principle #3
Colors and fonts matter

21. © 2 0 2 0 S P L U N K I N C .
• Stick to 1 font
• No more than 3 sizes
• Need to create visual hierarchy? Bold it or add an accent color
(if everything’s bold, nothing is)
• Use Serif fonts for body text (easier to read for longer text)
• Use sans-serif for headlines, short blocks of text
Fonts matterColors matter• Choose few and stick to them (but play with gradients)
• Leverage contrast (use the Adobe Color wheel http://color.adobe.com)
• Use color sparingly (each color serve a particular communication goal)
• Pay attention to meaning – bad kind of bad good
• Adapt colors to your audience culture
(death=black in western countries, death=white in asia)
• If using colors, make sure the background color is consistent
(make color changes more obvious)
Colors and Fonts Matter3

22. © 2 0 2 0 S P L U N K I N C .
Principle #4
Choose the right visualization for the right data

23. © 2 0 2 0 S P L U N K I N C .
Data Visualization
Not all charts are created equal.
Looking good ≠ ease of understanding.
Effective visualizations enables the audience to easily
comprehend more data in less time.
(choose the right representation of data)
4

24. © 2 0 2 0 S P L U N K I N C .
Visualizations
0
2
4
6
47%
29%
13%
11%
GaugesPie chartLine chart
/ Sparkline (condensed)
4.3
2.4
2
Bar chart
0
20
40
60
Stacked area
chart
Title 1 Title 2 Title 3
Item 1 Item 3 Item 5
Item 2 Item 4 Item 6
Tabular format
+
-
Best used when
exact quantities
of numbers must
be known
Not conducive to
finding trends
and comparing
sets of data
Best used when
trying to visualize
continuous data
over time
Best used when
showing
comparisons
between categories
or items in the
same category
Best used to
compare parts
to the whole
Makes
comparison of
pie slice size
difficult. Not
great if less than
3 or more than 6
categories
Best used for
showing
cumulated totals
over time via
numbers or
percentages
Best used to show a
range ideal when
you have an
absolute floor//
ceiling value
Takes valuable
space with
limited
information
(single
dimension)
Less effective then
line chart when
trying to show
trends over time
If consistent scales
on the axis aren’t
used, it might lead
to the data of a line
graph appearing
inaccurate.
Users yes tend
to focus on the
tops of each line,
leading to
misinterpreting
the patterns.
0
1
2
3
4
0 1 2 3
Scatter chart
Best for showing
the overall
relationship in a
large amount of
data
Limited to two
variables, they
are unable to
give the exact
extent of
correlation

25. © 2 0 2 0 S P L U N K I N C .
Visualization Tips
2.4
4.3
2
0
2
4
6
Category 1
Chart Title
Series 1 Series 2 Series 3
5.2, 16%
3.2, 10%
1.4, 4%
1.2, 4%
5, 16%4.1, 13%
0.5, 1%
8, 25%
3.4, 11%
Sales
year 1 year 2 year 3 year 4 year 5
year 6 year 7 year 8 year 9
X
X
Reduce Chart-junk and
Increase Data-to-ink Ratio
Comparison
Static
Over Time
4.3
2.4
2
Category 1
0
2
4
6
Line chartLine chart (several items)
Bar chartColumn chart
0
2
4
6
4.3
2.4
2
Pie chart
Composition
Static
Over Time
year 1 year 2 year 3 year 4
Stacked column chart Staked area chart
47%
29%
13%
11%
0
20
40
60

26. © 2 0 2 0 S P L U N K I N C .
Principle #5
Follow the eyes

27. © 2 0 2 0 S P L U N K I N C .
Follow the Eyes
But remember principle #2: Know your audience
• Some languages uses right to left scripts (Arabic, Hebrew, Kurdish…)
• Some are even more complex (flexible) like ideographic languages
(Chinese, Japanese and Korean) : they can be written left to right or
vertically top to bottom (with vertical lines proceeding from right to left),
sometimes both directions can even be combined on one page.
kindle newspaper Hardcover book mobile
• They are meant to be read from left to right
and top to bottom
5
What do they have in common?

28. © 2 0 2 0 S P L U N K I N C .
Principle #6
Organize content blocks

29. © 2 0 2 0 S P L U N K I N C .
Organize Content Blocks
Hierarchy Proximity Balance
ContrastPositionSize
Shape Color Orientation
White Space
6

30. © 2 0 2 0 S P L U N K I N C .
Organize Content Blocks
Hierarchy Proximity Balance
ContrastPositionSize
Shape Color Orientation

31. © 2 0 2 0 S P L U N K I N C .
Principle #7
The power of diagrams and flows

32. © 2 0 2 0 S P L U N K I N C .
Need to emphasize a new process?
Do not underestimate the power of the glass table
• Glass tables can be a good way to “push” for a new process
• Draw you process as a glass table background and add KPIs to it
• A great way to get your teams look at the process every day !
The Power of Diagrams and Flows
(Let’s do some basic internal politics  )
7

33. © 2 0 2 0 S P L U N K I N C .
Principle #8
Use the dramatic approach when needed

34. © 2 0 2 0 S P L U N K I N C .
Alerts and Dashboard
(Sometimes clean isn’t enough; a more dramatic approach is needed)
Shift the focus from the full data to changes in the most critical data points.
By pulling out the important exceptions, you can make it easier for your audience
to digest what matters and take action.
Alerts are one mechanism to turn the focus to the exceptions, outliers and
data highlights.
4 C’s:
Context:
Users need to
understand how an
alert is defined and
how it fits into the larger
picture.
Cogency:
An alerting system
needs to avoid causing
unnecessary alarm
while delivering easy-to-
understand information
that can be acted upon.
Communication:
Alerts must be
designed to effectively
capture attention and
inform.
Control:
Advanced alert
system should give
users the ability to
customize and manage
alerts.
8

35. © 2 0 2 0 S P L U N K I N C .
Principle #9
Use simple tools like PowerPoint (or equivalent)
and an image search engine (Google, Qwant…)

36. © 2 0 2 0 S P L U N K I N C .
How to Create a Background Image for Your Glass Table
Step 1: Design it in PowerPoint using Google/Qwant… or any other image search engine
Shapes and icons
Search for
PNGs —
transparent
images
(labeled for re
use or ask your
marketing team)
9

37. © 2 0 2 0 S P L U N K I N C .
Right click on shape
How to Create a Background Image for Your Glass Table
Step 1: Design it in PowerPoint using Google/Qwant… or any other image search engine

38. © 2 0 2 0 S P L U N K I N C .
How to Create a Background Image
for Your Glass Table
Delete the widgets
(will be added later on ITSI)
Export as PNG
(will be added later on ITSI as background)

39. © 2 0 2 0 S P L U N K I N C .
Principle #10
Be trendy

40. © 2 0 2 0 S P L U N K I N C .
Flat Design
Minimalist
Influenced by the International
Typographic Style and Bauhaus
Uses sans-serif typography ;)
Examples: Microsoft Metro design
language (Xbox, Office…), iOS

41. © 2 0 2 0 S P L U N K I N C .
“We see a growing problem with the use of color on
dashboards/glasstables these days. There’s often either too
much of it, making the dashboard visually overwhelming, or too
little of it, producing a boring dashboard. The best way to
engage users is through “colorblocking”: balancing
monochromatic background colors against bright colors
to highlight important insights or anomalies in the data.”
The exploration of taking colors that are opposites on
the color wheel and pairing them together to make
interesting and complementary color combinations.
—Wikipedia
Color-Blocking
Thank you Mr Piet Mondrian
“

42. © 2 0 2 0 S P L U N K I N C .
A technique likely to become more
popular in the near future
The overlapping effect consists of
colors, text or image
Overlaps can create a sense of space
and a more structured interface
Gradients add realism and depth to
the platform (feels more natural)
Landing page by Saepul Rohman
Overlapping

43. © 2 0 2 0 S P L U N K I N C .
99/100
12/121/1
0/52
21/21
354
1324
2546
12546
Trans/site
Paris Los Angeles Sidney Cape Town New York
0
100
200
300
400
500
600
1pm 2pm 3pm 4pm
Response time
834.3 320%
Avg response time
APIGateway
$9.5 5126%
$4.23%
-7%
128-12%
New York
Paris
Revenue Support tickets
Enterprise Service Bus
Batch
Micro-srv B
Micro-srv A
Legacy Storage
Cloud API
SAP Storage
Mainframe

44. © 2 0 2 0 S P L U N K I N C .
You!
Thank

45. © 2 0 2 0 S P L U N K I N C .
Q&A