building a better ui
TRANSCRIPT
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 2/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 3/31
Overview
Why is this important?
What we will cover Ø Flows and their impact on presentationØ Features within PRPCØ UsabilityØ Alternative Solutions
Post-Assignment
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 4/31
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?
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 5/31
Advanced Flow Design
Standard Flows vs. Screen FlowsØ What’s the difference?Ø When would you want to use a screen flow?
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 6/31
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.
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 7/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 8/31
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?
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 9/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 10/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 11/31
Nested Tab Layout
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 12/31
List To List Widget
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 13/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 14/31
Auto-Complete Widget
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 15/31
Auto-Complete Widget
Results can be retrieved using an activity or a Declare Page
Client side caching is supported for less volatile data
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 16/31
Error Message Customization
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 17/31
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.
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 18/31
Modal Popup Local Flow Actions
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 19/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 20/31
Tabbed Repeating Layout
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 21/31
Tabbed Repeating Layout
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 22/31
Action Section
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 23/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 24/31
Branding / Skinning Demonstration
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 25/31
User Interface
Any questions on these features?
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 26/31
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 27/31
Alternative Solutions
Has anyone implemented any alternative UI solutions withPRPC?
Ø True HeadlessØ JSP Tag LibraryØ IAC
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 28/31
IAC
2828
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 29/31
IAC
2929
Notice any of the Human Factors Guardrails being broken?
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 30/31
Building a Better UI
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
8/3/2019 Building a Better UI
http://slidepdf.com/reader/full/building-a-better-ui 31/31
Building a Better UI
Questions?