2012
Designing for
Usability
© Danalyn Loitz Dashability Design
1
What is Usability?
2012
© Danalyn Loitz Dashability Design
2
Usability is a quality attribute that assesses
how easy user interfaces are to use.
Jakob Nielsen
http://www.useit.com/alertbox/20030825.html
2012
© Danalyn Loitz Dashability Design
3
Nielsen’s elements of
•Learnability:
usability How easy is it for users to accomplish
basic tasks the first time they encounter the design?
•Efficiency: Once users have learned the design, how
quickly can they perform tasks?
•Memorability: When users return to the design after a
period of not using it, how easily can they re-establish
proficiency?
•Errors: How many errors do users make, how severe
are these errors, and how easily can they recover from
the errors?
•Satisfaction: How pleasant is it to use the design?
2012
© Danalyn Loitz Dashability Design
4
Unraveling “user” speak
Users: The people who will be using the
deliverable (or product) to accomplish a
goal. Users are the deliverable's audience or
the product’s customers.
2012
© Danalyn Loitz Dashability Design
5
Unraveling “user” speak
Usability: A noun that embodies a variety of
factors involving human interaction with a
product. These can include ease of use,
efficiency, effectiveness, and user
satisfaction.
2012
© Danalyn Loitz Dashability Design
6
Unraveling “user” speak
User experience: The overall experience a
user has with a product that evokes a feeling
about the product, company, or brand.
2012
© Danalyn Loitz Dashability Design
7
Unraveling “user” speak
User-centered design: A design model that
considers user wants, needs, and goals
throughout the entire development process
with an ultimate objective of usability.
Often used when describing the software
development cycle or website design.
2012
© Danalyn Loitz Dashability Design
8
2012
© Danalyn Loitz Dashability Design
9
Designing for
Usability
what
people do well
…and what they don’t
2012
© Danalyn Loitz Dashability Design
10
How people read
2012
© Danalyn Loitz Dashability Design
11
Legibility vs.
Readability
An illegible type, set it how you will, cannot
be made readable. But the most legible of
types can be made unreadable if it is set to
too wide a measure, or in too large or too
small a size for a particular purpose.
Dowding 1957
2012
© Danalyn Loitz Dashability Design
12
Serif vs. sans serif
• the common rule is sans serif for headings
and serif for body text
• the idea is that the serifs “guide the eye”
• but…
there is no research that
supports this theory
2012
© Danalyn Loitz Dashability Design
13
Serif vs. sans serif
serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that
it makes much more
sense to argue in favour
of serif or sans serif
typefaces on aesthetic
grounds than on the
question of legibility.
sans serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that it
makes much more sense
to argue in favour of serif
or sans serif typefaces on
aesthetic grounds than
on the question of
legibility.
Alex Poole Usability Designer
2012
© Danalyn Loitz Dashability Design
www.alexpoole.info
14
Serif vs. sans serif
serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that
it makes much more
sense to argue in favour
of serif or sans serif
typefaces on aesthetic
grounds than on the
question of legibility.
sans serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that it
makes much more sense
to argue in favour of serif
or sans serif typefaces on
aesthetic grounds than
on the question of
legibility.
Alex Poole Usability Designer
2012
© Danalyn Loitz Dashability Design
www.alexpoole.info
15
Serif vs. sans serif
serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that
it makes much more
sense to argue in favour
of serif or sans serif
typefaces on aesthetic
grounds than on the
question of legibility.
sans serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that it
makes much more sense
to argue in favour of serif
or sans serif typefaces on
aesthetic grounds than
on the question of
legibility.
Alex Poole Usability Designer
2012
© Danalyn Loitz Dashability Design
www.alexpoole.info
16
Serif vs. sans serif
serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that
it makes much more
sense to argue in favour
of serif or sans serif
typefaces on aesthetic
grounds than on the
question of legibility.
sans serif
Finally, we should accept
that most reasonably
designed typefaces in
mainstream use will be
equally legible, and that it
makes much more sense
to argue in favour of serif
or sans serif typefaces on
aesthetic grounds than
on the question of
legibility.
Alex Poole Usability Designer
2012
© Danalyn Loitz Dashability Design
www.alexpoole.info
17
Computer screen vs. paper
• because screens emit light and are
constantly refreshing they are hard on the
eyes
• use fonts that are large enough to create
contrast between background and
foreground
2012
© Danalyn Loitz Dashability Design
18
white text on a black background
can be hard to read
too little contrast between the
background and text color is hard
to read
black text on a white background is
the easiest to read
2012
© Danalyn Loitz Dashability Design
19
Saccades and fixations
• our eyes move in quick, sharp jumps
with short periods of stillness between
them
• we look ahead during saccades but we
also look backward about 10 to 15
percent of the time
2012
© Danalyn Loitz Dashability Design
20
Line length
line length
• research has shown that people read
faster with a longer line length—about
100 characters
• this is due to interruption in saccade and
fixation at the end of a line, which adds to
reading time
2012
© Danalyn Loitz Dashability Design
21
Line length
• however, people prefer a shorter line
length—about 50 characters
• this is why long sections of text are often
broken up into columns (think newspaper)
• short or long?...it comes down to whether
or not reading speed is important for your
content or site
2012
© Danalyn Loitz Dashability Design
22
How people see
2012
© Danalyn Loitz Dashability Design
23
http://www.youtube.com/watch?v=IGQmdoK_ZfY
2012
© Danalyn Loitz Dashability Design
24
Inattention blindness
• people can miss changes in their visual
fields
• adding visual or audio clues can help
people notice a change in their visual field
2012
© Danalyn Loitz Dashability Design
25
Peripheral vs. central
vision
• Larson and Loschky 2009: central vision is
the most critical for specific object
recognition, but peripheral vision is used for
getting the gist of a scene
• put important content in the center of a page
but don’t ignore peripheral content as it will
help user’s form an overall impression
2012
© Danalyn Loitz Dashability Design
26
Peripheral vs. central
vision
• if you want users to focus on something
central—don’t put animation or blinking
elements in the periphery
• interesting research: when pictures of
fearful objects were placed in subject’s
peripheral vision the emotional reaction
took place 80 milliseconds sooner than
when placed in central vision
2012
© Danalyn Loitz Dashability Design
27
Color blindness
full-color vision
red-green color deficiency
2012
blue-yellow color deficiency
© Danalyn Loitz Dashability Design
28
Color and usability
• when using color for meaning or coding,
use a repeating pattern as well
• use yellows and browns instead of red,
green, or blue
• use http://colorfilter.wickline.org/ to view a
website the way someone who is color
blind will see it
2012
© Danalyn Loitz Dashability Design
29
How people
remember
2012
© Danalyn Loitz Dashability Design
30
Look over the list of terms
meeting
work
presentation
office
deadline
computer
papers
pen
2012
© Danalyn Loitz Dashability Design
staff
whiteboard
phone
chair
shelf
table
secretary
breakroom
31
Seven plus or minus two
• people can remember five to nine things
at once
• however…
this is a usability myth that
came out of a talk by George A.
Miller in 1956…there was no
research behind the number
2012
© Danalyn Loitz Dashability Design
32
Four is the magic number
• human memory studies have determined
that people can hold three to four items in
their working memory…
• …as long as they are not distracted
2012
© Danalyn Loitz Dashability Design
33
Chunking information
• using the magic number four…think
about grouping items so that people can
remember them
712-360-5507
phone numbers are designed in groups of
three and four
2012
© Danalyn Loitz Dashability Design
34
what did you remember?
write down the words you
remember from the list
2012
© Danalyn Loitz Dashability Design
35
Look over the list of terms
meeting
work
presentation
office
deadline
computer
papers
pen
2012
© Danalyn Loitz Dashability Design
staff
whiteboard
phone
chair
shelf
table
secretary
breakroom
36
Recall vs. recognition
• this is a recall test
• recognition is easier than recall
• when designing for usability, try not to
make people recall information
2012
© Danalyn Loitz Dashability Design
37
Inclusion errors
• some people will remember words not on
the list because they made an
association…all of the items had to do
with the workplace
• these are called inclusion errors
2012
© Danalyn Loitz Dashability Design
38
How people decide
2012
© Danalyn Loitz Dashability Design
39
Information is addictive
• dopamine effect: dopamine in the brain
increases curiosity which is then
rewarded by a feeling of satisfaction
• people are addicted to information
seeking, but will stop once they are
confident in their decisions
2012
© Danalyn Loitz Dashability Design
40
Choices
• people like choices but too many choices
may cause them to not choose at all
• limit choices to three or four (the magic
number again)
• if there are more than four choices try
using subsets for better usability
2012
© Danalyn Loitz Dashability Design
41
What people don’t do well
2012
© Danalyn Loitz Dashability Design
42
Stress causes more errors
• if a task is going to be difficult, be sure to
minimize distracting elements like color,
sound, or movement
• people under stress may not see
something on the screen and will repeat
an action over and over even if it doesn’t
work
2012
© Danalyn Loitz Dashability Design
43
Types of errors
• performance errors: mistakes made while
going through the steps of a procedure
• motor-control errors: mistakes made
while using controls of a device
• when usability testing, it can help to group
errors into these categories to help focus
the redesign process
2012
© Danalyn Loitz Dashability Design
44
Error recovery strategies
• systematic exploration: systematically
investigating what each menu does
• trial and error exploration: randomly
selecting menus and icons
• rigid exploration: repeating the same
action over and over hoping it will work
2012
© Danalyn Loitz Dashability Design
45
Error recovery
• people respond to errors with different
strategies depending on their age,
experience level, or other factors
• when doing usability testing, try to
determine which method of error
recovery your audience uses to help
predict issues or to focus on redesign
2012
© Danalyn Loitz Dashability Design
46
Design for usability
• when approaching usability design, there
is no need to reinvent the wheel
• there are established standards of design
that have their foundation in psychology
and physiology
2012
© Danalyn Loitz Dashability Design
47
Resources
• 100 Things Every Designer Needs to
Know About People
by Susan M. Weinschenk, PhD
• Universal Principles of Design
by Lidwell, Holden, and Butler
2012
© Danalyn Loitz Dashability Design
48
Creativity is allowing
yourself to make
mistakes.
Design is knowing which
ones to keep.
—Scott Adams
2012
© Danalyn Loitz Dashability Design
49
Approaching
a Usability Design
2012
© Danalyn Loitz Dashability Design
50
A design framework
Content design
Information design
User experience design
Purpose
Location
Aesthetics
Substance
Navigation
Future iterations
Presentation
Labeling
Searching
2012
© Danalyn Loitz Dashability Design
51
Content design
Purpose
• What user needs and goals are we trying
to meet?
Substance
• What content will be useful to the user?
• What content will help the user
accomplish their goal?
2012
© Danalyn Loitz Dashability Design
52
Content design
Presentation
• How will the content be presented and
formatted?
• What design elements will be used to
communicate information to the user?
• What design elements will be used within
specific content chunks to help the user
meet their goal?
2012
© Danalyn Loitz Dashability Design
53
Information design
Location
• Where will the content be located so the
user can access it?
• How will the content be managed?
Navigation
2012
• How will the user find their way through the
content?
• How will the user know where they’re at in
the content?
© Danalyn Loitz Dashability Design
54
Information design
Labeling
• How will you communicate with the user?
• How will menus, buttons, and links be
meaningful?
• Where will tooltips be used?
Searching
• How will the user find specific content?
• Will keywords or an index be used?
• Will there be a search function available?
2012
© Danalyn Loitz Dashability Design
55
User experience design
Aesthetics
• What will the tone and “feel” of the
deliverable be?
• What graphic design elements will be used
to convey this?
2012
© Danalyn Loitz Dashability Design
56
User experience design
Future iterations
• What systems are in place to improve
usability in the future?
• Will there be a feedback system?
• Will an iterative design process be
implemented with usability testing?
2012
© Danalyn Loitz Dashability Design
57
Good design and user
experience
Eliciting a positive user experience can be
helped along with good design—design
that is user-centered. If we are designing for
usability, then it follows that the user will be
left with a positive feeling, because they had
a positive experience with our deliverable.
I like to think of this as enjoyability.
2012
© Danalyn Loitz Dashability Design
58
2012
A design that is
usable,
engaging, and
enjoyable
means a happy
user,
happy
stakeholder,
and happy
© Danalyn Loitz Dashability Design
59