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.
1
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
© SAP 2009 / Page 2
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.
2
Web Client User Interface – SAP CRM
Key Features
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.
„ 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
© SAP 2009 / Page 3
3
Web Client User Interface – SAP CRM
Key Benefits
„ High user adoption rate as
immediately you will feel familiar with
the User Interface
Simple
„ CRM 2.0 – Web 2.0 themes
integrated to facilitate ease of use
Flexible
„ Easy and flexible personalization and
configuration to adapt to what your
users really need
Powerful
„ Rich functionality through all areas of
CRM
© SAP 2009 / Page 4
4
Web Client User Interface – SAP CRM
Screenshot: Home Page
© SAP 2009 / Page 5
5
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
4. Personalization Options
© SAP 2009 / Page 6
6
Usability Differs Among Various Groups
Facts and Trends
People
Business
Market
„ Different users have different
needs
„ Projects often fail due to low
end-user adoption
„ Old times:
Efficiency and Effectiveness
„ Ask 10 users, get “12”
different answers
„ End users/business units
drive IT buying decisions
„ Now focus on
Satisfaction and Ease of Use
„ Everyone immediately forms
a personal opinion when
using something
„ Challenge: Tradeoffs are
required between what users
really do – day-to-day – and
the true scope of the project
„ Future:
Joy of Use
„ First impressions carry a lot
of decision-forming power
„ Whatever UI you provide –
“Some will love it, some will
hate it”
► 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
© SAP 2009 / Page 7
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.
7
The CRM Web Client User Interface
User Interface Unification
One Web-based, easy-to-use,
and easy-to-configure UI
for all SAP CRM online users
Easy-to-use
„ High productivity through intuitiveness and
simplicity
„ Appealing state of the art visual web design
consistent across on-demand and onpremise
„ Leveraging Web 2.0 standards
Flexible
„
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
„ Personalization by end-user
„ Custom field configuration
„ Custom screen layouts
© SAP 2009 / Page 8
8
The SAP CRM Web Client UI Example
Home Page
© SAP 2009 / Page 9
This screenshots shows an exemplary home page of a Sales Professional.
9
The SAP CRM Web Client UI Example
Overview Page
© SAP 2009 / Page 10
This screenshots shows an exemplary overview page of an opportunity.
10
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
4. Personalization Options
© SAP 2009 / Page 11
11
Acronyms Used in This Presentation
The following slides use the acronyms below
„ AB
= Assignment block
= 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
„ OP
„
„
„
„
„
„
„
„
„
„
„
„
„
„
„
© SAP 2009 / Page 12
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
12
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
4. Personalization Options
© SAP 2009 / Page 13
13
Customer Feedback
Regarding Usability and User Interface
Examples before introducing the CRM
Web Client UI
„ “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”
© SAP 2009 / Page 14
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.
14
The SAP UI Roadmap
A Continuous Focus on Usability
t
lien
C
b
e
IC W
SAP
M
CR
t
lien
C
b
We
GUI
© SAP 2009 / Page 15
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.
15
Details of the SAP Approach
The Path to The New User Interface
SAP CRM Web Client…
Key goals to developing the new
SAP CRM Web Client User Interface
„ Equal focus on New UI interaction and
navigation concept and Easy and
flexible UI configuration
„ Guiding Principle:
As consistent as possible but at the
same time as flexible as necessary
… as the first step into
a new era of SAP CRM
user interfaces and
usability
„ 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 2009 / Page 16
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.
16
SAP CRM Web Client
SAP CRM Web Client
PeoplePeople-Centric
User Interface
Lessons learned from
existing user interfaces
SAP CRM on-demand
is the first step
Interaction Center Customer feedback
(e.g., ASUG, DSAG,
Web Client
usability tests)
Market analysis
„ 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
SAPGUI for
Windows
© SAP 2009 / Page 17
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.
17
CRM Web Client User Interface
Main Screen Areas
A – Header Area
= L-Shape
B – Navigation Area
C – Work Area
© SAP 2009 / Page 18
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.
18
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
4. Personalization Options
© SAP 2009 / Page 19
19
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
L-Shape characteristics
1
8
3
„ Upper area static regarding
position and size
2
4
5
„ Navigation bar can easily be
configured per role and collapsed
L-Shape contains
1) System links
2) Saved searches
3) Work area title
6
4) History back/forward
5) Navigation bar
6) Quick create links
7
7) Recent Items
8) Open/close navigation bar
© SAP 2009 / Page 20
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.
20
The Header Area
System Links
Personalize
Help center
System news
Log off
„ Offers generic
personalization
options for the
user
„ Offers direct
access to online
help using the
knowledge
warehouse
„ Provides access
to general system
messages, such
as those set and
published by an
administrator
„ Allows users to
log off of the SAP
CRM application
„ See
personalization
chapter for
details
© SAP 2009 / Page 21
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)
21
The Header Area
Central Search
Search and Find wherever you
are via the 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
© SAP 2009 / Page 22
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.
22
The Header Area
Simple Search
Search across all objects or
across all fields of one object.
„ 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
© SAP 2009 / Page 23
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
23
The Header Area
Advanced Search* and Saved Searches
Narrow down your search with
few clicks.
„ (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.
Advanced Search
„ 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.
Saved Searches
© SAP 2009 / Page 24
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.
24
The Header Area
Work Area Title
The work area title displays the current context.
„ 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.
© SAP 2009 / Page 25
25
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
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
Work Centre 1
Work Centre 2
Work Centre 3
Work Centre 4
Work Centre 5
Entry 1
Entry 2
Entry 3
Entry 4
Entry 5
Entry 6
The navigation bar can
include:
„Application search launches
„A URL link
„SAP NetWeaver BI reports and
analysis
„Transactions in other systems
© SAP 2009 / Page 26
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.
26
Navigation Area
Navigation Bar And Work Centers
Work center page
Search
A work center is a flexible grouping of applications and information that
logically belong together from the viewpoint of a business role
„ 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
© SAP 2009 / Page 27
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.
Of course you can differ from that approach in customer projects.
27
Navigation Area
Quick Create and Recent Items
Quickly create a new object wherever you are.
„ 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)
One click access to where you have just been.
„ 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
© SAP 2009 / Page 28
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
The Number of Entries can be changed up to 10
28
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
4. Personalization Options
© SAP 2009 / Page 29
29
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
© SAP 2009 / Page 30
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.
30
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
© SAP 2009 / Page 31
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
The possibility to add graphical pictograms as content block identifiers is in EhP1 possible
embedded into the Business Role Configuration in the Web UI and offers yet another
possibility to visually differentiate the content on the screen. With EhP1 now also a user
personalization of these pictograms is available (Æ see chapter on persoanlization)
General features of this page are also available for Work Center pages or the Reports
page, as they are based on the same page type like HOME e.g. personalization options,
tray design, pictograms etc.
31
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.
© SAP 2009 / Page 32
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.
32
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
© SAP 2009 / Page 33
33
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 firstlevel 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
© SAP 2009 / Page 34
34
Entry Pages
Personalization Options
Make the software work
the way you do
„ 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
Drag & Drop
Pictogram
Personalization*
„ 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
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 35
35
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
4. Personalization Options
© SAP 2009 / Page 36
36
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)
© SAP 2009 / Page 37
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.
37
Search Page
Capabilities and UI Elements
Choose
search
criteria
Enter search value incl.
Multi-Value-Search*
Select search
operator
Hide search
criteria area
Add or remove
search criteria
Search
criteria
area
Define maximum
number of results
Save current
search model
Result list
short info
Result list
toolbar
Personalize
result list
Search
result list
area
Export result
list to XLS*
Show Table
Graphically
Sort/Filter via
click on column
header
Hyperlink to detailed
information
© SAP 2009 / Page 38
Page through
result list
* 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 Management at 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.
38
Table Graphics Visualize Every Table Content
Instantly in a Graphic
For every table:
display its content in a
graphical chart
„ 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
© SAP 2009 / Page 39
„ 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:
ν ASSIGNMENTBLOCK - Graphics are enabled in assignment blocks only.
ν SEARCHRESULT - Graphics are enabled in result lists only.
ν ALL - Graphics are enabled in any table type.
ν NONE - Graphics are completely disabled.
39
Input Help
Search Help, Value Help and Smart Value Help
To enter values in fields often the
field is supported by an input help,
indicated by a specific icon.
„ Several types of input helps are available,
based on which information must be filled in a
field
Smart Input help
„ 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
„ Value help:
A flat list prefilled with all available entries
Search help
„ Search help:
Provides advanced search inside a popup.
„ Mixed versions are possible depending on the
application / field and the business use case
© SAP 2009 / Page 40
„ 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
ν <Empty> - Last values and background search together
40
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
4. Personalization Options
© SAP 2009 / Page 41
41
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
© SAP 2009 / Page 42
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.
42
Overview Page
Single Column Layout - UI Elements
Page
personalization,
print
Work area
title
Work area
toolbar
Header
area
Assignment
Block toolbars
Assignment
Blocks (ABs)
containing
information
related to
this object
© SAP 2009 / Page 43
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.
43
Overview Page
Single Column Layout - Main Capabilities
The overview page layout provides easy access to all information combined
with state of the art personalization 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
© SAP 2009 / Page 44
44
Overview Page Elements
Assignment Blocks
Assignment block
capabilities are
available in single
column and tile layout
1
2
3
4
1) AB title: identify the content of
the AB
2) Column personalization
(also via Drag and Drop)
3) Comprehensive sorting and
filtering in tables
5
6
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
3
6) Less important ABs are first
shown closed; the content is
displayed on request
© SAP 2009 / Page 45
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
45
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)
Editing in place
„ For ease-of-use reasons some
content is edited on separate pages to
allow a more flexible screen layout
Editing on separate
edit page
„ Central SAVE / CANCEL possibilities
in the work area toolbar
© SAP 2009 / Page 46
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.
46
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.
Source - Copy
Cursor - Paste
„ 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
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 47
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);
ν All Text
47
Overview Page Tab Chain Personalization in
Form Assignment Blocks
Define your personal tab
sequence
„ 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
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 48
48
Overview Page
Favorites and Tagging
Favorites
„ 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
Tagging
„ 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
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 49
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.
„ User can also create a new folder and insert this new folder in the hierarchy.
„ User can also select the Share checkbox which will allow the favourite to be shared in the
Community section.
Manage Favorites:
„ Create you own folder / sub-folder structure
„ Flexibly add favorites to special folders
„ Move favorties across folders
„ Share favorites with the community
49
Overview Page
Go-To Menu and Action Menu
Go-To 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
Action 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
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 50
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 for Customer Relationship
Management at 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.
50
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
© SAP 2009 / Page 51
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.
In SAP EHP1 for SAP CRM 7.0 assignment blocks can now be moved from one tile to
another via drag and drop directly on the tiled layout page. Additionally a personalization
dialogue is available where the same rearrangement of assignment blocks across tile is
possible as well as adding new assignment blocks or hiding existing ones (based on the
UI administrator settings)
51
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
4. Personalization Options
© SAP 2009 / Page 52
52
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
© SAP 2009 / Page 53
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.
53
Hierarchies
Details of Usage
Displaying structured information
„ Primarily displays information in a
structured way to visually facilitate the
relationships between information
Display of structured
information only
„ Structure can be opened with a click
on the triangle icon
„ Icons can be used to differentiate the
content displayed
Navigation
Update of related
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
© SAP 2009 / Page 54
54
Hierarchies
Main Capabilities
An application using a hierarchy offers all or some of these features depending
on the business use case.
„ 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)
© SAP 2009 / Page 55
55
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
© SAP 2009 / Page 56
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.
56
Message Handling Always Up To Date – Details
Only When Needed
Flexible Message Area
„ 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.
Message
Preview*
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 57
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.
„The appearance of the preview is customizable by business role
57
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, eCommerce, Interaction Center,
Partner Channel Management
„ Easy role upload to SAP
Enterprise Portal
© SAP 2009 / Page 58
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.
58
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.
© SAP 2009 / Page 59
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.
59
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
4. Personalization Options
© SAP 2009 / Page 60
60
End User Personalization
Make The Software Work The Way You Do
Users can tailor the application according to their needs via multiple personalization
options.
4
1) Saved Search Models
„ Often used searches
can be saved
1
2
„ Accessible everywhere
2) Overview Page
(only page layout)
„ Visibility and sequence
of content
„ Drag & Drop
3) Tables
3
„ Visibility, sequence and
width of columns
„ Drag & Drop
4) General Settings
5) Entry Pages
„ Structure and content
„ Drag & Drop
© SAP 2009 / Page 61
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.
61
Personalization Dialogue
Details of Usage
Standard Personalization
„ 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
© SAP 2009 / Page 62
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.
62
Personalization
Drag and Drop
Easy Personalization Possibilities
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
Calendar
Overview Page
Tables
© SAP 2009 / Page 63
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.
63
‘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
© SAP 2009 / Page 64
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
7.0
64
‘Personalize’ Page
Examples: Layout and Shortcuts
Layout
„ 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
Shortcuts
„ Shortcuts for setting the focus or
executing a navigation
„ In customizing the list available for the
user can be defined
„ ‘Reset to Default’ capability
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 65
„ The suggestions received in the smart value help can be switched off in the layout
personalization dialogue. All entries for the user get deleted if the checkbox is flagged.
„ SAP EHP1 for SAP CRM 7.0 enhancement:
„ The "High Contrast" skin now reacts to different font sizes that you can select in your
browser via view and text size.
„ This includes text and UI elements, such as input fields, dropdown list boxes,
checkboxes, or buttons.
„ Especially for handicapped users the productivity gets improved.
65
‘Personalize’ Page
Examples: Settings and Application Links
Settings
„ Define your time zone, decimal
notation, date and time format
„ Switch to screen reader mode
„ Enable configuration mode
„ Enable tab order definition*
„ Enable tagging and favorites*
Application Links
„ Flexibly define direct links to
SEARCH, CREATE or REPORT
pages, Work Center pages as well as
launch transactions inside your role
„ Personalized application links are
made available on home page
„ Available links are role dependent
On Home Page
* New in SAP EHP1 for SAP CRM 7.0
© SAP 2009 / Page 66
Implicite SAP EHP1 for SAP CRM 7.0 enhancements in the SETTINGS area are:
Switch on/off the capability to personalize the tab order for form based assignment blocks
Switch on/off the capabilities for TAGGING and FAVORITES
Interaction Design and Layout of APPLICATION LINKS have slightly been enhanced in
SAP EHP1 for SAP CRM 7.0.
66
‘Personalize’ Page
Examples: Web Links and Widgets
Web Links
„ Choose from predefined web links or
create your own ones
„ Simply straight forward creation of web
links
„ Available on home page in own content
block
Widgets
„ Choose from predefined widget links
„ Flexibly embed your own widgets
„ Provide a title and the corresponding
URL
„ Available on home page in own content
block
© SAP 2009 / Page 67
„ In both areas on the one hand side the administrator can define content via customizing
for all his users. This content is then shown in the left hand table and the user can
choose which content he wants to use and see on his home page.
„ On the other hand side the end user can define his own content.
„ Interaction Design and Layout of Web Links and Widgets have slightly been enhanced in
SAP EHP1 for SAP CRM 7.0.
67
‘Personalize’ Page
Examples: CRM Feed
CRM Feeds: Stay up to date with your work wherever you are.
„ Access to the feed URL for easy copying it into your RSS feed reader (reader SSL (https) & user
authentication )
„ Select which topics you want to receive in your feed (content corresponds to the worklist page of the
user):
„ Alerts
„ Transactional Inbox
„ Workflow tasks
„ RSS feed icon:
using this icon automatically adds the CRM feed to the users favorite RSS feed reader
© SAP 2009 / Page 68
Via Customizing you can define CRM Feeds, and assign feed providers to the CRM Feeds that
you have defined.
„ Every user can be provided with his or her own feed in the CRM WebClient. He or she can
subscribe to the CRM Feed, either by using the RSS feed feature of the browser, for example, by
clicking the RSS icon in the address bar of the Mozilla Firefox browser, or by clicking the CRM
Feed icon on the central personalization page of the CRM WebClient UI.
„ Requirements
„
ν
The system administrator needs to define feed groups for CRM Feeds, and assign feed
providers to these feed groups in the Customizing activity SPRO Æ Customer Relationship
Management Æ UI Framework Æ UI Framework Definition Æ CRM Feeds Æ Define CRM
Feed Groups.
The system administrator needs to assign CRM Feed groups to the function profile
CRM_FEEDS of a business role, in the Customizing activity Define Business Role
„ Standard settings
ν
ν
End users can personalize their CRM Feed on the central personalization page of the CRM
WebClient, by choosing Personalize Feed Settings. However, these settings are only
available if the necessary Customizing settings at business role level have been performed
beforehand.
Note: For more information about the readers you can use for the CRM Feed, see SAP Note
1171277.
„ Activities
ν
n
Define CRM Feed: You can enter a feed ID, a feed description, a feed type, and a reference
type. For the feed type, you can select the Atom format (Atom Syndication Format) or RSS
(Really Simple Syndication). The reference type means, for example, a reference to a class
or interface.
n
Define feed provider: You can define feed providers for every feed that you have defined
beforehand.
68
Further information – UI Guidelines –
SAP CRM
SAP Business Process Expert Community on SAP CRM
https://www.sdn.sap.com/irj/sdn/bpx-crm
SAP Business Process Expert Community on SAP CRM 2007 and higher
https://www.sdn.sap.com/irj/sdn/forum?forumID=292
SAP Design Guild – “Providing a Web-Like User Experience to Business Users – The New SAP CRM Web Client
User Interface”
http://www.sapdesignguild.org/community/readers/reader_crm_web_client.asp
SAP Design Guild – “The CRM Web Client UI Guidelines”
http://www.sapdesignguild.org/resources/CRM-UI-Guidelines-Customers.pdf
© SAP 2009 / Page 69
69
Further information – SAP CRM
„
SAP CRM - Roll-Out Map
https://portal.wdf.sap.corp/go/crm-rollout-map
„
SAP CRM - Ramp-Up Knowledge Transfer (RKT)
http://service.sap.com/rkt-crm
„
SAP CRM – Demo Portal
http://crmportal.wdf.sap.corp:1080
„
SAP CRM – WiKi
https://wiki.wdf.sap.corp/display/SAPCRMHub/Ho
me
„
SAP CRM - Help Portal
http://help.sap.com/crm
„
SAP Public Web
http://www.sap.com/crm
© SAP 2009 / Page 70
70
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.
© SAP 2009 / Page 71
71