User Experience

User Experience

INTRODUCTION TO USER EXPERIENCE

Explain the principles of good user experience

The most important first step to a good user experience, also known as UX, is to not mistake it for the user interface.  This is a common misconception.

While the user interface, also known as UI, does contribute to the majority of a user’s experience, other factors that should be considered are:

• Automating business processes
• Using intent driven processes
• Ergonomics

Automating business processes - allows users to be better informed and thereby helps our users to be more productive.

Anything that makes the job easier for a user should be considered to give the user a better overall experience. 

Using intent driven processes - providing users the information they need, when they need it.In most situations, a user only requires a small subset of the overall information to make an informed decision.  By placing this information upfront for the user, they can quickly make a decision.

Ergonomics - We’ll want to try to eliminate as many clicks, and as many mouse movements as possible to make the user more efficient in their use of the system.Breaking the screen up to avoid users having to scroll, especially horizontal scrolling. Using tabs to navigate a multiple input form instead of having the user reach for a mouse.  Grouping selections nearby, so the user doesn’t have to move the mouse over a large area. 

That’s actually one of the recommended best practices.  Never present a user with horizontal scrolling and try to minimize the necessity of vertical scrolling.

A portal is really a user workspace. In PRPC, the term "Portal" indicates not only the user workspace, but can also indicate the role the user has.

It's important to think about what type of functions and tasks our user groups need access to, to determine the type of portal that is needed.

A harness can really be thought of as an HTML Page. It is a top level component within the Pega UI. There are a number of different types of Harnesses within the PRPC.

The Perform and Review Harnesses are the most popular ones to use in an application. These allow users to enter, edit and review data within a PRPC application.

Sections are exactly what they sound like. Within a harness, there can be a single or multiple sections. These sections are the building blocks of the application UI. There are hundreds of standard section rules that are shipped with the product that allow easy configuration of the user interface.

Layouts allow us to specify the way we want our form data to be presented.  Every section contains at least one layout.  PRPC and Pega 7 in particular provide several different layouts to get us started with building our UI and we always have the option to add more layouts as needed.

We should note that Layouts are the only UI component that is not its own rule in PRPC.

Controls are the most granular of the UI components.  These allow us to present data, take user input, make decisions and interact with the user.  These include things like text boxes, buttons, selectable lists, etc

Pega 7 in particular provides several new controls aimed at making UI development even easier, dynamic and more robust.

UI Gallery

DesignerStudio->User Interface-> UI Gallery. 

The UI Gallery is configured in two parts.  The first is the Showcase, which contains some samples of complete User Interfaces. The second is the Available Components, which contains samples of individual controls.  These are further grouped into the four categories shown here; Components, Layouts & Containers, Tables & Grids and Samples & Combinations.

UI Kit
The UI Kit is a Pega 7 ruleset (UI-Kit-7) that contains rules and skins available for use in building or customizing Pega 7 user interfaces. The UI Kit ruleset provides the latest Pega standard end-user UI, with features designed to ensure responsive interfaces on mobile devices, and includes the most current, enhanced styles used by the pyEndUser71 skin.
The UI Kit is delivered as a locked ruleset. To customize the rules provided by the UI Kit, copy them to an application ruleset first.

INTRODUCTION TO UI ARCHITECTURE

Portals

Working with Portals This is the top level of our User Interface.In most cases, we can start with the pyCaseManager portal.  There is also a pyCaseWorker portal, but this portal is just a subset of the pyCaseManager portal so it’s considered best practice to start with the pyCaseManager portal and remove the unwanted elements.

Parts:

• The top pane is setup as a header that provides access to search for or create new work.  It also lets the user log off and switch applications if access to multiple applications has been granted.
• The left-hand pane is referred to as the navigation pane.  This allows the user to switch between screens of the application.  From here, they can access their recent work, their worklist, and a variety of reports
• This main area is known as the Work Pane.  This is where a user interacts with each individual piece of work.

Creating:

When working with portals, we need to open the portal rule form.  In most cases, we will only be dealing with two tabs.

• Skins - The Skins tab allows us to specify three different options.  These options tell the system how to display this portal. The last option is for the skin rule.  In most cases, we want to default to the Application Skin option.  This will allow the system to inherit all the same settings for the entire application.  Alternatively, we can specify another skin to use, but this does not provide for reuse and should only be used when it’s unavoidable.
• The first option is role.  Role can be either user or developer
• The second option is for the type of portal.
• Fixed—this type of portal is provided to support backwards compatibility with applications created prior to version 5.5.  It cannot be used in new development.
• Custom—this type of portal determines the user interface from an activity.  It is an advanced topic that is discussed in the Lead System Architect course
• Mobile—this type of portal supports displays on smartphones and tablets.  It is an advanced topic that is discussed in the Pega Mobile course.
• Composite—this portal uses harnesses to define its layout and is the recommended portal type to use for all new development.  The rest of this lesson we will only reference settings for this type of portal.
• Spaces  - When using Composite portals, the other tab we need to configure is the Spaces tab.  In most cases, we only need to specify a single space called Work and provide the associated harness.  The Work space must always be present even if we specify any additional spaces.
  • The harness we specify is a special kind of harness that uses a screen layout.  Screen layouts allow us to specify which sections to display to the user.  If we open the harness associated with the pyCaseManager portal, we find a screen layout that reflects the same top, left, and main panes we’ve seen when viewing the rendered end user portal.

Harnesses

Aside from controlling user portals, the main function of a harness is to support the display of a work object.  You can think of a harness as the form for the work object; it groups the individual sections together and presents them to the user.

• New—this encompasses any harness that is displayed when the work object is being created.  They are presented to the user after a work object has been instantiated on the clipboard but before it is persisted to the database.  It provides the options to set some initial values that should be present during the initial creation.  As a best practice, the New harness should only be used for this first step.
• Perform— this encompasses any harness where the user is performing their assignments.  These harnesses are what allow the user to interact with the work.  There are several different forms of the Perform harness that provide a different interaction but all fundamentally allow the user to access and submit a flow action to move the process on from this assignment.
• Review—this encompasses any harness where the user is viewing read-only data and not interacting with a flow action.  These harnesses are used to present the user with information about the work object and are most often used to view all the associated assignments with this particular piece of work.
• Confirm—this encompasses any harness where the user has submitted the work and does not own the next assignment.  They are used to present final information to the user, but the user can no longer interact with the piece of work.

The Design tab is where the bulk of the development on a harness is completed.  It’s here that we use the Designer Canvas to specify the layouts and sections we want this harness to display.The Display Options tab provides options for how errors are communicated to the user, some control over the presentation to the user, and an audit feature that allows the system to track every time this harness is displayed to a user.

The Scripts and Styles tab is used to provide form-level JavaScript to the system.  The best practice is to not leverage these and provide any required actions or events in the Skin The Advanced tab provides options on how the HTML is generated from this rule to be presented to the user.rule.They are provided here for backwards compatibility.

Flow Actions

These rules are what allow a user to perform their assignments and interact with the work.  They are specified in the flow as connectors off an assignment.

The Layout tab allows us to specify which section will provide the user interface for this flow action.

The Validation tab allows us to specify which validation rule (Rule-Obj-Validate) to execute when this flow action is submitted.  We can also use this validation rule to conditionally update the work object’s status if the validation is successful.

The Action tab is the second most important tab of a flow action.  It is on this tab that we define how the system behaves when performing this flow action.  At this point we have the option to take actions just before the screen renders, such as to update some of our data or to prepare some calculations.  We can specify which actions to take when the flow action is submitted, such as performing calculations or updating a back end system.  We can also configure how the system interacts with the user for the next step of the flow such as whether to show the next step of the process or to display a confirmation to the user.

The Help Setup tab is underutilized in most systems.  This tab allows a developer to specify information a user can then leverage to gain additional insight about this floThe Security tab is used to control who can perform this flow action.  Privileges and security in general is discussed in the Security lesson.w action.

The HTML tab lets us specify how this flow action will affect the rendering of the user interface.  In most cases, we will want to specify to use a Reference Section.  In some scenarios, we may want to leverage the No HTML to indicate there is no user input beyond the selection.  This is often used in conjunction with the Perform_Buttons harness to provide an easy means of allowing a user to choose between branches of the flow, such as Accept or Reject without requiring an additional user interface.   The Reference HTML choice is provided for backwards compatibility and should not be used for new development.

Local actions are a special kind of flow action that is not associated with an assignment in a flow.  They function and are configured similarly to flow actions but don’t move the flow along a connector when they are submitted.  Instead, these just perform the actions specified on the Action tab but leave the work object on the same assignment.

BUILDING THE UI

Designer Canvas

The Designer Canvas assists us to quickly build user interfaces without writing lines and lines of code. The Designer Canvas is accessible in harnesses and sections.

The top part has a toolbar which provides various icons to perform edit operations such as cut, copy, paste, add/delete rows or columns, merge rows or columns.

In addition to these operations the toolbar also provides control groups (Layout, Basic and Advanced) for us to add layouts and other controls in the section.

This group allows us to add any of these layouts in the section
This lists all the controls that we can use in presenting our data elements and we will talk about these more in the Formatting data elements lesson. Similar to layouts, we select one of them and drag it into the section.

Layout Types

There are various types of layouts supported in Pega for us to build our user interfaces.

• Dynamic Layout – This is the most common layout used in sections.
• Column Layout – As the name suggests, this creates a layout with columns.
• Smart and Free form layouts – they exist in the product for backward compatibility
• Repeating layouts – Used to display repeating groups such as a pagelist.

Dynamic layouts are a newer layout type supported in Pega7. Dynamic layouts is the default layout type in all newer applications. They use HTML5 tags and support responsive behavior.When adding a new Dynamic layout in a section, we also need to configure the format.The format is defined in the skin rule. PRPC ships with a set of standard layout formats that we can use in the application skin. We can also add more application specific formats if required.(Stacked, Inline и т.д.)

Column layouts allow us to split the work area into columns.  They are mostly used on other portals. The designer studio and case manager portal heavily use columns. Column layouts are typically used when we need to present different content in differing columns.Column layouts allow us to split the work area into columns.  They are mostly used on other portals. The designer studio and case manager portal heavily use columns. Column layouts are typically used when we need to present different content in differing columns.

Dynamic and Column layouts can also be extended using the repeating mode. To add a repeating layout, we select Repeating in the Set Layout Type dialog and then select the type we want.The Grid is a commonly used choice, to display the repeating group in a spreadsheet format – rows and columns - new rows representing a new item. A column header row displays to indicate what each column represents. Grids can be styled using formats and these are saved in the skin rule.Unlike other layouts, the repeating layouts require us to identify a source. Grids can display a page list, or a data page (with list structure), or the results of a report definition.Dynamic repeating layouts can be sourced using either a page list or a data page. The repeating layout displays a single cell where we include a section. The section gets repeated for each item of the page list. The Section can be designed to use any dynamic layouts similar to how we set it up for a single level property.Column repeating layouts are similar to grids except the items are repeated across columns instead of rows. Column repeating layouts can be sourced by a page list or a report definition.

Configuring Layouts

The Designer Canvas provides access to controls, we need to select a control and drag it into the cell inside the layout to add the property.

Layouts can be configured to use headers and use containers. They are useful in grouping cells to present them in logical groupings. The properties panel of the layout has options to select the header and container format.There are three header types supported in this property panel – bar, collapsible and field set.

We can also use a tab or an accordion as the header format.This adds a tab layout with one tab in there. We can add another layout or a section inside this tabbed layout as a new tab. 

Dynamic and column layouts allow nesting. Nesting is a very powerful feature which helps in the creation of layouts where fields are arranged in multiple ways.

Another powerful feature of a dynamic layouts is that it can be floated to the left or the right. When float is selected the layouts can be aligned to the left or to the right.  In the presentation tab there are other fields that are very important when using floats.

Let’s look at the options:

•  Set layout width to auto — This flag allows layouts to use only the width that it requires.
• Self-Clear — This field is enabled by default and is used to account for the height of floated layouts. Do not disable this field unless on you have an occassion as described below.
• Clear floated layouts — This field clears other floated layouts so that they don’t appear in same line.

Configuration of Grid Layouts

Grid layouts allow us to configure pagination formats, as well as conditions to control the visibility of the grid, row, header and footer.  We can also configure the refresh when condition so that it can refresh only a single row.

Pagination is useful not just for the cosmetic appearance, but also aids in improving the performance at runtime. 

Grids allow various types of edit modes. Inline allows rows to be edited directly in the grid while Master-detail allows them to edit the grid in a modal dialog or by expanding the row or in a separate panel outside the grid. Master-detail is useful if the grid displays the high level information and clicking a row then provides additional details. The content that is being displayed to present additional details comes from a flow action rule.

INTRODUCTION TO RESPONSIVE UI

PRPC applications must use Standards mode to use the newer layouts such as dynamic layouts, column layouts, screen layouts and repeating dynamic layouts.

In PRPC Standard Mode can be enabled in few a places:

1. Application rule:  In the application rule there is a flag (Include HTML5 document type) listed under the user interface section. When checked Standards Mode is enabled.
2. Harness rule: In the harness rule on the Advanced tab we select Inherit from application rule for the document type and the application renders in standards mode.

When using IE as the browser, we need to disable compatibility view for the standards mode to work.

Using Standards mode, we can add newer layout types such as dynamic layouts, column layouts and repeating dynamic layouts. The newer layout types use the <DIV> tag instead of the <TABLE> tag which makes it much more flexible to resize the information based on screen resolution. 

Designing Layouts for Achieving Responsiveness

The main factor to remember in designing user interfaces for multiple form factors such as tablets and mobile phones is to make sure that we avoid horizontal scrolling. Setting the width in % helps us to achieve this goal.

Floats are useful in aligning the layout to the left or the right. This is useful when rendering multiple layouts in the same line. The header in Designer Studio actually uses two dynamic layouts with the second dynamic layout aligning to right.