back Stories Overview

User Experience at SAP



Conference Reports

Future Scope


Providing a Web-Like User Experience to Business Users – The New SAP CRM Web Client User Interface

By Martin Schrepp and Theo Held, SAP User Experience – Applications, CRM – July 18, 2008


History and Introduction

SAP first started to offer a completely Web-based CRM user interface with release 3.1 of the SAP Customer Relationship Management (CRM) application. This UI was virtually the first "pattern-based" interface for an SAP software product. The simple hierarchical pattern of SAP CRM 3.1 was then enhanced and improved, culminating in the launch of SAP CRM version 5.0. It was then time for a radical overhaul of the CRM Web UI. The CRM user interface was given a more contemporary and modern look and feel in line with the general trend for Web applications.

What do today's business users expect from a modern user interface? They obviously want a user interface that is easy to use and stable and enables them to process their business tasks efficiently. But over the last few years, users' expectations have also gone beyond such classic usability criteria.

Nearly all the users of business software are also more or less frequent users of the Web. They read articles in online journals, shop in Web shops, and participate in online communities. They are therefore familiar with typical Web interaction techniques and expect similar interaction paradigms from their business Web application. Furthermore, users are increasingly confronted by new impressive ways to interact with Web pages as a result of new technologies or programming paradigms such as Flex or AJAX. These new techniques allow developers to build pages that can be easily personalized by users to meet their personal preferences or special needs. Moreover, dynamic interaction mechanisms, for example, Drag&Drop, are increasingly appearing in the Web.

Particularly if business software is offered as a Web application that runs entirely in the browser users expect a user interface that behaves like a typical Web page. These expectations were taken into consideration as the concept for the CRM WebClient UI was being developed. One of the main design objectives was to make the user interface as Web-like as possible, while still ensuring basic usability requirements, such as efficiency and consistency, were met.


The Process: From Use Cases to the UI Concept

CRM Product Management worked with the User Experience team to collect the most important use cases for all application areas of CRM (sales, service, and marketing). The two groups then systematically extracted basic interaction patterns from these use cases. They found that for most of the interaction patterns, a small set of basic screen types (see below) in combination with a well-defined navigation structure adequately supported user interaction.

A first version of a guideline document was created based on the interaction patterns and required screen types. This document contains all the information that is required by product managers (who write specifications), UI designers (who create UI mockups), developers (who implement the UI), and quality managers (who test the UI).

The guideline document underwent a number of changes in response to input from expert reviews, usability testing, and customer feedback. The current stable version is maintained by a formal governance process that ensures consistency and a manageable impact on usability and development effort. A copy of the guidelines may be obtained at


Introduction to the UI: Screens and Navigation Structure

The CRM WebClient UI consists of various interface elements that enable the user to easily display, search for, and maintain information. These interface elements are used to provide the best support for the user's needs.

In the following section, we briefly introduce the main elements of the CRM WebClient UI.

With the exception of the navigation bar and header, all the other UI elements are referred to as pages. Pages can generally appear in their respective locations in the CRM WebClient or as dialog boxes in an additional window.

It is possible to navigate within the CRM WebClient UI using only the keyboard. This property both supports power users and users with disabilities.

The main UI elements of the CRM WebClient are:

Header and Navigation Bar

Example of the header and navigation bar

Figure 1: Example of the header and navigation bar. The area outside this bar is called work area.

The navigation bar enables easy global navigation through the entire CRM application and its components. Functions often used to enter or access data quickly are also included in the bar. Each link in the navigation area on the left can be executed by a keyboard shortcut.

Home Page and Work Center Page

Example of a home page

Figure 2: Example of a home page

The home page (figure 2) is the starting point for every user in his or her daily work. It contains the most important personal information and provides access to the most frequently used tools. In addition to links, entire reports can also be included on this page.

The business functions available for specific roles are grouped in work centers. A work center page is a collection of business functions that relate to the corresponding business area (for example "Account Management" or "Sales Operations"). Each top-level menu item in the navigation bar on the left provides access to an individual work center page that contains a set of grouped shortcuts and provides access to all CRM components related to the work center.

Home pages as well as work center pages are structured by information blocks. These blocks represent independent units that are organized according to the logical structure of the underlying business processes.

Search Page

A typical search page

Figure 3: A typical search page (for sales orders) with filled result list

The search page provides users with comprehensive search capabilities for every CRM component. The page consists of a search criteria area (including a save function for search queries) and a search result list. Using the links in the search result list the user can navigate to the corresponding object overview pages.

Overview Page

Overview page with expanded and collapsed assignment blocks

Figure 4: Overview page (for sales orders) with expanded and collapsed assignment blocks

The overview page is the central interface for viewing and editing object-related information. Overview pages consist of a main assignment block (Details) that allows object identification based on header data and a set of assignment blocks that show related information. Assignment blocks usually provide links to related objects or for drilling down into more detailed information about the current object.


Adaptability to the Users' Needs: Configuration and Personalization

As mentioned above, the CRM WebClient UI offers various personalization options. We can make a rough distinction here between the personalization of visual appearance and the personalization of content.

The user can adjust the visual appearance of the user interface by choosing a skin from the personalization settings. A skin defines the colors of the UI elements (texts, background, buttons, and so on), the font type, and the distances between UI elements. The user can adjust the font size for each skin by choosing between three predefined text sizes. At present, five skins are available. One of these skins is optimized for a high contrast display.

The following figure shows a search screen in two different skins.

A search screen of the CRM Web Client User Interface in two different skins  A search screen of the CRM Web Client User Interface in two different skins

Figure 5: A search screen of the CRM Web Client User Interface in two different skins. The right skin is optimized for a high contrast display.

It is, of course, possible for a customer to define additional skins, for example, to adjust the visual appearance of the user interface to meet customer-specific branding rules.

The content of the home, work center, and overview pages consists of different information blocks. A user can adapt the content on these page types to suit his or her personal needs. It is possible to define the order in which the blocks appear. This can be done by simply moving the content to the desired position by means of Drag&Drop or over a special personalization dialog. Furthermore, the user can define which information blocks should be shown or hidden.

Two different personalization variants for the home page  Two different personalization variants for the home page

Figure 6: Two different personalization variants for the home page

Why was so much effort spent on the development of personalization options?

First, different users have different needs concerning the visual appearance of the user interface. This can be due to a disability, for example, color blindness or difficulties with reading smaller fonts. However, it can also depend on the situation: For example, higher contrast settings can be beneficial if the application is used on a laptop in a location with poor lighting conditions.

Second, users want to make their own decisions about what information is important to them and in which order they want to access the available information. A typical design principle is that the more important a piece of information is, the more prominent position it should occupy on the user interface. For a designer of standard software, however, it is not normally possible to define a single layout that reflects the importance of the information for all potential users. What is considered important can differ between different industry sectors, different customers within one sector, or even between single users at a customer site who have different personal preferences.

One special user group is that of people with severe visual impairments. They can access the screen content only with the help of assistive technology, for example, a Braille line or a screen reader. To support these users there is a special screen reader mode, which can be activated in the personalization settings. If the screen reader mode is active, several controls are rendered differently and some interaction paradigms are also changed.

As mentioned above, the UI can be completely controlled by the keyboard. To speed up keyboard navigation, a set of keyboard shortcuts has been defined for important functions. To avoid conflicts with shortcuts used by the browser, the operating system, or an assistive technology (for example, a screen reader or screen magnifier), all shortcuts in the CRM Web application can be personalized by the user. We provide defaults for the shortcuts, but each user can adapt these defaults to suit his or her specific needs. To start a function with a shortcut, the user can choose each possible combination of ALT, CTRL, SHIFT, or ESC together with an arbitrary number, letter, or arrow key.



The results of the usability tests and customer feedback show that the new user interface is relatively easy to understand and use. The Web-like look and feel is well received. In upcoming releases, the user experience will be further enhanced as we continuously adapt the user interface to accommodate the latest developments in Web technology.


To top top