1 / 51

Desktop Design for complex Applications

Desktop Design for complex Applications. Usability and Look & Feel. Jorg “JJ” Janke Founder ComPiere, Inc. Overall Presentation Goal. Learn how to improve your Application Usability, Look & Feel. Beginning. Learning Objectives. After this presentation you will be able to:

bryce
Download Presentation

Desktop Design for complex Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Desktop Design for complex Applications Usability and Look & Feel Jorg “JJ” Janke Founder ComPiere, Inc. Session # 1094

  2. Overall Presentation Goal Learn how to improve your Application Usability,Look & Feel Session # 1094 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 Session # 1094 Beginning

  4. 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. Session # 1094 Beginning

  5. The Secret: The ideal User Interface simply does and provides what the User expects. Session # 1094 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 Session # 1094 Beginning

  7. Presentation Agenda • Why should I care ? • UI Technology Overview • JFC/Swing Pluggable Look & Feel (PLAF) • UI Design • Principles – Issues – Options • UI Tips Session # 1094 Beginning

  8. Middle 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 Session # 1094

  9. Middle Why should I care? • Costs • Training (time) • Support • Loyalty • Happy Users don’t look for Alternatives Session # 1094

  10. Middle 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 Session # 1094

  11. Middle 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 Session # 1094

  12. Middle 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.clients.html Session # 1094

  13. Middle 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 Session # 1094

  14. Middle 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 Session # 1094

  15. Middle 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 Session # 1094

  16. Middle Swing Pluggable Look & Feel • Standard PLAFs • Metal – The Java™ platform L&F with “Themes” • Windows • Motif • PLAF Library Examples • Kunststoff • jGoodies • SkinLF • Compiere Looks Free Session # 1094

  17. Middle 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) Session # 1094

  18. Session # 1094

  19. Middle 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 Session # 1094

  20. Middle 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 Session # 1094

  21. MyCheckBoxUI installUI() : print() Swing PLAF UI Delegates JCheckBox : updateUI() { setUI (UIManager.getUI(this)); } : setUI(ui) : print() Metal Windows Session # 1094

  22. Your own LookAndFeel class public class MyLookAndFeelextends MetalLookAndFeel { void initClassDefaults(UIDefaults table){ : table.put(“CheckBoxUI”, “MyCheckBoxUI”); } void initSystemColorDefaults(UIDefaults table) { : table.put("textHighlight", Color.yellow); } } Session # 1094

  23. Middle 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 Session # 1094

  24. Middle User Interface Design • Design for the User • Expectations • Experience & Skill Level • Design for the Task • Task “domain knowledge” of your User • Expert • Novice Session # 1094

  25. 60%User Model 10% Visuals 30% InteractionTechniques Middle 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/library/w-berry Session # 1094

  26. Middle UI Design • There is tons of (conflicting) advice • Platform Vendor • Web Sites • Books Session # 1094

  27. Middle 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, … Session # 1094

  28. Middle 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 Session # 1094

  29. Test Design Prototype Middle My (JJ) Principles • Fast Orientation • Fast Completion • Consistency Session # 1094

  30. 60% User Model Visual Interaction Middle 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 Session # 1094

  31. 60% User Model Visual Interaction Middle 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 Computers are Productivity Tools Session # 1094

  32. 60% User Model Visual Interaction Middle JJ’s UI Design Principles • Consistency • Where is what ? • What will happen ? • How do you call … (product/item/..) ? Minimize Training and Support Session # 1094

  33. Test Design Prototype Middle “Facts” to remember • Users can’t remember • Users can’t read • Users can’t control the Mouse • Users do the unexpected Session # 1094

  34. Middle 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 Session # 1094

  35. Session # 1094

  36. Middle 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 Session # 1094

  37. Middle UI Implementation Example • Fast Orientation • Color Coding • Standard Icons • Text • Plural/Singular • Words < 15 characters • Language, Terminology, Notes • Auditory Hints • Searchable Menu & Help Session # 1094

  38. Middle 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 Session # 1094

  39. Middle Agenda: UI Tips • Why should I care ? • UI Technology Overview • Swing Pluggable Look & Feel • UI Design • UI Tips • General • Color • Your UI Guidelines Session # 1094

  40. Middle 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 Session # 1094

  41. Middle JJ’s User Interface Tips KISS • 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 Session # 1094

  42. Middle Develop/Use a Color Schema • Presentation Metal Session # 1094

  43. Middle 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 ! Session # 1094

  44. Session # 1094

  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" Session # 1094

  46. Middle 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 Session # 1094

  47. 60% User Model Visual Interaction Summary • Java™ makes using different L&Fs easy • JFC/Swing PLAFs • Review your UI Guidelines • Be consistent • Use Color effectively • Check out Compiere™ Looks Session # 1094 End

  48. Test Design Prototype End If You Only Remember One Thing… User Interface Design determines the long term Success of your Application. Session # 1094

  49. Session # 1094

  50. End Thanks ! • You can download this presentation and Compiere Looks http://www.compiere.org/download/ Session # 1094

More Related