3304 - How to Build a Better User Experience with IBM

3304 - How to Build a Better
User Experience with IBM
Coach Views
John Reynolds – IBM
Paul Pacholski - IBM
David Knapp – Apex
Eric Ducos – Emericon
Ivan Kornienko – BP3 Global
© 2014 IBM Corporation
Please Note
IBM’s statements regarding its plans, directions, and intent are subject to change
or withdrawal without notice at IBM’s sole discretion.
Information regarding potential future products is intended to outline our general
product direction and it should not be relied on in making a purchasing decision.
The information mentioned regarding potential future products is not a
commitment, promise, or legal obligation to deliver any material, code or
functionality. Information about potential future products may not be incorporated
into any contract. The development, release, and timing of any future features or
functionality described for our products remains at our sole discretion.
Performance is based on measurements and projections using standard IBM
benchmarks in a controlled environment. The actual throughput or performance
that any user will experience will vary depending upon many factors, including
considerations such as the amount of multiprogramming in the user’s job stream,
the I/O configuration, the storage configuration, and the workload processed.
Therefore, no assurance can be given that an individual user will achieve results
similar to those stated here.
Coach Redbook
2
What are Coaches?
The primary purpose of Coaches is to enable process authors to
create and maintain custom user interfaces that will improve their
users' interactions with their organization's business processes…
which in turn can improve the performance of those business
processes.
3
Coaches are BPM User Interfaces
Task Completion
Dashboards
Coaches are Pervasive
Use via custom apps
Embedded in other applications
Available in default BPM UIs
IBM
BPM
Coach
Use via your mobile browser
Coaches support a Partner Ecosystem
Apex Process Consultants
6
BP3
EmeriCon
What are Coach Views?
Coach Views are reusable UI building blocks for presenting and
manipulating process data
IBM BPM supplies a core set of Coach Views and tooling for
creating additional Coach Views.
Coach Views are now being created and distributed by IBM, IBM's
business partners and by clients themselves. This ability to create
and distribute additional Coach Views dramatically increases the
power of the Coach Framework.
7
Increasing Number of Instances
Coach View Taxonomy
Atomic CV
•
A fundamental CV
– Extension of the Stock CVs)
– New CV (i.e. Image, Google Map)
Data CV
Composite
Template
•
•
Bound to a specific BO
Data entry
Template CV
•
Data
•
Composite CV
Atomic
•
•
•
Decreasing Technical Skill Level
IT Developer
(Bruce)
Contains elements that are not
changeable (i.e. banner)
Can add CVs to the Content Box
Business
Programmer
(Bob/Dave)
•
•
Is derived form Template CV
Includes several Data CVs
Immediately reusable in Human
Service with no addition of other CVs
Requires binding variables
Requires customization (exposed
variables must be set)
Atomic Coach Views?
Atomic Coach Views are authored by programmers who have a
deep understanding of HTML, JavaScript and Ajax services. They
often leverage 3rd party JavaScript libraries to provide
sophisticated behaviors.
Most atomic Coach Views are general purpose components that
are designed to be reused across a wide variety of user interfaces.
9
Composite Coach Views?
Composite Coach Views are often created when many of the
Coaches of a solution include a common section of user interface
components.
A common header that contains overview information about a
process is an example of a section that is often implemented with a
composite Coach View.
10
Presentation and Manipulation of Business Objects
11
Creating Coach Views
12
Business Object Coach Views
13
Business Data and Configuration Options
14
Layout
15
Layout
16
Behavior
17
Load Behavior
18
View Behavior
19
Change Behavior
20
Lessons from Apex Process Consultants
Apex Coach Views is a library of 90 ready-to-use layouts and
controls designed for business technical users. They enable rich
user experience with the latest dynamic client-side technologies
under the hood and are ideal for both task completion and ad hoc
information management user interfaces.
21
Lessons from EmeriCon
BPM UIs (Tasks/Dashboards/etc.) used to be time-consuming
Only partially productive with OTB Coach NG
Used Coach NG's extensibility to get really productive
Focused on:
• Coach Views as UI controls
– Methods, events, properties
– Traditional and uncomplicated UI development
– Aimed at "business" developers – no HTML/CSS/AJAX/Dojo req'd
• Working the same in Coach Views or Coaches directly
• Doing away with clutter (concern for maintainability)
– Coach views, holder business data, glue code, duplications, etc.
• Multi-device targeting (desktop & various mobile devices)
• Solving business problems – (intuitively, no technical
sidetracks)
22
Lessons from EmeriCon
Experienced large gains in productivity (3 to 4x faster)
…By exploiting key extensible capabilities of Coach NG
Key Capabilities EmeriCon Deemed Essential
Basic Coach NG
EmeriConVIEWS
Selective control data binding


Easily exploitable client-side control referencing


Basic and extended control event support


Exploitable control getters/setters/methods


Configurable basic & extended control aspects
~

UI Logic resilient to visual composition changes


No need for extra "glue" artifacts & constructs


Control aspects computable w/ Excel-like formulas


Rich client-side logic simple to express and attach


Focus on business logic


Rich & versatile set of UI control
~

High-performance tabular data controls


Mobile capability & responsive behavior
~

Raw customizability/extensibility of controls and behaviors


 Needs work
~ Partially capable OTB
 Fully capable OTB
23
Lessons from EmeriCon
…And called it "EmeriConVIEWS"
• Coach NG Enhanced UI Development Model
• 50+ controls (electronic signature, masked text, tables, BPM attachments, classic
form controls, multi-function sections, timers, charts, stylers, dialogs, etc…)
• High-performance components for data display
– Backed by BPM data and AJAX services
• Reporting & data visualization w/ data drill-down
• Fully Mobile-enabled (Coach Views & Mobile clients)
24
Lessons from BP3
Brazos is a responsive IBM BPM UI toolkit created by BP3. The
toolkit implementation adapts Bootstrap, one of the most popular
web UI frameworks, to the IBM BPM CoachViews and serves as a
complete replacement for the out of the box controls.
25
Lessons from BP3
1. It’s all about the Foundation
… make sure you have the right core control set, it will mean shorter
development cycles, happy end users, and a maintainable solution.
•
•
Brazos has 17 controls in its foundation.
It took hundreds of prototypes and dozens of iterations to determine
what the right foundation was for BPM Solutions.
2. Exploit Open Source
… web design has gone from Antiquity to the Renaissance in the last
4 years. use that to your advantage.
•
•
Brazos uses Bootstrap. Brazos Charts uses NVD3.
BP3s time was spent on the CV framework, performance, best
practices, and design. All specific to BPM solutions and patterns.
3. Don’t forget the Developer
… business analysts can be as effective as technical consultants, in
building UIs, if you give them the right tools.
•
Brazos was made with the non-technical user in mind.
26
Lessons from BP3
Brazos. Widely Used. Rich Control Set. Modular and Extensible.
Brazos Charts. Simple Data Model. Many Types.
Both Are. Responsive. Free. Supported by BP3.
27
Questions?
We Value Your Feedback
Don’t forget to submit your Impact session and speaker
feedback! Your feedback is very important to us – we use it to
continually improve the conference.
Use the Conference Mobile App or the online Agenda Builder to
quickly submit your survey
• Navigate to “Surveys” to see a view of surveys for sessions
you’ve attended
29
Thank You
Legal Disclaimer
• © IBM Corporation 2014. All Rights Reserved.
• The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained
in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are
subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing
contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and
conditions of the applicable license agreement governing the use of IBM software.
• References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or
capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to
future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by
you will result in any specific sales, revenue growth or other results.
• If the text contains performance statistics or references to benchmarks, insert the following language; otherwise delete:
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will
experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage
configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.
• If the text includes any customer examples, please confirm we have prior written approval from such customer and insert the following language; otherwise delete:
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs
and performance characteristics may vary by customer.
• Please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM
Lotus® Sametime® Unyte™). Subsequent references can drop “IBM” but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server).
Please refer to http://www.ibm.com/legal/copytrade.shtml for guidance on which trademarks require the ® or ™ symbol. Do not use abbreviations for IBM product names in your
presentation. All product names must be used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included in
your presentation. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International
Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.
• If you reference Adobe® in the text, please mark the first use and include the following; otherwise delete:
Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries.
• If you reference Java™ in the text, please mark the first use and include the following; otherwise delete:
Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
• If you reference Microsoft® and/or Windows® in the text, please mark the first use and include the following, as applicable; otherwise delete:
Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.
• If you reference Intel® and/or any of the following Intel products in the text, please mark the first use and include those that you use as follows; otherwise delete:
Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and
other countries.
• If you reference UNIX® in the text, please mark the first use and include the following; otherwise delete:
UNIX is a registered trademark of The Open Group in the United States and other countries.
• If you reference Linux® in your presentation, please mark the first use and include the following; otherwise delete:
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of
others.
• If the text/graphics include screenshots, no actual IBM employee names may be used (even your own), if your screenshots include fictitious company names (e.g., Renovations, Zeta
Bank, Acme) please update and insert the following; otherwise delete: All references to [insert fictitious company name] refer to a fictitious company and are used for illustration
purposes only.