JavaOne 2008: Designing GUIs 101

DESIGNING GRAPHICAL USER
INTERFACES 101:
FROM USER NEEDS TO USABLE GUIs
Jeff Hoffman & Jindra Dinga
Java™ SE User Experience Design
TS-4968

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

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.


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


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


User's Mental Model != Software Architecture
• You really need to understand the target audience
• Color Balance vs. Variations interfaces in Photoshop


Variations GUI Example


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


Our GUI Design Process

Understand the Users Tasks and Goals

Gather Requirements


Design the GUI Panels Iterate


Gather Feedback


Agenda

Gather Requirements
Gather Feedback
Iterate


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


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)


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


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


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

Agenda

Gather Requirements
Gather Feedback
Iterate


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


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

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


Agenda

Gather Requirements
Gather Feedback
Iterate


Diagram how the user will complete the task
• Begin with Inputs: Data required from the user
• End with Outputs: Desired results

http://pikistrips.com/


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


Agenda

Gather Requirements
Gather Feedback
Iterate


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


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?


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


my app?
navigate?
command button that
invoked the window


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?


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?


List considerations
among categories?
settings for each
category?
• Should they be
by default?


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/

Agenda

Gather Requirements
Gather Feedback
Iterate


Prototyping - Goals
Easily communicate the design
Get direct feedback from real users and
incorporate it into the design


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


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


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


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

Agenda

Gather Requirements
Gather Feedback
Iterate


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

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


Agenda

Gather Requirements
Gather Feedback
Iterate


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


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!


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


Jeff Hoffman and Jindra Dinga
User Experience Design
TS-4968


JavaOne 2008: Designing GUIs 101

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Semelhante a JavaOne 2008: Designing GUIs 101

Semelhante a JavaOne 2008: Designing GUIs 101 (20)

Mais de Jeff Hoffman

Mais de Jeff Hoffman (6)

Último

Último (20)

JavaOne 2008: Designing GUIs 101