Usability Essentials to Know

ISO 9241-11 defines usability
as –
the extent to which a product
can be used by specified users
to achieve defined goals with
effectiveness, efficiency and
satisfaction in a specified
context of use.
what is
usability?
ISO 9241 is a multi-part standard
from the International Organization
for Standardization (ISO) covering
ergonomics of human-computer
interaction. It is managed by the
ISO Technical Committee 159.

“the essence of usability is
to ensure that your
product works well: that a
person of average (or
even below average)
ability and experience can
use it --- for its intended
purpose without getting
hopelessly frustrated.”
- Steve Krug
author of Don’t make me think
in other
words…

If a web
site's
information
is hard to
read or
doesn't
answer
users' key
questions,
people leave.
why
usability?
If a web
site is
difficult
to use,
people
leave.
If the
homepage
fails to
clearly state
what a
company
offers and
what users
can do on
the site,
people
leave.
If users
get lost on
a web site,
they leave.
Because
People
Leave…

the five
qualitative
attributes

the
ultimate
experience
Brand experience
User experience
Useful design
Usability
+
Utility

O
u
t
s
i
d
e
w
e
b
s
i
t
e
I
n
s
i
d
e
w
e
b
s
i
t
e
Search usability

Scanning
We don’t read
through pages.
We skim!
Source: Don’t make me think
- Steve Krug

chunking
subheading
listings
short sentences
short paragraphs
active voice
no jargons
language
one-to-one
typeface
color contrast
links
line height
imagery
white space
visuals
How to
facilitate
scanning
behavior?

Satisficing*
We don’t make
optimal choices. We
satisfice!
Economist Herbert Simon coined the
term (a cross between satisfying and
sufficing) in Models of Man: Social
and Rational (Wiley, 1957).

We settle for the
first adequate
solution we can
find.
Given our
tendency to
satisfice, we’re
unlikely to end
up with anything
much better
than what we’re
willing to accept.
Source: HBR

Muddling
We don’t figure out
things.
We muddle
through!
Source: Don’t make me think
- Steve Krug

So, try creating intuitive web
design!
Capture this primitive “muddling”
behavior by enabling users to
freely channel towards a positive
outcome.
e.g. finding information, buying
online, sharing feedback, share
and likes, etc.)

A top level
checklist for
general
usability…

the
three
response
time limits
Direct manipulation is a
human–computer
interaction style which
involves continuous
representation of objects
of interest and rapid,
reversible, and
incremental actions and
feedback.

responsive
design
browser
and
platform
compatible
compatibility

clarity
consistency
accuracy
brand theme
color & contrast
 visual
visual cues

Top
heuristics
for
improving
usability

Statefulness
What does the
application look like
when a process is
loading?
How do users know
their requests were
successful?
Do users know where
they’ve been, where
they are, and where
they’ll be going?
Can users easily see
interruptions or
updates to the
application while
using it?

Error
prompts
What does an
error (user or
system) in the
application look
like?
If the error is
caused by the
system, is this
clearly conveyed
to the user?
If the error is caused
by the user, does the
message give the user
an easy way to rectify
it?
Does the application
prevent losing the
user’s state (e.g.
entered data) after an
error?

Error
prevention
Can users generate
errors in ways the
application can
prevent from the
start?
Can a set of options
be limited in a way
which does not take
away from the UX?
Does the application
provide inputs which
could substitute a
user’s own error-
prone input?

Emergency
exit
Do you provide an
emergency exit if the
users take an
undesired action?
Provide some simple
undo actions. For
example, forms should
have a “cancel” button.
Dialogues should have
close buttons. Allow
users to change their
passwords, undo
actions, and revisit
areas they’ve already
been.
Can operations be
undone?
Can users find where
they’ve been?
How far back are users
able/need to be able to
go?

Fitts’
Law
Predicts that the time
required to rapidly move to
a target area is a function of
the distance to the target
and the size of the target.
Create reasonably larger
targets going by the
availability of space.
Minimize cursor movement
For example, Pop-up
menus can usually be
opened faster than pull-
down menus.
Edges/corner of
computer screen are
easier to acquire with
mouse or touchpad.

User
help
Help should be small
enough to ignore but
large enough to find
when searching for it
Can the user get help
at any point?
Are help elements a
feature to those
needing help, but not
a burden to those
needing not?
Does my
documentation clearly
refer to the elements it
documents?

Anticipation
For example, When
I’m buying an iPhone
on Amazon, I’m also
shown links to get a
case and accessories.
What actions logically
follow common routes
in my application?
What auxiliary
components can I
sensibly offer to users in
accordance to their
desires/needs?
Anticipation is reflected
by the application’s use
of Fitts’ law, layout of
items, complementary
navigation and more.

More amazing sites @
http://www.awwwards.com/awards-of-the-day
http://www.bevisionare.com/
http://pixelgrade.com/demos/rosa/
Usability resources
http://www.nngroup.com/articles/
http://usability.com.au/
http://www.usability.gov/
Accessibility resources
http://achecker.ca/checker/index.php
http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Usability Essentials to Know

More Related Content

Usability Essentials to Know

Editor's Notes