PeopleSoft Power HTML - UF Bridgesprod-apache.erp.ufl.edu/accessibility/Power_HTML_CRM_White_Paper.pdfPeopleSoft, the PeopleSoft logo, PeopleTools, PS/nVision, PeopleCode, PeopleBooks,

PeopleSoft Power HTML DELIVERING INTUITIVE, ROBUST, PURE INTERNET

APPLICATIONS FOR THE CALL CENTER

P E O P L E S O F T W H I T E P A P E R S E P T E M B E R 2 0 0 1

P E O P L E S O F T P O W E R H T M L O C T O B E R 2 0 0 1

2 D E L I V E R I N G I N T U I T I V E , R O B U S T , P U R E I N T E R N E T A P P L I C A T I O N S F O R T H E C A L L C E N T E R

PeopleSoft Power HTML–Delivering Intuitive, Robust, Pure Internet Applications for the Call Center

� 2001by PeopleSoft, Inc. All rights reserved. Published 2001. Printed on recycled paper.

Restricted Rights

Printed in the United States of America.

The information contained in this document is proprietary and confidential to PeopleSoft, Inc.

No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying and recording, for any purpose without the express written permission of PeopleSoft, Inc.

This document is subject to change without notice, and PeopleSoft does not warrant that the material contained in this document is error-free. If you find any problems with this document, please report them to PeopleSoft in writing.

PeopleSoft, the PeopleSoft logo, PeopleTools, PS/nVision, PeopleCode, PeopleBooks, and Red Pepper are registered trademarks, and The Vantive Corporation, PeopleTalk, and "Applications for eBusiness" are trademarks of PeopleSoft, Inc. All other company and product names may be trademarks of their respective owners. The information contained herein is subject to change without notice. Copyright © 2001 PeopleSoft, Inc. All rights reserved.

This document contains or may contain statements of future direction concerning possible functionality for PeopleSoft’s software products and technology. All functionality and software products will be available for license and shipment from PeopleSoft only if and when generally commercially available. PeopleSoft disclaims any express or implied commitment to deliver functionality or software unless or until actual shipment of the functionality or software occurs. The statements of possible future direction are for information purposes only and PeopleSoft makes no express or implied commitments or representations concerning the timing and content of any future functionality or releases.

O C T O B E R 2 0 0 1 P E O P L E S O F T P O W E R H T M L

D E L I V E R I N G I N T U I T I V E , R O B U S T , P U R E I N T E R N E T A P P L I C A T I O N S F O R T H E C A L L C E N T E R 3

Document Purpose and Scope

PeopleSoft Power HTML is a combination of technology features and design techniques that optimize the user experience of PeopleSoft pure internet applications for call center and power users. This document provides an overview of the patent pending PeopleSoft Power HTML features in PeopleSoft 8 CRM. It is written for an audience familiar with the business requirements of call center applications. It contains the following sections:

Introduction .............................................................................................................................. 3 A Day in the Life of a Call Center Agent................................................................................. 4 PeopleSoft Power HTML Features ........................................................................................ 12 Summary ................................................................................................................................ 28

Introduction

PeopleSoft 8 CRM delivers a full suite of enterprise customer relationship management applications with a pure internet architecture. PeopleSoft 8 CRM is built on the PeopleSoft Internet Architecture (PIA), which is used to deliver all PeopleSoft applications. When designing the PeopleSoft Internet Architecture of PeopleSoft 8, the following themes drove the internet access design:

��Thin Client

��Portability and Openness

��Internet Standards Compliance

��Web Look and Feel

��Robust, Scalable and Responsive Applications

��One Architecture and Tool Set

Simply put, PeopleSoft wanted to deliver browser-based applications that performed well and ran on just about any client device that had a web browser. This is exactly what we have delivered with PeopleSoft 8. Since the delivery of PeopleSoft 8, PeopleSoft has received rave reviews from our customers and the analyst community. The following is from Kim Higgins, HRIS manager, Fairchild Semiconductor:

"PeopleSoft 8 HRMS offers a huge leap in user access, web access, making it even more portable, globally...[which] is tremendously important to Fairchild. Our users loved the look and the feel of the new PeopleSoft web pages."

PeopleSoft 8 CRM leverages PeopleSoft Internet Architecture to offer high-performance and scalable applications that meet the needs of call center users. The PeopleSoft 8 CRM call center product delivers sub-second response time for the most frequently used CSR operations such as adding or opening a case and modifying service orders.



Can thin client, HTML-based applications really support complex, highly interactive business applications with rapid response times? As a direct result of the hard work and innovation that went into the patent pending PeopleSoft Power HTML technology, the answer to this question is definitely “yes”.

But it is understandable for people to have doubts about HTML-based applications supporting power users. Most people, when thinking about internet applications, think of rather simple, static applications that are designed for the novice, self-service end-user. An account status or case status page for a customer is one example of such an application. This type of application is well suited for the occasional user, but not for someone who uses the application on a regular basis as part of her daily work activity.

PeopleSoft development has invested heavily in delivering innovative user interface features in PeopleSoft 8 that leverage standard internet technologies such as HTML, JavaScript, and the web browser features to directly address the power user’s interface needs. It was tempting at times to stray from the pure internet themes when designing the PeopleSoft Power HTML user experience. But we stuck to the pure internet themes in order to provide low cost deployment and ubiquitous access to our applications. PeopleSoft has found that through innovative design and by paying enormous attention to detail, we could deliver power user applications that surpass the user experience of our past client/server applications. PeopleSoft has worked closely with its PeopleSoft 8 customers to deliver what we believe to be the industry’s leading user interface features targeted directly at the power user. These features include:

��Mouse-less Data Entry

��User Personalization

��Advanced Search and Drill Down

��Minimizing Trips to the Web Server

This white paper gives an overview of the PeopleSoft Power HTML features and explains how our pure internet applications are ideal not only for the novice self-service user, but also for the heads down power user.

A Day in the Life of a Call Center Agent

Let’s take a look at a typical interaction that a customer service representative (CSR) might have with a customer. The customer has previously logged a case about a problem with their air conditioning. They’ve now contacted the call center to say that the problem has not gone away and has become important to fix.

The CSR takes the call and asks the customer for her case ID. The focus on the Find an Existing Case screen is automatically set to the correct field for entering a case ID.



The CSR enters the case ID and uses the Alt-1 Enter keyboard shortcut to search for the case. Breaking down the steps, Alt-1 moves the focus to the Search button and Enter causes the Search button to be “pressed”.



The case is found and the main Support application page appears with all the case information. On this page we can see the information about the problem. Tabs along the top indicate that other information is available such as case notes and the history of the case.

The customer initially logged the case on-line as a Question. She’s called in to say that it is a real problem and occurs regularly. The CSR needs to change the case type to reflect this. Using the Tab key, the CSR navigates to the Case Type field.



Once in the Case Type field, the CSR presses the D key to populate it with the first permissible value that starts with the letter D. In this case, that value is Defect, which is exactly what is required.



Using the Tab key to navigate to the other fields, the CSR changes the Priority from Medium to High and the Severity from Intermittent to Recurring. Finally, the CSR changes the Case Status to Open Service Order.

The CSR tells the customer that her case has been updated and that someone will contact her to arrange a field service call. After terminating the call, the CSR must enter some information to explain why the changes have been made. Using the Alt-N Enter keyboard shortcut, the CSR is able to open the Notes and Attachments tab. Again, Alt-N moves the focus to the Notes and Attachments tab, and Enter opens the tab.



On the Notes and Attachments page, the focus is set to the Summary field. The CSR enters some explanatory notes.

Once the notes are complete, the CSR must save the case and does this using the Alt-1 Enter shortcut. Alt-1 moves the focus to the Save button and Enter “presses” the button.


1 0 D E L I V E R I N G I N T U I T I V E , R O B U S T , P U R E I N T E R N E T A P P L I C A T I O N S F O R T H E C A L L C E N T E R

Finally, the CSR will update the Interested Parties list for this case. The Interested Parties page is accessed through the page tabs by pressing Alt-I Enter.

The CSR adds a name to the list of Interested Parties by pressing Alt-7, which adds a row and allows the agent to type in or to search for the appropriate person.


D E L I V E R I N G I N T U I T I V E , R O B U S T , P U R E I N T E R N E T A P P L I C A T I O N S F O R T H E C A L L C E N T E R 1 1

If the CSR subsequently decides to remove an person from the Interested Parties list, a row can be deleted by pressing Alt-8.

As you have seen, the CSR is able to use the application without ever having touched the mouse. If at any time the CSR needed to remind themselves of the keyboard shortcuts, a help screen can be pulled up by pressing Control-K.



PeopleSoft Power HTML Features

PeopleSoft Power HTML is a combination of innovative, patent pending technology features and design techniques that optimize the user experience for the power user. The following sections give an overview of these features.

Mouse-less Data Entry

Enabling a customer service representative to navigate and control an application using only keystrokes directly contributes to call center efficiently and, therefore, to reducing costs. Mouse-less data entry is a critical piece of the PeopleSoft Power HTML user experience: it eliminates the need for a user to constantly reposition their hands to and from the keyboard and the mouse. PeopleSoft 8 CRM can be driven from the keyboard without using the mouse.

This is taken for granted in the client/server world, but if you think about most web sites and web applications, navigating through the page using the Tab key is time consuming and poorly implemented, invariably requiring the use of the mouse and keyboard to accomplish a task.

When mouse-less data entry is implemented in a web application, it requires code on the client. So how does PeopleSoft do it with a pure internet, no code on the client solution? Simple things such as paying close attention to cursor placement and using the Enter key consistently across the applications are critical for delivering a high quality browser-based user interface for the power user.



Smart Cursor Placement and Consistent Enter Key Use

The following are several simple examples of smart cursor placement and consistent use of the Enter key. This type of processing may not seem that important at first glance, but this is the exact attention to detail that is critical for a high quality interface for a call center user, such as a customer service representative, that is not dependent on the mouse.

Menu Processing

As the end user navigates through the PeopleSoft menu options, the cursor is always placed at the first row of each menu column and the tab key moves the end user down one row at a time through the menu column. The Enter key invokes the currently highlighted menu. This allows the end user to easily navigate through the menu using the keyboard.

Cursor placement at the top of each menu column

Search Dialog

Once the end user selects a transaction from the menu, the corresponding search dialog is displayed. The cursor is placed in the first search field and the Enter key invokes the search processing using the entered criteria values. The search result list is then displayed and the cursor is placed in the first column of the first row of this list. The user can then quickly tab through the returned rows since the search result list tabbing navigates down the first column in each row. Pressing the Enter key selects the currently selected row and transfers the end user into the transaction.



Search page with the cursor placed in the first row of the search results list

Lookup Processing

Once in a transaction page, the end user can invoke lookup processing on many of the fields (e.g. Customer or Company Name) simply by clicking on the lookup icon (the magnifying glass icon next to the field) or by pressing Alt-5. The lookup processing is very similar to the search processing where the Enter key invokes the search processing for the criteria specified and the cursor is placed on the first column of the first returned row. Pressing the Enter key then selects the currently selected row and returns the user back to the parent page.



Lookup page with the cursor placed in the first row of the search results list

Hot Keys and Access Keys

Browser Hot Keys and Access Keys allow the user to quickly invoke frequently used processing such as save and lookup processing without using the mouse. This is critical for fast data entry.

A Hot Key performs an immediate action. For example, when in a field that has lookup processing, Alt-5 invokes the Lookup page.

An Access Key is an alt-x key combination that moves the focus to a specific field on the current page. It does not perform any action. Pressing the Enter key invokes the processing. For example, Alt-1 moves focus to the Save key and pressing enter invokes save processing.



The following is a summary of the Hot Keys and Access Keys available to the end user for all PeopleSoft applications through PeopleSoft Power HTML:

Hot Key Access Key Function

Alt 1 Move to “Save” button in page, move to “Search “ / “Add” button in search and lookup pages, move to “OK” button in secondary page.

Alt 2 Move to “Return to Search” button.

Alt 3 Move to “Next in List” button.

Alt 4 Move to “Previous in List” button.

Alt 5 Invoke Lookup and Calendar processing.

Alt 6 Invoke Pop Up menu processing.

Alt 7 Invokes Insert Row processing in scroll/grid.

Alt 8 Invokes Delete Row processing in scroll/grid.

Alt 9 Move to menu items in breadcrumbs and New Window link.

Alt 0 Triggers Refresh in Expert Entry mode

Alt . Invokes Next > processing in grid, scroll, result list.

Alt , Invokes Previous < processing in grid, scroll, result list.

Alt / Invokes Find processing in grid, scroll, result list.

Alt ‘ Invokes View All processing in grid, scroll, result list.

Alt \ Toggles between modes in component, toggles between Add/Update in search page.

Ctrl J Provides details on the end user’s current connection information:



Enter Invokes search processing, using the current criteria, when in the lookup and search pages.

Esc Cancels the currently active page in search, lookup, calendar, and secondary pages.

Page Tabs Each page in a component may have an Access Key associated with it. The underlined character in the tab is the Access Key for that page:

Menu Hot Keys

When using the menu, Alt-1, -2, -3 and -4 are hot keys that will navigate the user across the four levels of the menu so that they can quickly jump between the menu levels without using the mouse.

Hot Key and Access Key Differences between Web Browsers

The behavior described above applies to Internet Explorer 5 and above. With Netscape 6, all of the above keys act as Hot Keys (Netscape automatically invokes the processing without requiring the end user to press the Enter key). Netscape 4.x has no support for Hot Keys or Access Keys.

User Personal izat ion

With the PeopleSoft Internet Architecture, user profiles can be stored centrally either in the PeopleSoft database or a directory server, or they can be stored using a combination of both. It’s up to the customer and is completely configurable. The personalization settings are a key piece of this user profile. Each user’s needs are unique and as they interact with the PeopleSoft system more and more, their user preferences may change. Using the “My Profile” component, the end user can control her personalization settings for the PeopleSoft system. These settings apply to all PeopleSoft transactions in the system:



My Profile Page

The above page is the primary page that deals with the user’s basic settings. Clicking on the “Set Personalizations” hyperlink takes the end user to the following page where she can maintain more detailed settings:



My Profile Personalization Page

Note that the user personalization settings that are available to the end users can be controlled by the system administrator. Using the Administer Personalization Options component, the system administrator can control what personalization options are available to the end user and what the default values are for these settings.



Administer Personalization Options Page

There are two primary categories of user personalization:

1. Interactive Page Settings

2. International Settings

The following explains these categories in more detail.

Interactive Page Settings

As the end user becomes more experienced with the PeopleSoft system, she’ll want to tweak her interactive page settings to minimize keystrokes and maximize her productivity. For example, the very experienced end user may memorize the most common product codes and may not need to look up these codes most of the time. In this case, the end user will want to remove the lookup icons from her tabbing sequence in order to speed data entry. This is just one example of user personalization that helps optimize the user experience. Here is a summary of the interactive page settings that the end user can personalize:

Tab Over Options

In the search screen below, the CSR can navigate through the page by using the Tab key to shift focus from field to the next. Say the current focus is the Case field. As soon as the agent presses Tab, focus shifts to the magnifier icon. Pressing Tab again shifts the focus to the PIN field and so on. In many cases, the experienced user will want to customize their environment so that pressing Tab moves from field to field and skips the page control icons, such as the magnifier page control icon. This is easily accomplished by the end user by modifying their profile. The administrator can set up default profiles, and determine which options the end user has control over. Doing this results speeds navigation through the page and can result in productivity gains for the experienced user.



The end user can control whether the following page controls are included in the page tabbing sequence (i.e. whether the cursor stops on these icons or are automatically skipped over when the tab key is pressed):

��Lookup Icons

��Calendar Icons

��Related Links Icons

��Header Icons

��Add and Delete Buttons in Grids and Scrolls

��Grid Tab Links

��Page Links

��Navigation Bar

��Web Browser Elements (address bar, etc.)

��PeopleSoft Toolbar

Note that all of the above controls will continue to be displayed and fully available to the end user via the mouse even when excluded from the tabbing sequence. Once the end user masters the available access keys and hot keys (discussed below), there will no longer be a need for most of the controls listed above to be included in her tabbing sequence.

Save Indicators

Less experienced users will want the PeopleSoft system to behave so that it is very clear to the end user when she needs to save changes and when changes have been saved successfully. Once the end user gains experience with the PeopleSoft system, these interactive features may become distracting. The end user will have the option to deactivate the following save indicators:

��Save Warning Message



��Save Confirmation Message

International Preferences

The following are the primary international settings that can be maintained by the end user. Note that these settings are useful for both the casual end user and the power user and are not targeted solely at the power user.

��Date Format: (DD-MM-YY, MM-DD-YY, YY-MM-DD). This setting allows the end user to control how she enters and views date fields in PeopleSoft pages. The century (YYYY or YY) is controlled as a panel field property by the system designer and is not a preference.

��Date Separator: Any single character. Common ones would be ‘ /’, ‘-‘, ‘.’. This determines whether the date will be shown as DD/MM/YY or DD-MM-YY for example.

��Time Format: (h:mm:ss tt or H:mm:ss). Determines the difference between 8:05:00 PM and 20:05:00. The determination of whether seconds and microseconds are displayed is made at the field level by the system designer. It is not a preference.

��Default Currency: The default currency that currency related transactions are entered in.

��Currency Symbol: Any string up to 5 characters long. Often ‘$’, ‘¥’, ‘�’, ‘£’. This determines the default value for fields if no Currency Control field is specified.

��Local Time Zone: The local time zone of the end user.

��Language Code: The language that the application is displayed in.

Advanced Search and Dri l l Down

Browser-based internet applications naturally encourage search and drill down processing. With the enormous success of search engines, end users have grown very accustomed to leveraging search technology in order to find what they are looking for. Concerning drill down, the hyperlink is the universally accepted user interface control for drilling down into more detailed information. The pure internet applications of PeopleSoft 8 make heavy use of both search and drill down functionality for both the novice and power user.

Hyperlinks

Hyperlinks, as would be expected, are used extensively across all aspects of the PeopleSoft 8 internet applications for navigation and drill down. This is a big difference between Windows-based client/server applications and internet applications and we have found that hyperlinks are an excellent user interface control for the power user. Menus, search pages, and lookup pages all make extensive use of hyperlinks. Hyperlinks are also used extensively within the transaction pages to drill down into child data and to navigate to other related transactions.

Search and Lookup Pages

All PeopleSoft 8 applications make extensive, consistent use of the search and lookup pages for the power user.



Search Page

Collapsible Sections

A new page control added with PeopleSoft 8 is the collapsible section. This is a great way to organize data that is optional or viewed infrequently and allows the end user to easily drill down into the specific data that she is interested in. The following page is an example of how different types of data are displayed using collapsible sections:



Collapsible Sections for Organizing Data



Find

Since the PeopleSoft 8 applications are browser-based, the end user can use the web browser’s standard Control-F find feature to locate a string on the page. This is useful for large queries and search result lists. PeopleSoft also added find functionality to grids so that the end user could easily search for data in the grid even if it is not displayed. For example, a grid may contain 100 rows of data, but the page only displays the first 10. Using the grid find functionality, the end user can quickly search for a string within the 100 rows. The following is the navigation bar from a grid that contains the “Find” link:

View All

Another user experience feature that boosts end user productivity is View All on search result lists, lookup result lists, scrolls, grids, and Query result lists (just about anything that displays multiple rows of data). PIA parses large result lists into chunks of rows that the end user can navigate through using the navigation controls in the result list (First, Last, etc.). Or, the end user can view the entire result list at once using View All. Control-F can then be used to navigate to a specific instance and the entire result list can easily be printed.

Verity Search Engine Integration

With PeopleTools 8.12, the Verity Search Engine is integrated with the PeopleSoft Internet Architecture. Using this search engine, the end user will be able to search the PeopleSoft system similarly to how they search the web today using search sites such as Yahoo! and Excite.

Minimizing Trips to the Web Server

The PeopleSoft 8 thin client, server centric internet applications execute their business logic on the server. This is different from past client/server applications where extensive business logic executed on the client

With the PeopleSoft Internet Architecture, basic business rule processing is done on the client using JavaScript. And to help cut down on the trips to the web server, PeopleSoft has implemented a new “Deferred Processing” mode to defer edits until the application data is saved.

JavaScript on the Client

The following is a summary of how JavaScript is used on the client with the PeopleSoft Internet Architecture:

��Data Type Checking: Simple type checks (numeric, date, time, datetime, etc.).

��Upper Case Conversion: JavaScript is used to convert upper case fields if entered as lower case.

��Calendar Control: The calendar control is implemented using JavaScript.

��Submit Actions: User actions that result in trips to the server (e.g. pressing the Save button) invoke a JavaScript routine that submits the request to the web server.

��Hot Keys: The Hot Key processing discussed in the prior section is implemented through JavaScript using key events.



��Processing and Saved Message: JavaScript is used to display the “Processing” and “Saved” graphic when the end user saves a transaction.

Calendar Control

Note that the size of the JavaScript programs is very small (several hundred bytes at most) which results in the JavaScript code being a small fraction of the overall packet of data (HTML and JavaScript) that is passed down to the web browser when a PeopleSoft page is displayed. JavaScript should not be confused with Java, which quite often results in megabytes of code being downloaded to the client.

Deferred Mode Processing

One of the issues with client/server applications is that they can sometimes become too interactive for the power user. Complex applications that contain a lot of field level validations often slow the power user who rarely makes mistakes. For example, the power user usually is able to memorize the most commonly used codes in the most frequently used screens so there is no need to edit each code entered as the user tabs from field the field. This extra processing, which usually results in a trip to the server, slows data entry.

The same holds true for thin client, internet-based applications. But this new breed of application lends itself more towards form level validations where all the field edits are executed on one trip to the server versus the field level validations that are common in client/server, resulting in numerous trips to the server.

With PeopleSoft 8, the PeopleSoft event model has been enhanced to enable Deferred Mode processing. With deferred mode, all field level edits and processing are deferred until the end user submits the transaction to the web server to be saved. This helps minimize trips to the web server. This is ideal for power users where data entry mistakes are the exception and rapid data entry is a must. The following shows the Customer component that uses Deferred Mode processing:



Customer Component that Uses Deferred Mode

In the above page, each field level edit is deferred until the user submits the transaction to the web server to be saved, thus minimizing server trips and speeding data entry for the end user. Note that the end user still has the option to do interactive lookups on most of the fields if she doesn’t know the value to be used. It should also be noted that field level validations are still used across the PeopleSoft 8 applications where appropriate.

Expert Entry Mode

Expert Entry Mode leverages the development work that was done to support Deferred Mode processing. Some users / customers prefer the field level edits and some prefer form level edits — a lot of variables determine which is best for a specific end user (experience level, network connection, etc.). Using Expert Entry Mode, the end user can control what edit mode is used for a particular transaction, standard or deferred.

If the end user has been given authority to use Expert Entry Mode (via Maintain Security) and the transaction has Expert Entry enabled (it’s a check box on the Component Definition which is set by the Application Developer and can optionally be set as the default), then the end user will see an “Expert Entry” check box at the bottom of the page:



Expert Entry Mode

When Expert Entry is enabled, field level validations and business logic execution are deferred until the transaction is saved or the end user presses the “Refresh” button on the PeopleSoft toolbar (Alt-0 is the Access Key for this). So for example, the end user could enter five of the 10 total fields for the page and press the Refresh button to execute the edits and business logic associated with those five fields. If any errors are found, the fields in error are highlighted on the page.

Summary

PeopleSoft has developed its user interface by examining best practices of user experiences across the web. We have met the needs of both the casual and inexperienced user as well as the needs of the power user who use uses the application as a key part of their daily work activity (such as the “heads down” call center user). Through innovative design and close attention to detail, the power user experience of the PeopleSoft 8 applications sets the standard for browser-based enterprise applications. Our user interface has been met with rave reviews by analysts which was probably best summarized by John Hagerty, Vice President of AMR Research:

“PeopleSoft’s release 8 internet architecture makes tremendous difference both in use and deployment of its enterprise applications. The company has succeeded, yet again, in defining the industry standard for application user interface—this time in a pure web metaphor.”

But the proof of the pudding is in the eating. For those interested in getting more details about the PeopleSoft Power HTML user experience, a live demonstration of PeopleSoft 8 is a must. Hopefully after seeing PeopleSoft 8 CRM in action, you will come away as excited about PeopleSoft Power HTML as we are.

Documents

PeopleSoft Power HTML - UF Bridgesprod-apache.erp.ufl.edu/accessibility/Power_HTML_CRM_White_Paper.pdfPeopleSoft, the PeopleSoft logo, PeopleTools, PS/nVision, PeopleCode, PeopleBooks,