JavaOne 2007 BOF Session
1 like366 views
This document summarizes a presentation on designing successful user interfaces. It discusses understanding user needs, communicating design through storyboards and prototypes, testing designs through discount usability techniques, and iterating based on feedback. It also covers interaction design principles like flow and components, and visual design principles like layout, spacing, and colors. The goal is to avoid common "bloopers" and design intuitive, usable interfaces.
JavaOne 2007 BOF Session
- 1. xDesign Designing Successful UIs Jeff Hoffman, Ann Sunhachawee, Jindra Dinga, Jenya Gestrin Java SE User Experience Design Sun Microsystems, Inc http://ui.netbeans.org/JavaOne/BOF-3420.pdf BOF-3420 2007 JavaOne SM Conference | Session BOF-3420 |
- 2. Java SE User Experience Team Who are we? ● Jeff Hoffman – Lead ● Jindra Dinga – Deployment ● Ann Sunhachawee – Swing, Tools Integration ● Jenya Gestrin – Swing, Tools Integration 2007 JavaOne SM Conference | Session BOF-3420 | 2
- 3. Successful User Interfaces Require that you understand your users Learn best practices for understanding the user's tasks and using that information to design your UI. 2007 JavaOne SM Conference | Session BOF-3420 | 3
- 4. Agenda Successful UIs and UI Bloopers Processes you can do at home Interaction & Visual Design Questions? 2007 JavaOne SM Conference | Session BOF-3420 | 4
- 5. Definition of Usability “The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in a particular environment” Source: Definition of Usability from ISO DIS 9241-11, McFunSoft Video Capture 2007 JavaOne SM Conference | Session BOF-3420 | 5
- 6. Successful UI Usability in Software ● First Impressions: Out of the Box Experience ● Zero configuration: It just works ● Increased productivity ● Works as expected ● Attractive Look and Feel “A user interface is well designed when the program behaves exactly how the user thought it would.” 2007 JavaOne SM Conference | Session BOF-3420 | 6
- 7. UI Blooper #1 Source: Interface Hall of Shame 2007 JavaOne SM Conference | Session BOF-3420 | 7
- 8. UI Blooper #2 2007 JavaOne SM Conference | Session BOF-3420 | 8
- 9. UI Blooper #3 Source: Northwest Airlines Website 2007 JavaOne SM Conference | Session BOF-3420 | 9
- 10. Agenda Successful UIs and UI Bloopers Processes you can do at home Communicating Testing Iterating Interaction & Visual Design Questions? 2007 JavaOne SM Conference | Session BOF-3420 | 10
- 11. Communicating Your Design ● Storyboards/Comic Strips ● Low & High Fidelity Prototypes TIP: Iterate your design during the early phases when it doesn’t require rearchitecting the code. 2007 JavaOne SM Conference | Session BOF-3420 | 11
- 12. Comic Strips Storyboarding that gets the audience's attention Source: Maya Venkatraman and the Design Comics website 2007 JavaOne SM Conference | Session BOF-3420 | 12
- 13. Creating Low Fidelity Prototypes ● A Low Fidelity prototype is a rough “napkin-like” sketch or description of a UI design. ● Pros: ● Fast creation & iteration time ● Generates more high-level feedback ● Users know that the prototype != finished state ● Cons: ● Does not give the user the real feeling of interaction or L&F ● Possibility of misunderstanding interaction or components 2007 JavaOne SM Conference | Session BOF-3420 | 13
- 14. Creating High Fidelity Prototypes ● A High Fidelity prototype expresses the details of a UI design such that a user might feel as though they're using “the real thing”. ● Pros: ● Gives users a feel for the interaction and look ● More easily user tested ● Cons: ● Users may think prototype == finished state ● Narrows the breadth of comments ● Slow creation & iteration time 2007 JavaOne SM Conference | Session BOF-3420 | 14
- 15. Discount Usability Techniques Fast, Cheap and Surprisingly Effective ● Scenarios ● Create a set of simple tasks like ● Creating a new object ● Changing preferences ● Editing content ● Simplified thinking aloud ● Ask users to follow the scenarios and think aloud while doing it as you take notes. ● Heuristic evaluation ● Ask a bunch of people to look at the design, form opinions and then discuss as a group. Source: Jakob Nielsen at UseIt.com 2007 JavaOne SM Conference | Session BOF-3420 | 15
- 16. Demo – Thinking Aloud Study the object and tell us about its purpose... 2007 JavaOne SM Conference | Session BOF-3420 | 16
- 17. A Simple Process User Tasks Design Iterate Test 2007 JavaOne SM Conference | Session BOF-3420 | 17
- 18. Iteration Example Iteration 1 Iteration 2 Iteration 3 V1 – basic and advanced V2 – basic and advanced V3 – advanced tab sections combined sections separated in tabs fields modified 2007 JavaOne SM Conference | Session BOF-3420 | 18
- 19. Agenda Successful UIs and UI Bloopers Processes you can do at home Interaction & Visual Design Questions? 2007 JavaOne SM Conference | Session BOF-3420 | 19
- 20. Interaction & Visual Design Together these define a UI with ease-of-use & style ● Interaction Design – The ingredients ● flow ● components ● feedback to the user ● Visual Design – How you present it to the user ● layout, spacing ● graphics ● colors 2007 JavaOne SM Conference | Session BOF-3420 | 20
- 21. Example Flow Diagram Brainstorming stage Proof of Concept stage Information Architecture Source: JConsole User Experience Specification for Java SE 6 2007 JavaOne SM Conference | Session BOF-3420 | 21
- 22. UI Components Six things to consider when choosing your components 1. Is it more natural for the user to type the answer or select it? 2. Are the answers easily mistyped? 3. Does the user need to review the options to understand the question? 4. Number of options? 5. Will the user select more than one option? 6. Are the options distinctive (visual or text)? 2007 JavaOne SM Conference | Session BOF-3420 | 22
- 23. UI Component Example Space Used vs. Clarity 2007 JavaOne SM Conference | Session BOF-3420 | 23
- 24. Visual Design – Spacing Rules ● Look & Feel guidelines for each platform specify different spacing rules... ● For cross platform use, follow a simple rule ● Leave space between components in increments of X pixels (usually 6), going up as the relationship between elements becomes more distant. ● For example, Use 6 vertical pixels between related components, but 12 to 18 vertical pixels between unrelated components 2007 JavaOne SM Conference | Session BOF-3420 | 24
- 25. Visual Design Dialog Spacing Example 2007 JavaOne SM Conference | Session BOF-3420 | 25
- 26. Summary ● Avoid bloopers ● Understand user tasks and needs ● Choose the right components ● Use UI standards where available ● Get early feedback on your design 2007 JavaOne SM Conference | Session BOF-3420 | 26
- 27. For More Information ● See us in the Pavilion: Designing the User Experience for Java™ (Booth #941) ● TS-3165 Filthy-Rich Clients (Friday 2:50pm) ● BOF-3356: Next-Generation UI Elements for Swing Applications (Thursday 9:55pm) 2007 JavaOne SM Conference | Session BOF-3420 | 27
- 28. Usability & Visual Design Resources ● UseIt.com ● Guidelines for Windows ● Guidelines for Mac Aqua ● Guidelines for Gnome ● Java Look & Feel Design Guidelines ● Comic Design Website: http://designcomics.org/ 2007 JavaOne SM Conference | Session BOF-3420 | 28
- 29. Q&A Jeff Hoffman - jeff.hoffman@sun.com Ann Sunhachawee - ann.sunhachawee@sun.com Jindra Dinga - jindrich.dinga@sun.com Jenya Gestrin - jenya.gestrin@sun.com http://ui.netbeans.org/JavaOne/BOF-3420.pdf 2007 JavaOne SM Conference | Session XXXX | 29
- 30. Back Up Slides 2007 JavaOne SM Conference | Session BOF-3420 | 30
- 31. Basic UI Components Checkboxes vs Radio Buttons ● Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list. ● Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn't uncheck the others. ● A stand-alone checkbox is used for a single option that the user can turn on or off. ● Use checkboxes and radio buttons only to change settings, not as action buttons that make something happen. Also, the changed settings should not take effect until the user clicks the command button. Source: Please add the source of your data here 2007 JavaOne SM Conference | Session BOF-3420 | 31
- 32. Basic UI Components Checkboxes vs Radio Buttons Source: Please add the source of your data here 2007 JavaOne SM Conference | Session BOF-3420 | 32
- 33. Basic UI Components Combo boxes/ drop-down menus ● Drop-down menus do have their advantages. First, they conserve screen space. They also prevent users from entering erroneous data, since they only show legal choices. Finally, because they are a standard widget (even if an unpleasant one), users know how to deal with a drop-down menu when they encounter it. ● Drop-down menus are often more trouble than they are worth and can be confusing because designers use them for different purposes and apply different behavior. ● Avoid having on the same page drop-downs with different behavior: Multi-select drop-down Editable Combobox Interacting menu Source: Please add the source of your data here 2007 JavaOne SM Conference | Session BOF-3420 | 33
- 34. Visual & Interaction Design Layout ● Align all labels to the left ● When there is only one visual group of components, align them with the longest label 2007 JavaOne SM Conference | Session BOF-3420 | 34
- 35. Visual & Interaction Design Layout ● Dialogs with more than one visual group of components where groups are visually distinguished by a separator, group box, or empty space: ● Introduce as many axis as visual groups (but careful that the dialog does appear cluttered) ● Align all components according to the component with the longest label in each visual group 2007 JavaOne SM Conference | Session BOF-3420 | 35
- 36. Visual & Interaction Design Layout ● Check boxes/radio buttons below label ● This is a special case where the components have their own axis even though it’s only one visual group 2007 JavaOne SM Conference | Session BOF-3420 | 36
- 37. Visual & Interaction Design Layout ● Another special case are standalone check boxes/radio buttons ● These components are always aligned to the left in a visual group of components 2007 JavaOne SM Conference | Session BOF-3420 | 37
- 38. Visual & Interaction Design Spacing ● Component has a 3D effect (white 1 pixel line) ● subtract 1 px from right and bottom side of the component ● DU (dialog unit) vs Pixel ● DU is computed according to the font size used ● 1 DU is approximately 1.57 px for default font size 2007 JavaOne SM Conference | Session BOF-3420 | 38
- 39. Visual & Interaction Design Spacing Examples - Dialogs & Command Buttons 2007 JavaOne SM Conference | Session BOF-3420 | 39
- 40. Visual & Interaction Design Spacing Examples - Tabbed Pane 2007 JavaOne SM Conference | Session BOF-3420 | 40
- 41. Visual & Interaction Design Spacing Examples - Text Fields 2007 JavaOne SM Conference | Session BOF-3420 | 41
- 42. Visual & Interaction Design Spacing Examples - Text Area or List 2007 JavaOne SM Conference | Session BOF-3420 | 42
- 43. Visual & Interaction Design Spacing Examples - Radio Buttons 2007 JavaOne SM Conference | Session BOF-3420 | 43
- 44. Visual & Interaction Design Spacing Examples - Radio Buttons 2007 JavaOne SM Conference | Session BOF-3420 | 44
- 45. Visual & Interaction Design Spacing Examples - Check Boxes 2007 JavaOne SM Conference | Session BOF-3420 | 45
- 46. Visual & Interaction Design Spacing Examples - Check Boxes 2007 JavaOne SM Conference | Session BOF-3420 | 46
- 47. Visual & Interaction Design Spacing Examples - Toolbar Buttons 2007 JavaOne SM Conference | Session BOF-3420 | 47
- 48. Visual & Interaction Design Spacing & Alignment Examples 2007 JavaOne SM Conference | Session BOF-3420 | 48