Visual storytelling &data visualization best practices

Introduction
How do we visualize data?
Chart Types
Best Practices – What to avoid, what to do
UI & UX
The Importance of Storytelling
Appendix – EPAM visualization standards
AGENDA

1. INTRODUCTION
VISUAL STORYTELLING &DATA VISUALIZATION BEST PRACTICES

WHY DO WE NEED THIS COURSE?
„
Stephen Few

WHAT WILL YOU LEARN?

WHAT TO CONSIDER WHEN VISUALIZING DATA
Who is the audience?
What is the message?
Is a visualization the best way to share the data, show the findings, and/or reveal the insight?
Is it worth producing a visualization ?

FLOW OF DATA VISUALIZATION
HOW WE DO IT?
Business Questions
Data Preparation
Share Insights
Select Visuals/Tools
Rules of
Good Design
HOW?

2. HOW DO WE VISUALIZE DATA?
VISUAL STORYTELLING &DATA VISUALIZATION BEST PRACTICES

HOW DO WE VISUALIZE DATA?
THE NEXT PART IS ABOUT INTUITION.
Try to think about the questions and visuals shown in the next slides.

HOW DO WE VISUALIZE DATA?
This is a way of representing data. In fact, a pretty good way.
This is just a part of a larger table by the way, (next slide)

HOW DO WE VISUALIZE DATA?
...but I am just showing you a fraction of it for visibility.

HOW DO WE VISUALIZE DATA?
So are there any problems with this type of data representation?

Or this one? Which one is better?
HOW DO WE VISUALIZE DATA?

WHICH ONE IS BETTER?
As said, tables are pretty good...
...for their limited role.
These types of data is processed by the analytical part of our brain – which is used for math.
However, if you want to show a SET of data as a whole, there is a part of the brain which is much better at the task.
The brains visual processing performs much better when coming to
Pattern recognition
Recognizing trends and irregularities.
So at the end of the day, it turns out that choosing the right type of data representation largely depends on what you want to show.
TABLE
Perfect for representing precise values.
Perfect for accurate data comparison
Few values vs. set of data?
CHART VISUALIZATIONS
Visual processing part of the brain
Large set of data simultaneously
Patterns
Trends
Irregularities

CONCLUSION
As we see, the same data can be visualized in many different ways.
Therefore, when it comes to the visualization part we need to remember that it is not the data itself which defines visualization, but what we want to achieve with the same data.
Or to put it this way, the STORY you want to tell about the data.
We start with available data and its granularity, but then we move on to business questions.
The decision of choosing a different representation method is not based on the data itself, rather than what we want to show (the story we want to tell).

3. CHART TYPES
VISUAL STORYTELLING &DATA VISUALIZATION BEST PRACTICES

LINE CHART
Is best for:
Demonstrating trends
Categorical values for a longer period of time
Representing continuous data
Tips
Use colors to differentiate multiple lines
Do not compare more than 4-5 lines
A grid can help you to identify exact values
Avoid dashed/spotted lines

BAR CHART
Best for representing individual values graphically
Vertical is best for
Chronological data
Negative values are present
Horizontal is best for:
Comparison
Ranking
Tips
Consider replacing with a line chart if it becomes complex
Rank chronologically or in ascending / descending order
Choose color strategically
Label to support reading
Use width of bars and spaces (1/2 bar) consistently

BAR CHART
Stacked is best for:
Comparing multiple part-to-whole relatonships
Emphasis is on the sums of values
100% Stacked when:
Parts-to-wholes, value shares
Exact values are not important
Tips
Avoid 3D and color complications
Start the axis from 0
Create clear and readable explanation for values & colors

COMBINATION CHART
Is best for:
Comparing trends for different types of values
Actual vs. Target
Spotting relationships between values
Tips
Avoid any further complication
Choose minimum colors
Axis values should clearly correspond for bars and line

DATA TABLE
Is best for:
Comparing precise data
Presenting background details
Where exact values are important, to show data sets with more properties
Tips
Avoid long tables
Ensure readable values and gentle lines
Use colors wisely: avoid saturated backgrounds, distracting cells, prefer cell icons

BUBBLE CHART / SCATTER PLOT
Is best for:
Comparing more than 2 values
Presenting ranking and relationship
Tips
Choose proper scale
Sizing of bubbles is crucial
Don’t not overload the viewer’s short term memory with colors/legend items

PIE CHART
Is best for:
Part-to-whole comparison for small data set
Presenting values on maps
Tips
In general it is better to avoid using pie charts: use 100% stacked bar charts
Do not use more than 5 slices of a pie
Do not use for similar or close values to present
If possible, use labels instead of a legend
Colors should be easily distinguishable (e.g. primary colors)

AREA CHART
Is best for:
Simple comparison of quantitative progression over time
Stacked part-to-whole relationship
100% stacked distribution of categories as part of a whole over time (total is unimportant)
Tips
Put data with high variability on top, with low variability on the bottom
Start axis at zero
Do not use more than 4 categories
Use transparent colors

TREEMAP
Is best for:
Presenting catalog with further drill down
Showing distributions per different categories: sub-categories, brands, sub-brands, etc.
Time periods for dynamic selections
Tips
Use easily distinguishable colors to different data types
Use similar shades for similar data types
Try to scale in a way even the smallest level is labeled in a readable way

BOX PLOT
Is best for:
Showing several simultaneous comparisons
Showing the location and degree of dispersion (spread or range) at the same time
Tips
Do not use different colors for the data sets: it will confuse the user and harden comparison
Sizes of lines, boxes, and spaces are crucial
Make labels and values readable

MAPS
Is best for:
Representing data on geographical levels
Selecting specific countries for further market drill down
Tips
Zoom properly
Color should be used smartly
Consider what to represent on what layers

4. CHECKLIST FOR
GOOD VISUALIZATION
VISUAL STORYTELLING &DATA VISUALIZATION BEST PRACTICES

GUIDELINES
Clearly indicates how the values relate to one another (part-to whole, etc.)
Represents the quantities accurately.
Makes it easy to compare the quantities.
Makes it easy to see the ranked order of values.
Makes obvious how people should use the information - what they should use it to accomplish - and encourages them to do this.
This is ONE approach for a checklist.
This is neither a full, nor a perfect list, but it’s easy to remember and apply.
Now, too much text, let’s shorten it.
LET’S SEE A TYPICAL WAY OF DATA VISUALIZATION GUIDELINES.

GUIDELINES
Notice that the list can be divided to two main parts.
---SPEND A FEW SECONDS DESCRIBING THE LIST---
How the values relate
Quantities accurately
Compare the quantities
Ranked order
Importance of chart

GUIDELINES
This concludes that we have two main, general goals when dealing with data visualization.
How the values relate
Quantities accurately
Compare the quantities
Ranked order
Importance of chart
}
}
Accuracy
Ease of use

GUIDELINES

AVOID MISLEADING VISUALIZATIONS

AVOID MISLEADING VISUALS
AVOID MISLEADING VISUALS
Exercise: Can You identify the metro lines?
It could be hard because the lack of:
Simplicity
Consistency
Categorization
Terminology
HOW COULD THE DESIGN SUPPORT THE PURPOSE?

AVOID MISLEADING VISUALS
SOLUTION:
Even a ‘busy chart’ can be understandable with smart coloring, consistent structuring and symmetry

AVOIDING MISLEADING VISUALS
AVOIDING MISLEADING VISUALS – 3D
Why to avoid them? See the next slide for an example.
3D VISUALS – AVOID THEM AT ALL COSTS! WHY?

AVOIDING MISLEADING VISUALS
AVOIDING MISLEADING VISUALS – 3D
„Represents data accurately”
Representation:
Length
Distance
Area
Angle
3D = Distortion!
HERE’S AN EXAMPLE. WHAT’S THE PROBLEM WITH THIS CHART?

AVOIDING MISLEADING VISUALS – 3D
HERE’S AN EXAMPLE. WHAT’S THE PROBLEM WITH THIS CHART?
Angle distortion!
Area distortion!
Limitations of the pie chart:
☺ How the values relate
☹ Quantities accurately
☹ Compare the quantities
? Ranked order
? Importance of chart

AVOIDING MISLEADING VISUALS – 3D
...Unless you want distortion. You may have seen this image.
This is not decision support. This is a marketing session.

AVOIDING MISLEADING VISUALS – BAR CHART
AVOIDING MISLEADING VISUALS – BAR CHART
Let’s take a look here. Do you see any issues?

AVOIDING MISLEADING VISUALS – BAR CHART
...and if we extend to zero?

AVOIDING MISLEADING VISUALS – BAR CHART
So if we check our list, this does not perform well.
Possible solutions
Use zoom slider
Preferably set to no zoom by default
Show a zoomed and an un-zoomed
Emphasize that the second one is zoomed

AVOIDING MISLEADING VISUALS – AREA CHARTS
How do Product B (orange) perform over time?
Curious if you find the trick. Let’s give you a little help.

If not, here’s the trick:
AVOIDING MISLEADING VISUALS – AREA CHARTS

We perceive this
We plot this
See?
Our perception simply works this way.
AVOIDING MISLEADING VISUALS – AREA CHARTS

No, still not optimal...
AVOIDING MISLEADING VISUALS – AREA CHARTS

Consider that „Product B” share is not shrinking as the area chart suggested. In fact, it is slightly going in an upward direction.
AVOIDING MISLEADING VISUALS – AREA CHARTS

☺ How the values relate
☹ Quantities accurately
☹ Compare the quantities
☺ Ranked order
? Importance of chart
See our good old checklist.
Not performing good? Before using an area chart, consider other options.
AVOIDING MISLEADING VISUALS – AREA CHARTS

1
2
3
r ≈ value
AVOIDING MISLEADING VISUALS – SCATTER PLOT MARKERS
In any type of scatterplot, there is an option to parametrize their size.
So you have a data you want to plot, but how does that relate to the size of the scatter?
What is proportional to the data? Usually radius, like shown here, right?
Radius might be misleading – it tricks your eyes into thinking 3 is a MUCH larger number than 1...

1
2
3
A ≈ value
r2π ≈ value
r ≈ sqrt(value)
AVOIDING MISLEADING VISUALS – SCATTER PLOT MARKERS
Let’s try area.
Area proportional with the value, thus radius proportinal to the square root of value. Easy!

1
2
3
1
1
1
AVOIDING MISLEADING VISUALS – SCATTER PLOT MARKERS
See that when radius is proportial to the represented value, it’s sort of misleading.

1
2
3
1
1
1
AVOIDING MISLEADING VISUALS – SCATTER PLOT MARKERS
Much better, right?

IMPROVE EASE OF UNDERSTANDING
THE FUNDAMENTAL PRINCIPLES

IMPROVE EASE OF UNDERSTANDING – VISUAL HIERARCHY
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

IMPROVE EASE OF UNDERSTANDING – VISUAL HIERARCHY
Based on The Jeffrey Veen Model
‘Where I am?’ And ‘Where can I go?’ The first area should answer these question.
Place here the company/brans logo, the title of the application, the main navigation panel that also provides feedback to the user on where she is at the given moment: in one word, anything that helps the user identify where she is and what is she seeing.
‘What can I do here?’ The second area should answer this question by any necessary means.
In the case of Spotfire/any other web applications, this is the place where we provide the tools to modify the actual data seen at the third area. In other words, this is the place to provide all kinds of filtering options at one place.
‘What’s here?’ The third area should provide the content of the actual page.
It is important here that preferably this area takes the biggest part of the screen, and preferably covers the center of the page.

IMPROVE EASE OF UNDERSTANDING – DIRECT LABELING
Our previous chart...

Product A
Product C
Product B
IMPROVE EASE OF UNDERSTANDING – DIRECT LABELING
With direct labels.
No need for that step of abstraction when you try to pair the labels to the lines.

DATA-INK RATIO:
Try to improve it
Remove everything unnecessary
Wisely use ink of necessary elements
Improve ease of understanding
IMPROVE EASE OF UNDERSTANDING – DATA-INK RATIO
Now what is data-ink?
Imagine „ink” as if you printed the chart. If an area is black, that means much ink. Grey, some ink, white, no ink.
No need for precise definition of data-ink („okay, grey means some ink, but what’s up with colors?”), this is a general idea, not a scientific rule.

IMPROVE EASE OF UNDERSTANDING – DATA-INK RATIO
You will get the concept in a moment.
See that the actual data is overwhelmed by all the random colors, grids, and other elements?
What’s data ink here?

IMPROVE EASE OF UNDERSTANDING – DATA-INK RATIO
This. This is the part of the chart that ACTUALLY represents data.
Other elements are there for understanding, or sometimes even without any reason.
Data

IMPROVE EASE OF UNDERSTANDING – DATA-INK RATIO
Let’s start by removing every ink that’s not necessary.
And then reducing necessary non-data ink to a level where it’s still legible, but does not interfere with the data.
We can even modify the chart a little bit to remove a step of abstraction and at the same time increase accuracy.
Again, this is not always applicable. This is a general concept.
As usual with concepts, apply these in alignnment with common sense.

IMPROVE EASE OF UNDERSTANDING – COLORS
Use soft colors
Use intense colors only to draw attention
Use the same color, except when color differences are needed to indicate differences in the data or encode a dimension
Use a single, neutral background color (if needed at all)
Use colors standards for brands/regions/ manufacturers
The goal is to:
Standardize
Understand
Compare
NOT to overwhelm

IMPROVE EASE OF UNDERSTANDING – COLORS
SOMETHING TO KEEP IN MIND
Color blindness (in some form) affects
8% of male population. Ladies are luckier with 0,5%
Tools to check:
http://colororacle.org/
http://colorbrewer2.org/

IMPROVE EASE OF UNDERSTANDING – TITLES
See this.
Tell your users why they should be interested.

IMPROVE EASE OF UNDERSTANDING – TITLES
Getting there.
You can even „abuse it”, so, again, use this guideline only when APPLICABLE, and use in a responsible way.
Example when a title is a bit too expressive:

IMPROVE EASE OF UNDERSTANDING – TITLES
This is not good. Why? Because you are suggesting something that’s not there.
But notice how the story can be totally different: (next slide)

IMPROVE EASE OF UNDERSTANDING – TITLES
Totally different story.
By the way, this statement is obviously not true, just wanted to show an example of how different titles turn your attention toward different aspects of the chart.

IMPROVE EASE OF UNDERSTANDING – CHART JUNK
Everything that is not necessary
„Let’s make it more fancy”
Let’s be careful with these.
Always double-think before adding anything to „make it more fancy”

5. UX & UI
VISUAL STORYTELLING &DATA VISUALIZATION BEST PRACTICES

UNDERSTANDING UI ELEMENTS & PRINCIPLES
Know your audience
The essence of interface
The MAYA principle
Input controls
Navigation
Animations
Guided Actions

KNOW YOUR AUDIENCE
START WITH THE WHY BEHIND THE HOW
PERSONAS ARE FICTIONAL REPRESENTATIONS OF YOUR TARGET USER BASE
YOU NEED TO UNDERSTAND THE USER’S MINDSET, DESIRES AND THE TASK THEY WILL PERFORM
Identify the job, role and the company of the users
Include all details possible (age, gender, device usage and psychological aspects, what is it that they want to extract from the analysis)
You should use real information, don’t make up your personas

THE ESSENCE OF INTERFACE
Don’t look at interface as just screens and buttons,
But rather as a collection of JOBS – with beginning, middle and an end.
Ask what are the jobs people want to do with the analysis?

The MAYA Principle
Your goal when designing the UI of an analysis is to create the greatest, most extremely new and original that goes far beyond the average user’s wildest dream, right?
Not really...
As instead: (M)ost (A)dvanced (Y)et (A)cceptable
because the public is naturally resistant to change
and radical innovations – even if it is a better solution.

UNDERSTANDING VISUAL ELEMENTS OF UI
Contrast
Color Theory
Color Schemes
Typography

GESTALT PRINCIPLES
„Gestalt is a psychology term which means "unified whole". It refers to theories of visual perception developed by German psychologists in the 1920s.”
These theories attempt to describe how people tend to organize visual elements into groups or unified wholes when certain principles are applied.
Law of similarity
We perceive similar items (that match in appearance) as grouped
Law of continuity
We perceive partially occluded items as whole.
Law of proximity
We perceive items near to one another as grouped, and items far apart as unrelated.
Law of common region
We perceive items that share an area with defined boundaries as grouped.
Law of closure
We see whole figures when shapes are incomplete.

LAYOUT

LAYOUT – KEY PRINCIPLES
LOGICAL
EFFICIENT
INFORMATIVE
USER CENTERED DESIGN

CREATING VISUAL ORGANIZATION
Scanning patterns
Contrast: Generating interest
Color, size and space
Know your auidence

SCANNING PATTERNS – F-PATTERN
Common scanning pattern for text heavy content.
Users will rarely read every word of your text
The first two paragraphs should contain the hook
Start paragraphs with enticing keywords

SCANNING PATTERNS – Z-PATTERN
Common scanning pattern for pages that are not centered on text.
User first scans a horizontal line across
the top of the page.
Perfect for interfaces where simplicity
is a priority and the call to action is
the main takeaway.

CONTRAST: GENERATING INTEREST
Contrast is the occurance of two different elements positioned close together.
Altennating between different sizes and colors can create an instant hierarchy to your userface.
Not only two circles but:
A black circle and a smaller red circle.

COLOR, SIZE AND SPACE
I. Colors
Bright colors stand out from muted colors
Certain colors can help set the mood
II. Size
Size can add emphasis to the actual message
III. Space
Do not clutter to much things
It’s important to let your interface breathing room
Reduce visual noise
COLOR AND SIZE MANAGE ATTENTION, WHILE SPACING HELPS MANAGE VISUAL RELATIONSHIP.

INPUT CONTROLS
Without interaction, an interface would just be a ’face’.
Users want more options, but every new control complicates the UI and clutters the screen.
Solution: Have controls on demand.
You don’t lose functionality and free up space.
Example: Snippet Library’s Sliding Filter Panel

NAVIGATION
It’s hard to appreciate an analysis if you are lost, which is why having navigation is mandatory.
Users should always know their current place in the analysis
The navigation system should remain consistent for all pages
Either use horizontal navigation on the top of the pages
Or vertical navigation on the left side or hidden into Snippet Library

ANIMATIONS
WHY?
1. The eye is drawn to movement
An animated icon will signal a change to your users more effectively than a static icon.
2. Establishes connections
Animations make excellent transitions, and small transitions can enhance emotional connection
3. Cues and Clues
Well-thought animations can suggest actions to users

GUIDED ACTIONS
Guided actions can be used by emphasizing key functions, controls and buttons.
At EPAM you can also add Guided Tours/ iCoach to the analysis.
People, as a whole, are open to suggestion.

CONTRAST
I. Light vs Dark
Darker colors for pushed buttons, because it adds depth
II. Color contrast
Warm colors Red: danger, Orange: inviting/call to action, Yellow: energy
Cool colors Green: health/relax, Dark blue: professionalism, Light blue: relaxing, Purple: soothing/luxury
Warm colors dominate cool colors.

COLOR THEORY
Color theory is a science of its own.
Just tweaking the saturation can completely
change your interface.
Contrast – within the color wheel use the
opposite shade of a given color
Complementation – the shade that accents a
given color is next to that color
Vibrancy – brighter colors tend to energize while darker ones relax

COLOR SCHEMES
Triadic – the most basic and balanced structure
HOW: on the 12-step color wheel select any 3 colors located 120 degrees
from each other
Compound
HOW: Uses contrasting and complementary colors
Analogous
HOW: Focuses solely on complementary colors instead of contrast

TYPOGRAPHY
Measure the Measure - /measure=width of a body type/
The ideal amound of characters per line is 52-78
Appropriate size:
Body and leading – 11px/16.5px
Main heading – 24px
Subheadings – 18px
Navigation – 16px
All other headed elements – 13px

6. STORYTELLING
VISUAL STORYTELLING &DATA VISUALIZATION BEST PRACTICES

THE IMPORTANCE OF STORYTELLING
Most organizations recognize that being a successful, data-driven company requires skilled developers and analysts. Fewer grasp how to use data to tell a meaningful story that resonates both intellectually and emotionally with an audience. We know that data is powerful. But with a good story, it's unforgettable.
-Daniel Waisberg – Analytics advocate at Google

THE IMPORTANCE OF STORYTELLING
Data journalism (and analytics in a broader sense) is a form of curation. There is so much data and so many data types that only experienced analysts can separate the wheat from the chaff. Finding the right information and the right way to display it is like curating an art collection.
Analysis doesn’t have to be long and complex. The data collection and analysis process can often be rigorous and time consuming. That said, there are instances when it should be quick, such as when it’s in response to a timely event that requires clarification.
Data analysis isn’t about graphics and visualizations; it’s about telling a story. Look at data the way a detective examines a crime scene. Try to understand what happened and what evidence needs to be collected. The visualization—it can be a chart, map or single number—will come naturally once the mystery is solved. The focus is the story.
Stories, particularly those that are meaningful, are an effective way to convey data. Now let’s look at how we can customize them for our audiences.
(Source)

THE IMPORTANCE OF STORYTELLING
Be aware of your audience.
Dell Executive Strategist Jim Stikeleather segments listeners into five main audiences.

HOWEVER

WHY DO WE USE STORIES IN BUSINESS ANALYTICS?
Every important decision is based on interpreting objective data in terms of how it affects the decision maker.

WHY?
PEOPLE ARE PROGRAMMED TO SEEK OUT VISUAL CONTENT.
Our memory does not store words but images, methaphores, stories.
We remember more the things we explored ourselves.
Learning by experience

THE STORY IN DATA VISUALIZATION
WHAT
WHY
HOW
State of business, key measures
Changes vs. previous cycle, competition insights
Risks & Opportunities
Decisions

UNDERSTAND AND GUIDE
WHAT is happening in my business?
Market trends
Company performance (shares)
WHY is it happening?
Drivers (and drainers)
Insights
On competition
On business
On customers
HOW do we deliver the goal/fill the gap?
Actionables
Business Decisions

STEPS TO TELLING YOUR STORY
1. Understand your Data
2. Identify Your Story – what, why, how
4. Guide, but DO NOT PUSH
5. Keep it SIMPLE
3. Create a Good Structure - flow

UNDERSTAND YOUR DATA
Who collected it?
Why did they collect it?
What audience was this data gathered for?
What is the best way to present this data?
This insight is crucial in laying the foundation for a story that is both meaningful and human.

IDENTIFY YOUR STORY
You have the hard facts, you need to decide the story you want to tell with it.
Your task:
Answer: What – Why – How
Make sure the insights are clearly identified

CREATE A GOOD STRUCTURE
A well-structured visual provides clarification, reveals trends, and highlights your key findings.
YOUR TASK:
Focus on KPI
Identify best-fit visuals
Create a flow

GUIDE, DO NOT PUSH
The facts should encourage a thorough understanding and learning of your information that allows users to create their own experiences.
Make it as easy as possible for your audience to understand.
Expected result: Self-serve BI

KEEP IS SIMPLE

+1 LEARNING BEFORE YOU START
NEVER UNDERESTIMATE THE IMPORTANCE OF USER EXPERIENCE
KNOW YOUR AUDIENCE
(=KEY CONSUMERS, USER GROUPS)
Their experience with BI and tools.
Their domain (market) knowledge
Their current goals, roles and daily tasks.
Executive overview.
Deep-dive options.
Monitoring functions.
Use pre-defined visualization guides and
standards.

WHAT DO WE SEE HERE?

ANOTHER POINT OF VIEW

TAKEAWAYS
+ 1 TAKEAWAY
ALWAYS DESIGN FOR YOUR AUDIENCE.
1. Understand your Data
2. Identify Your Story – what, why, how
4. Guide, but DO NOT PUSH
5. Keep it SIMPLE
3. Create a Good Structure - flow

7. EPAM VISUALIZATION STANDARDS
VISUAL STORYTELLING &DATA VISUALIZATION BEST PRACTICES

VISUALIZATION STANDARDS
Use the company standard colors scheme so that we ensure recognition and corporate branding.
COLORS
Primary Colors: The gray and white should generally be used as the base color since they provide strong contrast when paired with the other colors. Blue should be the main accent color, while green is more of highlight or activation color.
Feel free to contact our team in case you need assistance …. @epam.com

VISUALIZATION STANDARDS
Use the company standard colors scheme so that we ensure recognition and corporate branding.
COLORS
Secondary Colors: These secondary colors will provide some warmth and contrast to the primary palette. They should never be the main color, but should be included to support the primary palette.

VISUALIZATION STANDARDS
Use the company standard colors scheme so that we ensure recognition and corporate branding.
TYPOGRAPHY
HEADING: ARIAL BLACK CAPITAL
All templates use Arial Black fonts for headings and page titles.
Visualization font:
Use Arial or the default font of analytics tool
Filter panel
Text area
Legend
Chart labels
BUTTONS
BUTTON FONT: ARIAL BLACK CAPITAL
BUTTONS

VISUALIZATION STANDARDS
Use the company standard colors scheme so that we ensure recognition and corporate branding.
Note:
The ratio and usage of colors matters.
Sharp Blue should
represent EPAM if applicable
used as the largest segment
COLORS USED IN VISUALIZATIONS
SAMPLE CHART
ILLUSTRATING COLOR SPLIT
Raspberry
RGB: 178, 39, 70
Dark Blue II.
RGB: 20, 104, 120
Sharp Blue
RGB: 57, 194, 215
Dark Blue
RGB: 26, 156, 176
Dark Green
RGB: 127, 153, 58
Lime Green
RGB: 163, 198, 68

VISUALIZATION STANDARDS
Use the company standard colors scheme so that we ensure recognition and corporate branding.
Note:
Raspberry and Plum should be avoided as only colors.
COLORS USED IN VISUALIZATIONS
MONOCHROME SAMPLES

VISUALIZATION STANDARDS
COLORS USED IN VISUALIZATIONS
MONOCHROME SAMPLES
Use the company standard colors scheme so that we ensure recognition and corporate branding.
Note:
The ratio and usage of colors matters.
Sharp Blue should
represent EPAM if applicable
used as the largest segment

VISUALIZATION STANDARDS
VISUALIZATION WIDGETS
MONOCHROME SAMPLES
The following pages help to set colors of the visualization widgets (aka snippet library).
Lime Green: #A3C644
Sharp Blue: #39C2D7
Graphite: #464547
SNIPPET COLORS #1
SNIPPET COLORS #2
Graphite: #464547
Light Grey: #CCCCCC
White: #FFFFFF

VISUALIZATION STANDARDS
VISUALIZATION WIDGETS
BUTTONS:
A button consists of text and/or an image that clearly communicates what action will occur when the user touches it. Use the buttons, because by using buttons we are able to navigate and motivate the users!
DELETE
RESET FILTERS
BUTTONS
EXPORT
INFORMATION
Sharp Blue
Hex: #39C2D7
RGB: 57, 194, 215
CMYK: 84, 0, 18, 0
PMS: 3125 C
Lime Green
Hex: #A3C644
RGB: 163, 198, 68
CMYK: 46, 0, 90, 0
PMS: 375 C
Raspberry
Hex: #B22746
RGB: 178, 39, 70
CMYK: 5, 100, 55, 28
PMS: 1945C
Graphite
Hex: #464547
RGB: 70, 69, 71
CMYK: 0, 0, 0, 88
CANCEL
Usage pattern: available choice, navigation
Usage pattern: active, finish, apply, export
Usage pattern: confirmation – no, delete, reset
Usage pattern: reset, cancel
Light Gray
Hex: #CCCCCC
RGB: 204, 204, 204
CMYK: 0, 0, 0, 23
Usage pattern: secondary functions, cancel

VISUALIZATION STANDARDS
VISUALIZATION WIDGETS
SLIDING PANEL:
The sliding filter panel does not have a fixed area in the template, it slides in and out when the user clicks on any of its tabs. We suggest using the vertical accordion filter type (presented below) when you have more than 8 filter settings or a hierarchical filter type. In case of hierarchical filter, you may organize the filters in groups, leading users step-by-step through the flow. In this way you would ensure that the filtering is easy to understand and user friendly.
SLIDING PANEL
Sliding Panel
Min-width:
Box-shadow:
Background-color:
Border-radius:
Padding:
Height:
Header
Width:
Height:
Background-color:
Font-family:
Font-color:
Font-size:
Margin-left:
Spotfire Filter Element
Width:
Margin-top:
Margin-bottom:
Margin-left:
Margin-right:
Button
Width:
Height:
Font-family:
Font-color:
Font-size:
Text-shadow:
Border:
Border-radius:
Background-color:
Active tab
Width:
Height:
Min-height:
Font-family:
Font-size:
Color:
Background-color:
Inactive tab
Width:
Height:
Min-height:
Font-family:
Font-size:
Color:
Background-color:

VISUALIZATION STANDARDS
TEMPLATE
SAMPLE I
Use Case
Extension Demo