AD107
Designing Great User Interfaces for Composite Applications
Jo Grant / ISV Technical Enablement Architect / IBM
Kristina McBlain Beckley | Product Designer / IBM
®

Introduction
The Lead Manager Composite Application
UI Design
Development
Kristina Jo
WAR ZONE

Why UI Designers Should Care About Technical Details
 Knowing your “toolkit” can help you to create great designs that
can be implemented!
 Final application will be better since you’ll maximize the potential of
the system
 Makes developers like you…more
 DESIGN GREAT APPLICATIONS!

Why Developers Should Care About UI Design
 Good UI Design will make users want to use your application
 Targeted to Users, Efficient, Intuitive
 Good UI Design will ensure that users appreciate your work
 The great code you wrote
 All of the features you worked so hard to include!
 Makes UI Designers very happy…
 IMPLEMENT GREAT APPLICATIONS!

Agenda
 Quick Introduction to Composite Applications
 Overview of Principles / Methods for Great UI Design
 Identify Issues Specific to IBM Lotus® Notes® Composite Applications
 In depth look at Lotus Notes Composite Applications
 Look at technical details
 Discuss patterns to enable great composite applications
 Tips and Tricks to Address UI Challenges
 War Stories from the Lead Manager Sample
 Q&A

Notes Composite Applications Overview
 Pre-built, flexible framework for creating “component-based” applications
 Applications can live in “Application Area” of Notes 8 UI framework (with Mail, Calendar etc…)
 Composite applications are a key element in a Service Oriented Architecture (SOA) and contextual
collaboration strategy
 Combined components function as a “single” application
 Whole greater than sum of its parts!
 Applications can utilize a combination of component types / sources:
 Newly Developed and Existing Applications
 Browser, Client, Notes, Eclipse, etc…
 Loosely coupled components
 Reuse of existing assets is strong value proposition
 Supports business flexibility to respond rapidly to changing demands

Notes Composite Applications Overview
 Pre-built, flexible framework for creating “component-based” applications
 Applications can live in “Application Area” of Notes 8 UI framework (with Mail, Calendar etc…)
 Composite applications are a key element in a Service Oriented Architecture (SOA) and contextual
collaboration strategy
 Combined components function as a “single” application
 Whole greater than sum of its parts!
 Applications can utilize a combination of component types / sources:
 Newly Developed and Existing Applications
 Browser, Client, Notes, Eclipse, etc…
 Loosely coupled components
 Reuse of existing assets is strong value proposition
 Supports business flexibility to respond rapidly to changing demands

UI Design: Principles / Methods for Great Applications
 Methods
 Special Issues for Composite Applications

UI Design: Requirements gathering
 Make sure your application does what the people who will be using
it need it to do!
 Who are the users?
 You are NOT the user! (at least in most cases…)
 Utilizing Personas: Formal vs Quick
 What are the users’ goals / frequent tasks
 Not 100% sure? Watch and Ask!
 What are the known problems / benefits of the current systems?
 Listen to what users say, but ask the right follow up questions…

Composite Application Considerations
 Don’t skip this critical step
 Users may currently use some or all of the components you are going to combine
together but that doesn’t provide you with all answers you need
 Defining Users and Concrete Requirements for Component Reuse
 This can be tricky since may reuse the same component for different audiences

UI Design: Visual / Interaction Design Guidelines
 Make the user comfortable – so they’ll want to use your application!
 Create a unified (single application) look (visual) and feel (interaction)
 Visual Design (colors, icons, etc…)
 Visual design strongly influences user’s impression of an application
 Understand and follow applicable guidelines
 Interaction Design (types of widgets, button locations, etc…)
 Makes it easy for the users to figure out how to use it
 Understand and follow applicable guidelines
 High-Level Example: Browser vs Client (converging…)
 Low-Level Example: Placement of save and cancel
 Accessibility

Composite Application Considerations
 Existing components following different guidelines (More info to
follow…)
 Example Browser vs Client based components
 Components created with different technologies which may provide
different options for UI elements (More info to follow…)
 Components intended for reuse
 Tip: Leverage Notes 8 Style Guidelines

UI Design: Sketching / Creating the UI
 Wireframes /Mockups / Prototypes – Expect to Iterate!
 Make sure to design within application technical framework

Composite Applications Specific Tips
 Application Structural Elements
 Design within Composite Application
Structure
 Utilize Best Patterns for Purpose
 Component Relationships
 Component Specific Elements
 Different Technologies have different
requirements / options
 Mockup components
 Available in Component Library on
OpenNTF

UI Design: Usability Evaluation
 User Testing
 Formal - Usability Lab
 Quick and Dirty
– Try it out on your target persona/s
– Don’t lead / Don’t teach
 Heuristic (Guideline Based) Evaluation
 By an expert / Do-It-Yourself
 code review for UI
 Be open to change based on results
 Often can be fixed in presentation layer!

Deeper Dive on Composite App Specific Issues…
 In depth look at Notes Composite Applications
 Look at technical details
 Discuss patterns to enable great composite applications
 Tips and Tricks to Address UI Challenges

Basic Building Blocks of Composite Apps – “Toolkit”
 Components / Component Views
 Pages
 Navigation
 Applications

Basic Building Blocks of CAs – Components
 Components / Component
Views
 Combine components based on
different technologies
 Can “stack” components as tabs
in a folder
 Headers
 Hide / Show
 Max and min
 Other properties

Basic Building Blocks of CAs – Pages
 Pages
 Arrange components into rows
and columns
 Resizing sashes between
components
 Relative sizing of components
 Multiple pages
 Together in one tab
 Each on their own tab

Basic Building Blocks of CAs – Navigation
 Navigation
 Default navigator
 Custom navigator
 Programmatic navigation
 One Example: On Double Click

Basic Building Blocks of CAs – Application
 Applications

Working with Diverse Components
 Flexibility in how UI is created – pick the best options
 Reuse
– New Component / Application
– Existing Component / Application
 Technology
– Notes
– Eclipse
– Portal
 Opportunity to increase efficiency by creating integrated applications
 Any Lotus Notes application
 New Eclipse code
 Clip portions from web pages or embedded browser
 “Green Screen” integration
 Add in portlets
 Challenges in Visual and Interaction Consistency
 Components based on different technology
 Components based on existing applications

Useful Patterns
 Recognizing patterns will help you create applications with a consistent
look and feel, and that rely on tested techniques and components.
 Look for repeated approaches that are successful at solving the same
problems. Start creating your own library of patterns!

Useful Patterns Details
 Component
 Selection, Information, Launcher,
Calculation, Aggregation, Other…
 Page
 On the glass
 Radiating dashboard
 List Page/Selection page
 Record Display/Edit page
 Application
 Data Centric
Selection Page
 Process Centric
 Aggregation Model
Radiating Dashboard

Addressing the UI Challenges of CAs
 Addressing the integration challenge
 Addressing the UI challenge
 Addressing the Technology challenge

Addressing the integration challenge
 Addressing the integration challenge
 Diverse skills may be needed
 Tremendous potential benefit by integrating process
 Watching and Asking crucial for choosing best points

Addressing the UI challenge
 Addressing the UI challenge
 Set company wide standards (or adopt ours?)
 Eclipse components should inherit theme settings
 Use web-clipper to reassign style sheets for web components

Addressing the Technology challenge
 Addressing the Technology challenge
 Many tasks can be done with any technology
 Pick the best for your skill set
 Few tasks require specific technology
 Identify cross company specialists
 Buy in to cover gaps

Putting it All Together
 Stories and Tips from our work on the Lead Manager sample...

Questions and Answers…

Resources
 Composite Applications Blog
 http://www.ibm.com/developerworks/blogs/page/CompApps
 http://www.ibm.com/developerworks/blogs/page/CompApps?entry=blog_sitemap
 Official Composite Applications Site
 http://www-128.ibm.com/developerworks/lotus/composite-apps
 Redbook: Building Composite Applications
 http://www.redbooks.ibm.com/Redbooks.nsf/RedpieceAbstracts/sg247367.html
 OpenNTF.org Composite: Application Component Library
 http://www.openntf.org/Projects/pmt.nsf/ProjectLookup/Composite%20Application
%20Component%20Library

Legal Disclaimer
© IBM Corporation 2007. All Rights Reserved.
T he 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 publicat ion, it is provided AS IS wit hout 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 wit hout 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 publicat ion is intended to, nor shall have the effect of, creating any warranties or represent ations from IBM or its suppliers
or licensors, or altering the terms and condit ions 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 discret ion based on market opportunit ies or other factors, and are not intended to be a
commit ment to future product or feature availabilit y in any way. Nothing contained in t hese materials is intended to, nor shall have the effect of, stat ing or implying that
any activit ies undertaken by you will result in any specific sales, revenue growt h or other results.
IBM, the IBM logo, Lotus, Lotus Notes, Notes, WebSphere, 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, ot her countries, or both.
Other company, product, or service names may be trademarks or service marks of others.
All references to Odivine refer to a fictit ious company and are used for illustration purposes only.