data - infocepts · 2019-06-20 · data visualization guide data visualization is an integral part...

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.

Version 1.1

http://www.infocepts.com/


InfoCepts

2

UIStyle Guide


InfoCepts

3

Width 1366 pix - Height 768 pix | Note: Scale 75%

Demo DaSHboarD

UI Style Guide > Dashboard Layout

SAMPLE


InfoCepts

4

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

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

SAMPLE


InfoCepts

6

Choose the Right Chart Type for your Data

Part-to-whole

Few Categories

Parts of Categories

Pie Chart

100% Stacked Bar

Geography

Few Data Points

Many Data Points

Bubble Map

Marker map

Area map

Density Map

Distribution

Single Variable

Few Items

Box Plot

Relationship

Two Variables

Related Elements

Three Variables

Scatter Plot

Bubble Chart

Radar Chart

Gantt Chart

HiLow Stock

Histogram

Patero Chart

Comparisons

Few Categories

Bar Chart

Line Chart

Dual Axis Bar Chart

Deviation Bar Chart

Area Graph

SAMPLE


InfoCepts

7

StandardVisualizations


InfoCepts

8

Standard Visualizations > Comparisons > Bar Chart

bar CHart

When to use bar Chart? Vertical bar Chart

Supported on:Web | Android phone | Android tablet | iPhone | iPad

Functions

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

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

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

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

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

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.

2

SAMPLE


InfoCepts

14

For more details contact us:

www.infocepts.com

Created By InfoCepts Data Visualization Team

[email protected]

data - infocepts · 2019-06-20 · data visualization guide data visualization is an integral part...

Documents