UI Examples
Real world user interface examples
3461
Giving the user choices is good?
•This issue may be
important to a
programmer but the
user doesn’t care.
•Every time you
provide an option
you’re asking the user
to make a decision.
•Why is this dialog a “wizard”?
Adapted from User Interface Design for Programmers, J. Spolsky, 2001
•Don’t force the user
to make decisions
about things they don’t
care about.
3461
Icon Design- A small change can mean a large difference
63%
91%
Example from Highway Safety, percent of licensed drivers who
can explain the meaning of each sign.
From Smiley & Bahar, The Science of Highway Safety, Durham, March 2002
3461
Where’s Waldo?
http://www.iarchitect.com/mshame.htm
3461
Error Message
The message is entirely unhelpful, gives no indication
of what the error is, what to do to solve it, or even the
location of an error log if one existed.
http://www.iarchitect.com/mshame.htm
3461
More Error Messages
3461
Requests for Proposals
User Interface Requirements
3461
User Interface Requirements (1 of 3)
Free Text to Use in Your Request for Proposals (RFPs)
http://www.usabilityinstitute.com/articles/RFPInterfaceRequirements.htm
1. The software should be usable without reading a printed
guide. If the complexity of the tasks being automated cannot
feasibly be embedded into the software interface, reading a
printed guide may be unavoidable. In this case, the most that
any individual user should have to read for a particular role is
50 pages-short enough to read in one sitting.
2. Users should be able to accomplish every task and entry with
the fewest possible keystrokes. For instance, dates should not
necessitate typing four digits for the year unless the context of
the given field leaves considerable doubt as to which
millennium might be intended. In many cases, keying in any
characters at all for the year may be an unnecessary expense
of the users' time.
3461
User Interface Requirements (2 of 3)
Free Text to Use in Your Request for Proposals (RFPs)
http://www.usabilityinstitute.com/articles/RFPInterfaceRequirements.htm
3. The interface should enable all interaction techniques and input to
be discoverable and chosen from a browse-able, hierarchical
structure, arranged in order of the functions the user needs to
perform. Until recently this simply meant supplying an exhaustive
menu or menu-like outline of choices, supported by dialogs with
options and click-able choices. More recently, this requirement is
being satisfied by multiple graphical choices, in the form of icons
and segmented, click-able graphics known by various names, such
as imagemaps. In either case, what this requirement specifically
precludes is reliance solely on any of the following techniques:
command line syntax; parameter (INI) file options not built into the
interface; techniques supported only by combination keystrokes,
mouse techniques, or combinations thereof; techniques requiring
knowledge of special, manually entered values.
3461
User Interface Requirements (3 of 3)
Free Text to Use in Your Request for Proposals (RFPs)
http://www.usabilityinstitute.com/articles/RFPInterfaceRequirements.htm
 4. The software should enable users to do things out of




order without being penalized.
5. The software should enable users to make outright
mistakes without being terminated, executed, canceled,
re-booted, or erased.
6. The system should save all of what the users type, by
default, meaning without extra steps.
7. Users should be forewarned when any work is overwritten, undone, or erased.
8. The interface and messages should make it clear why
the program does what it does.
3461
Gestalt Principles
3461
Gestalt Principles of Perceptual Organization (1 of 2)
Gestalt Principle
UI Example
 Proximity: elements
 Words on a menu bar,
near each other tend to
be seen as a group
 Similarity: elements that
columns in a tabular
display
 Toolbar icons
share visual
characteristics (shape,
color, size, etc.) tend to
be seen as a group
 Closure: there is a
tendency to organize
element into compete
closed figures
 Overlapping windows,
menus, dialog boxes
Rosson & Carroll, Usability Engineering, 2002, p. 113
3461
Gestalt Principles of Perceptual Organization (2 of 2)
Gestalt Principle
UI Example
 Area: there is a tendency
 Icons on a screen
to group elements in a
way that creates the
smallest possible figure
 Symmetry: there is a
tendency to see
symmetric elements as
part of the same figure
 Window manipulation
 Continuity: there is a
 Paragraphs of text,
controls (e.g. Scroll bar,
selection handles)
tendency to group
justification of widgets
elements into continuous
contours or repeating
patterns
Rosson & Carroll, Usability Engineering, 2002, p. 113
3461
Documentation
3461
Paper-based Documentation
Advantages
 Familiar
 Faster to read paper over




Disadvantages
 Finding and turning to a
page is an extra task
Paper is bulky, takes up
office or desk space
Large manuals may seem
intimidating to novices
Lack of coordination
between paper and software
Fixed organization of
content
Paper deteriorates over time
screens

Highly portable, can be
used anywhere

Easy to visual scan at
varying levels of detail

Can easily take notes on
it with normal writing

tools
People like owning books

and other manuals
Rosson & Carroll, Usability Engineering, 2002, p. 279
3461
Documentation




Manuals
Demo versions
Interactive tutorials
Paper and online manuals
These are all types of things users do not want to spend
their time doing- manuals are a last resort for most users.
Instead, users today demand software which is “walk-upand-use”.
Users don’t read the manual.
3461
Support walk-up-and-use by...
 Training-Wheels Environment. Reduced functionality
interface where the user can do less and is protected
from serious mistakes. By limiting actions available, user
is redirected toward core functionality.
Hiding the documentation in the UI
 Icon Tooltips. Name or brief description which appears
in a pop-up label box when the user pauses the mouse
pointer over the icon.
 Balloon Help. User can explicitly turn on and off pop-up
help which provides assistance at a level of detail greater
than found in tooltips.
3461