Desktop Design for complex Applications

1
Desktop Design for complex Applications
Usability and Look Feel

• Jorg JJ Janke
• Founder
• ComPiere, Inc.

2
Overall Presentation Goal
Learn how to improve your Application
Usability,Look Feel
Beginning
3
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
4
Speakers 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
5

The Secret The ideal User Interface simply does
and provides what the User expects.
Beginning
6
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
7
Presentation Agenda

• Why should I care ?
• UI Technology Overview
• JFC/Swing Pluggable Look Feel (PLAF)
• UI Design
• Principles Issues Options
• UI Tips

Beginning
8
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

9
Why should I care?

• Costs
• Training (time)
• Support
• Loyalty
• Happy Users dont look for Alternatives

10
Agenda UI Technology Overview

• Why should I care ?
• UI Technology Overview
• HTML
• AWT
• Applets
• JavaTM Foundation Classes (JFC/Swing)
• Rich GUI Products
• Server driven JFC/Swing Client
• JFC/Swing Pluggable Look Feel (PLAF)
• UI Design Tips

11
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

12
Rich GUI Products (examples)
Special Client

• 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.client
  s.html

13
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

14
Server driven Swing Client
Small Footprint

• 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

15
Agenda PLAF

• Why should I care ?
• UI Technology Overview
• JFC/Swing Pluggable Look Feel Libraries
• Standard and PLAF Libraries
• Using Switching PLAFs
• UI Design
• UI Tips

16
Swing Pluggable Look Feel

• Standard PLAFs
• Metal The Java platform LF with Themes
• Windows
• Motif
• PLAF Library Examples
• Kunststoff
• jGoodies
• SkinLF
• Compiere Looks

Free
17
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)

18
(No Transcript)
19
Using Switching LFs

• Change default PLAF
• In JAVA_HOME/jre/lib/swing.propertiesswing.def
  aultlaf org.compiere.plaf.CompiereLookAndFeel
  swing.installedlaf.Compiere.class
  org.compiere.plaf.CompiereLookAndFeel
  swing.installedlaf.Compiere.nameCompiere

20
Using Switching LFs

• Setting a specific LF (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 LF at startup
• java -cp CompiereLooks.jarSwingSet2.jar
  org.compiere.plaf.CompierePLAF SwingSet2

21
Swing PLAF UI Delegates
JCheckBox
updateUI() setUI (UIManager.getUI(this))
setUI(ui) print()
Metal
Windows
22
Your own LookAndFeel class
public class MyLookAndFeel extends
MetalLookAndFeel void initClassDefaults
(UIDefaults table) table.put(CheckBoxU
I, MyCheckBoxUI) void
initSystemColorDefaults (UIDefaults table)
table.put("textHighlight", Color.yellow)

23
Agenda UI Design

• Why should I care ?
• UI Technology Overview
• JFC/Swing Pluggable Look Feel (PLAF)
• User Interface Design
• What is it?
• Where to get Advice
• JJs Principles
• Implementation Example
• UI Tips

24
User Interface Design

• Design for the User
• Expectations
• Experience Skill Level
• Design for the Task
• Task domain knowledge of your User
• Expert
• Novice

25
What makes a Program Usable ?
Clues, feedback and aesthetics Keyboard Mouse
button mappings, Menu organization,
.. The User Objects to accomplish Tasks, their
Properties, Behaviors and Relationships
Look Feel Thingsyouuse
Source http//www-106.ibm.com/developerworks/libr
ary/w-berry
26
UI Design

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

27
UI Design Advice

• Platform Vendor
• Sun
• Java Look and Feel Design Guidelines
• 2nd Edition
• Advanced Volume
• http//developer.java.sun.com/developer/techDocs/h
  i
• Microsoft
• The Windows Interface Guidelines for Software
  Design
• Apple, IBM,

28
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)

Visual
Model
Interaction
29
My (JJ) Principles

• Fast Orientation
• Fast Completion
• Consistency

30
JJs 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
31
JJs UI Design Principles

• 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
32
JJs UI Design Principles

• Consistency
• Where is what ?
• What will happen ?
• How do you call (product/item/..) ?

Minimize Training and Support
33
Facts to remember

• Users cant remember
• Users cant read
• Users cant control the Mouse
• Users do the unexpected

34
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

OpenSource
35
(No Transcript)
36
UI Implementation Example

• Consistency
• Follows Java LF 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

37
UI Implementation Example

• Fast Orientation
• Color Coding
• Standard Icons
• Text
• Plural/Singular
• Words lt 15 characters
• Language, Terminology, Notes
• Auditory Hints
• Searchable Menu Help

38
UI Implementation Example

• 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

39
Agenda UI Tips

• Why should I care ?
• UI Technology Overview
• Swing Pluggable Look Feel
• UI Design
• UI Tips
• General
• Color
• Your UI Guidelines

40
JJs User Interface Tips

• Work under the assumptionUser Errors are
  caused by my UI Design
• Listen to Customers / Support
• Users doing stupid things
• Misunderstandings
• Users dont know how to ..
• Be a user for a while
• Operate Application without Mouse
• Mnemonics - Focus Management

41
JJs User Interface Tips
KISS

• Dont over-do it
• Color, Audio
• Check Icons
• Enabled / Disabled contrast
• Use Java Accessibility Helper
• Get a Graphic Artist
• Color Themes are not easy

42
Develop/Use a Color Schema

• Presentation Metal

43
Dont 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 !

44
(No Transcript)
45
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
  testedand/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"

46
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

Consider review by Usability Expert
47
Summary

• Java makes using different LFs easy
• JFC/Swing PLAFs
• Review your UI Guidelines
• Be consistent
• Use Color effectively
• Check out Compiere Looks

End
48
If You Only Remember One Thing
User Interface Design determines the long term
Success of your Application.
49
(No Transcript)
50
Thanks !

• You can download this presentation and Compiere
  Looks
• http//www.compiere.org/download/

51
(No Transcript)