User experience optimization techniques and methodologies

The best way to prevent performance issues is to design the application to avoid them in the first place. Use the following techniques to optimize user interface performance and for the best possible user experience:

• Leverage asynchronous and background processing
• Implement the system of record (SOR) data retrieval pattern
• Utilize deferred data loading
• Paginate large result sets
• Leverage data pages
• Use repeating dynamic layouts
• Maximize client-side expressions
• Use single-page dynamic containers
• Utilize Layout refresh and Optimized code
• Leverage new Pega Platform user interface features

Pega provides multiple mechanisms to run processing in parallel or asynchronously when integrating with external systems. For instance, you may initiate a call to a back-end system and continue your processing without blocking and waiting for the external system’s response. This is useful when the external system processing time can be long and when the result of the processing is not needed immediately. This topic presents how the following Pega Platform features can be leveraged to improve the user experience.

Imagine the following scenario. In a claims application, you retrieve the data and policies for customers who call to file a claim. The data is retrieved using two connectors: GetCustomerData and GetPolicyList. To speed up the loading of customer data, you run the connectors in parallel.

You can use the Run in Parallel option to accomplish this. In this case, each connector runs as a child requestor. The calling activity, the parent requestor, retains control of the session and does not have to wait for each connector, in succession, to receive its response. The Run in Parallel feature is useful when subsequent tasks can be performed while waiting for multiple connectors to retrieve their individual responses.

Imagine the following scenario. You have a SOAP connector called UpdateCustomerData that updates a customer record in an external system. The response returned by the service is irrelevant for subsequent processing. Since the customer might be temporarily locked by other applications, you retry the execution if it fails.

In addition to being executed synchronously and in parallel the SOAP, REST, SAP, and HTTP connectors can also be executed in queue mode. Select queueing in the Processing Options section on the connector record’s Service tab to configure queuing.

When queueing is used, each request is queued, and then processed later in the background by an agent. The next time that the agent associated with the queue runs, it attempts to execute the request. The queueing characteristics are defined in the connector's Request Processor.

Background processing can also be leveraged to allow an initial screen to load which allows the user to continue working while additional detailed information is retrieved. This strategy is particularly useful when using the SOR design pattern.

Pagination can be leveraged to allow long-running reports to retrieve just enough information to load the first page of the report. As the user scrolls down to view the report additional records are retrieved and displayed as they are needed. Use appropriate pagination settings on grids and repeating dynamic layouts to reduce the amount of markup used in the UI.

Deferred data loading can be used to significantly improve the perceived performance of a user interface. Either through asynchronous or background processing the screen is rendered almost intermediately allowing the user to get on with the task at hand while additional information is retrieved and displayed as it becomes available. Use defer load options to display secondary content.

Use data pages as the source for list-based controls. Data pages act as a cached data source, that can be scoped, invalidated based on configured criteria and garbage collected.

Use repeating dynamic layouts for nontabular lists. Avoid multiple nested repeating dynamic layouts.

Ensure that multiple actions that are processed on the server are bundled together so that there is only a single round trip.

Use client-side expressions instead of server-side expressions whenever possible. Whenever expressions can be validated on the client, they run on the browser. This is typically true for visibility conditions, disabled conditions, and required conditions. Enable the Client Side Validation check box (only visible when you have added an expression), and then tab out of the field.

Use non i-Frame (i-Frame free) single page dynamic containers (this is the default setting in Pega 7). Single Page Dynamic Containers are much lighter on the browser, enables better design and web-like interaction.

Only embed sections if they are truly being reused. Pega copies the configuration of included sections into the sections they are included. It is more efficient to reference a section by simply dragging and dropping the section into a cell.

Use refresh layout instead of refresh section to refresh only what is required. To reduce markup, use the Optimized code based settings in the dynamic layouts Presentation tab.

Leverage all the newest technologies in Pega Platform for better client-side performance and smaller markup. The newest user interface technology is all HTML 5 and CSS 3.0.

Take advantage of icon fonts and new menus. Use the least number of layouts and controls possible, and always use the latest components and configurations available.

Use screen layouts, layout groups, dynamic layouts, dynamic containers, and repeating dynamic layouts. Avoid legacy accordion, column repeat, tabbed repeat, and freeform tables as they run in quirks mode and should not be used.. Use layout groups rather than legacy tabs, which have been deprecated. Also avoid inline styles (not recommended although still available), smart layouts, and panel sets.

Pega Platform™ provides a robust and configurable user interface for your Pega applications, as well as mashup functionality that you can use to embed Pega frames in your non-Pega application. In addition, Pega provides REST APIs that you can use to populate your non-Pega user interface with the results of Pega rules. When you use the Pega REST APIs, your application users to access Pega business functionality in a familiar interface.

These REST APIs are known as digital experience APIs because they leverage Pega user interface rules (harnesses and sections) together with Pega business rules to return JSON-equivalent structures that you can render with your native interface. By using the digital experience APIs, you can be guided by the Pega UI rules but not constrained by them. For detailed specifications of the digital experience APIs, refer to the Application category in the Pega API documentation.

The following figures show a Pega application where the user enters an address for a new account, and an equivalent screen that was built with the React JavaScript library and is backed by the Pega digital experience APIs.

For more information on how Pega’s Omni-Channel UX delivers an optimized and consistent user experience in every channel, see Build For Change: Omni-Channel UX.