USABILITY and

USER INTERFACE DESIGN

Click to edit Master subtitle style

Usability
What is Usability?
Ease of learning
Ease of use
Ease of remembering
Subjective satisfaction
Efficiency of use
Effectiveness of use

Usability Engineering
Usability Engineering (UE):
Processes to build Usability into
products
Various methods can be used
throughout the design lifecycle
Methods can be incorporated into
design process easily
Methods maintain focus on user
throughout design

Why Isnt UE Done

Regularly?
Developers believe
it takes too long
is too expensive
is not critical to development
they can afford to learn about user
problems during live use

Also developers may not know

how to do it

Benefits of UE to an
Organization
Reduce training costs
Reduce development costs
Identify and fix problems early

Reduce support costs; minimize need

for
support personnel/help desks
fixes, maintenance, upgrades

Enhance organizations reputation positive word-of-mouth trade

Larger numbers of hit and return
visit rates

Benefits of UE to the User

Less time to complete work
Greater success with tasks
Increased user satisfaction
The fun theory

Typical Web-site Usability

Problems
Navigation
Knowing where you are
Finding what you want

Structure of web site

Layout
Needs sufficient white space
Use of large graphics

The Google problem

User Centered Design

UCD is a dialog between the
customer and the designer
Rules of thumb:
Get to know and understand the users.
Build an application, applying usability
principles.
Test designs by observing users in a
real work setting (environment and
work load).

Usability Principles

Mini-Exercise
Apply the principles to a web-site of
your choosing, or try:
http://www.lingscars.co.uk
http://www.constellation7.org
http://www.sixtiespress.co.uk/
http://www.leoneck.ch
http://www.dsrny.com/

GUI Design is Multi

Disciplinary
A team includes
Analyst
Designer
Technology expert
Graphic artist
Social and behavioral scientist
Programmer

Basic Principles
Assume users
Have not read the manual
Have not attended training
Do not have external help readily at
hand
So
All controls should be clear and
understandable and placed in an intuitive
location on the screen.

Usability Design Process

Use Scenario
Development
You already know about use
cases
Use scenarios are just a single
thread through a use case
much simpler!

UI Structure/Flow of Control

UI Structure/Flow of Control
This matters much less than it
used to. Why?
What can you do about it?

Interface Standards
Design
The interface standards are the
basic design elements that are
common across the screens,
forms, and reports within the
system.
Example
What do you think of this?

Interface Design
Prototyping

Storyboard
HTML Prototype
Language Prototype
Interface Evaluation
Heuristic
Walkthrough
Interactive

Formal Usability Testing

Creating a UI Prototype
Low-fidelity prototypes are
good! e.g.
Paper prototype
Visio/HTML/PPT/ prototype

Example

Exercise Part 1
Design the web-site for your customer.
Consider: What is the purpose of the web-site?
Who are the users? What features and tools are
needed in such a web-site?
Are these already documented as requirements?
Have you documented any usability requirements?

Choose the look-and-feel and layout.

Create a site map.
You should have done this already. Right?

Exercise Part 2
Create a scenario for one part of the site
based on your most important use case
(happy case).
Create a (possibly paper) prototype that
realizes your scenario.
Walk through the prototype yourself
(pretend to be a user).
Think about the flow of the site, layout,
visual appeal, use of colors, icons, etc.
Save your work!!!!!

Heuristic
Evaluation
Set of guidelines for creating usable
GUIs
See:
http://www.stcsig.org/usability/topics/
articles/he-checklist.html
for a good example of a set of

Interface/Dialogue Design
The team needs to worry about:
Layout (of buttons, text, table
data, )
Structuring data entry (tab order)
Controlling data input (validation
and format controls)
Feedback (prompting, status,
warning, and error messages)
Dialogue sequencing

What Is a Dialogue?
A sequence of interactions
between the system and a user
Dialogue design involves:
Designing a dialogue sequence
Building a prototype
Assessing usability

GUI Design Guidelines

User in control
Consistency
Personalization & Customization
Forgiveness
Feedback
Aesthetics & Usability

User in Control
Rather the users perception of
control
No mothering principle user
should feel that they initiate
actions
Feedback is necessary for this
to work

Consistency
The conformance to the GUI vendors
standards
A GUI developer must not be too creative and
innovative in the interface design.

The conformance to the naming, coding

and other GUI-related standards
developed internally by the organization
This includes the naming and coding of
menus, action buttons, screen fields, etc.
It also includes standards for the placement
of screen objects and consistent use of other
GUI elements across applications.

Personalization &
Customization
GUI personalization is customization for
personal use
e.g. a user reorders and resizes columns in a
grid display and saves these changes as
preferences

GUI customization is an administrative

task of tailoring the software to different
groups of users
e.g. when the program operates differently
for novice and advanced users

Forgiveness
A good interface allows users to
experiment and make mistakes in a
forgiving way
Forgiveness encourages interface
exploration because the user is allowed
to take erroneous routes that can be
rolled back (even to the starting point if
necessary).
forgiveness implies facilities such as a multilevel undo operation and the ability to cancel
long-running actions

Feedback
The feedback guideline is a spin-off
of the first guideline the user in
control.
To be in control involves knowing
whats going on when the control is
temporarily with the program.
The developer should build visual
and/or audio cues for every user
event.
Hourglass, wait indicator

Aesthetics & Usability

Aesthetics is about visual
appeal.
Usability is about the ease,
simplicity, efficiency, reliability
in using the interface.

Aesthetics and Usability

The issues to consider include

the
the
the
the
the
the
the

fixation and movement of the human eye,

use of colors,
sense of balance and symmetry,
alignment and spacing of elements,
sense of proportion,
grouping of related elements, etc.
responsiveness of the system

Simplicity additional and related

guideline

Symmetry: Law of Proximity

How many
groups are
there in
this image?

How do you
know?

Symmetry: Law of Proximity

What do
the radio
buttons
apply to?
How do you
know?

Symmetry: Law of Proximity

What do
you see in
the image
to the
right?
What is it
really?

Color Example

Exercise Part 3
Choose three more scenarios for your
web-site based on your use cases.
Create a prototype (paper, HTML, Visio,
) for these scenarios and walk through
them.
Ensure that your GUI has enough detail
that a user can walk through the entire
process.
This may involve creating several
snapshots of your screen designs in
different states

Save your work!!!!!

Ten Golden Usability

Rules
A great set of guidelines created by Jakob

Nielsen in his book Usability Engineering.

1. Use simple and natural

dialog/language.
User interfaces should be simplified as
much as possible, since every additional
feature or item of information on a screen
is one more thing to learn, one more thing
to misunderstand, and one more thing to
search through. And the GUI should not
overdo it with colour (= Less is more).

Ten Golden Usability

Rules
2. Use language that fits the user
group.
The language should be based on
users language and not on the systemoriented terms. Translation from one
language to another is more than just
words. Time, currency, phrases, metaphors,
measurements, etc. must fit the culture of
the user group.

Ten Golden Usability

Rules
3. Minimise the load on short-term
memory.
Users should not have to remember
information from one part of the dialogue to
another. Instructions to the use of the
system should be visible or easily retrievable
whenever appropriate.

Ten Golden Usability

Rules
4. Make the graphical user interface
coherent and consistent.
The same action should always have the
same effect. Users will feel confident in using
the system, and they will be encouraged to
try out exploratory learning because they
already have part of the knowledge needed
to operate new parts of the system.

Ten Golden Usability

Rules
5. Give the ability to use shortcuts.
Accelerators unseen by the novices
may often speed up the interaction for the
experts users, such as: function keys,
command keys, macros, etc.

Ten Golden Usability

Rules
6. Give feedback to the user's actions.

The system should always keep users

informed about what is going on, through
appropriate feedback within reasonable time
i.e.
0.1 seconds user feels the system is responding
immediately;
1 s. is about the limit users flow of thought will stay
interrupted;
10 seconds is about the limit to keep users attention
focused on the dialogue; so if the user has to wait
longer the system should give feedback about the
waiting time.

Warning messages should be used when

Ten Golden Usability

Rules
7. Avoid error situations.
Ask the user if s/he really wants to do
the action especially if the action leads to
serious consequences. Avoid having too
similar commands in the interface.
Commands whose actions are opposite
should not be placed close to each other.

Ten Golden Usability

Rules
8. Give clear exit marks.
Users often choose actions by mistake
and will need a clearly marked emergency
exit to leave the unwanted state without
having to go through an extended
dialogue. Cancel should be offered when
the operation will take a long time. In the
navigation bars, the users should be able
to back up.

Ten Golden Usability

Rules
9. Give clear and understandable error

messages.
Simple rules for error messages:

should be phrased clearly and avoid obscure

codes
messages should be precise, not vague or
general
messages should constructively help the user
to solve the problem
messages should be polite and not intimidate
the user or put the blame explicitly on the
user
ILLEGAL, FATAL ACTION, JOB ABORTED!
phrases should not be used.

Ten Golden Usability

Rules
10. Give clear help and
understandable documentation.
Information should be easy to search, it
should be focused on the users task. List
the concrete steps that should be carried
out. The help manual should not be too
large.

Golden Rules for Bad UIs

Interesting and amusing reading
from the SAP Design Guild:
http://www.sapdesignguild.org/co
mmunity/design/golden_rules.as
p

Usability Testing
To identify problems
Typical users perform typical
tasks
Collect data
Objective: Task times, error rates
Subjective: Ratings, Comments,
Observations

Analyze data to identify

usability problems

Testing Your Application

Usability testing is ESSENTIAL to
the development process
First, navigate the application or
website yourself:
if youre a developer, it will help you to
identify problem areas and institute
changes/corrections
if youre doing the testing, it will
provide you with guidance about the
kinds of problems users are likely to
encounter

Preparation
Determine who and what to
evaluate
What questions do you want to
answer?

Be sure team members know

their roles
Involve a qualified person to
analyze results

Test the protocol

General Test Protocol

Introduction
Informed consent form
Training
Tasks
Questionnaire
Debriefing/Payment

Think-aloud Approach
Users should navigate throughout
the website and say aloud what
they are thinking and doing as they
do so
Users should understand they can
make both negative and positive
comments
Record all user comments
Develop an interview protocol to
guide your discussion with users
probe on issues of concern

Step 1: Plan the Tests

Determine how many users will
participate in the test
Estimate how many tests will be
required over the development
cycle
Determine usability objectives and
what functions will be tested
Develop evaluation measures
(timing data, error counts, rating
scales, etc.)

Step 2: Conduct the Tests

Provide introduction/overview for
users (reinforce the fact that the
application or website is being
tested; the users are NOT the
subjects of the test)
Provide training for users
Have observers watch, listen, and
take notes

Watch Users Work!!

Sometimes users will say they are
likely to do something, but their
actual behavior indicates otherwise.
Better to learn from observing direct
user behavior.
Watch them as they attempt to use
your application or website.
DTM (Duct-Tape Method)

Step 3: Debrief the Users

Collect observation/evaluation
data from users
Have users complete evaluation
forms
Allow users to express their
reactions about the test

Post-Test Work
Analyze data
Identify usability problems AND
SOLUTIONS
Identify problem severity
Identify software bugs (maybe)
Conduct second round of testing (if
necessary) and if time/resources
permit

Caveats
User preferences do not always
correspond to performance.
What users say is not always
what they do.
Consider all user groups.
Just conducting the test is not
enoughincorporate the
findings.

Exercise Part 4
Evaluate your GUI for your web-site
(consider the usability principles and
testing techniques).
Plan tests for at least the four scenarios
that you have previously created.
Get at least three users (people who are
NOT in this class) to walk through and
evaluate your design.
Perform your measurements, interviews,
observations, etc.

Exercise Part 5
Summarize what you have learned
in terms of usability principles.
Redesign your original web-site
concept.
But now do it explicitly considering
the design heuristics!
State how your design has changed
as a result of the testing.

Exercise Part 6
Summarize your evaluation
experience:
in a report and in a presentation

Your report/presentation must

detail:
what you planned and why
what you did: use cases, procedures, +
measures
your findings: what did you learn and

Preparing a Summary
Report
Describe your objectives, measures, and
procedures
Describe your results:
list key problems identified by users; there
is likely to be some uniformity among
responses (e.g., common concerns,
problems, issues)
sort problems by priority and frequency

Develop and implement solutions