dashboard ui guidelines
TRANSCRIPT
SAP Business OneUI Design Guidelines for Dashboards
SAP Business One User ExperienceJuly 2010
© 2010 SAP AG. All rights reserved. / Page 2
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 3
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:
© 2010 SAP AG. All rights reserved. / Page 4
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
© 2010 SAP AG. All rights reserved. / Page 5
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 6
Layout (2 of 4)
40% 60%
Panel
Note: The percentage of chart width can be set as specific requirement.
© 2010 SAP AG. All rights reserved. / Page 7
Layout (3 of 4)
Note: The percentage of chart width can be set as specific requirement.
© 2010 SAP AG. All rights reserved. / Page 8
Layout (4 of 4)
Panel
30
65% 35%Note: The percentage of chart width can be set as specific requirement.
© 2010 SAP AG. All rights reserved. / Page 9
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).
© 2010 SAP AG. All rights reserved. / Page 10
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
Note: If no specific remark, the default color of font is black(R0 G0 B0).
© 2010 SAP AG. All rights reserved. / Page 11
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
Note: If no specific remark, the default color of font is black(R0 G0 B0).
© 2010 SAP AG. All rights reserved. / Page 12
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
Note: If no specific remark, the default color of font is black(R0 G0 B0).
© 2010 SAP AG. All rights reserved. / Page 13
Chart Layout Line Chart
1
2
1
2
Chart area
LegendBottom of the chart
Note: If no specific remark, the default color of font is black(R0 G0 B0).
© 2010 SAP AG. All rights reserved. / Page 14
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
Filter: Drop-down box
Filter: Drop-down box
© 2010 SAP AG. All rights reserved. / Page 15
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
© 2010 SAP AG. All rights reserved. / Page 16
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
© 2010 SAP AG. All rights reserved. / Page 17
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.
© 2010 SAP AG. All rights reserved. / Page 18
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
© 2010 SAP AG. All rights reserved. / Page 19
Font Size and ColorBar Chart
Arial, 9pt, RGB:125,125,125
Arial, 9pt, RGB:125,125,125
Bar Chart
© 2010 SAP AG. All rights reserved. / Page 20
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
© 2010 SAP AG. All rights reserved. / Page 21
Font Size and ColorLine Chart
Arial, 9pt, RGB:125,125,125
Arial, 9pt, RGB:125,125,125
Line Chart
© 2010 SAP AG. All rights reserved. / Page 22
Font Size and ColorPie Chart
Pie ChartArial, 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 23
Font Size and ColorTable
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 24
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