The Web Client User Interface Detailed View

(1)

The Web Client User Interface

Detailed View

SAP Enhancement Package 1 for SAP CRM 7.0 Web Client UI Framework

This detailed view focuses primarily on describing the ideas and concepts behind the SAP CRM Web Client UI, which was introduced with SAP CRM 2006s and continuously

enhanced until now.

It should help the audience to understand the main building blocks of the new user

interface, get to know the features provided and learn about the flexibility already on user level (personalization) the new UI offers.

It is not meant as a configuration or customizing guide, it rather focuses on helping people without any detailed knowledge of the Web Client UI to easily get into the topic and know what it all is about, so it is a starting point.

(2)

2

Web Client User Interface – SAP CRM

Why does the Web Client User

Interface matter for CRM customers?

User adoption is one of the key success factor for any CRM project The simplicity of the CRM Web Client UI leads to high user adoption and increased end user productivity

The CRM Web Client UI significantly facilitates the search, review and maintenance of information leveraging Web 2.0 standards

Especially in the Customer Relationship Management area the last 10 years have shown, that user adoption is one of the if not THE main success factor for projects as CRM users are often not typcial software users and rather focused on selling to their customers or servicing them.

Neglecting this sensitivity of the end users in projects often puts the complete project at risk, while mitigating this risk is a fairly simple task.

Involving end users, listening to them and adapting the user interface to the end users needs is key for every CRM project. To support this task SAP delivers a state of the art, web 2.0 like user interface which is not only fun and simple to use, but also provides perfect and easy personalization and configuration possibilities.

Using these UI capabilities lets every project optimize the CRM software to ensure high adoption („the software works the way I do“) and an increased productivity for end users, as the look and feel as well as the handling is equal to their internet experience. Often users do not have to learn things again, as they know them already from shopping at amazon, browsing on google etc.

In addition to this high flexibility and state of the art user interface design, the CRM Web Client UI is designed to easily search for and find information, review lists of information or information details as well as maintain information right where the user is.

(3)

Web Client User Interface – SAP CRM

Key Features

State of the art, modern user interface leveraging Web 2.0 paradigms

Simple information and navigation architecture to facilitate finding, reviewing and

editing of information

Broad personalization capabilities across all software areas to let the user decide

how he works best

Simple but flexible UI configuration capabilities to pre-define the user interface for

user groups

The Web Client User Interface is the first step into a new era of SAP CRM user interfaces regarding usability and flexibility for the business user.

(4)

4

Web Client User Interface – SAP CRM

Key Benefits

High user adoption rate as

immediately you will feel familiar with the User Interface

CRM 2.0 – Web 2.0 themes

integrated to facilitate ease of use

Easy and flexible personalization and

configuration to adapt to what your users really need

Rich functionality through all areas of

CRM

Simple

Flexible

(5)

Web Client User Interface – SAP CRM

Screenshot: Home Page

(6)

6

Agenda

1. Challenges and Market Trends

2. New SAP CRM Web Client User Interface

2.1.

General Approach

2.2.

L-Shape – the static frame

2.3.

Entry Pages

2.4.

Searches

2.5.

Overview Pages

3. Miscellaneous

(7)

Usability Differs Among Various Groups

Facts and Trends

Different users have different needs

Ask 10 users, get “12” different answers

Everyone immediately forms a personal opinion when using something

First impressions carry a lot of decision-forming power Whatever UI you provide –

“Some will love it, some will hate it”

People

Projects often fail due to low end-user adoption

End users/business units drive IT buying decisions Challenge: Tradeoffs are

required between what users really do – day-to-day – and the true scope of the project

Business

Old times:

Efficiency and Effectiveness Now focus on

Satisfaction and Ease of Use Future:

Joy of Use

Market

►Usability (e.g., the UI) is one key factor for the

success of every SAP CRM project

►“One size does not fit all” – Flexibility is key

Working in the area of usability you easily find out that user experience is a very

subjective impression. There is mostly no ONE RIGHT way as everyone likes something different

On the other hand side especially the first look, the first appearance of something, the first screen(s) of a software a user sees immediately form a first impression, so the first sight has a lot of opinion forming power.

(8)

8

The CRM Web Client User Interface

User Interface Unification

Easy-to-use

High productivity through intuitiveness and simplicity

Appealing state of the art visual web design consistent across demand and on-premise

Leveraging Web 2.0 standards Flexible

Personalization by end-user

Custom field configuration

Custom screen layouts

One Web-based, easy-to-use, and easy-to-configure UI for all SAP CRM online users

Based on the proven SAP Interaction

Center Web Client

SAP NetWeaver Portal is an option,but is not required

Tailored to users in sales, service, and marketing

PCUI and SAPGUI are no longer

supported with SAP CRM 2006+, but are maintained with SAP CRM 2005 until 2011

(9)

The SAP CRM Web Client UI Example

Home Page

(10)

10

The SAP CRM Web Client UI Example

Overview Page

(11)

2. New SAP CRM Web Client User Interface

2.1. General Approach

2.2. L-Shape – the static frame 2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(12)

12

Acronyms Used in This Presentation

The following slides use the acronyms below

AB = Assignment block OP = Overview page EP = Edit page ELP = Edit list page SP = Search page HOME = Home page WCP = Work center page

L-Shape = Frame in the upper and left areas of the screen that remains fixed NavBar = Navigation bar portion of the L-shape

QC = Quick create portion of the L-shape BW = SAP Business Information Warehouse CRM = Customer relationship management PPT = Microsoft PowerPoint

XLS = Microsoft Excel UI = User interface UIC = UI concept DDLB = Drop-down list box

On the following slide of this presentation you might find several acronyms used for facilitation reasons. Please check with this slide if you are unclear with any of the used acronyms

(13)

2. New SAP CRM Web Client User Interface 2.1. General Approach

2.2. L-Shape – the static frame 2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(14)

14

Customer Feedback

Regarding Usability and User Interface

“Users tend to read a screen from left to right” “Screens appear crowded,” and

“Too much information on one screen”

“Providing information on TABs is not intuitive; users don’t find this information”

“Make all important information or functions available with one or two clicks wherever you are”

“Show all information relevant to me on one screen” “Scrolling horizontally is a showstopper,”

and “Scrolling vertically is already standard” “Facilitate searching while providing flexible search

possibilities based on users needs” “Facilitate maintenance of data”

“It has to be clear to the user what has to be entered”

Examples before introducing the CRM Web Client UI

SAP has always paid high attention on usability and user experience of its products. Since the very early releases of SAP CRM SAP has consistently talked to customers and end users, has conducted usability test on large events like SAPPHIRE or ASUG as well as directly with customers projects.

These statements here are just some examples of customer/user feedback we received or observed during all our customer interactions.

The statements here are chosen also to highlight those areas that SAP focused on when inventing the new SAP CRM Web Client UI.

(15)

The SAP UI Roadmap

A Continuous Focus on Usability

IC WebC lient

SAPGUI

CRM We

b Client

SAP always focused on usability providing the User Interfaces for software solutions For SAP CRM SAP started back in the late 1990s and early 2000s providing the standard SAP User Interface SAP GUI for the SAP CRM solution

With SAP CRM 3.1 SAP introduced the first completely web based user interface with zero client side installation requirements – the People Centric User Interface embedded in the SAP NetWeaver Enterprise Portal.

In addition in release 4.0 SAP introduced a user interface that was especially designed and optimized for the large user group of Interaction Center agents – the Interaction Center Web Client

Finally with SAP CRM 2006s/2007 the new CRM Web Client User Interface was introduced as replacement for SAPGUI and the People Centric User Interface – incorporating and listening to all the customer and user feedback SAP received over the past years.

(16)

16

Details of the SAP Approach

The Path to The New User Interface

Equal focus on New UI interaction and New UI interaction and

navigation concept

navigation conceptand Easy and Easy and

flexible UI configuration

Guiding Principle:

As consistent as possible but at the same time as flexible as necessary

No changes to the general architecture

of the SAP CRM server or the business process customizing

Complete new UI architecture

with an unchanged UI technology -based on Business Server Pages (BSP)

End-user focused functionality

SAP CRM Web Client… Key goals to developing the new SAP CRM Web Client User Interface

…

… as the first step into as the first step into a new era of SAP CRM a new era of SAP CRM user interfaces and user interfaces and usability

usability

The main focus of the UI Unification project which led to the CRM Web Client UI was on two areas: A new UI interaction and navigation concept and

An easy and flexible UI configuration environment

The dual focus only makes the new UI really the first step into a new era of SAP CRM UIs. As no matter which standard UI is delivered, every customer will adapt it to his needs, therefore the equal focus on the UI configuration is key.

As difference to previous UIs SAP had chosen an „as consistent as possible but also as flexible as necessary“ approach, which led to a high consistency across all UIs , but ensured a high level of flexibility to follow the business use case and optimize in one UI for the different user needs Generally the SAP CRM server stayed unchanged, only the UI layers have been adapted and modified to allow the flexibility.

Another clear focus of the new UI was to enable business user functionality which is why rather administrator focused functionality still can be accessed via SAPGUI (e.g. IMG customizing)

In general the new CRM UI Framework contains the BOL/Genil Layer as well as leverages the BSP technology via a newly created tag library, supported by a new toolset for customers, partners, consultants and application programmers.

Application Variants: Based on the one holistic Framework there exists the need to provide the flexibility and freedom to server different navigation and interaction paradigms (e.g. within an Interaction Centre application a minimum of scrolling is allowed, a CRM on Demand solution has limited and easy to use customizing and configuration possibilities).

Basic HTML: A Cross browser support can be achieved as few browser specific HTML gets rendered

Componentized application: One of the central concepts of the new CRM UI Framework is the componentization. The different applications are logically bundled within components, which follow the “black box” principle. Every component can run stand-alone and does not make any

assumptions about the surrounding environment.

Load on request: In contrast to the formed concept used within the Interaction Centre WebClient, the different components get only loaded (instantiated) when they are called/used.

(17)

SAP CRM Web Client

SAPGUI for SAPGUI for Windows Windows Interaction Center Interaction Center Web Client Web Client

Lessons learned from existing user interfaces

SAP CRM on-demand is the first step

Customer feedback (e.g., ASUG, DSAG, usability tests)

Market analysis

People

People--Centric Centric User Interface User Interface

SAP CRM Web Client SAP CRM Web Client

SAP harmonized the online SAP CRM User Interface with SAP CRM Web Client

The CRM Web Client is designed for the business user,

providing a role-based workspace that is easy to use and navigate

SAP picked kind of the best of all existing worlds, enriched it with all lessons learnt, all user feedback received and based on that created the new UI.

How did SAP now come to the new SAP CRM user interface?

Which approach did SAP use and what exactly defined the details of the new UI? SAP collected the experienced from hundreds of SAP CRM customer projects using the People-Centric, the IC WebClient and the SAP GUI user interface.

Additionally, direct end user feedback collected at customer events like ASUG, DSAG and several usability tests has been used to define the details of the new layout

And of course also current and future market trends have been closely investigated and considered.

So, in particular, the very positive experience with and feedback for the IC WebClient UI approach has led SAP to the design of the SAP CRM UI, which is mainly designed for every business user while harmonizing the different UIs available with previous SAP CRM releases.

(18)

18

CRM Web Client User Interface

Main Screen Areas

C – Work Area

A – Header Area

B – Navigation Area

= L-Shape

The main areas a user can see on the screen are: The Header Area

The Navigation area The Work Area

The L-Shape always stays fix, so the user always has access to common functionalities and never gets lost

The Work Area changes its content based on the navigation or functions a user executes.

(19)

2. New SAP CRM Web Client User Interface

2.2. L-Shape – the static frame

2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(20)

20

Main CRM Web Client UI elements

The L-Shape

The L-Shape provides easy global navigation through the entire SAP CRM application. It includes generic shortcuts for fast data entry or data access. The L-Shape consists of the header (top) and navigation (left) area

5 4 3 2 1 6 8 L-Shape characteristics

Upper area static regarding position and size

Navigation bar can easily be configured per role and collapsed

L-Shape contains

1) System links 2) Saved searches 3) Work area title 4) History back/forward 5) Navigation bar 6) Quick create links 7) Recent Items

8) Open/close navigation bar

7

The L-Shape is a fix point for the user as it never really changes or goes away from the screen no matter what the user does.

The main part on the left hand side consists of navigation possibilities to easily access all information or functionality within the current role.

The upper part provides generic functionality normally available for all users

Corporate branding can generally be applied to all areas via the CSS files, while the upper area is often used to place corporate images or color schemes.

(21)

The Header Area

System Links

Offers generic personalization options for the user See personalization chapter for details Personalize Offers direct access to online help using the knowledge warehouse Help center Provides access to general system messages, such as those set and published by an administrator

System news

Allows users to log off of the SAP CRM application

Log off

Expecially the PERSONALIZE area is very important for the user as he can make lots of helpful settings in this area.

Please refer to the Personalize chapter for more details on this PERSONALIZE link System News is the area where the user can always access the system messages that are well known from SAP system (e.g. an administrator sends a message to all user about a planned downtime of the system)

(22)

22

The Header Area

Central Search

Easy access to the central search wherever your and whatever you do

The central search combines three main search capabilities that

significantly facilitate the searching and finding of information for the user:

− Simple search

(via NetWeaver Enterprise Search)

− Advanced search

− Saved searches

Search capability specific result list for easy browsing and identifying information

Search and Find wherever you are via the central search.

To enable the simple search capabilities the enterprise search functionality from SAP is reuqired. The enterprise search is based on the TREX functionality.

The advanced search here must not be mixed up with the standard advanced search pages. You can call it a „simplified“ advanced search here, as it provides similar functionality to the one available in advanced search pages.

A detailed view presentation focusing solely on the Enterprise/Simple Search with SAP EHP1 for SAP CRM 7.0 is available.

(23)

The Header Area

Simple Search

Executing a Simple Search is done by entering keywords and pressing ENTER or clicking the GO button

ALL OBJECTS search:

− provides a search over all CRM objects which are available in Central Search

− offers an optimized result list to browse through found results by object

FREE TEXT search:

− provides a search over all search fields inside the selected object.

− Displays result in standard advanced search page

Search across all objects or across all fields of one object.

To enable the simple search capabilities the enterprise search functionality from SAP is reuqired. The enterprise search is based on the TREX functionality.

ALL OBJECTS entry can be defined as default providing a „google like“ search functioality with one entry field and a result list which lists all found object instances grouped into object types.

For more details please see the Detailed View Presentation for Enterprise/Simple Search

(24)

24

The Header Area

Advanced Search* and Saved Searches

(Simplified) Advanced Search: − the user specifies one search

criteria of the selected object to further narrow down the search result

Saved Searches:

− the user can choose from a drop down list of search queries he had defined and saved in standard advanced search pages.

Both searches show the result list in the standard advanced search page of the object.

Using the ADVANCED button the user can navigate to the standard advanced search page of the selected object.

Narrow down your search with few clicks.

Advanced Search

Saved Searches

The (simplified) advanced search can be used to offer a search option for a dedicatd object type + a dedicated search field within that object type.

The Saved Search is already known since the CRM 2006s.

The Delete button allows for the deletion of a saved search by selecting it in the DDLB and clicking on this button.

Selecting a Saved Search and clicking on ADVANCED will lead the user to the standard advanced search page where the user can edit the saved search.

(25)

The Header Area

Work Area Title

It provides information on the area the user currently sees, e.g.

“Search: accounts” for an advanced search page for accounts “Corporate account” for an overview page

“Accounts and products” for a work center page

It also provides direct information of the single object the user is looking at to facilitate identification of the object

The work area title is used in the back and forward history – dropdown list box (DDLB) – to identify where to navigate.

(26)

26 © SAP 2009 / Page 26 Work Centre 2 Work Centre 3 Work Centre 4 Work Centre 5 Entry 1 Entry 2 Entry 3 Entry 4 Entry 5 Entry 6 Work Centre 1

Navigation Area

The Navigation Bar

The navigation bar allows direct navigation to all entry pages and the most important searches. It provides a maximum of two levels in navigation. The navigation bar can be collapsed to enlarge the work area

The navigation bar can include:

Application search launches A URL link

SAP NetWeaver BI reports and analysis

Transactions in other systems

First-level navigation entries

Selection leads to corresponding entry pages or role-specific work centers

Second-level navigation entries

Second-level navigation represents searches for the most important applications

How many entries are made available in the navigation bar on the first level is

completely up to the customer project, it can flexibly be defined in the role configuration. It is also possible to completely get rid of the second level navigation if a customer requires this.

In the second level entry the SAP standard delivery only shows links to SEARCH pages, even though technically any kind of link can be embedded here.

(27)

Navigation Area

Navigation Bar And Work Centers

Search

Display a work center page or directly open a search

Example: Various objects are grouped together under “sales operations” work center

In the second-level menu, five direct search pages can be accessed directly

Additional application searches, direct creation options, and links to related reports are available on the work center page

The grouping of work centers and the content of a work center page are configurable per role

A work center is a flexible grouping of applications and information that logically belong together from the viewpoint of a business role

Work center page

This slide explains the basic idea behind the Work Center concept as you can find it in the SAP standard delivery.

A click on the first level entry opens the work center page which provides all the content (search, create and report links) for the business area covered by the work center. This page can also be enriched on project level with further content like reports graphics.

Using a second level entry will lead to the search page of the corresponding application.

(28)

28

The recent items area allows users to easily navigate with one click to the topics they have worked on recently

The five last objects the user navigated to are displayed, this can be personalized

The tooltip provides further details

One click access to where you have just been.

Navigation Area

Quick Create and Recent Items

The create area allows users to start the creation of an object quickly, no matter where the user is located

Links in the create area navigate to the corresponding standard create pages

This area is freely configurable per role

This area can be personalized by the user

Entries can be equipped with an icon (generally available for direct link groups)

Quickly create a new object wherever you are.

General

In the SAP standard delivery you can find the icons in the navigation bar in the default skin. The different SAP standard skins are meant as examples on what can be done using the Skin design.

Technically the create area is simply a direct link group. Additional or other direct link groups can flexibly be created on project base.

Recent Items

The recent items can be activated and deactivated

The personalization settings can be done by the user via Personalize ÆPersonalize Navigation Bar ÆRecent Items

(29)

2. New SAP CRM Web Client User Interface

2.2. L-Shape – the static frame

2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(30)

30

Entry Pages One-Click Access to the Most

Important Information

Entry pages are first-level navigation entries that lead to a specific type of page with a specialized layout (often without further second-level navigation)

Standard entry pages

HOME

− Provides the most important information the user needs to see when entering the SAP CRM solution

CALENDAR

− Microsoft (MS) Outlook-like, different time focuses, tasks

WORKLIST

− Inbox for alerts and workflow items

− Transactional Inbox

EMAIL INBOX

− Online view into groupware inbox

− Transfer emails to SAP CRM

REPORTS

− Collection of all reports available for a role

All special pages that can be accessed via the first level navigation bar entries in the SAP standard delivery are called entry pages in this context.

They often contain specifically summarized information that is also visualized in a special way.

They contain relevant and important information for the user besides the general possibility to search, create or maintain CRM objects.

The general styling and personalization of HOME, Work Center and Report pages is very similar, while Calendar, Worklist and Email Inbox differ from that due to the nature of their content and usage.

(31)

Entry Page Examples

The Home Page

The HOME page is the starting point for every user in the daily business. It contains the most important personal information and access to the most frequently used tools.

Quick overview of the current day

Hyperlinks to more detailed information

Web 2.0 like visualization and personalization

Predefined content for

− Appointments, tasks, reports

− Alerts and workflow tasks

− Application-, Web-Links, Widgets

− Tag Cloud* (see OVP for details) − Favorites* (see OVP for details)

Direct content personalization*

Graphical pictograms possible as content identifier

(incl. personalization*) Content configurable per role

* New in SAP EHP1 for SAP CRM 7.0

The visual design was enhanced in SAP CRM 7.0. This also is valid for the REPORTS and the WORK CENTER pages. The styling of the content blocks show a clear block border as well as a block header to offer a better visual separation between the different contents. Usability tests have shown that this visualization best supports the ease of scannind and understading the content of the page.

Following Web 2.0 paradigms features in the area of personalization, like being able to remove a content block from the screen via one click or close the content on request if the users‘ focus is on other information currently, are available on the HOME page..

Web 2.0 like visualization and personalization: ν Tray design

ν Rearrange content on page ν Open/close blocks on page ν Remove content from screen

Personalization options regarding the concrete content shown inside some of the content blocks is now available directly on the page itself via a right aligned personalize icon in the content block tray. Via this new (EhP1) feature the user can e.g. on the fly personalize the Web Links or the Application links as well as make settings for TAGS or FAVORITES

(32)

32

Entry Page Examples

Calendar

The calendar page provides a graphical overview of appointments for today and of open tasks as well as rescheduling capabilities via drag and drop.

Graphical overview of today’s, this week’s or this month’s appointments Switch to a colleague’s

calendar

Get an overview of the next two months

Side by side with list of open tasks

Directly create an

appointment from the daily view

Extend or reschedule an appointment via drag and drop within the current day, week or month, even to the next two months.

The calendar provides an standard access to the users activities as he knows it from standard groupware solutions.

In SAP CRM 7.0 the calendar was enhanced with drag & drop functionality to further facilitate the management of appointments directly in the calendar view.

(33)

Entry Page Examples

Reports

The reports page is the central entry page to access all reports available for a specific role, grouped by business area.

The reports page :

Provides a list of reports and analysis grouped by business topic

Examples:

− Account analysis

− Campaign analysis

− Pipeline analysis

Following a link will call the full page of the analysis

It can have second-level navigation entries providing direct access to important analysis or dashboards Content and grouping are

configurable per role

Standard content based on SAP BI and CRM reporting

(34)

34

Entry Page Examples

Work Center Pages

Every first-level menu item has an individual work center page. It contains a set of shortcuts and access to all work center–related SAP CRM components.

The work center page :

Is opened by choosing the first-level navigation entry directly, without selecting a specific second-level entry

Includes important content regarding the chosen area Includes all searches belonging

to this work center

Includes direct links for the creation of new objects Related analysis

(35)

Entry Pages

Personalization Options

Position the content on the screen easily via drag and drop Open/close content on request Remove content from screen

via the X in the top right corner Further personalization options

can be accessed via the personalization icon

− Add content to page

− Decide about ‘collapsed’ mode

Personalize*pictograms per assignment block

− Available for skins using pictograms as content identifiers

− Admin sets default pictograms

Valid for Home, Work Center pages and Reports page

Make the software work the way you do

Drag & Drop

Pictogram Personalization*

(36)

36

2. New SAP CRM Web Client User Interface

2.2. L-Shape – the static frame 2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(37)

Search Pages

Search pages provide the user with comprehensive, flexible, and easy-to-understand search capabilities individually for every SAP CRM application.

Access to search pages

− Via 2nd level navigation bar

− Via work center pages

− Via saved searches

− Via keyboard shortcuts

Allow definition and saving of search models

Result list optimized for quick overview and easy navigation to detailed information

State of the art sorting and filtering of search result list

Offer options such as create, delete, mass update, and XLS export

Various personalization options (e.g. column sequence via drag and drop)

The advanced search pages provide the same standard search pattern for every CRM application.

The main idea is an operator based search which proved to be easy to understand while providing great flexibility in modeling a search

There can be very few search pages in SAP CRM that differ from this approach (e.g. in the way the search fields area or the search result list area is visualized), which is due to the fact that SAP strictly followed the business use case and therefore adapted this search pattern for specific user needs.

The content in the search field and the search result list per application can be flexibly configured per role.

(38)

38

Search Page

Capabilities and UI Elements

Search result list area Search criteria area Choose search criteria Select search operator

Enter search value incl.

Multi-Value-Search* Hide search _{criteria area}

Add or remove search criteria Save current search model Define maximum number of results Export result list to XLS* Result list

toolbar Personalize _{result list}

Hyperlink to detailed information Sort/Filter via click on column header Page through result list Show Table Graphically Result list short info

* New in SAP EHP1 for SAP CRM 7.0

In SAP EHP1 for SAP CRM 7.0 the search for Multi-Value fields has been enabled.

The Multi-Value search function shall direct the user to the multi value help dialog box to select the desired multiple filter criteria for the advanced search operation and will not allow users to directly enter values in the input multi value field. Thus the user gets more guidance on how to enter the data correctly.

This functionality is dependant on the search parameter selected and if it has an associated value help.

Benefits

Customers can now select a particular parameter in the advanced search that consists of multiple search criteria and not enter each criteria within the input field but be prompted to a value help in which they can intuitively select their search criteria and it saves it as a string.

This allows for less errors on the part of the user in which he/she does not need to know the exact criteria, and if an error in typing occurs, can lead to a inaccurate search.

Increases the accuracy on the search executed and distinctively allows user to identify and define their search.

In SAP EHP1 for SAP CRM 7.0 the EXPORT TO XLS functionality can now be influence via authorizations per user or per business role.

To disable the export to spreadsheet in a business role, you need to define parameter EXPORT_DISABLE with parameter value TRUE in Customizing for Customer

Relationship Managementat UI Framework -> Technical Role Definition -> Define Parameters.

This parameter is assigned via parameter profile to the function profile PARAMETERS. You need to assign functional profile PARAMETERS to your business role in

Customizing for Customer Relationship Management at UI Framework -> Business Roles -> Define Business Role.

(39)

Table Graphics Visualize Every Table Content

Instantly in a Graphic

Facilitate the overview of table contents

Select key figure and chart type

Key figures are based on visible table columns – automatically reacts on personalization

Filter table content by selection in graphic (see filter icon in column header)

Zoom in and out

Example shows the search result list as use case

For every table:

display its content in a graphical chart

The table graphics is a feature available for every table, but especially in the search result list it provides a perfect facilitation option to understand patterns and schemes behind the found search results in a graphical manner.

Via Customizing it is possible to enable or disable the usage of charts in tables in the CRM WebClient.

The settings can be done via:

ν SPRO ÆCustomer Relationship Management ÆUI Framework ÆTechnical Role Definition ÆDefine Parameters

ν Select the Profile Definition TABLE GRAPHICS and afterwards double click the Parameter Assignment on the left hand side.

ν The Parameter ENABLE_FTG_USAGE can be set here.

This parameter enables or disables the usage of charts in tables in the CRM WebClient UI. You can assign the following values to this parameter:

(40)

40

Input Help

Search Help, Value Help and Smart Value Help

Several types of input helps are available, based on which information must be filled in a field

Smart value help:

While the user is typing the Smart Input Help provides data entries for faster processing. The suggestions offered are based on ‘last used’ by the user (upper part of the list) or are found by an asynchronously performed background search (lower part of the list) Value help:

A flat list prefilled with all available entries Search help:

Provides advanced search inside a popup. Mixed versions are possible depending on the

application / field and the business use case

To enter values in fields often the field is supported by an input help, indicated by a specific icon.

Search help Value help Smart Input help

The value help directly reacts on the selection of an item, i.e. it closes after the selection. There are value helps where a multi select is possible, then the pop up contains a

buttong to finalize the selection of values.

Via Customizing it is possible to disable the smart input help in the CRM WebClient UI. The settings can be done via:

ν SPRO ÆCustomer Relationship Management ÆUI Framework ÆTechnical Role Definition ÆDefine Parameters

ν Select the Profile Definition SMARTVALUEHEP and afterwards double click the Parameter Assignment on the left hand side.

ν The Parameter SVH_DISABLED can be set here.

This parameter disables the smart input help in the CRM WebClient UI. You can assign the following values to this parameter:

ν L - Last values only

ν B - Background search only

ν X - Disable the input help completely

(41)

2. New SAP CRM Web Client User Interface

2.2. L-Shape – the static frame 2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(42)

42

Overview Page

Single Column Layout

The Overview Page provides all important information regarding a single object (e.g. an Account, an Opportunity or a Service Order) in a scrollable format.

The OVP consists of header information that allows detailed object identification and a set of related information

The information in assignment blocks can be displayed in various formats:

− Form views

− Tables

− Hierarchies

− Analytical views

The OVP is the target page when following a hyperlink to an object instance

The OVP contains the hyperlinks for cross navigation to related information

Overview pages are the visualization of all information related to one object instance, e.g. one sales order or one service ticket or one marketing campaign

A scrollable format showing the most important information in the first assignment block and all related information on the assignemnt block below has been chosen as due to the internet most users are very familiar with the concept of scrolling and retrieving more information on a page by scrolling down.

(43)

Overview Page

Single Column Layout - UI Elements

Work area toolbar Work area title Page personalization, print Header area Assignment Blocks (ABs) containing information related to this object Assignment Block toolbars

The main components of every overview page (no matter if single column or tile layout) are:

The work area title which always identifies the object the user is looking at

The overview page toolbar (also called work are toolbar) that provides all general functionality for the complete object in the left aligned buttons. The right aligned buttons offer generic functioality like personalization and printing

The assignment block specific functionality is located in the title bar of every assignment block. This is mostly the EDIT possibility but can also contain further functionality a user directly wants to execute on the AB.

(44)

44

Overview Page

Single Column Layout - Main Capabilities

Identify the current object based on the work area title Personalize the overview page

− Decide on the visibility of assignment blocks

− Decide on the sequence of the assignment blocks (also via drag & drop on page)

− Decide on open/close as default

Print the overview page (with browser print)

Trigger functions related to the complete object with the work area toolbar

− Examples: create follow up document, copy object

Trigger functions related to an AB with the AB toolbar or the one-click actions (see following slides)

− Create a new assignment, edit an existing assignment, delete an assignment, or trigger any other application-specific functionality

General layout (in assignment blocks or the complete page) is configurable per role

The overview page layout provides easy access to all information combined with state of the art personalization capabilities.

(45)

Overview Page Elements

Assignment Blocks

1) AB title: identify the content of the AB

2) Column personalization (also via Drag and Drop) 3) Comprehensive sorting and

filtering in tables

4) One-click actions for fast and easy deletion or editing of an object

5) Expand – appears if default number of visible rows is exceeded; opens up to 50, then it shows pages

6) Less important ABs are first shown closed; the content is displayed on request

Assignment block capabilities are available in single column and tile layout

1 2 3 4 5 6 3

The main goal of the specific behavior and capabilities of an assignment block is to facilitate the reading and understanding of an overview page and thus a complete object. Paradigms used are:

Show mostly only the 5 most important entries per table based assignment block (based on default sorting) and let the user decide via expand if he needs more information Allow personalization of the table columns

Provide one click actions for the most commonly used functionalities (edit, delete and others) Æa maximum of 3 one click actions is allowed in the standard software

Allow the user to decide which assignment blocks are how important for him, rearrange them within the OVP and even decide which ones shall be open per default and which ones closed

(46)

46

Overview Page

Editing of Information – Generals Concept

Content is edited directly in place on the overview page. In some use cases – where more complex interaction screens are needed for editing – a separate edit page is displayed.

The content of an object can be edited in place on the overview page

Editing in place is used for form and table views

A new entry in a table can be added via the NEW or ADD button available in the AB toolbar

Table-based maintenance: - single-select or multi-select - single-edit or multi-edit

(based on the corresponding use case)

For ease-of-use reasons some content is edited on separate pages to allow a more flexible screen layout Central SAVE / CANCEL possibilities

in the work area toolbar

Editing in place

Editing on separate edit page

Editing information mainly happens directly in place where the user is. No navigation distracts the user from his main goals, the context is kept and even the visual

appearance stays identical

This paradigm is used wherever possible

There are use cases where the display of information on an overview page is simplified to facilitate reading and understanding the information, while the maintenance of the information provides rich flexibility (e.g. call hours for an account). In those cases the editing of content visible in an assignment block on an OVP is done on separate edit pages, where the user navigates from the OVP to the edit page, focuses on the maintenance possibilities and then returns to the OVP where is entered/changed information is directly visible.

(47)

Overview Page

Editing of Information – Paste in Tables

Ability to paste text in single or multiple cells from e.g. Microsoft Excel to existing tables in the Web Client User Interface.

No need to re-type content that is already available

Supports read-only/non editable fields in which if a paste is performed over these fields, the pasted data will be discarded and the original data remains unchanged

This process support the following: Checkboxes, Drop Down List Boxes and All Text

Source - Copy

Cursor - Paste

* New in SAP EHP1 for SAP CRM 7.0

The keyboard shortcut of CTRL+V is supported

The user needs to be in Edit mode to be able to perform the maintenance and engage in the paste operation

This process support the following:

ν Checkboxes: (data must be in the form of “1” for checked and “0” for unchecked);

ν DDLBs: (when a value is pasted, it will be checked with values in the DDLB, if exists, paste will be successful, if does not exist, paste operation will not be allowed and the original value will be maintained);

(48)

48

Overview Page Tab Chain Personalization in

Form Assignment Blocks

Allow your users to increase productivity while maintaining information

A user can define for any form based assignment block where to start the data maintenance and in which sequence <tab> should navigate through the editable fields

Tab sequence definition is switched on via right aligned icon in the assignment block title bar The tab chain personalization

feature can centrally be switched on/off in the central

personalization under settings

Define your personal tab sequence

(49)

Overview Page

Favorites and Tagging

Mark an object instance as your favorite with one click

One-Click access to favorites on HOME page

Manage your favorites as you know it from your web browser (own folders and sub folders)

Optionally share favorites with the community

Favorites

Possibility to maintain user specific tags to every object instance Explore tag cloud on home page –

use it for quick access to information

− My cloud, community cloud, popular tags, my recent tags, sorting , personalization and search capabilities

Switch on/off tagging functionality via personal settings

Tagging

Tagging:

Assign Tags

Tags in the "Assigned Tags“ area are tags the current user has already added to this specific object.

Tags can be deleted by clicking on the trash can icon.

Suggested tags are tags that have been attached to this specific object by other users and can be selected by clicking a hyperlink.

Multiple tag names can be added if the tag names are separated by commas. If they are separated by a space, then it will be considered as one single tag.

HOME page content block TAGS:

A user can select any tag and will navigate to a result list page where objects are grouped by UI Object Type.

If multiple objects are linked to the tag the user will navigate to a results list page otherwise the user will navigate directly to the overview page if only a single object is linked to the tag

Favorites:

Add to Favorites capability:

The default description comes from the overview page title

In the pop-up, the user can select in which folder to add the favorite.

(50)

50

Overview Page

Go-To Menu and Action Menu

Quick overview of what content is available on OVP

Quick navigation to any assignment block wherever you are on the overview page

Sequence in drop down menu follows the real OVP structure Available optionally

Go-To Menu

The Actions menu is an icon that is strategically assigned to a field and can be used as both a status/ presence indicator as well as a menu when clicked in which actions related to the field can be triggered Action Menu feature supports the

form views and tables

Action Menu

Go-To Menu: further information

To make the go-to function available in a business role, you need to define parameter GOTO_ENABLED with parameter value TRUE in Customizing forCustomer Relationship Managementat UI Framework -> Technical Role Definition -> Define Parameters.

This parameter is assigned via parameter profile to the function profile PARAMETERS. You need to assign functional profile PARAMETERS to your business role in Customizing for

Customer Relationship Management at UI Framework -> Business Roles -> Define Business Role.

Action Menu

The assignment of action menu to a particular field can be done not only through the context node, but also centrally maintained through the Design Layer as it’s controlled by an Action Provider

The icon for the action menu is customizable by customers to fit to their business scenarios and look and feel

This functionality increases the productivity by allowing for extensive collaboration for internal and external individuals and groups, as well as creating the infrastructure so that other applications can be called when further information is needed

In the SAP CRM standard delivery this function is implemented only in the Interaction Center area, while the infrastructure for this general feature is part of the SAP standard delivery.

(51)

Overview Page

Tile Layout

As alternative to the single column layout - which is mostly the default layout for SAP CRM roles - a single object can also be visualized in a tile layout.

The tile layout page consists of several tiles while every tile can contain one or several assignment blocks

The general structure of the tile layout can flexibly be defined in customizing

The information and visualization possible in tiles is based on the same logic as in assignment blocks The tile layout page is used in the

Interaction Center Agent role based on the specific needs of this user group

Personalize* tile layout page by moving assignment blocks freely between tiles as well as adding or hiding assignment blocks (drag & drop and separate personalization dialogue)

* New in SAP EHP1 for SAP CRM 7.0

The tile layout has already been used intensively in the Interaction Center Web Client environment, to allow the design of pages which offer all information without any page scrolling.

Starting with SAP CRM 7.0 it is generally possible to configure on project base even for non-ICWC users applications in a tiled layout design. Therefore an application has to be registered in the IMG. This will offer the administrator a new button in the UI

configuration of the overview page that allows the switch from single column to tile layout.

After selecting to switch the administrator can choose from several tile schemes (that can also be customized flexibly in the IMG Æsee fact sheet customizing). Finally the available assignment blocks for an object can be moved to the provided tiles, while one to several assignment blocks can be put to one tile.

Note: only ICWC pages are delivered pre-defined in tile layout by SAP.

(52)

52

2. New SAP CRM Web Client User Interface 2.1. General Approach

2.2. L-Shape – the static frame 2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(53)

Hierarchies

Structured Information and Navigation Possibilities

Hierarchies are used to visualize special “parent-child” relationships between different information. With this UI element, the position of an object within a hierarchical structure can easily be displayed and understood.

Used for navigation or simply to display related information in a structured format

Available on search, overview, and edit pages

Used in header area or in a related assignment blocks

Table-like behavior, but no sorting or filtering due to its nature

Hierarchies are used in two main ways in the SAP CRM user interface while providing in both use cases a parent-child relationship oriented visualization of information

Hierarchies are used only for display of information in a special structured manner, like in the record assignment block of a service object (see screenshot on next slide). No further functionality lies behind the hierarchy, it simply facilitates the understanding of the represented infromation

Hierarchies are used in addition as navigation element, where the remaining

assignment blocks on a page change their content based on the entry the user has chosen in a hierarchy. A good example is the marketing area, where a marketing plan can exist of marketing plan elements and campaigns and even campaigns elements. These are groupd hierarchically below the marketing plan. A user wants to understand and flexibly navigate through the elements of a marketing plan, directly seeing the related information.

(54)

54

Hierarchies

Details of Usage

Primarily displays information in a structured way to visually facilitate the relationships between information

Structure can be opened with a click on the triangle icon

Icons can be used to differentiate the content displayed

Displaying structured information

Navigate and update related information

Choosing a line in the hierarchy updates the related information to the right and/or below the hierarchy

The up button adds the parent node as well as nodes of the same hierarchy level to the displayed hierarchy

Open/close hierarchy view on request

Possibility to ‘full-width’ view

Navigation Display of structured

information only

Update of related information

(55)

Hierarchies

Main Capabilities

Display of structured information in a specific context where different hierarchy levels can be opened with a click on the triangle icon

Hierarchies in an object header area can be switched on and off – on overview and edit pages

Option to navigate through a hierarchical structure displaying information related to the marked element in the hierarchy

Cut, copy, paste, delete, and create functionality available on edit pages UP navigation possible to display the next highest level (application-specific) Personalization of visible hierarchy columns possible

Multi-select hierarchies on edit pages

A hierarchy always scrolls; it never pages through the complete visible hierarchy Editing directly in the hierarchy (application-specific)

An application using a hierarchy offers all or some of these features depending on the business use case.

(56)

56

Task Based UI

A Guidance For Your Users

The task based user interface consists of a series of screens that guide the user through an activity to achieve a specific goal.

Simplify a complex task by dividing it into easy sub steps

A roadmap provides a visual representation of the whole activity to the user

Use buttons or the roadmap control for easy navigation

Visualization of substeps and animated scrolling for

structuring complex tasks* Add explanatory texts for each

step if required

Freely define the sequence and content of the steps

Reuse existing views or even tasks via simple embedding

* New in SAP EHP1 for SAP CRM 7.0

Taks based UI was newly introduced with SAP CRM 7.0 and enhanced with SAP EHP1 for SAP CRM 7.0.

It provides customers with a flexible infrastructure to design own guided activities. Such guided activities are useful in scenario where either very casual users should be guided through a maintenance process or where a maintenance process is rather complex

For further details on the task based UI capabilities please refer to the separate Detailed View presentation for this topic.

(57)

Message Handling Always Up To Date – Details Only When Needed

Clearly visible indicator about current message situation (success, warning and error messages)

Default location at right end of work area toolbar

Open messages on request only via lower left triangle

Place the message area

wherever you want via drag and drop

Message Preview*: You can now see a preview of new messages above the message bar

The previously used message visualization can be switched on as well.

Flexible Message Area

Message Preview*

The message area is shown in a small box in the top right area of every screen. It is only visible if messages are available

It contains an indicator showing how many messages of which type (success, warning, error) are available and can be opened on request

It can also be freely moved across the screen by a user to position it in the best spot for the current work. With the little triangle at the top right of the message block the block moves automatically back to its initial position in the top right corner

Switching to the previous message visualization can be done via setting a parameter in the functional profile PARAMETERS in the IMG.

SAP EHP1 for SAP CRM 7.0: Message Preview

If less than five new messages are available, every message appears one after another in a preview above the message bar. If more than five new messages are available, a notice indicates that several new messages are available.

(58)

58

SAP CRM Roles

Flexibly Define The Scope For Your Users

SAP CRM business roles are used to package the main business content needed to perform a specific job function.

Roles in SAP CRM:

Provide a perfect starting point

Defining a role influences the content visible to a user assigned to this role

− Navigation bar, available applications, entry page content, layouts (e.g. fields on a screen), authorizations

Role assignment to users via positions in the organizational model

Standard roles are delivered for (examples):

− Sales, Service, Marketing, Trade Promotion Management, e-Commerce, Interaction Center, Partner Channel Management Easy role upload to SAP

Enterprise Portal

CRM business roles provide every flexibilty needed in projects to tailor the content provided for users based on roles.

Herefor completely own business roles can be built or the SAP default roles (that are available for all major CRM areas) can be copied and used as starting point for enhancements

All content displayed to a user can be influenced by the role configuration.

Role configuration can be done in the IMG in SAPGUI as well as via the CRM Web Client User Interface.

A report is provided where SAP CRM roles can be uploaded into the SAP Enterprise Portal environment for the usage of SAP CRM content inside the portal. During this upload it can freely be decided which SAP CRM navigation level should map on which portal level.

The SAP CRM navigation possibilities (i.e. the L-Shape) is merged into the Enterprise Portal navigation areas, the work area content of SAP CRM is displayed in the work area of the portal.

(59)

The Business Use Case Decides The Design

Exceptions to the General UI Guidelines

Example: activity scheduling

Example: mail forms

In the SAP CRM Web Client the business use case is the main driver for the final layout

Most applications in SAP CRM are visualized based on these UI Guidelines, nevertheless some have very specific UI requirements

Therefore some applications do not follow the guidelines described in this presentation. For those applications the general principle is: as consistent as possible as specific as necessary.

One main paradigm of the CRM Web Client user interface is to provide a UI that is as consistent as possible but also as flexible as needed.

As some applications have very specific requirement regarding their visualization they show slightly different pattern while following the same visual design basics.

On the slide you can see the activity scheduling and the mail form user interface. Both are tailored and specifically designed for the usage of these functionalities and therefore do not follow the standard overview page paradigm. This significantly facilitates the work with these applications.

(60)

60

2. New SAP CRM Web Client User Interface 2.1. General Approach

2.2. L-Shape – the static frame 2.3. Entry Pages 2.4. Searches 2.5. Overview Pages 3. Miscellaneous 4. Personalization Options

Agenda

(61)

End User Personalization

Make The Software Work The Way You Do

Users can tailor the application according to their needs via multiple personalization options.

1) Saved Search Models

Often used searches can be saved

Accessible everywhere

2) Overview Page

(only page layout)

Visibility and sequence of content

Drag & Drop

3) Tables

Visibility, sequence and width of columns Drag & Drop

4) General Settings 5) Entry Pages

Structure and content Drag & Drop

4 1

2

3

Allowing the user to tailor the final application to a large extend to his/her own needs was a main focus for the CRM Web Client user interface.

Standard personalization options everyone can find in the internet have been kind of a template for the personalization options available.

(62)

62

Personalization Dialogue

Details of Usage

Common dialogue used in most personalization areas

Used in the following:

− “Create” in the Navigation bar

− OVP

− All tables

− Hierarchies

Left = available content Right = visible content

Available content initially defined by project team

− Can easily be changed

Use positioning buttons to move content

Right column in right table often used for different additional personalization options

Reset to Default easily

Standard Personalization

To facilitate the personalization in most areas a standard personalization dialogue is used that is self-explanatory.

The user always finds available content in the left table and the „used“ content in the right table

The user can freely decide which content to use and in which order

Based on the use case some other paramters can be set in the right table

Overview Pages: here the user can decide which assignment blocks shall be shown collapsed initially

Tables: here the user can define the column width (which can also be adjusted via drag & drop in the table directly)

Based on customer feedback also a RESET TO DEFAULT is essential to allow to easily get rid of any personal settings.

(63)

Personalization

Drag and Drop

Overview Page

Tables

Home and work center pages On home page

On work center pages

On reports page

In Calendar

On overview pages

In tables (column sequence and width)

In the UI configuration tool

Easy Personalization Possibilities

Calendar

The usage of drag and drop is a very familiar concept used in most private and business applications.

It is the easiest way to rearrange content on screens, which is why SAP CRM makes use of it wherever appropriate.

The personalizations done via drag and drop are stored user specific – as all personalizations are stored user specific.

(64)

64

‘Personalize’ Page

General Settings For The User

Via PERSONALIZE the user can change several settings influencing the appearance of as well as the work with the SAP CRM Solution.

My Data

− Various user information, password change

Settings

− time zone, date format, time format, decimal notation etc.; screen reader mode

Shortcuts

− Flexible definition of keyboard shortcuts to screen areas and functions

Layout

− impacts on visual layout; definition of quick create links

SAP CRM Feed Preferences

− Application Links

− Web Links

− Widgets

The PERSONALIZE area provides a central place where the user can make generic settings that are not screen or application specific.

Some of these options are dependent on the implementation at the customer site,for example, groupware integration makes only sense if a groupware integration is set up in a project.

The general layout of this page is kept in sync with the styling of the HOME page. The Preferences block as well as the CRM Feed have been introduced with SAP CRM

(65)

‘Personalize’ Page

Examples: Layout and Shortcuts

Select from SAP or custom built skins (incl. preview)

Change the text size (High Contrast Text resizing improved*)

Switch off visual effects to increase performance

Disable the suggestion of the smart Input help

Layout

Shortcuts for setting the focus or executing a navigation

In customizing the list available for the user can be defined

‘Reset to Default’ capability

Shortcuts

The Web Client User Interface Detailed View