Download UI Design

Desktop Design for
complex Applications
Usability and Look & Feel
Jorg “JJ” Janke
Founder
ComPiere, Inc.
Session # 1094
Overall Presentation Goal
Learn how to improve your
Application Usability,
Look & Feel
Beginning
2
Session # 1094
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
3
Session # 1094
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
4
Session # 1094
The Secret:
The ideal User Interface simply
does and provides
what the User expects.
Beginning
5
Session # 1094
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
6
Session # 1094
Presentation Agenda
• Why should I care ?
• UI Technology Overview
• JFC/Swing Pluggable Look & Feel (PLAF)
• UI Design
– Principles – Issues – Options
• UI Tips
Beginning
7
Session # 1094
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
8
Session # 1094
Why should I care?
• Costs
– Training (time)
– Support
• Loyalty
– Happy Users don’t look for Alternatives
Middle
9
Session # 1094
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
Middle
10
Session # 1094
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
11
Session # 1094
Rich GUI Products (examples)
• AltioLive – Applets in Web Browser
– http://www.altio.com
• RAWT – Remote (Server Side) AWT
Special
Client
– 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
Middle
12
Session # 1094
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
13
Session # 1094
Server driven Swing Client
• Bali (Spidertop)
Small
Footprint
– 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
14
Session # 1094
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
Middle
15
Session # 1094
Swing Pluggable Look & Feel
• Standard PLAFs
– Metal – The Java™ platform L&F with “Themes”
– Windows
– Motif
• PLAF Library Examples
–
–
–
–
Middle
16
Kunststoff
jGoodies
SkinLF
Compiere Looks
Session # 1094
Free
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
17
Session # 1094
Session # 1094
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
19
Session # 1094
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
20
Session # 1094
JCheckBox
:
updateUI() {
setUI
(UIManager.getUI(this));
}
:
setUI(ui)
:
print()
21
Session # 1094
MyCheckBoxUI
installUI()
:
print()
Windows
Metal
Swing PLAF UI Delegates
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);
}
}
22
Session # 1094
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
JJ’s Principles
Implementation Example
• UI Tips
Middle
23
Session # 1094
User Interface Design
• Design for the User
– Expectations
– Experience & Skill Level
• Design for the Task
– Task “domain knowledge” of your User
• Expert
• Novice
Middle
24
Session # 1094
What makes a Program Usable ?
Look
Feel
Things
you
use
10%
Visuals
Clues, feedback and
aesthetics
30% Interaction
Techniques
60%
User Model
Keyboard & Mouse
button mappings,
Menu organization, ..
The User Objects to
accomplish Tasks,
their Properties,
Behaviors and
Relationships
Source: http://www-106.ibm.com/developerworks/library/w-berry
Middle
25
Session # 1094
UI Design
• There is tons of (conflicting) advice
– Platform Vendor
– Web Sites
– Books
Middle
26
Session # 1094
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
27
Session # 1094
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
Model
– http://www.webpagesthatsuck.com
Interaction
– http://www.interface-design.net
• Books
Visual
– http://www.useit.com/books/uibooks.html
– Personal favorite: GUI Bloopers (J Johnson)
Middle
28
Session # 1094
My (JJ) Principles
• Fast Orientation
• Fast Completion
• Consistency
Middle
29
Session # 1094
JJ’s UI Design Principles
• Fast Orientation
– Where am I ?
– Where do I find … ?
– What is the situation/status ?
Visual
Interaction
60%
User Model
Screens are not Pictures in an Art Gallery
Middle
30
Session # 1094
JJ’s 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
Visual
Interaction
60%
User Model
Computers are Productivity Tools
Middle
31
Session # 1094
JJ’s UI Design Principles
• Consistency
– Where is what ?
– What will happen ?
– How do you call …
(product/item/..) ?
Visual
Interaction
60%
User Model
Minimize Training and Support
Middle
32
Session # 1094
“Facts” to remember
• Users can’t remember
• Users can’t read
• Users can’t control the Mouse
• Users do the unexpected
Middle
33
Session # 1094
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
34
Session # 1094
Open
Source
Session # 1094
UI Implementation Example
• 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
36
Session # 1094
UI Implementation Example
• Fast Orientation
– Color Coding
– Standard Icons
– Text
• Plural/Singular
• Words < 15 characters
– Language, Terminology, Notes
– Auditory Hints
– Searchable Menu & Help
Middle
37
Session # 1094
UI Implementation Example
• Fast Task Completion
– Hide what is not needed (context sensitive)
• “Personalization”
–
–
–
–
–
–
Middle
38
Default values
Immediate Validation
Keyboard Entry
Prevent Errors
History based “Waiting” indicator
Workflow Wizards
Session # 1094
Agenda: UI Tips
• Why should I care ?
• UI Technology Overview
• Swing Pluggable Look & Feel
• UI Design
• UI Tips
– General
– Color
– Your UI Guidelines
Middle
39
Session # 1094
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
40
Session # 1094
JJ’s User Interface Tips
• Don’t over-do it
– Color, Audio
KISS
• Check Icons
– Enabled / Disabled contrast
• Use Java™ Accessibility Helper
• Get a Graphic Artist
– Color Themes are not easy
Middle
41
Session # 1094
Develop/Use a Color Schema
• Presentation Metal
Middle
42
Session # 1094
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
43
Session # 1094
Session # 1094
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"
45
Session # 1094
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
46
Session # 1094
Consider
review by
Usability
Expert
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
47
Session # 1094
Visual
Interaction
60%
User Model
If You Only Remember One Thing…
User Interface Design determines the
long term Success of your Application.
End
48
Session # 1094
Session # 1094
Thanks !
• You can download this presentation and
Compiere Looks
http://www.compiere.org/download/
End
50
Session # 1094
Session # 1094