48
2007 JavaOne SM Conference | Session BOF-3420 | BOF-3420 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 xDesign xDesign

JavaOne 2007 BOF Session

Embed Size (px)

DESCRIPTION

Slides from our User Experience birds-of-a-feather session at JavaOne 2007

Citation preview

Page 1: JavaOne 2007 BOF Session

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

Page 2: JavaOne 2007 BOF Session

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?

Page 3: JavaOne 2007 BOF Session

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

Page 4: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 4

Agenda

Successful UIs and UI BloopersProcesses you can do at homeInteraction & Visual DesignQuestions?

Page 5: JavaOne 2007 BOF Session

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

Page 6: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 6

Successful UI

● 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.”

Usability in Software

Page 7: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 7

UI Blooper #1

Source: Interface Hall of Shame

Page 8: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 8

UI Blooper #2

Page 9: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 9

UI Blooper #3

Source: Northwest Airlines Website

Page 10: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 10

Agenda

Successful UIs and UI BloopersProcesses you can do at home

CommunicatingTestingIterating

Interaction & Visual DesignQuestions?

Page 11: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 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.

Page 12: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 12

Comic Strips

Source: Maya Venkatraman and the Design Comics website

Storyboarding that gets the audience's attention

Page 13: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 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

Page 14: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 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 ofcomments

● Slow creation &iteration time

Page 15: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 15

Fast, Cheap and Surprisingly EffectiveDiscount Usability Techniques

● 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

Page 16: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 16

Demo – Thinking Aloud

Study the object and tellus about its purpose...

Page 17: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 17

A Simple Process

User Tasks Design

Test

Iterate

Page 18: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 18

Iteration Example

Iteration 1

Iteration 2 Iteration 3

V1 – basic and advanced sections combined

V2 – basic and advanced sections separated in tabs

V3 – advanced tab fields modified

Page 19: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 19

Agenda

Successful UIs and UI BloopersProcesses you can do at homeInteraction & Visual DesignQuestions?

Page 20: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 20

Together these define a UI with ease-of-use & styleInteraction & Visual Design

● Interaction Design – The ingredients● flow● components● feedback to the user

● Visual Design – How you present it to the user● layout, spacing● graphics● colors

Page 21: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 21

Example Flow Diagram

Source: JConsole User Experience Specification for Java SE 6

Brainstorming stage Proof of Concept stage

Information Architecture

Page 22: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 22

UI 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)?

Six things to consider when choosing your components

Page 23: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 23

UI Component ExampleSpace Used vs. Clarity

Page 24: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 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

Page 25: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 25

Dialog Spacing ExampleVisual Design

Page 26: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 26

Summary

● Avoid bloopers● Understand user tasks and needs● Choose the right components● Use UI standards where available● Get early feedback on your design

Page 27: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 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)

Page 29: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session XXXX | 29

Q&AJeff Hoffman - [email protected] Sunhachawee - [email protected] Dinga - [email protected] Gestrin - [email protected]

http://ui.netbeans.org/JavaOne/BOF-3420.pdf

Page 30: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 30

Back Up Slides

Page 31: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 31

Checkboxes vs Radio ButtonsBasic UI Components

● 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

Page 32: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 32

Checkboxes vs Radio ButtonsBasic UI Components

Source: Please add the source of your data here

Page 33: JavaOne 2007 BOF Session

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

Page 34: JavaOne 2007 BOF Session

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

Page 35: JavaOne 2007 BOF Session

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

Page 36: JavaOne 2007 BOF Session

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

Page 37: JavaOne 2007 BOF Session

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

Page 38: JavaOne 2007 BOF Session

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

Page 39: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 39

Spacing Examples - Dialogs & Command ButtonsVisual & Interaction Design

Page 40: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 40

Spacing Examples - Tabbed PaneVisual & Interaction Design

Page 41: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 41

Spacing Examples - Text FieldsVisual & Interaction Design

Page 42: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 42

Spacing Examples - Text Area or ListVisual & Interaction Design

Page 43: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 43

Spacing Examples - Radio ButtonsVisual & Interaction Design

Page 44: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 44

Spacing Examples - Radio ButtonsVisual & Interaction Design

Page 45: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 45

Spacing Examples - Check BoxesVisual & Interaction Design

Page 46: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 46

Spacing Examples - Check BoxesVisual & Interaction Design

Page 47: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 47

Spacing Examples - Toolbar ButtonsVisual & Interaction Design

Page 48: JavaOne 2007 BOF Session

2007 JavaOneSM Conference | Session BOF-3420 | 48

Spacing & Alignment ExamplesVisual & Interaction Design