JavaOne 2008: Designing GUIs 101
1 like485 views
The document outlines the process of designing graphical user interfaces (GUIs) to enhance user experience, emphasizing the importance of understanding user needs and tasks. It details the challenges associated with creating effective GUIs and provides a step-by-step approach, including requirements gathering, task flow definition, design iteration, and feedback incorporation. The authors, Jeff Hoffman and Jindra Dinga, highlight their goals of ensuring developers and end users achieve optimal functionality and satisfaction within the Java platform.
JavaOne 2008: Designing GUIs 101
- 1. DESIGNING GRAPHICAL USER INTERFACES 101: FROM USER NEEDS TO USABLE GUIs Jeff Hoffman & Jindra Dinga Java™ SE User Experience Design TS-4968
- 2. Learn how to design graphical user interfaces (GUIs) that enable your target users to perform tasks effectively and efficiently. 2008 JavaOneSM Conference | java.sun.com/javaone | 2
- 3. Java™ SE Platform User Experience Design Team: Who Are We? Jeff Hoffman: Lead User Experience Designer 9 years at Sun working on Java platform and developer tools • Jeff looks at the end-to-end story—from the design of Swing components to understanding how developers are using Java technology to build end user apps. Jindra Dinga: User Experience Designer 4 years at Sun – first working on developer tools (Netbeans™ IDE) and now focused on Java platform • Jindra focuses on the deployment experience, including the java.com website, installers, browser plug-ins and applets. 2008 JavaOneSM Conference | java.sun.com/javaone | 3
- 4. Java SE Platform User Experience Design Team: Our Goals Enable developers to create the best user experience with the power and functionality in Java environment Ensure that end users are happy with their experience with Java platform This includes making sure Java applications look great (i.e. Nimbus and Swing) and are easy to deploy (via java.com, Deployment Toolkit and Java Kernel install). 2008 JavaOneSM Conference | java.sun.com/javaone | 4
- 5. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 5
- 6. Why It's Hard to Create Good GUIs User's Mental Model != Software Architecture • You really need to understand the target audience • Color Balance vs. Variations interfaces in Photoshop 2008 JavaOneSM Conference | java.sun.com/javaone | 6
- 7. Variations GUI Example 2008 JavaOneSM Conference | java.sun.com/javaone | 7
- 8. Why It's Hard to Create Good GUIs (2) You must know what info is needed at each stage of a task • At first entry, interim results, end results Lots of options != powerful software • The difference between Word and iMovie If the user cannot find a feature, then it doesn't really exist People do not read instructions Many guidelines available, but which to use? • Java application environment has the unique ability to run on very different platforms 2008 JavaOneSM Conference | java.sun.com/javaone | 8
- 9. Our GUI Design Process Understand the Users Tasks and Goals Gather Requirements Define the Task Flow Design the GUI Panels Iterate Prototype Our Design Gather Feedback 2008 JavaOneSM Conference | java.sun.com/javaone | 9
- 10. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 10
- 11. 2008 JavaOneSM Conference | java.sun.com/javaone | 11
- 12. Understand the User's Task and Goals What does the user want when performing a task? Frequency • Common tasks should be effortless • Less common tasks could be a little more work Discoverable and Intuitive • All tasks should be easily discoverable and easy to complete 2008 JavaOneSM Conference | java.sun.com/javaone | 12
- 13. User's Task: Change NIC Properties Our example task is Configuring a Network Interface Connection (courtesy of the Brussels project for OpenSolaris™ operating system) The User's Goal is to improve or tune a network connection, perhaps to fix a recurring problem This task may not be performed very often, however it may be performed many times during a single session NIC Properties include: • Autonegotiation (defined here) • Speed • Duplex (defined here) • Flow Control (defined here) • MTU (Max Transmission Unit – defined here) 2008 JavaOneSM Conference | java.sun.com/javaone | 13
- 14. User Task: Now... How is the user task performed now? • Command line interface (CLI) via the ndd command # ndd /dev/bge0 link_status 1 # ndd /dev/bge0 link_autoneg 1 # ndd /dev/bge0 link_speed 100 # ndd /dev/bge0 link_duplex 2 # ndd -set /dev/bge0 link_duplex 1 2008 JavaOneSM Conference | java.sun.com/javaone | 14
- 15. Using the ndd Command Pros • Enter a command directly without navigating a GUI • Scriptable Cons • Command syntax to retrieve information on current settings and to change settings • Enter a new command for reviewing each parameter or setting a parameter • Options are typed in 2008 JavaOneSM Conference | java.sun.com/javaone | 15
- 16. User Task: ...and Later How should the task be performed? • GUI panels within a Network Configuration tool Pros • Accessible from a graphical menu • Discoverable via browse or search facilities available on the desktop • No need to memorize or look up syntax • Options are presented • Suitable for a wide range of target users Cons • Not scriptable 2008 JavaOneSM Conference | java.sun.com/javaone | 16
- 17. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 17
- 18. Gather Requirements Do some user research • Online • Do Google searches to find related discussions • Ask questions in discussion groups • Post web questionnaires and polls (i.e. SurveyMonkey, Zoomerang, Doodle) in places that users congregate • In Person • Conduct interviews and/or focus groups • Observe the user performing the task • Attend user group meetings 2008 JavaOneSM Conference | java.sun.com/javaone | 18
- 19. User Research Questionnaires Keep them short (best is fewer than 15 questions) Questions should be to the point and easy to answer • Do you use WiFi? • Do you frequently change network interface cards? Few “open-ended” questions • What do you like about... ? • What do you dislike about... ? Understand who's responding • Network Admins in a large company might think a GUI is not necessary • A part time administrator of a small network may really appreciate a GUI 2008 JavaOneSM Conference | java.sun.com/javaone | 19
- 20. What Requirements Did We Discover? View all the property values in one place Show all the possible values for a single property without having to scroll The most often modified parameters are autonegotiation, speed and duplex. MTU and Flow Control are modified less often. Network Administrators prefer command line actions 2008 JavaOneSM Conference | java.sun.com/javaone | 20
- 21. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 21
- 22. Define the Task Flow Diagram how the user will complete the task • Begin with Inputs: Data required from the user • End with Outputs: Desired results http://pikistrips.com/ 2008 JavaOneSM Conference | java.sun.com/javaone | 22
- 23. Tune Network Connection Task Flow Find & Open Network Tool Select Network to Configure View Network Status Select Property to Change Change Property Value Test Network 2008 JavaOneSM Conference | java.sun.com/javaone | 23
- 24. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 24
- 25. Design the GUI Panels Sketch designs that implement the task flow(s) Consider alternative designs • Use other components • Try different flows Apply published UE/UI guidelines: • General • Java Application Environment Look & Feel Design Guidelines • Platform • Windows Vista • Solaris™ Operating System (Solaris OS)/GNOME • Apple Mac OSX 2008 JavaOneSM Conference | java.sun.com/javaone | 25
- 26. Design the GUI Panels – Network Configuration Provides a list of available networks based on the machine's hardware User wants to change settings of the first network What happens when the user clicks the Edit button? 2008 JavaOneSM Conference | java.sun.com/javaone | 26
- 27. Design the GUI Panels – Alternative 1 Pop-up considerations • How many windows are in my app? • How easy is it for users to navigate? • Too many windows and the user may get lost (How do I get back to where I was?) • Title of a popup window must match the label of the command button that invoked the window 2008 JavaOneSM Conference | java.sun.com/javaone | 27
- 28. Design the GUI Panels – Alternative 1 Pop-up considerations • How many windows are in my app? • How easy is it for users to navigate? • Too many windows and the user may get lost (How do I get back to where I was?) • Title of a popup window must match the label of the command button that invoked the window 2008 JavaOneSM Conference | java.sun.com/javaone | 28
- 29. Design the GUI Panels – Alternative 1 Pop-up considerations • How many windows are in my app? • How easy is it for users to navigate? • Too many windows and the user may get lost (How do I get back to where I was?) • Title of a popup window must match the label of the command button that invoked the window 2008 JavaOneSM Conference | java.sun.com/javaone | 29
- 30. Design the GUI Panels – Alternative 1 Pop-up considerations • How many windows are in my app? • How easy is it for users to navigate? • Too many windows and the user may get lost (How do I get back to where I was?) • Title of a popup window must match the label of the command button that invoked the window 2008 JavaOneSM Conference | java.sun.com/javaone | 30
- 31. Design the GUI Panels – Alternative 1 Pop-up considerations • How many windows are in my app? • How easy is it for users to navigate? • Too many windows and the user may get lost (How do I get back to where I was?) • Title of a popup window must match the label of the command button that invoked the window 2008 JavaOneSM Conference | java.sun.com/javaone | 31
- 32. Design the GUI Panels – Alternative 2 Table considerations • Is it important to see all values for each entry? • Does it make sense to use combo boxes? • Would radio buttons be more explicit? • Are the reaction areas of the components too close? • Can the user accidentally click the wrong component? 2008 JavaOneSM Conference | java.sun.com/javaone | 32
- 33. Design the GUI Panels – Alternative 2 Table considerations • Is it important to see all values for each entry? • Does it make sense to use combo boxes? • Would radio buttons be more explicit? • Are the reaction areas of the components too close? • Can the user accidentally click the wrong component? 2008 JavaOneSM Conference | java.sun.com/javaone | 33
- 34. Design the GUI Panels – Alternative 3 List considerations • More than one scroll bar • Distinguish items in a list – but pay attention to: • Is it easy to distinguish among categories? • Do the contents of each category make sense? • What are the default settings for each category? • Should they be collapsed or expanded by default? 2008 JavaOneSM Conference | java.sun.com/javaone | 34
- 35. Design the GUI Panels – Alternative 3 List considerations • More than one scroll bar • Distinguish items in a list – but pay attention to: • Is it easy to distinguish among categories? • Do the contents of each category make sense? • What are the default settings for each category? • Should they be collapsed or expanded by default? 2008 JavaOneSM Conference | java.sun.com/javaone | 35
- 36. Design the GUI Panels – Alternative 3 List considerations • More than one scroll bar • Distinguish items in a list – but pay attention to: • Is it easy to distinguish among categories? • Do the contents of each category make sense? • What are the default settings for each category? • Should they be collapsed or expanded by default? 2008 JavaOneSM Conference | java.sun.com/javaone | 36
- 37. Design the GUI Panels – Result Combination of the alternatives • Categories as tabs so there's no need to scroll • Property values are visible when first opened • No pop-up window • No combo boxes (drop downs) According to the feedback users like it http://www.opensolaris.org/os/project/brussels/Documentation/proto/ 2008 JavaOneSM Conference | java.sun.com/javaone | 37
- 38. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 38
- 39. Prototyping - Goals Easily communicate the design Get direct feedback from real users and incorporate it into the design 2008 JavaOneSM Conference | java.sun.com/javaone | 39
- 40. Prototyping - Types Rapid Prototyping (revolutionary) Reusable Prototyping (evolutionary) Modular Prototyping (incremental) Horizontal Prototyping (large width – low depth) Vertical Prototyping (small width – high depth) Low-fidelity Prototypes (lo-fi) High-fidelity Prototypes (hi-fi) http://jthom.best.vwh.net/usability/usable.htm 2008 JavaOneSM Conference | java.sun.com/javaone | 40
- 41. Lo-Fi Prototyping Cheap way of providing prototypes Classic example is Paper Prototyping • Advantages • Fast changes in the actual interface • Get more high level feedback • No technical problems during the usability test • Disadvantages • Does not give the user the real feeling of interaction or L&F • Unable to measure performance during the usability test 2008 JavaOneSM Conference | java.sun.com/javaone | 41
- 42. Hi-Fi Prototyping Classical way of prototyping Interface of the prototype is as close as possible to the final product Prototype accepts all inputs and responds in the same way as the actual product 2008 JavaOneSM Conference | java.sun.com/javaone | 42
- 43. Prototyping Tools The tools we use depend on the timeframe and project state • Photoshop, Fireworks, other pixel graphic tools • Copy existing GUI panel(s) and use layers to “build” your new panel • Pros: No code required • Cons: Static – doesn't demonstrate interactivity • Flash, HTML • Can start with Photoshop prototypes and then add interactivity • Pros: Results can be very “life like” with little code • Cons: Can be time consuming to create, not reusable in your end product • Project Brussels HTML Prototype NetBeans™ software via the Matisse GUI Builder • Drag and drop components in to a JPanel • Pros: Results are very high fidelity, ability to reuse the generated code • Cons: Knowledge of Java required, coding still necessary to make some controls like JTables and JTrees work as desired 2008 JavaOneSM Conference | java.sun.com/javaone | 43
- 44. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 44
- 45. Gather Feedback Usability Study • Formal • Casual Web Surveys • Need ability to input an arbitrary number in addition to the two options currently available. • “Disconnected icon looks like ears.” Discussion Groups • “I think having to select the various properties in turn, and not being able to see the values of the others would be very tedious.” Instrumented Code • Explicit Survey in the app • Phone home with statistics 2008 JavaOneSM Conference | java.sun.com/javaone | 45
- 46. Incorporating Feedback Understand the source • Within the target user group • Related to, but outside the target • Way outside the target Sort and Prioritize • Task Performance and Intuitiveness – how successful is the user? • Visual Design and Aesthetic Opinions • New feature requests 2008 JavaOneSM Conference | java.sun.com/javaone | 46
- 47. Agenda Why It's Hard to Create Good GUIs Understand the User's Task and Goals Gather Requirements Define the Task Flow Design the GUI Panels Prototype Our Design Gather Feedback Iterate 2008 JavaOneSM Conference | java.sun.com/javaone | 47
- 48. Iterate Don't expect it to be perfect on the first try. Use alpha, beta releases • Agile programming facilitates this approach • Test the functionality and UI • Leave enough time to make changes Design Test Prototype 2008 JavaOneSM Conference | java.sun.com/javaone | 48
- 49. Summary – Ensuring Usable GUIs Design the GUI using a known, repeatable process Understand your user's goal and tasks Involve your end users from the beginning Use available tools to visualize the design Take advantage of design guidelines Iterate! 2008 JavaOneSM Conference | java.sun.com/javaone | 49
- 50. For More Information Sessions Related to User Experience • Friday 12:10 – 1:10pm TS-6470 The Layperson’s Guide to Building a Better User Experience •TS-6605 Deep Inside JSR 296, the Swing Application Framework •TS-6611 Filthy-Rich Clients: Filthier, Richer, Clientier •TS-6656 Extreme Graphical User Interface Makeover: Rock Stars •TS-6929 Creating a Compelling User Experience URLs • Design@Sun BLOG - http://blogs.sun.com/designatsun/ User Experience Guidelines • Java Application Environment Look & Feel Design Guidelines • Windows Vista • Solaris Operating System/GNOME • Apple Mac OSX 2008 JavaOneSM Conference | java.sun.com/javaone | 50
- 51. Jeff Hoffman and Jindra Dinga User Experience Design TS-4968 2008 JavaOneSM Conference | java.sun.com/javaone | 51