®

Designing Great User Interfaces for Composite Applications Jo Grant / ISV Technical Enablement Architect / IBM

Kristina McBlain Beckley | Product Designer / IBM

AD107

Introduction

JoKristina

UI Design Development

The Lead Manager Composite Application

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

Process Centric

Aggregation Model

Selection Page

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 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 publicat ion is intended to, nor shall have the effect of, creating any warranties or representat ions 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 presentat ion 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 capabilit ies referenced in this presentat ion may change at any t ime at IBM’s sole discret ion based on market opportunit ies 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, stat ing or implying that any activit ies undertaken by you will result in any specific sales, revenue growth 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, other 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 illustrat ion purposes only.