JavaOne 2008: Designing GUIs 101

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.


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.


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 GUIsUnderstand the User's Task and Goals Gather RequirementsDefine the Task FlowDesign the GUI PanelsPrototype Our DesignGather FeedbackIterate


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

http://en.wikipedia.org/wiki/Mental_model


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 instructionsMany guidelines available, but which to use? • Java application environment has the unique ability to run on very

different platforms


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


Agenda



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


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)

http://www.opensolaris.org/os/project/brussels/Documentation/

http://en.wikipedia.org/wiki/Autonegotiation

http://en.wikipedia.org/wiki/Full-duplex_Ethernet

http://en.wikipedia.org/wiki/Ethernet_flow_control

http://en.wikipedia.org/wiki/Maximum_transmission_unit


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

http://docs.sun.com/app/docs/doc/816-5166/ndd-1m?a=view


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


Agenda



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

http://www.surveymonkey.com/

http://info.zoomerang.com/

http://www.doodle.ch/main.html


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


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


Agenda



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/

http://pikistrips.com/


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


Agenda



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

http://java.sun.com/products/jlf/ed2/book/HIGTitle.alt.html

http://msdn2.microsoft.com/en-us/library/aa511258.aspx

http://library.gnome.org/devel/hig-book/stable/

http://developer.apple.com/ue/


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?


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



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?


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/

http://www.opensolaris.org/os/project/brussels/Documentation/proto/


Agenda



Prototyping - GoalsEasily communicate the designGet 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

http://jthom.best.vwh.net/usability/usable.htm


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


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


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

http://www.opensolaris.org/os/project/brussels/Documentation/proto


Agenda



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


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


Agenda



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


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!


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

http://blogs.sun.com/designatsun/

http://java.sun.com/products/jlf/ed2/book/HIGTitle.alt.html

http://msdn2.microsoft.com/en-us/library/aa511258.aspx

http://library.gnome.org/devel/hig-book/stable/

http://developer.apple.com/ue/


Jeff Hoffman and Jindra DingaUser Experience DesignTS-4968

JavaOne 2008: Designing GUIs 101

Design

Transcript of JavaOne 2008: Designing GUIs 101