This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
2007 JavaOneSM Conference | Session BOF-3420 |
BOF-3420
Designing Successful UIs
Jeff Hoffman, Ann Sunhachawee, Jindra Dinga, Jenya Gestrin
Java SE User Experience DesignSun Microsystems, Inchttp://ui.netbeans.org/JavaOne/BOF-3420.pdf
xDesignxDesign
2007 JavaOneSM Conference | Session BOF-3420 | 2
Java SE User Experience Team
● Jeff Hoffman – Lead ● Jindra Dinga – Deployment● Ann Sunhachawee – Swing, Tools Integration● Jenya Gestrin – Swing, Tools Integration
Who are we?
2007 JavaOneSM Conference | Session BOF-3420 | 3
Successful User Interfaces
Learn best practices for understanding the user's tasks and using that information to design your UI.
Require that you understand your users
2007 JavaOneSM Conference | Session BOF-3420 | 4
Agenda
Successful UIs and UI BloopersProcesses you can do at homeInteraction & Visual DesignQuestions?
2007 JavaOneSM Conference | Session BOF-3420 | 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
● 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.”
● 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 JavaOneSM Conference | Session BOF-3420 | 32
Checkboxes vs Radio ButtonsBasic UI Components
Source: Please add the source of your data here
2007 JavaOneSM Conference | Session BOF-3420 | 33
Combo boxes/ drop-down menusBasic UI Components
● 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-downEditable ComboboxInteracting menu
Source: Please add the source of your data here
2007 JavaOneSM Conference | Session BOF-3420 | 34
LayoutVisual & Interaction Design
● Align all labels to the left● When there is only one visual group of
components, align them with the longest label
2007 JavaOneSM Conference | Session BOF-3420 | 35
LayoutVisual & Interaction Design
● 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 JavaOneSM Conference | Session BOF-3420 | 36
LayoutVisual & Interaction Design
● 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 JavaOneSM Conference | Session BOF-3420 | 37
LayoutVisual & Interaction Design
● Another special case are standalone check boxes/radio buttons● These components are always aligned to the left in a
visual group of components
2007 JavaOneSM Conference | Session BOF-3420 | 38
SpacingVisual & Interaction Design
● 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