USABILITY AND
USER INTERFACE DESIGN
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:
[Link]
[Link]
[Link]
[Link]
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:
[Link]
articles/[Link]
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.
