Você está na página 1de 92

UI GUIDELINES

Industry Value Accelerator Front-End


Authors:
Michael Sanjongco
Youko Watari

August, 2009

Version 1
FOR INTERNAL USE ONLY

FOR INTERNAL USE ONLY

Table of Contents:
Versions..................................................................................................................... 6
Open Issues............................................................................................................... 7
1 Overview............................................................................................................. 8

1.1

Who Should Use This Document..................................................................8

1.2

Prerequisites ..................................................................................................8

1.3

General Guiding Principals ...........................................................................8

1.3.1

Design Standards.................................................................................................8

1.3.2

IVA Development Methodology and Best Practices ...........................................9

1.3.3

Additional References and Resources ..............................................................10

IVA Framework Overview................................................................................ 11


2.1

Definition of M1 and M2 Builds ...................................................................11

2.2

Definition of IVA UI Framework...................................................................11

2.3

Window Types..............................................................................................12

2.3.1

M1 Primary Window Tabbed Structure...........................................................12

2.3.2

M1 Primary Window Non-Tabbed Structure...................................................14

2.3.3

M1 Secondary Window.......................................................................................15

2.3.4

M2 Primary Window Tabbed Structure...........................................................16

2.3.5

M2 Primary Window Non-Tabbed Structure...................................................17

2.4

2.4.1

Navigation Tabbed...........................................................................................17

2.4.2

Navigation Non-Tabbed...................................................................................19

Dashboard Builder Standards ........................................................................ 21


3.1

Dashboard Builder Setup ............................................................................21

3.2

Navigation Region Standards .....................................................................22

3.3

Content Head Standards .............................................................................23

3.3.1

Navigation Region Standards .....................................................................25

Xcelsius Standards.......................................................................................... 26
5.1

Development Environment Setup Requirement ........................................27

5.2

Xcelsius Canvas Standards ........................................................................28

5.2.1
2

Configuration Standards for Viewer ..................................................................23

IVA HTML Wrapper Standards........................................................................ 25


4.1

Navigation ....................................................................................................17

Canvas Size and Theme.....................................................................................28


Title: UI Standards for Industry Value Accelerators Front-End
Components
Version: 1.1

Page 2 of 92

FOR INTERNAL USE ONLY

5.2.2

Canvas Properties..............................................................................................29

5.3

Content Region Standards..........................................................................29

5.3.1

Xcelsius Framework...........................................................................................29

5.4

Header ..........................................................................................................31

5.4.1

Header Layout ....................................................................................................31

5.4.2

Title Properties ...................................................................................................32

5.4.3

Header Detail Properties ....................................................................................32

5.5

Side Bar ........................................................................................................35

5.5.1

Side Bar Background Properties .......................................................................35

5.5.2

Side Bar Layout ..................................................................................................35

5.5.3

SAP IVA Branding Properties ............................................................................36

5.5.4

IVA Logo Properties ...........................................................................................37

5.5.5

Side Bar Detail Properties..................................................................................37

5.6

Body .............................................................................................................41

5.6.1

Body Layout .......................................................................................................41

5.6.2

General Body Layout Guidelines.......................................................................41

5.6.3

List of Components Included in Body...............................................................43

5.6.4

Title Bar Properties ............................................................................................48

5.6.5

Background Properties ......................................................................................48

5.6.6

KPI Table Properties...........................................................................................49

5.6.7

Combo Chart Properties ....................................................................................50

5.6.7.1

Combo Chart Layout ....................................................................................50

5.6.7.2

Combo Chart Series.....................................................................................51

5.6.7.3

Combo Chart Axes.......................................................................................53

5.6.7.4

Combo Chart Texts ......................................................................................54

5.6.8

Column Chart Properties ...................................................................................55

5.6.8.1

Column Chart Layout ...................................................................................55

5.6.8.2

Column Chart Series....................................................................................55

5.6.8.3

Column Chart Axes ......................................................................................55

5.6.8.4

Column Chart Texts .....................................................................................55

5.6.9

Bar Chart Properties...........................................................................................56

5.6.10

Stacked Column/Bar Chart Properties ..............................................................56

5.6.10.1

Stack Column/Bar Chart Layout ...................................................................56

5.6.10.2

Stack Column/Bar Chart Series....................................................................56

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 3 of 92

FOR INTERNAL USE ONLY

5.6.10.3

Stack Bar Chart Axes...................................................................................57

5.6.10.4

Stack Bar Chart Texts ..................................................................................57

5.6.11

5.6.11.1

Line Chart Layout.........................................................................................57

5.6.11.2

Line Chart Series .........................................................................................57

5.6.11.3

Column Chart Axes ......................................................................................58

5.6.11.4

Column Chart Texts .....................................................................................58

5.6.11.5

Line Chart Series .........................................................................................58

5.6.12

Pie Chart Properties ...........................................................................................58

5.6.12.1

Pie Chart Layout ..........................................................................................59

5.6.12.2

Pie Chart Series...........................................................................................59

5.6.12.3

Pie Chart Texts ............................................................................................59

5.6.13

What-If Properties...............................................................................................60

5.6.14

Alerts Properties ................................................................................................61

5.6.15

Trends Properties...............................................................................................62

5.6.16

Drop Down Properties........................................................................................62

5.6.17

Tab Properties ....................................................................................................63

5.6.18

Click Box Properties...........................................................................................64

5.6.19

Radio Button Properties.....................................................................................64

5.6.20

Detail Report Link Properties.............................................................................65

Web Intelligence Standards ............................................................................ 67


6.1

WebI Report Layout .....................................................................................67

6.1.1

First Page Layout ...............................................................................................67

6.1.2

Subsequent Page Layout...................................................................................69

6.2

Page Header.................................................................................................70

6.2.1

Report Header Properties ..................................................................................70

6.2.2

SAP Branding Properties ...................................................................................71

6.2.3

IVA Branding Properties ....................................................................................71

6.3

Report Title...................................................................................................72

6.3.1

Report Title Properties .......................................................................................72

6.3.2

Report Subtitle Properties .................................................................................72

6.4
6.4.1

6.5
4

Line Chart Properties .........................................................................................57

Section Header.............................................................................................73
Section Header Bar Properties ..........................................................................73

Report Body .................................................................................................74


Title: UI Standards for Industry Value Accelerators Front-End
Components
Version: 1.1

Page 4 of 92

FOR INTERNAL USE ONLY

6.5.1

List of Visualization Included in Report Body...................................................74

6.5.2

Color Palette.......................................................................................................75

6.5.3

Column Chart, Bar Chart, and Stacked Column Chart Properties ...................76

6.5.4

Pie Chart Properties ...........................................................................................79

6.5.5

Table and Cross Tab Chart Properties ..............................................................80

6.6

Page Footer..................................................................................................82

6.6.1

Report Footer Properties ...................................................................................82

6.6.2

Run Date Properties ...........................................................................................82

6.6.3

Page Number Properties....................................................................................83

Appendix A: References and Resources.............................................................. 84


A.1

IVA Development Methodology ..................................................................84

A.2

IVA Design and Development Templates...................................................84

A.3

Visualization References and Tools ...........................................................85

Appendix B: UI Standards in Action IVA Examples.......................................... 87

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 5 of 92

FOR INTERNAL USE ONLY

Versions
Q2, 2009

Version 1 First version

08/18/2009

V1.1
Added a screenshot of TPE integrated within
CRM

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 6 of 92

FOR INTERNAL USE ONLY

Open Issues
Date

Issue

Reason (e.g. Technical, Design


Decision, etc)

Status

7/1/2009

Use of Adobe Flex

Need to figure out how to use this for M1


and determine specific UI standards that
will be applied

WIP

7/1/2009

Need to include CRM/TPE


example

Show how IVA can be integrated within


SAP Portal.

WIP

Text in orange: Topics that are still under discussion and may or may not change

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 7 of 92

FOR INTERNAL USE ONLY

1 Overview
This document defines the User Interface (UI) guidelines for designing and deploying Industry
Value Accelerator (IVA) front-end components (dashboard). These guidelines mainly cater to
IVA built in Xcelsius, SAP BusinessObjects (SBO) Dashboard Builder, SAP BusinessObjects
Web Intelligence and SAP Portal.

1.1 Who Should Use This Document


The target audiences of this document are as follows:
Existing and new members of Industry Analytics Architecture & Engineering team,
specifically those who will be responsible for building Milestone 1 (M1) and/or Milestone 2
(M2) IVA builds
SAP BusinessObjects (SBO) Field Services professionals and/or SBO pre-sales
consulting professionals who will be responsible for building M1 an/or M2 IVA builds
Any other members of SAP entities outside Industry Analytics who may be involved with
M1 and/or M2 build activities
Please see the section 2.1, Definition of M1 and M2 Builds for more explanation of what M1 and
M2 build are.

1.2 Prerequisites
This document assumes that the reader of this document has a working knowledge of the specific
SAP BusinessObjects software used within the IVA solution, specifically:
SAP BusinessObjects Dashboard Builder
Xcelsius
SAP BusinessObjects Web Intelligence
SAP Portal
Hence, this document does not explain how and where some of the configuration and layout
standards and specifics are set up within the tools mentioned above. For more information on the
specific product functionality mentioned in this document and how to use the functionality, please
refer to the Users Guide for the particular product.
It also assumes that the reader is familiar with the IVA solution architecture and development
methodology.

1.3 General Guiding Principals


1.3.1 Design Standards
This UI Standards document is a part of overall SAP and IVA standards and methodology:
8

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 8 of 92

FOR INTERNAL USE ONLY

General UI Standard and Guidelines This UI Standard document follows the general
guidelines described in the SAP User Interface Standards.
Color Scheme The basic set of colors (e.g. use of blue, gold, and gray as primary
colors) in this UI Standard document follows the standard SAP color palette as defined in
SAP Brand Tools by SAP Global Branding Team. In addition, we follow the
color/gradation scheme used within SAP CRM.

Definition and halftone values of colors

SAP Blue

SAP Gold

SAP Light Gray

SAP Gray

SAP Dark Gray

RGB 4/53/123

RGB 240/171/0

RGB 204/204/204

RGB 153/153/153

RGB 102/102/102

Dove

Petrol

Warm Green

Warm Red

Violet/Mauve

RGB 68/105/125

RGB 21/101/112

RGB 85/118/48

RGB 119/74/57

RGB 100/68/89

Primary color palette


100%

Secondary color palette


100%

RGB 96/127/143

RGB 98/146/147

RGB 110/138/79

RGB 140/101/87

RGB 123/96/114

85%

RGB 125/150/164

RGB 127/166/167

RGB 136/160/111

RGB 161/129/118

RGB 147/125/139

70%

RGB 152/173/183

RGB 154/185/185

RGB 162/180/141

RGB 181/156/147

RGB 170/152/164

55%

RGB 180/195/203

RGB 181/204/204

RGB 187/200/172

RGB 201/183/176

RGB 193/180/189

40%

Cool Green

Ocher

Cool Red

RGB 73/108/96

RGB 129/110/44

RGB 132/76/84

Warning Red

RGB 101/129/120

RGB 148/132/75

RGB 150/103/110

85%

RGB 129/152/144

RGB 167/154/108

RGB 169/130/136

70%

RGB 156/174/168

RGB 186/176/139

RGB 188/157/162

55%

RGB 183/196/191

RGB 205/197/171

RGB 206/183/187

40%

Tertiary color palette


100%

RGB 158/48/57

SAP 2007
2008 / Page 1

confidential

Figure 1: SAP Color Palette

1.3.2 IVA Development Methodology and Best Practices


From the project management and solution build point of view, the IVA Front-End build activities
are defined in the following:
IVA Solution Development Methodology This methodology defines the end-to-end
process, tasks, deliverables, stakeholders, etc. for the IVA development. The M1 and M2
build are key phases within this methodology.
Important Note: Specific Xcelsius visualization best practice (e.g. what type of chart is
suitable to what type of analysis) is to be documented within the methodology. Hence
this document only includes those types of visualization that are included in the best
practice.
IVA Architecture & Engineering M1 & M2 Process This is a sub-set of the above
methodology and further defines detail activities included in the M1 & M2 phases
IVA Architecture & Engineering Standards and Best Practices This defines key
A&E development standards outside UI standards, such as naming convention, filing
rules, packaging standards, and other development best practices

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 9 of 92

FOR INTERNAL USE ONLY

Specific locations on where to find the above contents are included in the Appendix section of this
document.

1.3.3 Additional References and Resources


We have variety of additional reference and resources that help IVA Solution Managers and
Architect with understanding best practices in visualization design and Xcelsius design. Please
see Appendix A for the list of resources.

10

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 10 of 92

FOR INTERNAL USE ONLY

2 IVA Framework Overview


2.1 Definition of M1 and M2 Builds
An IVA solution is developed using aforementioned IVA Solution Development Methodology.
Through the development process following the methodology, an IVA, as a physical technical
solution progresses its form and capability from Milestone 1 (M1) build to Milestone 2 (2) build.
M1 Build It is a disconnected model. Primary use of M1 is to socialize the specific IVA
to IVAs specific industry stakeholder and further refine the use case for the IVA, and
refine requirements for the KPIs, visualization, and workflow. The data for M1 build is
static and may be mocked up. In most cases, a M1 build consists of one or multiple SWF
files generated from Xcelsius. Multiple SWF files are bundled together as a single tabformat dashboard rendered through HTML page. PDF mock-ups of Web Intelligence
reports may be linked from the SWF.
M2 Build It is a connected model and is a solution available to qualified SAP customers
and partners for deployment. The data for M2 build is dynamic sourced from SAP BW or
other data sources. In most cases, a M2 front- end build consists of one or multiple SWF
files generated from Xcelsius. Multiple SWF files are bundled together as a single tabformat dashboard using Dashboard developed via SBO Dashboard Builder and accessed
via InfoView. Refreshable Web Intelligence reports may be linked from the SWF.

2.2 Definition of IVA UI Framework


In general, the IVA UI Framework consists of following SAP BusinessObjects elements:
Dashboard tab structure via SAP BusinessObjects Dashboard Builder (M2 Build only) or
SAP Portal
Dashboard tab structure via IVA A&E HTML wrapper
Dashboard contents defined and deployed via Xcelsius (M1 and M2 Builds)
Detail reports defined and deployed via SAP Business Objects Web Intelligence (M1 and
M2 Builds)
The elements in the UI Framework above are described in the following section of this document;
specific UI standard for each of the elements are included.
In addition, the M1 and M2 build IVA can be deployed using the SAP Portal (see below example):

11

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 11 of 92

FOR INTERNAL USE ONLY

Figure 2: Trade Promotion Effectiveness (TPE) IVA integrated within SAP CRM portal

2.3 Window Types


This section describes the window types used within IVA and how the Framework above is
applied within the window.
Within IVA, since M1 (disconnected stand-alone build) and M2 (fully-connected, integrated build)
uses different SBO elements as described below with a certain product behavior and limitations in
the look and feel, the window standards are defined based on the build type (M1 or M2).
The following is the general definitions of primary and secondary windows:
Primary Window: The primary window is the window that the user first sees when they
log into the application and return to after interacting with other windows. A primary
window is a window which contains information that is essential, important, or occurs first
in a sequence in the user's interaction with an application. There is only one primary
window.
Secondary Window: A secondary window is a child window and is opened from the
primary window or other secondary windows. In the context of IVA, a secondary window
can be a window that is used for providing detailed level analysis via pop-up or a detail
report.

2.3.1 M1 Primary Window Tabbed Structure

12

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 12 of 92

FOR INTERNAL USE ONLY

Figure 3: M1 Primary Window Elements

Callout

Name

Description

Tool (Format)

Navigation
Region

The primary navigation for the IVA, in a tab


structure is displayed here.

IVA A&E Wrapper (HTML)

Content
Region

Content Region displays the content for the


selected view. The branding is included in
this area.

Xcelsius (Flash)

Below is an example of a M1 primary window with tabs using IVA A&E Wrapper and Flash SWF
files, run on Internet Explorer:

13

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 13 of 92

FOR INTERNAL USE ONLY

Figure 4: Example of M1 Primary Window with Tabs

2.3.2 M1 Primary Window Non-Tabbed Structure


Some IVAs do not have contents across multiple tabs. In such a situation, the Navigation Region
above (using the IVA A&E Wrapper) is not used.
Below is an example of a M1 primary window with without tabs, run on Internet Explorer:

14

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 14 of 92

FOR INTERNAL USE ONLY

Figure 5: Example of M1 Primary Window without tabs

2.3.3 M1 Secondary Window


There is no secondary window within M1 build. However, Content Region within the M1 build
may contain a pop-up window or a link to a static Web Intelligence report. The specific standards
for those elements are explained within Xcelsius Standards (for pop-up) and Web Intelligence
Standards (for Web Intelligence reports).

15

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 15 of 92

FOR INTERNAL USE ONLY

Figure 6: Example of M1 Primary Window with a pop-up

2.3.4 M2 Primary Window Tabbed Structure

Figure 7: M2 Primary Window Elements

Callout

16

Name

Description

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Tool (Format)

Page 16 of 92

FOR INTERNAL USE ONLY


A

Navigation
Region

The primary navigation for the IVA, in a tab


structure and menu structure for sub-pages
is displayed here.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Content
Head

The Content Head contains the name of the


Content area.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Content
Region

Content Region displays the content for the


selected view. The branding is included in
this area.

Xcelsius (Flash)

2.3.5 M2 Primary Window Non-Tabbed Structure


Some IVAs do not have contents across multiple tabs. In such a situation, the Navigation Region
and Content Header above (using SBO Dashboard Builder) are not used.
See section 2.3.2. M1 Primary Window Non-Tabbed for an example of how this window looks.

2.4 Navigation
The navigation for IVAs varies based on the specific IVAs use cases. Each IVAs navigations
and workflow is defined within the IVAs Visualization Mock-up document and Visualization
Specification document. The following describes a general navigation used within the M1 and M2
builds.

2.4.1 Navigation Tabbed


The following explains typical navigation for IVAs that includes multiple tabs.

The first tab in the primary window is


enterprise/executive (or highest aggregated
dimension) area. This should be the at a
glance or summary KPI area where the
analysis starts.
Summary KPI table is placed upper left of the
Content Region.

17

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 17 of 92

FOR INTERNAL USE ONLY

Clicking on one of the KPIs on the KPI table will


dynamically change the display for the other
charts/tables/graphs on the tab to display
corresponding measures and dimensions for
detail-level analysis.

Some of the detail level analysis may include a


radio button or check box that allows additional
measure(s) to be displayed.

Use the Navigation Region to do further


analysis specific to certain business/subject
area. The navigation within a business/subject
area is similar to the enterprise/executive area.

18

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 18 of 92

FOR INTERNAL USE ONLY

2.4.2 Navigation Non-Tabbed


The first view of the primary window is
enterprise/executive (or highest aggregated
dimension) area.
Summary KPI table is placed upper left of the
Content Region.

Clicking on one of the KPIs on the KPI table will


dynamically change the display for the other
charts/tables/graphs on the tab to display
corresponding measures and dimensions for
detail-level analysis.

Additional visualization can be displayed by the


use of radio buttons or click boxes.

19

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 19 of 92

FOR INTERNAL USE ONLY

Fisheye or drop down list on the header area


allows dimension-specific analysis.

20

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 20 of 92

FOR INTERNAL USE ONLY

3 Dashboard Builder Standards


This section explains the UI standards for the Navigation Region and Content Head using SAP
BusinessObjects (SBO) Dashboard Builder (callouts A and B below). The standards for the
Content Region are explained in section 5. Xcelsius Standard.

Figure 8: M2 Primary Window Elements

Callout

Name

Description

Tool (Format)

Navigation
Region

The primary navigation for the IVA, in a tab


structure and menu structure for sub-pages
is displayed here.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Content
Head

The Content Head contains the name of the


Content area.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Content
Region

Content Region displays the content for the


selected view. The branding is included in
this area.

Xcelsius (Flash)

3.1 Dashboard Builder Setup


The default style for the Dashboard Builder should be set up as Windows. The following
standards for the Navigation Region and Content Header are based on the default property of the
Windows style.
Should a specific IVA require different look & feel for its deployment purpose, the CMC
preference function can allow setting different page style or creating a new style.
21

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 21 of 92

FOR INTERNAL USE ONLY

Figure 9: Dashboard and Analytics Preference screen in CMC

3.2 Navigation Region Standards


The Navigation Region contains two layers of navigation for IVA:

Figure 10: Navigation Region using SBO Dashboard Manager

Callout

Name

Tabs

Dashboard Manager Technical


Functionality Used
Dashboard Builder Tab function.
Use Add a new tab button to add
additional tabs.

UI Standard

Use standard product functionality to


create tabs and set visualization
specifications in terms of size, font,
and color. No customizations
necessary.

Some IVAs may require the first tab


to have sub tabs. Default structure
of Dashboard Builders first tab does
not include sub tabs and does not
allow sub tabs. Configure the first
tab so that second tab with sub tabs
will be show as the display for the
first tab.

22

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 22 of 92

FOR INTERNAL USE ONLY


Callout

Name

Sub Tab

Dashboard Manager Technical


Functionality Used

UI Standard

Dashboard Builder Sub Tab function. Use standard product functionality to


create sub tabs and set visualization
Use Add a new sub tab button to
specifications in terms of size, font,
add additional sub tabs.
and color. No customizations
necessary.

3.3 Content Head Standards


Content Head provides a heading title for the Content Region1 and acts as a container/viewer for
the Flash file developed via Xcelsius.

Figure 11: Content Head using SBO Dashboard Manager

Callout

Name

Content
Title

Dashboard Manager Technical


Functionality Used
Dashboard Builders Analytic Viewer
function.
Use Analytic Toolkit for adding new
Viewer.

UI Standard

Use standard product functionality


to create viewer and set
visualization specifications in
terms of size, font, and color. No
customizations necessary.

3.3.1 Configuration Standards for Viewer


Under the Content configuration area for the Viewer, set Document Retrieval Properties as
Display document read from original document list only

See Xcelsius Standards section of this document for the Content Region UI standards.

23

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 23 of 92

FOR INTERNAL USE ONLY

Figure 12: M2 Document Retrieval Properties

Under the Layout area for the Viewer, set the Display as option to:
A window inside a tab option
Default Style as the window style

Figure 13: Layout properties

24

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 24 of 92

FOR INTERNAL USE ONLY

4 IVA HTML Wrapper Standards


This section explains the Navigation Region using IVA HTM Wrapper (callout A below). The
standards for the Content Region are explained in section 5. Xcelsius Standard.

Figure 14: M1 Primary Window Elements

Callout

Name

Description

Tool (Format)

Navigation
Region

The primary navigation for the IVA, in a tab


structure is displayed here.

IVA A&E Wrapper (HTML)

Content
Region

Content Region displays the content for the


selected view. The branding is included in
this area.

Xcelsius (Flash)

4.1 Navigation Region Standards


The Navigation Region contains single layer of navigation for IVA, using HTML as a language to
create simple tabbed structure to house a Flash SWF file in each tab.

Figure 15: Example of Navigation Region using IVA A&E Wrapper

The font and color standards have been setup within the cascading style document used for the
html file. No further customization other than the tab names (specific to IVA) is necessary. For
more specific instructions on how to modify the tab names, please refer to the instructions
included in the Wrapper HTML package.

25

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 25 of 92

FOR INTERNAL USE ONLY

5 Xcelsius Standards
This section explains the UI standards for the Content Region using Xcelsius. As described in
section 2.3 Window Types, the Content Region is defined as follows for M1 and M2:
M1 Primary Window

Figure 16: M1 Primary Window Elements

Callout

Name

Description

Navigation
Region

The primary navigation for the IVA, in a tab


structure is displayed here.

IVA A&E Wrapper (HTML)

Content
Region

Content Region displays the content for the


selected view. The branding is included in
this area.

Xcelsius (Flash)

26

Tool (Format)

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 26 of 92

FOR INTERNAL USE ONLY

M2 Primary Window

Figure 17: M2 Primary Window Elements

Callout

Name

Description

Tool (Format)

Navigation
Region

The primary navigation for the IVA, in a tab


structure and menu structure for sub-pages
is displayed here.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Content
Head

The Content Head contains the name of the


Content area.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Content
Region

Content Region displays the content for the


selected view. The branding is included in
this area.

Xcelsius (Flash)

5.1 Development Environment Setup Requirement


The screen resolution under the display property of your monitor on your development
environment needs to be set up as 1280 by 768 pixels or more.

27

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 27 of 92

FOR INTERNAL USE ONLY

5.2 Xcelsius Canvas Standards


Xcelsius canvas defines the size and color of the outer frame of the Content Region. Standard
size for IVA is as follows:

5.2.1 Canvas Size and Theme


Property

Standards

Width

1280 pixels

Height

768 pixels

Theme

Elan

Default Color
Scheme

28

Current Theme Colors


Although this theme does not include official SAP colors, it
includes basic set of colors that we can use to follow the SAP
color palette (gold, blue, and gray)

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 28 of 92

FOR INTERNAL USE ONLY

Figure 18: Xcelsius Standard Layout

5.2.2 Canvas Properties


Property

Standards

Type

Solid

Color

RGB 242/242/242

5.3 Content Region Standards


5.3.1 Xcelsius Framework
The Content Region using Xcelsius contains the following sub areas:

29

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 29 of 92

FOR INTERNAL USE ONLY

Figure 19: Xcelsius Framework

Callout

Name

Description

Tool (Format)

Header

Includes page header and primary content


navigation for the IVA.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Side Bar

The Content Head contains the name of the


Content area.

SAP BusinessObjects
Dashboard Builder
(Dashboard)

Body

Content Region displays the content for the


selected view. The branding is included in
this area.

Xcelsius (Flash)

An example of Content Region based on the above framework using Xcelsius looks like below:

30

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 30 of 92

FOR INTERNAL USE ONLY

Figure 20: Example of Content Region using Xcelsius

The following sections explain each component included in the framework and standards for
Xcelsius objects.

5.4 Header
5.4.1 Header Layout

Figure 21: Example of Header Area

Callout

Name

Title

Header
Detail
(Optional)

31

Description
Title of the Content Region (dashboard page)
Houses navigation component that allows dynamic visibility of the body
area within the Content Region. Also may include other components that
are global to the IVA.

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 31 of 92

FOR INTERNAL USE ONLY

5.4.2 Title Properties

Figure 22: Example of Title within Header Area

Xcelsius
Component
Type
Background

Label

Print Button

Property

Standards

Background Color

RGB 152/175/220

Transparency

0%

Border Scale

100%

Font

Verdana

Font Style

Bold

Font Size

14

Font Color

RGB 0/0/0

Transparency

100%

5.4.3 Header Detail Properties

Figure 23: Examples of Header Detail within Header Area

Xcelsius
Component
Type

32

Property Group

Property

Standard

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 32 of 92

FOR INTERNAL USE ONLY


Xcelsius
Component
Type
Fisheye2

Property Group

Images

Thumbnails

Standard

Sizing Method

Scale

Width

125

Height

60

Horizontal Margin

Vertical Margin

Background Color

RGB 255/255/255 (white)

Label Header Color

RGB 255/255/255 (white)

Thumbnails

Combo Box3

Property

Layout

Text - Title

Text - Labels

Color - Labels

Default Color

RGB 255/255/255 (white)

Over Color

RGB 255/255/255 (white)

Selected Color

6658507;RGB 101/153/203

Number of Labels
Displayed

List Transparency

0%

Font

Verdana

Font Type

Bold

Font Color

RGB 0/0/0 (black)

Font

Verdana

Font Type

Bold

Font Color

RGB 0/0/0 (black)

Default Color

RGB 0/0/0 (black)

Size of the fisheye component is defined by the number of buttons included in the fisheye. The
number of buttons is driven by each IVAs requirements.
3

Size of Combo Box is defined by height of the background that fits the component.

33

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 33 of 92

FOR INTERNAL USE ONLY


Xcelsius
Component
Type

Property Group

Color Label
Backgrounds

Color Drop-Down
Button

Scroll Bar

34

Property

Standard

Over Color

RGB 0/0/0 (black)

Selected Color

RGB 255/255/255 (white)

Default Color

RGB 227/227/227

Over Color

RGB 150/168/195

Selected Color

RGB 52/75/109

Button Color

RGB 108/155/225

Arrow Color

RGB 255/255/255 (white)

Selected Button Color

RGB 108/155/225

Selected Arrow Color

RGB 255/255/255 (white)

Track Color

RGB 255/255/255 (white)

Thumb Color

RGB 150/168/195

Button Color

RGB 255/255/255 (white)

Button Symbol Color

RGB 0/0/0 (black)

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 34 of 92

FOR INTERNAL USE ONLY

5.5 Side Bar


5.5.1 Side Bar Background Properties
Xcelsius
Component
Type
Background

Property

Standards

Background Color

RGB 51/85/168

Transparency

0%

Border Scale

100%

Figure 24: Side Bar Area

5.5.2 Side Bar Layout


Callout

Description

SAP IVA
Branding

The SAP logo and IVA branding area

IVA Logo
(optional)

The IVA logo. The logo could be the


particular customers logo.

Side Bar
Details

External links and other industry


specific contents for the IVA

35

Name

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 35 of 92

FOR INTERNAL USE ONLY


Figure 25: Side Bar Layout

5.5.3 SAP IVA Branding Properties

Figure 26: Example of IVA Branding within Side Bar

Xcelsius
Component
Type
Image
Component

Property Group

JPEG or SWF
Options

Property

Image File

Use Side Bar Logo.psd file

Resize Image to
Component

Yes

Embed File

Yes

Transparency
Label

36

Standards

0%
Font

Verdana

Font Type

Bold

Font Size

14

Font Color

RGB 255/255/255 (white)

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 36 of 92

FOR INTERNAL USE ONLY

5.5.4 IVA Logo Properties

Figure 27: Example of IVA Logo within Side Bar

Xcelsius
Component
Type
Image
Component

Property Group

JPEG or SWF
Options

Property

Standards

Image File

Use appropriate logo image file for the


IVA

Resize Image to
Component

Yes

Embed File

Yes

Transparency

0%

5.5.5 Side Bar Detail Properties


The Side Bar Detail may contain variety of links and texts. The following are the
list of typical labels included in the Side Bar Detail area:
Data As Of text
Hyperlink group header text (e.g. Links or My News)
Hyper link text
Search Function button
Input text area
View function button
Search results display
Drop Down List
Figure 28: Example of IVA Logo within Side Bar

Each item above is explained below

37

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 37 of 92

FOR INTERNAL USE ONLY


Side Bar Detail
Type

Data As Of
Text

Xcelsius
Component
Type
Label

Property
Group

Layout

Yes

Show Border

No

Show Fill

No

Font

Verdana

Font Type

Bold

Font Size

10

Font Color

RGB 255/255/255 (white)

Alignment

Center

Wrap Text

Yes

Show Border

No

Show Fill

No

Font

Verdana

Font Type

Bold

Font Size

12

Font Color

RGB 187/209/243

Alignment

Left

Layout

Show Button Background

No

Text

Font

Verdana

Font Type

Bold, Underlined

Font Size

10

Font Color

RGB 255/255/255 (white)

Alignment

Left

Layout

Text

Hyperlink Text URL Button

38

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Standards

Wrap Text

Text

Label
Hyperlink
group Header
Text

Property

Page 38 of 92

FOR INTERNAL USE ONLY


Side Bar Detail
Type

Xcelsius
Component
Type

Property
Group

Labels

Search
Function
Buttons

Search
Connection
Refresh

RGB 255/255/255 (white)

Pressed Color

RGB 255/255/255 (white)

Show Button Background

Yes

Transparency

0%

Font

Verdana

Font Type

Bold

Font Size

10

Font Color

RGB 1/72/128

Alignment

Center

Default Color

RGB 255/255/255 (white)

Pressed Color

RGB 255/255/255 (white)

Default Color

RGB 255/255/255 (white)

Pressed Color

RGB 1/72/128

Font

Verdana

Font Type

Regular

Font Size

13

Font Color

RGB 1/72/128

Alignment

Left

Color

Background Color

RGB 255/255/255 (white)

Layout

Show Button Background

Yes

Text

Font

Verdana

Font Type

Bold

Layout

Button Color

Labels

View Function
Button

39

Input Text

URL Button

Text

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Standards

Default Color

Text

Input Text
Area

Property

Page 39 of 92

FOR INTERNAL USE ONLY


Side Bar Detail
Type

Xcelsius
Component
Type

Property
Group

10

Font Color

RGB 1/72/128

Alignment

Center

Default Color

RGB 255/255/255 (white)

Pressed Color

RGB 255/255/255 (white)

Default Color

RGB 255/255/255 (white)

Pressed Color

RGB 1/72/128

Layout

Transparency

100%

Title Text

Font

Verdana

Font Type

Regular

Font Size

14

Font Color

RGB 1/72/128

Font

Verdana

Font Type

Regular

Font Size

13

Font Color

RGB 1/72/128

Default Color

RGB 1/72/128

Over Color

RGB 1/72/128

Selected Color

RGB 255/255/255 (white)

Default Color

RGB 255/255/255 (white)

Over Color

RGB 224/224/224

Selected Color

RGB 101/153/203

Labels

List Box

Labels Text

Labels

Label
Backgrounds

40

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Standards

Font Size

Button Color

Search
Results
Display

Property

Page 40 of 92

FOR INTERNAL USE ONLY


Side Bar Detail
Type

Xcelsius
Component
Type

Property
Group

Scroll Bar

Property

Standards

Track Color

RGB 245/245/245

Thumb Color

RGB 101/153/203

Button Color

RGB 245/245/245

Button Symbol Color

RGB 101/153/203

5.6 Body
5.6.1 Body Layout
The Body area consists of one or more visualization panes which display IVA KPIs via table,
graph, chart, or indicators. The layout of the components depends on the specific use case and
workflow required for the IVA solution.
General recommendation is not to exceed four (4) components within the Body area, as shown in
the below figure.

Figure 29: Recommended Visualization Pane Layout within Body Area

5.6.2 General Body Layout Guidelines


As a rule, when you are viewing a dashboard, your eyes should be drawn to the information that
is most important. Follow the layout guidelines below for effective visualization design:
Most important information should be on the top left and highlight important information

41

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 41 of 92

FOR INTERNAL USE ONLY

Figure 30: Example of 4-pane layout with a pop-out secondary window (Source: Stephen Few)

Workflow and dynamic visualization within a single Body area follows in the following
directions in general:
o From Top to bottom
o From Left to right
Hence the landing visualization usually is placed on the top left quadrant of the Body
Grouping of Visualizations
o Arrange and group related visualizations
o Use gray border for group container
Chart Borders
o Do not use outer border for combo, bar, and line charts within a group container
o Use outer border for pie chart
Chart Colors
o For combo, bar, and line charts in which number of data series are between 1
and 3, use the following three as the standard colors:
Blue actual measure
Green target measure
Gold secondary measure
o For pie chart, since the number of slices to be included in the chart is usually
dynamic, use default colors based on the Elan color theme. If necessary, use
SAP secondary colors (e.g. Dove, Petrol, Warm Red, etc.).
o Choose colors thoroughly depending on what you are trying to convey. For
example, if youre trying to convey attention, use colors that are hot like red and if
youre trying to make it less visible, use cooler colors.
Other
o Avoid scroll bars; If the contents to be displayed is too large, consider use of
WebI report instead
o Avoid use of tabs as much as possible; tabs increase the SWF file size and
affects performance
o Use click box for display/hide of additional contents/data points
o Add addition information around visualization like legend, dates, thresholds, etc.

42

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 42 of 92

FOR INTERNAL USE ONLY

o
o
o
o

Choose the right graph in order to display appropriate data i.e. bar chart vs. pie
chart
Do not clutter the visualization with useless decoration
Deliver information in summaries and exceptions to highlight pertinent data
Choose the right text. For example, Verdana is great for dashboards that are
viewed via browser

Figure 31: Examples of fine and poor legibility (Source: Stephen Few)

For additional resources and references for visualization best practices, refer to the reference list
in Appendix A.

5.6.3 List of Components Included in Body


Although each IVA may include different set of visualizations, the following is the list of
visualization components generally included and standardized in IVA:
Visualization
Component

Example

Title Bar

Background

N/A

KPI Table

43

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 43 of 92

FOR INTERNAL USE ONLY


Visualization
Component

Example

Combo Chart

Column Chart

44

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 44 of 92

FOR INTERNAL USE ONLY


Visualization
Component

Example

Bar Chart

Stacked Column/Bar
Chart

45

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 45 of 92

FOR INTERNAL USE ONLY


Visualization
Component

Example

Line Chart

Pie Chart

46

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 46 of 92

FOR INTERNAL USE ONLY


Visualization
Component

Example

What If

Alerts

Trends

Drop Down List

Tabs

Click Box

Radio Button

47

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 47 of 92

FOR INTERNAL USE ONLY


Visualization
Component

Example

Detail Report Link

5.6.4 Title Bar Properties

Figure 32: Example of a Title Bar

Xcelsius
Component
Type
Background

Label

Property

Standards

Background Color

RGB 150/177/249

Transparency

0%

Border Scale

100%

Font

Verdana

Font Style

Bold

Font Size

12

Alignment

Left

5.6.5 Background Properties


Xcelsius
Component
Type
Background

48

Property

Standards

Background Color

RGB 255/255/255 (white)

Transparency

0%

Border Scale

100%

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 48 of 92

FOR INTERNAL USE ONLY

5.6.6 KPI Table Properties

Figure 33: Example of a KPI Table

Xcelsius
Component
Type
Spreadsheet
Table

Property Group

Property

Standards

Layout

Show Gridlines

Yes

Color

Gridline Color

1/72/128

Color Rows

Over Color

RGB 224/224/224

Selected Color

RGB 101/153/203

Track Color

RGB 245/245/245

Thumb Color

RGB 101/153/203

Button Color

RGB 245/245/245

Button Symbol Color

RGB 101/153/203

Font

Verdana

Font Type

Regular

Font Size

10

Font Color

Automatic (black)

Scroll Bar

Font
(Defined in the
Excel sheet)

49

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 49 of 92

FOR INTERNAL USE ONLY

5.6.7 Combo Chart Properties

Figure 34: Example of a Combo Chart

5.6.7.1 Combo Chart Layout

Figure 35: Combo Chart Layout Settings

50

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 50 of 92

FOR INTERNAL USE ONLY

5.6.7.2 Combo Chart Series

Figure 36: Combo Chart Series Settings and Color Panel

The series type, shape, and colors are set as follows:


Series

Type

Shape

Line

Fill

Series 1

Column

N/A

N/A

RGB 1/72/128

Series 2

Line

Circle

RGB 146/208/80

RGB 146/208/80

Series 3

Line

Circle

RGB 255/192/0

RGB 255/192/0

(not shown
above)

51

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 51 of 92

FOR INTERNAL USE ONLY

Figure 37: Combo Chart Series Settings and Relationship to the Sample

The column and line settings are as follows:

52

Marker Size Transparency Enable Markers

Notes

Column

25

0%

N/A

Marker Size can also depend


on the number of series

Line

25

0%

Yes

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 52 of 92

FOR INTERNAL USE ONLY

5.6.7.3 Combo Chart Axes

Figure 38: Combo Chart Axes Settings

Axes are set as follow:


Axes

53

Line Color

Thickness

Vertical Axis

RGB 0/0/0

Horizontal

RGB 0/0/0

Horizontal Gridlines Major

RGB 236/236/236

Horizontal Gridlines Major

RGB 236/236/236

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 53 of 92

FOR INTERNAL USE ONLY

5.6.7.4 Combo Chart Texts

Figure 39: Combo Chart and Text Settings

Text Type
ALL TEXTS

Chart Title

Sub Title

Horizontal (Category) Axis Title


Horizontal (Category) Axis Labels

54

Property

Standards

Font

Verdana

Font Color

RGB 0/0/0

Font Type

Bold

Font Size

12

Alignment

Center

Font Type

Bold

Font Size

10

Alignment

Center

Font

Verdana

Font Type

Bold

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 54 of 92

FOR INTERNAL USE ONLY


Vertical (Category) Axis Title

Font Size

10

Vertical (Category) Axis Labels


Legend
Mouse-Over Values

5.6.8 Column Chart Properties

Figure 40: Example of a Column Chart

5.6.8.1 Column Chart Layout


Please see section 5.3.6.1 Combo Chart Layout for the standard.

5.6.8.2 Column Chart Series


The series colors and marker size are set as follows:
Series

Fill

Marker Size

Transparency

Series 1

RGB 255/192/0

25

0%

Series 2

RGB 1/72/128

5.6.8.3 Column Chart Axes


Please see section 5.3.6.3 Combo Chart Axes for the standard.

5.6.8.4 Column Chart Texts


Please see section 5.3.6.4 Combo Chart Texts for the standard.

55

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 55 of 92

FOR INTERNAL USE ONLY

5.6.9 Bar Chart Properties

Figure 41: Example of a Bar Chart

Please refer to section 5.3.7 Column Chart Properties for the layout series, axes, and text
standard.

5.6.10

Stacked Column/Bar Chart Properties

Figure 42: Example of a Stacked Column Chart

5.6.10.1

Stack Column/Bar Chart Layout

Please see section 5.3.6.1 Combo Chart Layout for the standard.

5.6.10.2

Stack Column/Bar Chart Series

The series fill colors are set as follows:


Series

56

Fill

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 56 of 92

FOR INTERNAL USE ONLY


Series 1

RGB 1/72/128

Series 2

RGB 255/192/0

Series 3

RGB 255/192/0

Additional Use SAP Color Scheme as the selection guide


Series

5.6.10.3

Stack Bar Chart Axes

Please see section 5.3.6.3 Combo Chart Axes for the standard.

5.6.10.4

Stack Bar Chart Texts

Please see section 5.3.6.4 Combo Chart Texts for the standard.

5.6.11

Line Chart Properties

Figure 43: Example of a Line Chart

5.6.11.1

Line Chart Layout

Please see section 5.3.6.1 Combo Chart Layout for the standard.

5.6.11.2

Line Chart Series

The series colors and marker size are set as follows:


Series

57

Shape

Line

Fill

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 57 of 92

FOR INTERNAL USE ONLY


Series 1

Square

RGB 1/72/128

RGB 1/72/128

Series 2

Circle

RGB 255/192/0

RGB 255/192/0

Series 3

Star

Varies

Same as Line

5.6.11.3

Column Chart Axes

Please see section 5.3.6.3 Combo Chart Axes for the standard.

5.6.11.4

Column Chart Texts

Please see section 5.3.6.4 Combo Chart Texts for the standard.

5.6.11.5

Line Chart Series

5.6.12

Pie Chart Properties

Figure 44: Example of a Pie Chart

58

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 58 of 92

FOR INTERNAL USE ONLY

5.6.12.1

Pie Chart Layout

Figure 45: Pie Chart Layout Settings

5.6.12.2

Pie Chart Series

Use default color Xcelsius selects based on the color theme, unless you know that the pie chart
always include x number of colors. Use standard set of colors used in other charts in conjunction
with SAP color scheme in selecting colors for each data point.

5.6.12.3

Pie Chart Texts

Refer to Section 5.3.6 for the Chart Text standard.

59

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 59 of 92

FOR INTERNAL USE ONLY

5.6.13

What-If Properties

Figure 46: Example of a What-If

Xcelsius
Component
Type
Background

Label

Spreadsheet
Table

60

Property Group

General

Property

Standards

Background Color

RGB 255/255/255 (white)

Transparency

0%

Border Scale

100%

Font

Verdana

Font Type

Bold

Font Size

10

Font Color

RGB 10/15/20

Alignment

Center

Layout

Show Gridlines

Yes

Color

Gridline Color

RGB 52/75/109

Color Rows

Over Color

RGB 150/168/195

Text

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 60 of 92

FOR INTERNAL USE ONLY


Xcelsius
Component
Type

Property Group

RGB 52/75/109

Track Color

RGB 255/255/255 (white)

Thumb Color

RGB 150/168/195

Button Color

RGB 255/255/255 (white)

Button Symbol Color

RGB 0/0/0

Layout

Enable Ticks

Yes; Auto Scale

Text - Title

Font

Verdana

Font Type

Bold

Font Size

12

Font Color

RGB 0/0/0

Font

Verdana

Font Type

Bold

Font Size

10

Font Color

RGB 0/0/0

Marker Color

RGB 240/171/0

Track Color

RGB 255/255/255 (white)

Tick Color

RGB 111/119/119

Text - Value

Color

5.6.14

61

Standards

Selected Color
Scroll Bar

Horizontal
Slider

Property

Alerts Properties

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 61 of 92

FOR INTERNAL USE ONLY


Figure 47: Example of Alerts

Xcelsius
Component
Type
Icon

5.6.15

Property Group

Alerts

Property

Standards

Red Alert Color

RGB 255/0/0 (Xcelsius default)

Yellow Alert Color

RGB 255/255/0 (Xcelsius default)

Green Alert Color

RGB 0/255/0 (Xcelsius default)

Trends Properties

Figure 48: Example of Trends

Xcelsius
Component
Type
Trend Icon

Property Group

Colors

Property

Standards

Positive Value Color


(Green)

RGB 0/176/80

Zero Value Color


(Yellow)

RGB 255/255/0 (Xcelsius default)

(Default Green Makes it easier to


read the arrow compared with the
green used in alerts)

Negative Value Color RGB 255/0/0 (Xcelsius default)


(Red)

5.6.16

Drop Down Properties

Figure 49: Example of Drop Down List

The standards for Drop Down within Body area are the same as the Drop Down standard
included in the Header area. Please refer to section 5.2.3.2, Header Detail Properties of this
document.
62

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 62 of 92

FOR INTERNAL USE ONLY

5.6.17

Tab Properties

Figure 50: Example of Tabs

Xcelsius
Component
Type
Label Based
Menu

Property Group

Layout

Transparency

0%

Font

Verdana

Font Type

Regular

Font Size

10

Font Color

RGB 0/0/0

Alignment

Center

Font

Verdana

Font Type

Bold

Font Size

11

Font Color

RGB 0/0/0

Alignment

Center

General

Tab Alignment

Left

Labels

Font

Verdana

Font Type

Bold

Font Size

12

Font Color

RGB 0/0/0

Background Color

RGB 255/255/255

Labels

Color

63

Standards

Button Separation

Text Title

Tab Set
Container

Property

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 63 of 92

FOR INTERNAL USE ONLY


Xcelsius
Component
Type

Property Group

Property

Standards

Tab Background
Over Color

RGB 255/255/255

Tab Background
Selected Color

RGB 101/153/203

Labels Default
Color

RGB 0/0/0

Labels Over Color

RGB 1/72/128

This option is valid only when you


have more than 2 tabs

Note: This option in Xcelsius does not


seem to work.
Labels Selected
Color

5.6.18

RGB 0/0/0
This option in Xcelsius does not seem
to work.

Click Box Properties

Figure 51: Example of a Click Box

Xcelsius
Component
Type
Check Box

5.6.19

Property Group

Text Title

Property

Standards

Font

Verdana

Font Type

Bold

Font Size

10

Font Color

RGB 0/0/0

Radio Button Properties

Figure 52: Example of Radio Buttons

64

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 64 of 92

FOR INTERNAL USE ONLY

Xcelsius
Component
Type
Radio Button

Property Group

Layout

Text Labels

Color - Marker

5.6.20

Property

Standards

Marker size

18

Horizontal Margin

Vertical Margin

Enable Background

No

Font

Verdana

Font Type

Bold

Font Size

10

Font Color

RGB 0/0/0

Default Color

RGB 216/216/216

Selected Color

RGB 1/72/128

Detail Report Link Properties

Figure 53: Example of a Detail Report Link

Xcelsius
Component
Type
URL Button

65

Property Group

Property

Standards

Layout

Show Background

Yes

Text Label

Font

Verdana

Font Type

Bold

Font Size

10

Font Color

RGB 0/0/0

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 65 of 92

FOR INTERNAL USE ONLY

Color Button

Color Labels

66

Alignment

Center

Default Color

RGB 255/255/255 (white)

Selected Color

RGB 255/255/255 (white)

Default Color

RGB 0/0/0

Selected Color

RGB 255/255/255 (white)

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 66 of 92

FOR INTERNAL USE ONLY

6 Web Intelligence Standards


This section explains the UI standards for Web Intelligence (WebI) reports. WebI reports are
used for detail-level analysis within IVA. A WebI report is called by Xcelsius (via URL buttons and
OpenDoc function) and opens up as a separate window.

Figure 54: Example of a WebI Report

Since this is not displayed within the dashboard framework as well as the construction is done
within WebI application, WebI reports uses own layout and other standards as described in this
section.

6.1 WebI Report Layout


6.1.1 First Page Layout
The layout used for the first page of the report includes report title section which is not included in
the subsequent pages.

67

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 67 of 92

FOR INTERNAL USE ONLY

Figure 55: WebI Report First Page Layout

Callout

Name

Page Header

Description
The page header for the page. This section includes SAP and IVA
branding.
Page Header is repeated in every page.

Report Title

The report title for the report that includes the name of the report and
other report-level information.
Report Title only appears on the first page of the report

Section Header The Section Header is the name of the dimension for which Report Body
is sliced by.
Section Header appears on the top of every report section.

Alternatively, Section Header is used as the title section for the Report
Body.
D

Report Body

The Report Body includes charts and tables for the given section header.

Page Footer

The page footer for the page. This section run date and page number.
Page Footer is repeated in every page.

From the WebI structure point of view, heres the example:

68

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 68 of 92

FOR INTERNAL USE ONLY

Figure 56: Example of WebI Structure View for a First Page

6.1.2 Subsequent Page Layout


The layout used for the subsequent pages of the report is as follows. Please refer to the above
section for the definitions.

69

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 69 of 92

FOR INTERNAL USE ONLY

Figure 57: WebI Report Subsequent Page Layout

6.2 Page Header


Figure 58: Example of a Page Header

Page Header includes the following three elements:


Report Header (native to WebI)
SAP Branding
IVA Branding

6.2.1 Report Header Properties


WebI Object
Type

Property Group

Report Header Appearance


and Footer
Page Layout

Property

Standards

Background Color

RGB 255/153/0

Top Margin

20 px

Bottom Margin
Left Margin
Right Margin
Page Orientation

70

Landscape

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 70 of 92

FOR INTERNAL USE ONLY


Show Page Header

Yes

Show Page Footer


Header Height

37 px

Footer Height

6.2.2 SAP Branding Properties


WebI Object
Type

Property Group

Free-Standing Display
Cell
(Blank)
Relative Position

Property

Standards

Width

55 px

Height

21 px

Left Edge

5 px

Top edge

4 px

6.2.3 IVA Branding Properties


WebI Object
Type

Property Group

Free-Standing Display
Cell
(Blank)
Text Format

Relative Position

71

Property

Standards

Width

Depends on the IVA names length

Height

21 px

Font

Arial, 10, Regular

Text Color

RGB 0/0/0

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Left

Left Edge

61 px

Top edge

4 px

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 71 of 92

FOR INTERNAL USE ONLY

6.3 Report Title

Figure 59: Example of a Report Subtitle

Page Header includes the following two elements:


Report Title
Report Subtitle

6.3.1 Report Title Properties


WebI
Template Type

Property Group

Free-Standing Display
Cell
(Blank)
Text Format

Relative Position

Property

Standards

Width

Depends on the text length

Height

26 px

Font

Arial, 8, Regular

Font Color

RGB 0/0/0

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Left

Left Edge

10 px

Top edge

37 px

6.3.2 Report Subtitle Properties


WebI
Template Type

Property Group

Free-Standing Display
Cell
(Blank)
Text Format

72

Property

Standards

Width

Depends on the text length

Height

42 px

Font

Arial, 12, Bold

Font Color

RGB 0/0/0

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 72 of 92

FOR INTERNAL USE ONLY


WebI
Template Type

Property Group

Relative Position

Property

Standards

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Left

Left Edge

10 px

Top edge

37 px

6.4 Section Header

Figure 60: Example of a Section Header

Section Header includes the following:


Section Header Bar

6.4.1 Section Header Bar Properties


WebI
Template Type

Property Group

Free-Standing Display
Cell
(Blank)
Text Format

73

Property

Standards

Width

986 px

Height

24 px

Font

Arial, 9, Bold

Font Color

RGB 0/0/0

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Left

Background Color

RGB 255/204/0

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 73 of 92

FOR INTERNAL USE ONLY


WebI
Template Type

Property Group

Relative Position

Property

Standards

Left Edge

12 px

Top edge

12 px

6.5 Report Body

Figure 61: Example of a Report Body

6.5.1 List of Visualization Included in Report Body


Although each WebI report may include different set of visualizations (charts, graphs, and tables),
the following is the list of visualizations generally included and standardized in WebI reports:
Visualization

Example

Column Chart

74

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 74 of 92

FOR INTERNAL USE ONLY


Visualization

Example

Bar Chart

Stacked Column Chart

Pie Chart

Table and Cross Tab

6.5.2 Color Palette


For all the charts/graphs included in this standard, the color for the data uses the following color
palette available within WebI:

75

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 75 of 92

FOR INTERNAL USE ONLY

Figure 62: WebI Color Palette Used

The first three colors (Blue, Orange, and Green), used most common in the charts and graphs,
are defined as follows:
Color

Fill

Blue

RGB 58/101/152

Orange
Green

239/162/82
RGB 0/148/112

6.5.3 Column Chart, Bar Chart, and Stacked Column Chart Properties
Column, bar, and stacked column charts all share the same standard. Column chart uses WebI
named called Vertical Grouped Bar Chart, while the bar char uses WebI template named Vertical
Groped Bar Chart. Stacked column chart uses WebI template named Vertical Stacked bar chart.
Both column and bar chart may include either single data point (as shown in the bar chart
example below) or multiple data points (as shown in the column chart example below). Include
chart legend when the chart includes multiple data points.
76

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 76 of 92

FOR INTERNAL USE ONLY

Stacked bar chart will always include multiple dimensions for the x axis, so legend must be
included.
Inclusion of chart title and X and Y axis titles are optional, depending on the report requirements.

Figure 63: Example of a Column Chart

Figure 64: Example of a Bar Chart

Figure 65: Example of a Stacked Column Chart

WebI
Template Type
Bar Chart Vertical
Grouped

Bar Chart -

77

Property Group

Property

Standards

Display

ALL

Depends on the requirement, including


the size. The size will mainly depend
on what other charts and tables are
included in the Report Body.

Appearance

Show Floor

Yes

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 77 of 92

FOR INTERNAL USE ONLY


WebI
Template Type

Property Group

Vertical
Grouped
Legend

Property

Standards

Floor Color

RGB 240/240/244

Show

Column/bar chart: If more than single


series, then Yes
Stacked column chart: Yes

Legend Title

Legend Values

Title

Data

Position

Right

Text Format

Arial, 12, Bold

Color

RGB 0/0/0

Text Format

Arial, 12, Bold

Text Color

RGB 0/0/0

Text Format

Arial, 12, Bold

Text Color

RGB 0/0/0

Enable

Depends

Text Format

Arial, 12, Bold

Text Color

RGB 0/0/0

Palette

See Section 6.5.1.1 above

Border Color

If single series: RGB 51/51/153


If multiple series: RGB 51/102/255

X Axis

Y Axis

78

Values

Yes

Text Format

Arial, 8, Regular

Text Color

RGB 0/0/0

Grid

Yes

Show Markers

Yes

Grid Color

RGB 179/179/201

Values

Yes

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 78 of 92

FOR INTERNAL USE ONLY


WebI
Template Type

Property Group

X and Y Axis Label

Page Layout

Property

Standards

Text Format

Arial, 8, Regular

Text Color

RGB 0/0/0

Enable

Depends

Text Format

Arial, 10, Bold

Text Color

RGB 0/0/0

Relative Position

Varies depending on other


visualizations placed on the Report
Body.

6.5.4 Pie Chart Properties

Figure 66: Example of a Pie Chart

WebI
Template Type
Pie

79

Property Group

Property

Standards

Display

ALL

Depends on the requirement, including


the size. The size will mainly depend
on what other charts and tables are
included in the Report Body.

Appearance

Show Floor

No

Legend

Show

Yes

Position

Right

Text Format

Arial, 12, Bold

Color

RGB 0/0/0

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 79 of 92

FOR INTERNAL USE ONLY


WebI
Template Type

Property Group

Legend Title

Legend Values

Title

Data

Y Axis

Page Layout

Property

Standards

Text Format

Arial, 12, Bold

Text Color

RGB 0/0/0

Text Format

Arial, 8, regular

Text Color

RGB 0/0/0

Enable

Depends

Text Format

Arial, 12, Bold

Text Color

RGB 0/0/0

Palette

See Section 6.5.1.1 above

Border Color

RGB 102/102/153

Enable

Depends

Text Format

Arial, 10, Bold

Text Color

RGB 0/0/0

Relative Position

Varies depending on other


visualizations placed on the Report
Body.

6.5.5 Table and Cross Tab Chart Properties

Figure 67: Example of a Table

WebI
Template Type
Horizontal
Table

80

Property Group

Header Cells

Property

Standards

Text Format

Arial, 9, Bold

Text Color

RGB 255/255/255

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 80 of 92

FOR INTERNAL USE ONLY


WebI
Template Type

Property Group

Vertical Table

Crosstab

Body Cells

Footer Cells

Alternate
Row/Column Colors

Page Layout

81

Property

Standards

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Left

Background Color

RGB 81/117/185

Text Format

Arial, 9, Regular

Text Color

RGB 0/0/0

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Left

Background color

RGB 255/255/255

Text Format

Arial, 9, Regular

Text Color

RGB 0/0/0

Vertical Text
Alignment

Canter

Horizontal Text
Alignment

Left

Background color

RGB 255/255/255

Frequency

Color

RGB 240/240/240

Text Color

RGB 0/0/0

Relative Position

Varies depending on other


visualizations placed on the Report
Body.

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 81 of 92

FOR INTERNAL USE ONLY

6.6 Page Footer

Figure 68: Example of a Page Footer

Page Header includes the following three elements:


Report Footer (native to WebI)
Run Date
Page Number

6.6.1 Report Footer Properties


Report Footer properties are set along with Report Header. Please refer to section 6.2.1. Report
Header.

6.6.2 Run Date Properties


WebI
Template Type

82

Property Group

Property

Standards

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 82 of 92

FOR INTERNAL USE ONLY


WebI
Template Type
Last Refresh
Date

Property Group

Display

Text Format

Relative Position

Property

Standards

Width

108 px

Height

21 px

Font

Arial, 8, Regular

Text Color

RGB 0/0/0

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Left

Left Edge

6 px

Top edge

6 px

6.6.3 Page Number Properties


WebI
Template Type

Property Group

Page Number/ Display


Total Pages

Text Format

Relative Position

83

Property

Standards

Width

108 px

Height

21 px

Font

Arial, 8, Regular

Text Color

RGB 0/0/0

Vertical Text
Alignment

Bottom

Horizontal Text
Alignment

Right

Left Edge

878 px

Top edge

8 px

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 83 of 92

FOR NTERNAL USE ONLY

Appendix A: References and Resources


A.1 IVA Development Methodology
The following are the list of documents for the IVA standard design and development
methodology:
IVA Development Process Overview
(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/61c0cd81-0117-2c10-dc9cc140d4b771f2)
o

Set of training materials (Webinars and PowerPoint slides) that explain the
overall IVA process and detailed explanations about ecosystem and
stakeholders. It also includes step-by-step training on Governance and Launch
activities.

Visioning Phase Training


(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/c0e49223-282d-2c10-239de935761ab537)
o

Set of training materials (Webinars and PowerPoint slides) that explain the
process, techniques, and templates used within the Visioning phase of the IVA
development

IVA Development At a Glance


(https://portal.wdf.sap.corp/irj/go/km/docs/guid/611f3d76-746d-2c10-78b2c8a253a48155)
o

At a glance document that lists all necessary inputs and outputs (deliverables)
necessary for an IVA development from Governance phase to M2 Launch phase.

Architecture and Engineering Detailed Development Plan Template


(https://portal.wdf.sap.corp/irj/go/km/docs/guid/71289eba-746d-2c10-3d87bd3179d388de)
o

Detailed development plan template for M1 and M2 development

IVA Reference Architecture (https://portal.wdf.sap.corp/irj/go/km/docs/guid/504ceea697ec-2b10-44aa-9dfad3c897fc)


o

IVA reference architecture slides This can be used as a template for the future
IVA architecture.

A.2 IVA Design and Development Templates


Vision Phase Synopsis Document Template
(https://portal.wdf.sap.corp/irj/go/km/docs/guid/20773b40-e468-2c10-46a0-ffa3642aadf5)
o

This document is used during the Visioning phase to capture Use Cases, KPIs,
and key dimensions to be included in IVA

Visualization Mock-Up Document Template


(https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0f438b9-98ec-2b10-84b5-9c66dd75171f)
84

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 84 of 92

FOR NTERNAL USE ONLY

This document includes a set of basic design pattern for the IVA visualization and
can be used as a future IVA mock-up template

Metadata Workbook (https://portal.wdf.sap.corp/irj/go/km/docs/guid/b08899ad-99ec2b10-f6bf-a470f5fd9859)


o

This document captures metadata information for KPIs and dimensions to be


included in IVA

Visualization Specification Template


(https://portal.wdf.sap.corp/irj/go/km/docs/guid/5190f2d4-956d-2c10-81b6-97ab63efab9f
o

This document act as a template for defining visualization technical specifications


for IVA dashboards and reports.

Xcelsius Template (https://portal.wdf.sap.corp/irj/go/km/navigation/guid/100174fa-956d2c10-6aac-c88a2aecd18f)


o

Template XLF document that includes standard themes and canvas size.

IVA A&E Wrapper Sample/Template


(https://portal.wdf.sap.corp/irj/go/km/navigation/guid/e04e8e40-516b-2c10-9a8ae940cf074808)
o

Sample code for the IVA A&E Wrapper

IVA Technical Development Standards and Best Practice


(https://portal.wdf.sap.corp/irj/go/km/docs/guid/8008d84b-966d-2c10-a98aa417c208241a)
o

This document provides development standards (naming standards and


packaging standards) for used for M1 and M2 development

IVA Logo File (https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c105a8b-81ae9d050d26)


o

Adobe Photoshop file for the IVA logo


(https://portal.wdf.sap.corp/irj/go/km/docs/guid/e0e0498d-966d-2c10-5a8b81ae9d050d26)

A.3 Visualization References and Tools


The following reference is used as an additional best practice reference for BI visualization
design:
6 BI Pitfalls and How to Avoid Them (http://www.informationmanagement.com/specialreports/2009_151/business_intelligence_bi_data_visualization10015710-1.html?ET=informationmgmt:e1039:2129501a:&st=email)
o

By Robert Kearse, published by Information Management. It describes data


visualization influences how users consume information. It is an external link:

Data Visualization Patters (https://portal.wdf.sap.corp/irj/go/km/docs/guid/8017c6c7516b-2c10-5a99-81b43b776c16)


o

85

Summary of dashboard design principles from Stephen Few's book, "Information


Dashboard Design."

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 85 of 92

FOR NTERNAL USE ONLY

Xcelsius Dashboard Design Best Practice


(https://portal.wdf.sap.corp/irj/go/km/docs/guid/809aa5f6-516b-2c10-d1bd93759647335e)
o

Presentation on visualization best practice using Xcelsius, compiled by Rich


Lewis (SAP).

Adobe Kuler (http://kuler.adobe.com/#null)


o

A free web-hosted application for generating and searching color themes.

Iconico ColorPic (http://www.iconico.com/colorpic/)


o

86

A free color picker tool.

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 86 of 92

INTERNAL

Appendix B: UI Standards in Action IVA Examples


This section provides a few of the IVA and other Xcelsius dashboard developed by Industry Analytics team using the UI standards illustrated in this
document.

87

Title: UI Standards for Industry Value Accelerators Front-End Components


Version: 1.1

Page 87 of 92

INTERNAL

Figure 69: SAP American Recovery and Reinvestment Act (ARRA) IVA M2

88

Title: UI Standards for Industry Value Accelerators Front-End Components


Version: 1.1

Page 88 of 92

INTERNAL

Figure 70: SAP Maximizing Customer Revenue and Retention (MCRR) IVA M1

89

Title: UI Standards for Industry Value Accelerators Front-End Components


Version: 1.1

Page 89 of 92

INTERNAL

Figure 71: SAP QatarGas IVA POC

90

Title: UI Standards for Industry Value Accelerators Front-End Components


Version: 1.1

Page 90 of 92

INTERNAL

Figure 72: Trade Promotion Effectiveness (TPE) integrated within SAP CRM Portal M2

91

Title: UI Standards for Industry Value Accelerators Front-End Components


Version: 1.1

Page 91 of 92

FOR NTERNAL USE ONLY

Copyright 2009 SAP AG. All Rights Reserved

No part of this publication may be reproduced or transmitted in any form or for any purpose without the
express permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components
of other software vendors.
Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z,
System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390,
OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+,
POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System
Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX,
Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM
Corporation.
Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of
Adobe Systems Incorporated in the United States and/or other countries.
Oracle is a registered trademark of Oracle Corporation.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or
registered trademarks of Citrix Systems, Inc.
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web
Consortium, Massachusetts Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented
and implemented by Netscape.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP
products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP AG in Germany and other countries.
Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web
Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and
in other countries. Business Objects is an SAP company.
All other product and service names mentioned are the trademarks of their respective companies. Data
contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG
and its affiliated companies ("SAP Group") for informational purposes only, without representation
or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to
the materials. The only warranties for SAP Group products and services are those that are set
forth in the express warranty statements accompanying such products and services, if any.
Nothing herein should be construed as constituting an additional warrant.

Title: UI Standards for Industry Value Accelerators Front-End


Components
Version: 1.1

Page 92 of 92