dashboard ui guidelines

SAP Business OneUI Design Guidelines for Dashboards

SAP Business One User ExperienceJuly 2010

© 2010 SAP AG. All rights reserved. /

Contents

Structure

Layout

Chart layout

Labels

Chart types – when to use

Content

Font size and color

UI rules for creating dashboards


StructureBasic Elements

The basic elements of the dashboard are the panel, container, and chart. The same first-level topic visuals are located in one panel, and the charts of the same second- level topic are in one container.

Panel

Chart

Container

Basic elements:


StructurePrinciples

The structure of the dashboard can be:

Panel

Chart

Container

Panel

Chart

Container

Chart

Container

Panel

Chart

Container

Chart

Principles:

• Maximum of 3 containers per horizontal panel• Important information at top left

Panel

Chart

Container

Chart

Container

Chart

Panel

Chart

Container

ChartChart

Chart

Container


Layout (1 of 4)

A tab is used for the lateral structure dashboard. If you are using several lateral categories, we recommend that you use tab pages.

Principles: 2 or 3 tabs No single tabs No tab if there is a single business topic No filtering on tabs

Tab 1 Tab 2 Tab 3


Layout (2 of 4)

40% 60%

Panel

Note: The percentage of chart width can be set as specific requirement.


Layout (3 of 4)

Note: The percentage of chart width can be set as specific requirement.


Layout (4 of 4)

Panel

30

65% 35%Note: The percentage of chart width can be set as specific requirement.


Chart Layout Pie Chart

1

23

4

1

2

3

4

Header

Content

Chart

Legend

Note: If no specific remark, the default color of font is black(R0 G0 B0).


Chart Layout Bar Chart

1

32

4

1

2

3

4

Header

Vertical label14 or fewer characters for the label. If more than 14, use ellipses …

Chart Show 2 major grid lines as background

Horizontal label



Chart Layout Stacked Bar Chart

1

4

2

1

2

3

4

Header

ChartShow 2 major grid lines and minor grid lines

Horizontal label

3

LegendBottom of the chart



Chart Layout Column Chart

1

32

4

1

2

3

4

HeaderTop center in the container

Vertical label

ChartShow 3 major grid lines as background

Horizontal label

5

5 Drop-down box



Chart Layout Line Chart

1

2

1

2

Chart area

LegendBottom of the chart



Labels

Panel name

Axis

labe

ls: T

ext

Legend

Currency

Container /Chart nameContainer /Chart name

Container/Chart name Container/Chart name

Legend

Legend

Filter: Drop-down box




Chart Type

Pie Chart

Line Chart

Column Chart

Bar Chart

Area Chart

Table

When to use:• To compare single values across static categories • For only a few categories, and they have short names

When to use:• To display trends over time, where the focus is on the trend and not on the individual values • To show dependencies between two or more variables

When to use:• To compare single values across static categories • For many categories, and they have long names

When to use:• To compare trends across time or successive categories • When the values add up to 100% • To compare parts to the whole (proportions)

When to use:•To compare multiple absolute amounts among different groups•To display more detailed information, especially numbersNot recommended for dashboards

When to use:•To compare single values across static categories • For only a few categories, and they have short names


Content

b

B

A. Independent chart

B. Drilldown: Clickable master chartb Dependent detail chart

C. ButtonD. Filter: Dropdown list

C

A

b

D

D

B

A


Font Size and ColorDefault Color

Example of “Phase” theme SAP Crystal Dashboard Design (formerly known as Xcelsius Engage)

For a design without a traffic light, we recommend the “Phase” theme.


Font Size and ColorColumn and Line Chart

Column Chart

Arial, 9pt, RGB:125,125,125

Arial, 9pt, RGB:125,125,125

Arial, 9pt, RGB:125,125,125

Arial, 9pt, RGB:125,125,125

Line Chart


Font Size and ColorBar Chart

Arial, 9pt, RGB:125,125,125

Arial, 9pt, RGB:125,125,125

Bar Chart


Font Size and ColorStacked Bar Chart and Line Chart

Arial, 9pt, RGB:125,125,125

Arial, 9pt, RGB:125,125,125

Arial, 9pt, RGB:125,125,125

Stacked Bar Chart

Line Chart

Alert color


Font Size and ColorLine Chart

Arial, 9pt, RGB:125,125,125

Arial, 9pt, RGB:125,125,125

Line Chart


Font Size and ColorPie Chart

Pie ChartArial, 11pt, RGB:0,0,0

Arial, 9pt, RGB:0,0,0




Font Size and ColorTable

Table in Dashboard



Arial, 11pt, RGB:108,108,108


UI Rules for Creating Dashboards

Basic recommendations Simple dashboard layout: No more than 3 containers Place most important data in left and top sections so it is seen first Highlight or emphasize primary Information Keep the look and feel consistent across all dashboards: Locate similar information in the same

position; for example, summary is always in the top-left corner

Business topics Use tabs only if there is more than one business topic; otherwise, use one tab for one business

object. If only one business topic, the container title serves the purpose of the dashboard tab. Business subtopic: One container for one subtopic; can contain master and detail data

Drilling down Have only one level of drilldown in the dashboard Use clickable master chart or table and dependent detail chart or table (see Customer Aging

dashboard)

Filtering Use dropdown list box (DDLB) for filtering

DDLBs can be used at a container level Filtering affects all charts and table content in the dashboard container

Do not use more than 2 DDLBs per container

dashboard ui guidelines

Documents