SAP Business One

UI Design Guidelines for Dashboards

SAP Business One User Experience

July 2010
 Contents

 Structure
 Layout
 Chart layout
 Labels
 Chart types – when to use
 Content
 Font size and color
 UI rules for creating dashboards

© 2010 SAP AG. All rights reserved. / Page 2

 Structure
Basic 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
Container

Basic elements:

Chart

© 2010 SAP AG. All rights reserved. / Page 3

 Structure
Principles

Principles:

• Maximum of 3 containers per horizontal panel

• Important information at top left

The structure of the dashboard can be:

Panel Panel Panel

Container Container Container Container

Chart Chart Chart Chart Chart

Panel Panel
Container Container Container

Chart

Container Chart Chart Chart Chart Chart

Chart

© 2010 SAP AG. All rights reserved. / Page 4

 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

© 2010 SAP AG. All rights reserved. / Page 5

 Layout (2 of 4)

Panel

Note: The percentage of chart width can be 40% 60%

set as specific requirement.

© 2010 SAP AG. All rights reserved. / Page 6

 Layout (3 of 4)

Note: The percentage of chart width can be

set as specific requirement.

© 2010 SAP AG. All rights reserved. / Page 7

 Layout (4 of 4)

Panel

30

Note: The percentage of chart width can be 65% 35%

set as specific requirement.

© 2010 SAP AG. All rights reserved. / Page 8

 Chart Layout
Pie Chart

Note: If no specific remark, the default

color of font is black
(R0 G0 B0).

1 Header
2
3
4
2 Content

3 Chart

4 Legend

© 2010 SAP AG. All rights reserved. / Page 9

 Chart Layout
Bar Chart

Note: If no specific remark, the default

color of font is black
(R0 G0 B0).

1 Header
3
2 Vertical label
2
14 or fewer characters for the label.
If more than 14, use ellipses …
3 Chart
Show 2 major grid lines as background

4 Horizontal label
4

© 2010 SAP AG. All rights reserved. / Page 10

 Chart Layout
Stacked Bar Chart

Note: If no specific remark, the default

color of font is black
(R0 G0 B0).

1 1 Header

2
2 Chart
Show 2 major grid lines and minor grid lines

3 Horizontal label

4 Legend
4 Bottom of the chart

© 2010 SAP AG. All rights reserved. / Page 11

 Chart Layout
Column Chart

Note: If no specific remark, the default

color of font is black
(R0 G0 B0).

5 1 Header
Top center in the container
3
2
2 Vertical label

3 Chart
Show 3 major grid lines as background
4
4 Horizontal label

5 Drop-down box

© 2010 SAP AG. All rights reserved. / Page 12

 Chart Layout
Line Chart

Note: If no specific remark, the default

color of font is black
(R0 G0 B0).

1 Chart area
1

2 Legend
Bottom of the chart

© 2010 SAP AG. All rights reserved. / Page 13

 Labels

Currency

Container /Chart name

Container /Chart name

Filter: Drop-down box

Legend

Legend

Panel name Filter: Drop-down box

Container/Chart name Container/Chart name

Filter: Drop-down box

Axis labels: Text

Legend

© 2010 SAP AG. All rights reserved. / Page 14

 Chart Type

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

When to use:
Line Chart • 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:
Column Chart • To compare single values across static categories
• For many categories, and they have long names

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

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

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

© 2010 SAP AG. All rights reserved. / Page 15

 Content

A. Independent chart

B. Drilldown: Clickable master chart A

b Dependent detail chart
D
C. Button
D. Filter: Dropdown list B

D
B
A

© 2010 SAP AG. All rights reserved. / Page 16

 Font Size and Color
Default Color

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

Example of “Phase” theme

SAP Crystal Dashboard
Design (formerly known as
Xcelsius Engage)

© 2010 SAP AG. All rights reserved. / Page 17

 Font Size and Color
Column and Line Chart

Column Chart

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

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

Line Chart

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

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

© 2010 SAP AG. All rights reserved. / Page 18

 Font Size and Color
Bar Chart

Bar Chart

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

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

© 2010 SAP AG. All rights reserved. / Page 19

 Font Size and Color
Stacked Bar Chart and Line Chart

Stacked Bar Chart

Alert color
Arial, 9pt, RGB:125,125,125

Line Chart

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

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

© 2010 SAP AG. All rights reserved. / Page 20

 Font Size and Color
Line Chart

Line Chart

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

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

© 2010 SAP AG. All rights reserved. / Page 21

 Font Size and Color
Pie Chart

Pie Chart
Arial, 11pt, RGB:0,0,0

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

Arial, 11pt, RGB:0,0,0

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

© 2010 SAP AG. All rights reserved. / Page 22

 Font Size and Color
Table

Table in Dashboard

Arial, 11pt, RGB:0,0,0

Arial, 11pt, RGB:0,0,0

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

© 2010 SAP AG. All rights reserved. / Page 23

 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

© 2010 SAP AG. All rights reserved. / Page 24