DATA VISUALIZATION GUIDE Data Visualization is an integral part of Dashboard and Mobile BI applications. This is a reference guide for BI developers, Business Analyst and BI program managers to understand which visualization to use when. What are the standard design best practices which can be followed while creating dashboards and mobile BI applications. The guide comprises detailed information and best practices of all standard and advanced visualizations which are available in popular BI tools. This visual guide also contains sample dashboard layout, pre-defined color palette, font and UI specifications. Version 1.1
14
Embed
Data - InfoCepts · 2019-06-20 · Data Visualization GuiDe Data Visualization is an integral part of Dashboard and Mobile BI applications. This is a reference guide for BI developers,
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
InfoCepts Style Guide | www.infocepts.com |
InfoCepts
1
Data VisualizationGuiDeData Visualization is an integral part of Dashboard and Mobile BI applications. This is a reference guide for BI developers, Business Analyst and BI program managers to understand which visualization to use when. What are the standard design best practices which can be followed while creating dashboards and mobile BI applications. The guide comprises detailed information and best practices of all standard and advanced visualizations which are available in popular BI tools. This visual guide also contains sample dashboard layout, pre-defined color palette, font and UI specifications.
Swatches Sample Chart Color CombinationsNote: This is a recommended color palette, you can change the sequence of the adjoining colors according to the look & feel of dashboard and other reports.
Positive ValueR-36, G-170, B-112
Negative ValueR-234, G-78, B-86
R-0 G-55 B-99# 003763
R-120 G-72 B-148# 784993
R-149 G-120 B-171# 9578ab
R-177 G-167 B-195# b1a7c3
R-207 G-206 B-219# cfcedb
R-151 G-156 B-161# 979ca1
R-95 G-99 B-103# 5f6367
R-40 G-41 B-45# 28292d
R-0 G-101 B-164# 0065a4
R-101 G-167 B-199# 65a7c7
R-202 G-233 B-234# cae9ea
R-171 G-203 B-175# abcbaf
R-140 G-175 B-115# 8cac73
R-109 G-142 B-56# 6d8e38
Color Palette
UI Style Guide > Color Palette
SAMPLE
InfoCepts Style Guide | www.infocepts.com |
InfoCepts
5
Color Palette - DeSigN beSt PraCtiCeS
USE OF COLOR CODEPeople who cannot recognize colors or cannot distinguish groups of data that are color coded, avoid using a combination of red and green in the same display.
DISTINGUISH COLORS FOR PRINTINGMost printers are black and white make sure to use appropriate contrast colors to print well.
USAGE OF THRESHOLDSRed and green colors should be used to represent values: Green represents positive and red represents negative value.
AVOID BRIGHT BACKGROUND AND FLASHY COLORSObjects in a table or Chart to be easily seen, use a background color that contrasts sufficiently with the object
1
3
2
4
Sales Summary
Sales
1,495,891,101% Variance
29%
Sales
1,495,891,101% Variance
26%
Sales Summary
Sales
1,495,891,101% Variance
29%
Sales
1,495,891,101% Variance
26%
UI Style Guide > Color Palette - Design Best Practices
Variations - Horizontal Bar Chart | Multi-Set Bar Chart
report objects required
alternative / related Visualizations
The classic bar chart uses either horizontal or vertical bars to show discrete, numerical comparisons among categories. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value.
Some bar charts present bars clustered in groups of more than one (grouped bar charts), and others show the bars divided into subparts to show cumulative effect (stacked bar charts).
Comparisons
Dimensions
Histogram Multi-SetBar Chart
StackedBar Chart
Measures11
Patterns Relationships
SAMPLE
InfoCepts Style Guide | www.infocepts.com |
InfoCepts
9
bar CHart - DeSigN beSt PraCtiCeS
USE HORIZONTAL LABELSAvoid steep diagonal or vertical type, as it can be difficult to read.
SPACE BARS APPROPRIATELY & AVOID OVERLAPPING Space between bars should be ½ bar width and bars should not be overlapped
START THE Y-AXIS VALUE AT 0Starting at a value above zero truncates the bars and doesn’t accurately reflect the full value.
USE CONSISTENT COLORSUse one color for bar charts. You may use an accent color to highlight a significant data point.
1 2
43
Standard Visualizations > Bar Chart - Design Best Practices
SAMPLE
InfoCepts Style Guide | www.infocepts.com |
InfoCepts
10
AdvancedVisualizations
Water Fall Interactive Stacked Chart Fish Eye Selector
Gauges Interactive Bubble Chart Media
Time Series Graph Matrix Data Cloud
Maps Lipstick Chart Weighted List
Heat Map Micro Charts RSS Reader
Bubble Grid Network Visualization Cylinder
Funnel Image Layout Thermometer
InfoCepts Style Guide | www.infocepts.com |
InfoCepts
11
Advanced Visualization > Water Fall
When to use Water Fall? Water Fall
Functions
report objects required
A Waterfall visualization highlights the increments and decrements of the values of metrics over time. Analysts can use the widget to identify aspects of their business that are contributing to the fluctuations in the values. The visualization can also be used to perform “what-if” analyses. For e.g. % Revenue Y/Y Variance by Month. It shows how different aspects of the business positively or negatively affect the bottom line.
Dimensions Measures11
Patterns Relationships
Water Fall Supported on:Web | iPhone (D3) | iPad (D3)
SAMPLE
InfoCepts Style Guide | www.infocepts.com |
InfoCepts
12
Width 10.67 in - Height 8 in | Note: Scale 50%
aPP layout
Mobile App Style Guide > App Layout
iPad 12:15 74%
PERFORMANCE
REPORTReport Header
Report Header Grid View Graph View Report Header
Report Header
HOME
SETTINGS
CALLS
CONTROLS
NETWORKING
Country Region Territory
SAMPLE
InfoCepts Style Guide | www.infocepts.com |
InfoCepts
13
Mobile App Style Guide > Mobile App Design Best Practices
toP 10 mobile aPP DeSigN beSt PraCtiCeS
VISUAL HIERARCHYMake it easy to focus on the main task by elevating important content or functionality. Some good ways to do this are to place principal items in the upper half of the screen and in left-to-right cultures near the left side of the screen
1
USAGE OF BUTTONS AND IMAGESUse large buttons to make sure people can select them with their fingers. Icon / button size should not be less than 20x 20 pixels. Use only those images which are needed in your design. All images/ icons should match with the UI appearance and theme.