Upload
jeff-hoffman
View
112
Download
0
Tags:
Embed Size (px)
DESCRIPTION
An overview of a simple process that can be applied by developers as well as user experience professionals. Illustrated with examples.
Citation preview
DESIGNING GRAPHICAL USER INTERFACES 101: FROM USER NEEDS TO USABLE GUIsJeff Hoffman & Jindra DingaJava™ SE User Experience DesignTS-4968
2008 JavaOneSM Conference | java.sun.com/javaone | 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 | 3
Java™ SE Platform User Experience Design Team: Who Are We?
Jeff Hoffman: Lead User Experience Designer9 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 Designer4 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 | 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 | 5
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 6
Why It's Hard to Create Good GUIsUser'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 | 7
Variations GUI Example
2008 JavaOneSM Conference | java.sun.com/javaone | 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 instructionsMany 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 | 9
Our GUI Design Process
Gather Requirements
Understand the Users Tasks and Goals
Define the Task Flow
Design the GUI Panels
Prototype Our Design
Gather Feedback
Iterate
2008 JavaOneSM Conference | java.sun.com/javaone | 10
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 11
2008 JavaOneSM Conference | java.sun.com/javaone | 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 | 13
User's Task: Change NIC PropertiesOur 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 problemThis task may not be performed very often, however it may be performed many times during a single sessionNIC 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 | 14
User Task: Now...How is the user task performed now?• Command line interface (CLI) via the ndd
command # ndd /dev/bge0 link_status1# ndd /dev/bge0 link_autoneg1# ndd /dev/bge0 link_speed100# ndd /dev/bge0 link_duplex2# ndd -set /dev/bge0 link_duplex 1
2008 JavaOneSM Conference | java.sun.com/javaone | 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 | 16
User Task: ...and LaterHow 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 | 17
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 18
Gather RequirementsDo 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 | 19
User Research QuestionnairesKeep 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 | 20
What Requirements Did We Discover?View all the property values in one placeShow all the possible values for a single property without having to scrollThe 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 | 21
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 22
Define the Task FlowDiagram 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 | 23
Tune Network Connection Task Flow
Select Network to Configure
Find & Open Network Tool
View Network Status
Select Property to Change
Change Property Value
Test Network
2008 JavaOneSM Conference | java.sun.com/javaone | 24
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 25
Design the GUI PanelsSketch 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 | 26
Design the GUI Panels – Network Configuration
Provides a list of available networks based on the machine's hardwareUser wants to change settings of the first networkWhat happens when the user clicks the Edit button?
2008 JavaOneSM Conference | java.sun.com/javaone | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 35
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?
Design the GUI Panels – Alternative 3
2008 JavaOneSM Conference | java.sun.com/javaone | 36
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?
Design the GUI Panels – Alternative 3
2008 JavaOneSM Conference | java.sun.com/javaone | 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 | 38
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 39
Prototyping - GoalsEasily communicate the designGet direct feedback from real users and incorporate it into the design
2008 JavaOneSM Conference | java.sun.com/javaone | 40
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
2008 JavaOneSM Conference | java.sun.com/javaone | 41
Lo-Fi Prototyping Cheap way of providing prototypesClassic 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 | 42
Hi-Fi Prototyping Classical way of prototypingInterface of the prototype is as close as possible to the final productPrototype accepts all inputs and responds in the same way as the actual product
2008 JavaOneSM Conference | java.sun.com/javaone | 43
Prototyping ToolsThe 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 | 44
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 45
Gather FeedbackUsability 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 | 46
Incorporating FeedbackUnderstand 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 | 47
Agenda
Why It's Hard to Create Good GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate
2008 JavaOneSM Conference | java.sun.com/javaone | 48
IterateDon'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
PrototypeTest
Design
2008 JavaOneSM Conference | java.sun.com/javaone | 49
Summary – Ensuring Usable GUIs
Design the GUI using a known, repeatable processUnderstand your user's goal and tasksInvolve your end users from the beginningUse available tools to visualize the designTake advantage of design guidelinesIterate!
2008 JavaOneSM Conference | java.sun.com/javaone | 50
For More InformationSessions 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 | 51
Jeff Hoffman and Jindra DingaUser Experience DesignTS-4968