Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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