Desktop Design for complex Applications

Session # 1094

Desktop Design for complex Applications

Jorg “JJ” JankeFounderComPiere, Inc.

Usability and Look & Feel

Session # 10942

Overall Presentation Goal

Beginning

Learn how to improve your Application Usability,

Look & Feel

Session # 10943

Learning Objectives

• After this presentation you will be able to:– Improve your Design

• Usability• User Interface (UI)

– Use Pluggable Pluggable Look & Feel for Java™ Technology

– Extend or create your own Look & Feel– Use Color in your Application– Use Compiere Looks

Beginning

Session # 10944

Speaker’s Qualifications

• Jorg Janke is Founder of ComPiere, Inc. and the initial Contributor of the Compiere Open Source ERP & CRM project

• Starting with PL/I, Jorg wrote a Smalltalk General Ledger prototype in '88 and started with Java in ‘97

• Jorg worked in a Research Institute for Man-Machine Interaction, UNISYS and Oracle Apps Development

• Jorg holds a BA in Accounting & CS and a MBA

• Jorg is a certified Oracle DBA and SUN certified Java Programmer/Developer.

Beginning

Session # 10945

The Secret:The ideal User Interface simply

does and provides

what the User expects.

Beginning

Session # 10946

Disclaimer

• I am a Developer with Usability and User Interface Design Experience – I am not a Graphics Designer– I am not a Interface/Usability Consultant

• I always appreciate Feedback how to improve the Usability and UI of my Application

Beginning

Session # 10947

Presentation Agenda

• Why should I care ?

• UI Technology Overview

• JFC/Swing Pluggable Look & Feel (PLAF)

• UI Design– Principles – Issues – Options

• UI Tips

Beginning

Session # 10948

Why should I care?

• First Impression determines– Where to spend time exploring

• Too many choices

– Will I be able to use this?• Do I like using it?

– Will I buy this ?• Functionality Analysis is too complex

Middle

Session # 10949

Why should I care?

• Costs– Training (time)– Support

• Loyalty– Happy Users don’t look for Alternatives

Middle

Session # 109410

Agenda: UI Technology Overview


• UI Technology Overview– HTML– AWT– Applets– JavaTM Foundation Classes (JFC/Swing)– Rich GUI Products– Server driven JFC/Swing Client


• UI Design & Tips

Middle

Session # 109411

UI Technology Options

• HTML (Java Servlet, JSPTM)– “Reach Client”– Limited UI Technology– Limited Responsiveness– Easy “Distribution” and Maintenance

• AWT– “Light” early Java Alternative

• Applets– Plug-in required

Middle

Session # 109412

Rich GUI Products (examples)

• AltioLive – Applets in Web Browser– http://www.altio.com

• RAWT – Remote (Server Side) AWT– http://www.alphaworks.ibm.com/tech/

remoteawtforjava

• Droplets – RAWT based Presentation Server– http://www.droplets.com

• See also JavaOne 2001SM Conference Session– Rich Clients for Web Services– http://java.sun.com/features/2001/06/golden.clients.html

Special Client

Middle

Session # 109413

Java™ JFC/Swing

• JFC/Swing– “Rich” Client– All UI Technology Options– Highly interactive– … but complex Distribution– … and big Footprint

• Distribution Options– WebStart– Server driven JFC/Swing Client

Middle

Session # 109414

Server driven Swing Client

• Bali (Spidertop)– http://www.spidertop.com – Client (20k) renders Bali scripts generated

from JSPTM components and Servlets– Bali designer to generate Bali scripts

• Compiere Open Source– http://www.compiere.org – Client renders rules from Application

Dictionary Database

Middle

SmallFootprint

Session # 109415

Agenda: PLAF



• JFC/Swing Pluggable Look & Feel Libraries– Standard and PLAF Libraries– Using & Switching PLAFs

• UI Design

• UI Tips

Middle

Session # 109416

Swing Pluggable Look & Feel

• Standard PLAFs– Metal – The Java™ platform L&F with “Themes”– Windows– Motif

• PLAF Library Examples– Kunststoff– jGoodies– SkinLF– Compiere Looks

Middle

Free

Session # 109417

Swing PLAF Links (selection)

• Available JFC/Swing PLAFs– http://www.javootoo.com– http://www.incors.org (Kuststoff)

– http://www.jgoodies.com (jGoodies)

– http://www.l2fprod.com (SkinLF)• http://www.themes.org (GTK Themes)

– http://www.compiere.org/looks/ (Compiere)

• Custom Look and Feel Example– http://java.sun.com/products/jfc/tsc/articles/sce

(SAP)

Middle

http://www.javootoo.com/

http://www.incors.org/

http://www.jgoodies.com/

http://www.l2fprod.com/

http://www.themes.org/

http://www.compiere.org/looks/

Session # 1094

Session # 109419

Using & Switching L&Fs

• Change default PLAF– In $JAVA_HOME/jre/lib/swing.properties:

swing.defaultlaf= org.compiere.plaf.CompiereLookAndFeel swing.installedlaf.Compiere.class= org.compiere.plaf.CompiereLookAndFeel swing.installedlaf.Compiere.name=Compiere

Middle

Session # 109420

Using & Switching L&Fs

• Setting a specific L&F (in main method):– UIManager.setLookAndFeel (new org.compiere.plaf.CompiereLookAndFeel());

– or– CompierePLAF.setPLAF();

• After switching in a running application:– SwingUtilities.updateComponentTreeUI(comp);

• Using your defined L&F at startup:– java -cp CompiereLooks.jar;SwingSet2.jar org.compiere.plaf.CompierePLAF SwingSet2

Middle

Session # 109421

Swing PLAF UI Delegates

:updateUI() { setUI (UIManager.getUI(this)); }:setUI(ui):print()

JCheckBox

installUI():

print()

MyCheckBoxUI

Win

do

ws

Met

al

Session # 109422

Your own LookAndFeel class

public class MyLookAndFeel extends MetalLookAndFeel {

void initClassDefaults (UIDefaults table){ : table.put(“CheckBoxUI”, “MyCheckBoxUI”); }

void initSystemColorDefaults (UIDefaults table) { : table.put("textHighlight", Color.yellow); }

}

Session # 109423

Agenda: UI Design




• User Interface Design– What is it?– Where to get Advice– JJ’s Principles– Implementation Example

• UI Tips

Middle

Session # 109424

User Interface Design

• Design for the User– Expectations– Experience & Skill Level

• Design for the Task– Task “domain knowledge” of your User

• Expert• Novice

Middle

Session # 109425

What makes a Program Usable ?

60%User Model

10% Visuals

30% InteractionTechniques

Source: http://www-106.ibm.com/developerworks/library/w-berry

Middle

Look

Feel

Thingsyouuse

Clues, feedback and aesthetics

Keyboard & Mouse button mappings,

Menu organization, ..

The User Objects to accomplish Tasks,

their Properties, Behaviors and

Relationships

Session # 109426

UI Design

• There is tons of (conflicting) advice– Platform Vendor– Web Sites– Books

Middle

Session # 109427

UI Design Advice

• Platform Vendor– Sun

• Java™ Look and Feel Design Guidelines– 2nd Edition– Advanced Volume

• http://developer.java.sun.com/developer/techDocs/hi

– Microsoft• The Windows Interface Guidelines for

Software Design– Apple, IBM, …

Middle

http://developer.java.sun.com/developer/techDocs/hi

Session # 109428

UI Design Advice

• Web Sites– http://www.acm.org/sigchi– http://www.usableweb.com– http://www.useit.com - http://www.asktog.com -

http://www.nngroup.com– http://www.webpagesthatsuck.com– http://www.interface-design.net

• Books– http://www.useit.com/books/uibooks.html– Personal favorite: GUI Bloopers (J Johnson)

Middle

Visual

Model

Interaction

http://www.acm.org/sigchi

http://www.usableweb.com/

http://www.useit.com/

http://www.asktog.com/

http://www.nngroup.com/

http://www.useit.com/books/uibooks.html

Session # 109429

My (JJ) Principles

• Fast Orientation

• Fast Completion

• Consistency

Middle

Session # 109430

JJ’s UI Design Principles

• Fast Orientation– Where am I ?– Where do I find … ?– What is the situation/status ?

Screens are not Pictures in an Art Gallery

Middle

60% User Model

Visual

Interaction

Session # 109431


• Fast Task Completion– What do I need to do ?– What do I need to enter ?– What is the next step ?– How long do I have to wait ?

• Boredom/Frustration after 2.8 sec

Computers are Productivity Tools

Middle

60% User Model

Visual

Interaction

Session # 109432


• Consistency– Where is what ?– What will happen ?– How do you call …

(product/item/..) ?

Minimize Training and Support

Middle

60% User Model

Visual

Interaction

Session # 109433

“Facts” to remember

• Users can’t remember

• Users can’t read

• Users can’t control the Mouse

• Users do the unexpected

Middle

Session # 109434

UI Implementation Example

• User: Small Business Employee

• Data Dictionary Driven– Data Rules

• Type, Size, Validation, Defaults, …

– User Interface Rules• Display Type, Location, Visible, R/W, …

• Client connects to Server– Gets Rule Value Objects via RMI / JDBC– Interprets and executes on the Client– No individual screens to develop/test

Middle

OpenSource

Session # 1094

Session # 109436


• Consistency – Follows Java™ L&F Guidelines (mostly)

– Standard Windows Layout– Standard Dialog Layout

• OK in right button corner (Mac)

– Overview – Detail• Switch between Multi/Single-Row• Only current / all Data

– Language / Terminology

Middle

Session # 109437


• Fast Orientation– Color Coding– Standard Icons– Text

• Plural/Singular• Words < 15 characters

– Language, Terminology, Notes– Auditory Hints– Searchable Menu & Help

Middle

Session # 109438


• Fast Task Completion– Hide what is not needed (context sensitive)

• “Personalization”

– Default values – Immediate Validation– Keyboard Entry– Prevent Errors– History based “Waiting” indicator– Workflow Wizards

Middle

Session # 109439

Agenda: UI Tips



• Swing Pluggable Look & Feel

• UI Design

• UI Tips– General– Color– Your UI Guidelines

Middle

Session # 109440

JJ’s User Interface Tips

• Work under the assumption:“User Errors are caused by my UI Design”

• Listen to Customers / Support– Users doing “stupid” things– Misunderstandings– Users don’t know how to ..

• Be a user … for a while

• Operate Application without Mouse– Mnemonics - Focus Management

Middle

Session # 109441

JJ’s User Interface Tips

• Don’t over-do it– Color, Audio

• Check Icons– Enabled / Disabled contrast

• Use Java™ Accessibility Helper

• Get a Graphic Artist– Color Themes are not easy

Middle

KISS

Session # 109442

Develop/Use a Color Schema

• Presentation Metal

Middle

Session # 109443

Don’t ignore the Color Blind

• 8% male and 0.5 female (Caucasian) have some form of color vision deficiency– http://www.internettg.org/newsletter/mar99/

accessibility_color_challenged.html– http://innovate.bt.com/people/rigdence/colours – http://www.visibone.com/colorblind

• Use Metal Themes !

Middle

Session # 1094

Session # 109445

Color “Lessons”

• Color is a Perception not a Fact – Gray is a color too

• Allow users to change colors on an individual basis– Provide different Themes you previously tested

and/or– Allow users to change the individual colors

• Be careful with image buttons – Estimate active/inactive "view"– Convert gif/jpg to painted images using user

definable colors

• Compiere Colors provides "Color Management"

Session # 109446

Write down your own UI Guidelines explicitly

• UI Guideline Structure– Target Audience

• User – Task Types – Experience Level

– Layout Guide• Windows – Dialogs

– Terminology– Color Schema– Icons, Sounds

• Establish UI Review Process

• Establish User Feedback Process

Middle

Considerreview by Usability

Expert

Session # 109447

Summary

• Java™ makes using different L&Fs easy– JFC/Swing PLAFs

• Review your UI Guidelines

• Be consistent

• Use Color effectively

• Check out Compiere™ Looks

End

60% User Model

Visual

Interaction

Session # 109448

If You Only Remember One Thing…

End

User Interface Design determines the long term Success of your Application.

Session # 1094

Session # 109450

Thanks !

• You can download this presentation and Compiere Looks

http://www.compiere.org/download/

End

http://www.compiere.org/download/

Session # 1094

Documents

Desktop Design for complex Applications