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
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
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
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