sap cloud for customer

Cloud For Customer UX Team

SAP Cloud For Customer

Web App UI Guidelines

C4C Web UI Guidelines

About

This is a documentation of Cloud for Customer Web UI* presenting:

• UI constructs

• Key UI patterns

• User interactions and corresponding system behaviors

Last updated: Mar. 19th 2015


Legends

A UI annotation

Interaction


Table of Contents

o System Log On

o UI Constructs

• Overview

• Navigation Layers

• Navigation Flow

o Header

• Overview

• Personalize

• Adapt

o Worksets Area

• Overview

• Scroll Tabs

• Arrange Tabs

• Worksets Menu

o Canvas

• Overview

• Anatomy

• Messages Area

o Dataset

• Overview

• Anatomy

• Header

• Quick Action(Add New Entity)

• Actions Button

• Tool Bar

• View Switch Controls

• Sorting

• Preset Filter

• Multi-faceted Browse Filter

• Chart Filter

• Advanced Filter

• Search

• Data Entities Area

• Quick View

• Adjust Data Column

• Arrange Data Column

• Sort Column

• Actions Column

• Open Object

o Special Worksets

• Feed

• Analysis

• Dashboard

• Reports

o Object Thing Inspector

• Overview

• Inspector

• Workspace

• Thin Inspector

• Anatomy

• Header Area

• Tags

• Facet Area

• Scroll Facets

• Facets Menu

• Canvas Area

• Facet Types

• Footer Area

• Follow, Flag & Favorite

• Quick Actions & Actions Menu

• Edit Object

• Actions Menu

o Tool Palette

• Overview

• Home

• Navigation

• Settings

• Calendar

• New Item

• Filter

• Search

• Choose Category

• Notifications

• Quick Create

• Save Options

o Pane Bar

• Overview

• Anatomy

• Tags Pane

• Shelf Pane

• Help Center Pane

• Feed Pane

• Employees Pane

• Products Pane

• Live Activity Pane

o Quick View

• Overview

• Tags

• Follow, Flag & Favorite

• Open Object

System Log On

Go to Table of Contents


System Log On

Input user ID and password

of 113

UI Constructs



UI Constructs > Overview

A Worksets

First level navigation of the application.

Each workset represents an optimized

focus on specific functional context.

B Datasets

The basic content in most worksets.

Shows data entities of a certain type in

terms of data tables.

D

A

C Object Thing Inspectors

Data entities of a certain type which are

contained in datasets.

D Inspector facets

Different aspects or associated data of the

object which can be viewed in object thing

inspectors.

C

B B B

of 113


UI Constructs > Navigation Layers

Small Overlay

Small Overlay

1st: Parent Layer (Worksets, Search Results, etc.)

2nd: Large Overlays (Inspector)

e.g. tools, quick view, quick create

Two Navigation Layers

The windowing model of C4C is designed

to support multi-tasking using single-

window approach. With this model, the

shell comprises of two main navigation

layers:

1. Parent Layer (Worksets, Search

Results, etc.)

2. Large Overlays (Inspector)

Some global UI components, including

Header, Tools and Panes, are available in

both navigation layers.

Small Overlay layer (e.g. tools, quick view,

browser) can be accessed from both

Parent Layer and Large Overlays.

of 113


UI Constructs > Navigation Layers > Parent Navigation Layer

A Header

B Worksets Area

C Canvas

D C

B

D Tool Palette

A

E

E Pane Bar

of 113


UI Constructs > Navigation Layers > Large Overlay Layer

A Header

B Overlay Canvas

C Tool Palette

C B

D Pane Bar

D

A

of 113


UI Constructs > Navigation Flow > Workset To Workset

Workset to workset

The user can navigate across different

task-oriented components, worksets by the

using the tabs in the first level navigation

menu.

of 113


UI Constructs > Navigation Flow > Dataset To Dataset

Dataset to dataset

Under each workset, there’s a second

level navigation, focus areas menu that

provides access to various types of data

table which are presented as datasets.

of 113


UI Constructs > Navigation Flow > Dataset To Object Thing Inspector & Facet

Dataset to object thing inspector &

facet

From a dataset, objects can be opened in

object thing inspectors.

Facets menu provides navigation in the

object thing inspector for the user to drill

down specific details of the object.

of 113

Header



Header > Overview

Header

The Header displays the application name

and offers access to global functionalities

such as Personalize, Adapt, Help, View

Full Screen and Log Out.

It is a fixed area, which is not influenced by

scrolling.

of 113


Header > Personalize

Open Personalize menu

Personalization menu provides all types

of users with options including:

• Start/End Personalization

Personalize the layout and visibility of

components in the system UI.

• Discard Screen

Discard current personalization.

• My Settings

Change general settings.

• My Background Image

Change background image.

• Feed Source

Manage feed sources.

The personalization will be only applied to

the UI of current user.

of 113


Header > Personalize > Start Personalization

Hover on personalizable area

In personalization mode, area that can be

personalized will be highlighted with blue

border and yellow background when it’s

being hovered on.

Personalization tools which is a set of

buttons will be shown on the highlighted

area.

A Personalization mode header

Background image of header changes to

grey diagonal lines notifying that it’s in

personalization mode.

The application can still be used normally

in personalization mode.

B

B Personalization tools

Tool buttons vary depending on current

targeted area. For instance, they could be

add items, rearrange/hide element and

select parent.

A

of 113


Header > Adapt

Open Adapt menu

Adaptation can only be used specifically by

the key users with options including:

• Company Settings

• Company Branding Images

Personalize background image, header

bar and logo.

• Edit Master Layout

• New Page Layout

• Edit Page Layout

• Assign Page Layout

Tailor the UI for different type of users.

• Delete Page Layout

• Export Layout

• Import Layout

• Revert Changes for This Screen

Discard layout changes.

• Launch in Microsoft Silverlight

Launch Silverlight UI.

The adaptation can be applied to the UI of

not limited to one but a group of users.

of 113


Header > Adapt > Edit Master Layout

A Hover on adaptable area

In adaptation mode, area that can be

adapted will be highlighted with blue

border and yellow background when it’s

being hovered on.

Adaptation tools which is a set of buttons

will be shown on the highlighted area.

A Adaptation mode header

Background image of header changes to

grey diagonal lines with a red message

notifying that it’s in adaptation mode.

The application can still be used normally

in adaptation mode.

B Adaptation tools

Tool buttons vary depending on current

targeted area. For instance, they could be

add items, revert adaptation,

rearrange/hide/copy element and select

parent.

Elements that are chosen not visible by

key users will not be visible and

personalized by end users in

personalization mode.

B

of 113

Worksets Area



Worksets Area > Overview

Worksets

Worksets in general provide a non-

database centric view of application and

each workset represents an optimized

focus on specific functional context.

They cut the application into task-oriented

pieces and can be regarded as the first

level navigation of the application.

Selected workset is highlighted BOLD.

of 113


Worksets Area > Scroll Tabs

Click scroll arrows

Clicking arrows scrolls the workset tabs

menu forward or backward horizontally.

Workset tabs can also be scrolled by the

mouse roller.

of 113


Worksets Area > Arrange Tabs

Click and drag workset tab

Workset tabs can be arranged by being

clicked and dragged to a different position

in the menu.

of 113


Worksets Area > Worksets Menu

Click worksets menu button

Shows all workset labels in a list menu.

User can select and navigate to different

worksets from the menu.

of 113

Canvas



Canvas > Overview

Canvas

Canvas is the main working space

containing contents of different worksets

and any drilled down information.

of 113


Canvas > Anatomy

A Focus areas

Provides second-level navigation under

current workset. A

B Content area

Displays content of selected focus area or

workset in terms of dataset(for most

cases), data diagrams or functionality

groups etc.

B

of 113


Canvas > Messages Area

A Messages area

A collapsible pane that pops in from the

bottom of the canvas showing messages

regarding action confirmations, errors or

system warnings resulted from user’s

actions.

A

of 113

Dataset



Dataset > Overview

Dataset

The data entity worksets display data

entities of a certain type in the form of

datasets.

A dataset is constructed by header, tool

bar and data entities.

of 113


Dataset > Anatomy

A Header

Shows the title of current focus area or

workset and associated actions.

A

B Tool bar

Contains dataset tools.

C

B

C Data entities area

Displays data entities of current focus area

or workset in the selected view mode.

of 113


Dataset > Header

A Title

Shows the title of dataset and sub-

category with amount of data.

A

B Quick actions & actions menu

Frequently-used actions(e.g. add new

entity) are shown as individual quick action

buttons.

The other available actions associated with

current dataset are contained in the

actions menu.

B

of 113


Dataset > Header > Quick Action

A Quick create overlay

Allows the user to enter key information to

quickly create an entity. Mandatory

information is highlighted with blue

asterisks.

Click New entity button

Triggers quick create overlay for the user

to create new object in current dataset.

A

of 113


Dataset > Header > Actions Menu

Click actions button

Triggers pop-up menu for the user to

select and apply actions associated with

the dataset.

of 113


Dataset > Tool Bar

A View switch controls

Toggle controls of different views of

dataset entities.

A

B Sorting button

Sorts data entities in dataset by attributes.

C B

C Preset filter

Preset filter of dataset entities.

D E

D Other filters

Usually includes multi-facet browse filter,

chart filter and advanced filter.

E Search box

Search data entities in current dataset by

keywords.

of 113


Dataset > Tool Bar > View Switch Controls > Card View

Click card view switch

Displays data entities in card view.

of 113


Dataset > Tool Bar > View Switch Controls > Map View

Click map view switch

Displays data entities in map view.

of 113


Dataset > Tool Bar > View Switch Controls > Calendar View

Click calendar view switch

Displays data entities in calendar view.

of 113


Dataset > Tool Bar > Sorting

Click sorting button


select a data attribute as sorting criterion.

of 113


Dataset > Tool Bar > Preset Filter

Open preset filter menu

Triggers drop-down menu for user to

select and apply the preset filters to the

dataset.

of 113


Dataset > Tool Bar > Multi-faceted Browse Filter

Click filter button

Filter pops in under tool bar providing

multi-faceted filtering function for the user

to narrow down the dataset content.

of 113


Dataset > Tool Bar > Chart Filter

Click chart filter button

Chart filter pops in under tool bar

presenting data attributes in pie charts.

User can click on the pie chart to filter

dataset content.

of 113


Dataset > Tool Bar > Advanced Filter

Click advanced filter button

Advanced filter pops in under tool bar

allowing the user to lock on entities by

setting values of attributes.

A Save Query button

Save attribute values query as a new

predefined filter.

A

of 113


Dataset > Tool Bar > Search

Input keyword

Search applies to contents in current

dataset and happens automatically after

the user inputs the keyword.

of 113


Dataset > Data Entities Area > Quick View

Hover on an object link

Triggers quick view overlay of the hovered

object.

A Quick view overlay

Shows primary attributes and tools of the

hovered object in an overlay*.

*Please refer to Quick View section for

details.

A

of 113


Dataset > Data Entities Area > Adjust Data Column

Click and drag a column border

Data column width is adjustable by clicking

and dragging the border.

of 113


Dataset > Data Entities Area > Arrange Data Column

Click and drag a column header

Data column order can be arranged by

clicking and dragging a header to a

different position in the table.

of 113


Dataset > Data Entities Area > Sort Column

Click column header

Triggers pop-up menu for the user to sort

the table ascendingly or descendingly

based on the data in the particular column.

of 113


Dataset > Actions Column

A Actions column

Some datasets have a column of action

buttons which allows the user to apply

actions such as flag, add to favorite or

delete etc. to data entities in the table.

A

of 113


Dataset > Open Object

Click object link

Opens the selected object in an object

thing inspector*.

*Please refer to Object Thing Inspector

section for details.

of 113

Special Worksets



Special Worksets > Feed

Feed workset

Feed pushes a continuous stream of

updates to the user. A source for an

update can be:

• A person sending updates

• A sales entity (e.g. opportunity)

generating status updates

• A Business Intelligence query

triggers rule-based

alerts/notifications

• An external feed source such as

company news/blogs

A user can select what sources of updates

he/she wants to follow. Everything he/she

follows will feed updates into the user’s

update stream.

of 113


Special Worksets > Analysis

Analysis workset

Analysis is a workset which shows preset

data and statistics in terms of table or chart

in dashboard view.

of 113


Special Worksets > Analysis > Dashboard > Drill Down Pane

Click Show Drill Down Pane button

Toggles a pop-in pane containing drill

down, filters and key figures for the user to

drill down specific data in the chart.

A A Drill down pane

A check list of drill down factors, filtering

criteria and key figures attribute.

of 113


Special Worksets > Analysis > Reports

Reports dataset

Shows report views, reports, favorites and

flagged items in a dataset.

of 113

Object Thing Inspector



Object Thing Inspector > Overview > Inspector

Inspector

The object thing inspector showcases

every information about an object of a

certain type.

An object thing inspector is typically

constructed by header area, facet area,

canvas area and footer area.

Based on the difference of layout, there

are 3 different types of object thing

inspector in the system.

of 113


Object Thing Inspector > Overview > Workspace

Workspace

Object header area is shown on the top

giving more width for the canvas area.

of 113


Object Thing Inspector > Overview > Thin Inspector

Thin inspector

The thin inspector only shows the object

icon and name in the header area.

The header information is summarized in

the Details facet.

of 113


Object Thing Inspector > Anatomy

A Header area

Displays a summary of this object

including the thing type, header

information and tags.

A

B Facet area

Facets bar allows the user to navigate

across different facets within the thing

inspector by using facets tabs or menu.

Selected facet is underscored with bigger

font size.

C

B

C Canvas area

Shows detail information of selected facet.

Different facets have different ways of

presenting contents.

Default facet is Overview.

D

D Footer area

Contains follow, flag and favorite toggle

buttons and object related actions.

of 113


Object Thing Inspector > Header Area

A Object name

Shows type, icon and name of the object. A

B Header information

Primary information of object.

C

B C Tags

Tags added by the user.

of 113


Object Thing Inspector > Header Area > Tags

Click tags edit button

Allows the user to add/remove tags to/from

the object.

of 113


Object Thing Inspector > Facet Area > Scroll Facets

Click scroll arrows

Scrolls the facet tabs menu forward or

backward horizontally.

of 113


Object Thing Inspector > Facet Area > Facets Menu

Click facets menu button

Shows all facet label in a list menu.

User can select on the menu and navigate

to different facets.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Overview

Overview facet

The default facet of the object thing

inspector.

Shows an aggregation of relevant

information giving the user an high level

overview of the object.

Details about the relevant information in

Overview facet can be accessed in

corresponding facets.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Single Data Table

Single data table

Displays facet content in one data table.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Multiple Data Tables

Multiple data tables

Displays facet content in terms of multiple

data tables.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Data Chart

Data chart

Displays facet content in terms of data

charts.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Master/Details

Master/details

Displays facet content in terms of master

data table and details.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Dataset

Dataset

Displays facet content in terms of dataset.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Timeline

Dataset

Displays facet content in terms of timeline.

of 113


Object Thing Inspector > Canvas Area > Facet Types > Document Flow

Dataset

Displays facet content in terms of

document flow diagram.

of 113


Object Thing Inspector > Footer Area > Follow, Flag & Favorite

Click Follow/Flag/Favorite button

Toggles following, flagging and favoring

actions.

of 113


Object Thing Inspector > Footer Area > Quick Actions & Actions Menu

A Quick action and actions menu

Frequently-used actions(e.g. Edit) are

shown as individual quick action buttons.

The other available actions associated with

current object are contained in the Actions

menu.

A

of 113


Object Thing Inspector > Footer Area > Edit Object

Click Edit button

Object thing inspector changes to editing

mode with Save and Cancel buttons

shown.

The data that can be edited are header

information inside the object header area.

of 113


Object Thing Inspector > Footer Area > Edit Object > Text Field

Input value

Input values in text field by keyboard.

of 113


Object Thing Inspector > Footer Area > Edit Object > Drop Down Menu

Open drop down menu

Select values in drop down menu for field.

of 113


Object Thing Inspector > Footer Area > Edit Object > Value Help

Click value help button

Triggers value help overlay dialog.

A Value help dialog

Overlay dialog for the user to search and

select data entity from a table.

A

of 113


Object Thing Inspector > Footer Area > Actions Menu

Click Actions button


select and apply actions associated with

the object.

Actions vary depending on the type of

object.

of 113

Tool Palette



Tool Palette > Overview

Tool palette

Tool palette provides access to frequently-

used functions (e.g. search, quick create,

etc.), which is independent with the context

in the canvas.

Tool palette is available for both navigation

layers (parent layer and large overlay

layer).

of 113


Tool Palette > Home

Click Home button

Navigates to home page.

A Home page

Home page shows application features as

tiles which can be customized.

A

of 113


Tool Palette > Home > Navigation

Click a tile

Navigates to linked contents(dataset,

object thing inspector etc.) in the system.

of 113


Tool Palette > Home > Settings > Personalize

Click Personalize

Triggers home personalization overlay.

A Home personalize

Provides options for the user to change

settings of home page and show/hide tiles.

Home page can also be adapted by key

users for end users in different roles.

A

of 113


Tool Palette > Calendar

Click Calendar button

Shows calendar in an overlay canvas.

of 113


Tool Palette > Calendar > New Item

Click New button


create a new item(appointment, visit,

phone call etc.) in the calendar.

Quick create overlay will be shown upon

selecting the item type.

of 113


Tool Palette > Calendar > Filter

Click filter button

Triggers pop-up check list for the user to

filter the items shown in the calendar.

of 113


Tool Palette > Search

Click Search button

Pops up search box for global searching.

of 113


Tool Palette > Search > Choose Category

Open category drop down menu

The user can choose a category to narrow

down the scope of searching.

of 113


Tool Palette > Notifications

Click Notifications button

Triggers overlay showing the latest 5

notifications.

A View all button

Opens a larger overlay on canvas showing

all notifications.

A

of 113


Tool Palette > Quick Create

Click Quick Create button

Triggers quick create overlay for user to

create new object of a certain type.

A Quick create buttons

B

A

B Quick create overlay

Allows the user to enter key information to

quickly create an object. Mandatory

information is highlighted with blue

asterisks.

of 113


Tool Palette > Quick Create > Save Options

Open save options menu

Triggers drop down menu with options

including save this object, save this object

and continue creating another object and

save this object and open it in an object

thing inspector.

of 113

Pane Bar



Pane Bar > Overview

Pane bar

Offers universal access to context

independent content. So users don’t have

to navigate away from their main task to

find often used information/entities.

The Panes are workset agnostic, i.e.

available throughout all worksets.

Clicking on tabs on pane bar will triggers

the pane expansion.

of 113


Pane Bar > Anatomy

A C

B

A Pane tabs

Navigation of different panes. Selected

pane is highlighted BOLD with arrow

pointing at.

Clicking arrow will collapse the pane area.

B Tool bar

Usually contains tools such as search bar,

filter, view switch controls etc.

C Pane body

Content of selected pane.

D Worksets & canvas areas

With side pane expanded, the worksets

and canvas areas will be shrunk.

D

of 113


Pane Bar > Tags Pane

A Tool bar

Contains search bar and filter.

B B Edit tag button

When being hovered, an edit button will be

shown for the user to edit the name of the

tag.

A

C

C Remove tag button

When being hovered, a remove button will

be shown for the user to remove the tag.

of 113


Pane Bar > Tags Pane > Search Object By Tag

Click tag link

Triggers global search for objects with

selected tag.

A Search result overlay

Shows search result of objects with

selected tag.

A

of 113


Pane Bar > Shelf Pane

A Tool bar

Contains search bar and filter.

B B Flag and Favorite icon marks

Objects that are flagged and/or added to

favorite will be displayed in shelf pane.

A

of 113


Pane Bar > Shelf Pane > Open Object

Click shelf item

Opens selected object in object thing

inspector.

A Object Thing Inspector

Object thing inspector* of selected shelf

item.



A

of 113


Pane Bar > Help Center Pane

Help Center Pane

Shows links of help resources.

of 113


Pane Bar > Feed Pane

Feed Pane

Shows data streams from feed sources.

of 113


Pane Bar > Employees Pane > List View

A Tool bar

Contains view switch controls, predefined

filter and search bar. A

B

B Employees list

Clicking a link opens selected employee

object in object thing inspector.

of 113


Pane Bar > Employees Pane > Thumbnail View

A Tool bar

Contains view switch controls and search

bar. A

B Employees thumbnails

Clicking a link opens selected employee


B

of 113


Pane Bar > Products Pane > List View

A Tool bar


bar. A

B Products list

Clicking a link opens selected product


B

of 113


Pane Bar > Products Pane > Thumbnail View

A Tool bar


bar. A

B Products thumbnails

Clicking a link opens selected product


B

of 113


Pane Bar > Live Activity Pane

Live activity pane

Show information of current live activity.

of 113

Quick View



Quick View > Overview

A Quick view overlay

Quick view is a preview on an object. It

appears wherever the user might want to

get some more information on an object

without navigation.

Quick view can be triggered from the

canvas, pane, thing inspector and quick

view, by hovering over the link of an

object.

Quick view dismisses when user moves

the cursor out of the quick view area.

A

A

of 113


Quick View > Tags

Click tags edit button

Allows the user to add or remove tags

from the object.

of 113


Quick View > Follow, Flag & Favorite

Click Follow/Flag/Favorite button

Toggles following, flagging and favoring

actions.

of 113


Quick View > Open Object

Click Open button

Opens the object in object thing inspector*.



of 113

Thank you!

Cloud For Customer UX Team

Kouis Ou, Gaith Kawar, Prerna Makanawala

© 2015 SAP SE or an SAP affiliate company. 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 SE or an SAP affiliate company.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company 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 warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

114

sap cloud for customer

Documents