building a better ui

8/3/2019 Building a Better UI

http://slidepdf.com/reader/full/building-a-better-ui 1/31

Click to edit Master subtitle style

Building a Better UI

LEAP



Housekeeping Items

Feedback Flag: Change your feedback flag to purple if youhave a question

Session Recordings and Documents: All documents,including this presentation and a recording of this session, willbe available for download on the LEAP system

22



Overview

Why is this important?

What we will cover Ø Flows and their impact on presentationØ Features within PRPCØ UsabilityØ Alternative Solutions

Post-Assignment



Building a Better UI - Importance

How many people have been on a project where clientshave been hung up on the presentation more than the

functionality of their system?Who has had a client who has raised concerns about our User Interface?

Who has had the ability to use the new 5.4 features at a clientsite?

Perceived Weakness

First Impression of Pega to most end users

Most of our answers/features are new and not everyone has had

the chance to use them.

Comments/Questions?



Advanced Flow Design

Standard Flows vs. Screen FlowsØ What’s the difference?Ø When would you want to use a screen flow?



Advanced Flow Design

Screen FlowsØ Limited shapesØ Ability to use specialized harnesses to navigate Next and Back

– TreeNavigation

– TabbedScreenFlow

– PerformScreenFlow

Ø Can only route to a single user at the beginning of process. All

assignments assumed to be worked on by a single user. – Define a single harness for entire screen flow (not at the assignment

level)

– Can wait till end of screen flow to commit changes.



Advanced User Interface Topics

Client Side ValidationØ Events

o

ONCHANGEo ONCLICKo ONBLUR

Ø Actionso Hide/Show Elements – use of divs and JavaScripto Refresh Section – can run an activity before refreshing the section (will

not refresh a parent section)Ø JavaScript validations

o csvalid.jso pega_validators.jso Build your own custom JavaScript and add Validate rule on property form



UI and Validation

Validation can run at different execution points within dataentry, what are they?Ø Client SideØ Validation rule on flow actionØ Post processing in a activity

ExampleØ You have 3 fields on a screen, 1 uses Client side validation, 1 is

checked in a validate rule and the last is validated via a postactivity.

Ø If you put invalid data in all 3 how many times will a user beprompted to fix their errors? And will all errors appear to the user simultaneously?



5.4 User Interface Enhancements

Screen Flow Changes

Rich Widget List allows you to embed elements such as List

Views, Charts, List To List and AutoCompleteSection rules can be passed parameters

Multi Level Tabbed Harness

Smart Labels

SP2 FeaturesØ AccordionØ Column and Tab RepeatsØ Auto FormattingØ Action Section – Alternative Display of Default Flow Action



Nested Tab Layout

PRPC V5.4 supports Tabbed Harness for Screen Flows :TabbedScreenFlow

Multiple Levels of Nesting are supported using Split For Eachinside Screen Flows

Harness takes in a parameter which allows the object to besaved at the very endØ If checked, You can also pass in a parameter to check for errors at

the last step



Nested Tab Layout



List To List Widget



List To List

Properties can be selectively copied to the target page which

may or may not exist on the Clipboard from the sourceDon’t use Declarative Pages to load Source



Auto-Complete Widget



Auto-Complete Widget

Results can be retrieved using an activity or a Declare Page

Client side caching is supported for less volatile data



Error Message Customization



Error Message Customization

Ø You can now control how errors are displayed at a form and at aproperty level at the Harness Level

Ø

Supports Creating Custom Error Sections for customizing displaysØ Field Level errors can have the Red X or Text next to the property.



Modal Popup Local Flow Actions



Modal Popup Local Flow Actions

5.4 supports the ability to create modal dialog boxes

Modal popups block user interaction with the main workflow form

Modal popups are only available for local flow actions which aredisplayed as buttons or icons

Local Flow actions added to the Flow’s design tab and invokedthrough the pull down menu do not leverage Modal popups

The Type of Button needs to be Local Action and a local actionmust be specified



Tabbed Repeating Layout



Action Section



Branding / Skinning Wizard

5.4 now provides the ability to “Skin” your application using CSSstylesheets which can be automatically generated using a wizard

based interfaceThe Skinning wizard can be accessed from the Application->New->Skin menu

A new look and feel can be quickly applied by modifying anexisting portal to leverage the generated skin

The wizard will create: Rule-Portal-Skin, 6 CSS style sheets(Rule-File-Text) and 2 portals : WorkManager and WorkUser Ø All are generated in the same ruleset

You can edit a skin once it is generated by the wizard

CSS Stylesheets are IE 6/7 and FireFox compliantConsider using Microsoft IE CSS Toolbar or the CSS Feature inFirefox to identify which style affects what feature on the page



Branding / Skinning Demonstration



User Interface

Any questions on these features?



Usability Guardrails

Human Factors Review?

Guardrails:Ø Be Consistent - use css for changes not inline styles all the time.Ø Alignment and WhitespaceØ Don’t Ignore the End User – involve them early, understand most are

adverse to change, demonstrate power of PRPCØ Minimize Data Entry – display for input only what is needed, incorporate

auto formatting and lookupsØ Customize Thoughtfully – business and user requirements and not

opinions should be the drvier Ø Reduce Visual Clutter – design in section rules, design for modularityØ Watch out for Excessive ClickingØ Balance Content and Navigation – avoid mixing different styles

(tree,tabs,etc)Ø Test your Usability! – build it into project plan.Ø Less is More – not every new feature needs to be included in your

solutions.. But determine which help support intent driven processes



Alternative Solutions

Has anyone implemented any alternative UI solutions withPRPC?

Ø True HeadlessØ JSP Tag LibraryØ IAC



IAC

2828



IAC

2929

Notice any of the Human Factors Guardrails being broken?




SummaryØ Flows and how they dictate presentation

Ø New Features available in 5.4Ø UsabilityØ Alternative Solutions

Post-Assignment (posted on LEAP Site)

B ildi B tt UI




Questions?