Post on 16-Dec-2015
© Danalyn Loitz Dashability Design 12012
Designing for Usability
© Danalyn Loitz Dashability Design 22012
What is Usability?
© Danalyn Loitz Dashability Design 3
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 4
• Learnability: 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
Nielsen’s elements of usability
© Danalyn Loitz Dashability Design 5
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 6
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
Unraveling “user” speak
© Danalyn Loitz Dashability Design 7
User experience: The overall experience a user has with a product that evokes a feeling about the product, company, or brand.
2012
Unraveling “user” speak
© Danalyn Loitz Dashability Design 8
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
Unraveling “user” speak
© Danalyn Loitz Dashability Design 92012
© Danalyn Loitz Dashability Design 10
Designing for Usability
2012
what people do well…and what they
don’t
How people read
© Danalyn Loitz Dashability Design
2012 11
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
© Danalyn Loitz Dashability Design
2012 12
Legibility vs. Readability
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
© Danalyn Loitz Dashability Design
2012 13
serifFinally, 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 serifFinally, 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 www.alexpoole.info
© Danalyn Loitz Dashability Design
2012 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 serifFinally, 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 www.alexpoole.info
© Danalyn Loitz Dashability Design
2012 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 serifFinally, 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 www.alexpoole.info
© Danalyn Loitz Dashability Design
2012 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 serifFinally, 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 www.alexpoole.info
© Danalyn Loitz Dashability Design
2012 17
Serif vs. sans serif
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© Danalyn Loitz Dashability
Design2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 20
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
© Danalyn Loitz Dashability Design
2012 21
Line length
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
© Danalyn Loitz Dashability Design
2012 22
How people see
© Danalyn Loitz Dashability Design
2012 23
http://www.youtube.com/watch?v=IGQmdoK_ZfY© Danalyn Loitz Dashability
Design2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 26
• 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
© Danalyn Loitz Dashability Design
2012 27
Peripheral vs. central vision
Color blindnessfull-color vision
red-green color deficiency blue-yellow color deficiency
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 29
How people remember
© Danalyn Loitz Dashability Design
2012 30
Look over the list of terms
staffwhiteboardphonechairshelftablesecretarybreakroom
meetingworkpresentationofficedeadlinecomputerpaperspen
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 33
Chunking information
• using the magic number four…think about grouping items so that people can remember them712-360-5507
phone numbers are designed in groups of three and four
© Danalyn Loitz Dashability Design
2012 34
what did you remember?
write down the words you
remember from the list
© Danalyn Loitz Dashability Design
2012 35
Look over the list of terms
staffwhiteboardphonechairshelftablesecretarybreakroom
meetingworkpresentationofficedeadlinecomputerpaperspen
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 38
How people decide
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 41
What people don’t do well
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 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
© Danalyn Loitz Dashability Design
2012 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© Danalyn Loitz Dashability
Design2012 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
© Danalyn Loitz Dashability Design
2012 48
Creativity is allowing yourself to make mistakes.Design is knowing which ones to keep.
—Scott Adams© Danalyn Loitz Dashability
Design2012 49
2012 © Danalyn Loitz Dashability Design
50
Approaching a Usability Design
2012 © Danalyn Loitz Dashability Design
51
A design framework
Content design Information design User experience design
PurposeSubstancePresentation
LocationNavigationLabelingSearching
AestheticsFuture iterations
© Danalyn Loitz Dashability Design
2012 52
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?
© Danalyn Loitz Dashability Design
2012 53
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?
© Danalyn Loitz Dashability Design
2012 54
Information design
Location• Where will the content be located so the user can access it?• How will the content be managed?
Navigation•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
2012 55
Information designLabeling•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?
© Danalyn Loitz Dashability Design
2012 56
User experience design
Aesthetics•What will the tone and “feel” of the deliverable be?•What graphic design elements will be used to convey this?
© Danalyn Loitz Dashability Design
2012 57
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?
© Danalyn Loitz Dashability Design
2012 58
Good design and user
experienceEliciting 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.
© Danalyn Loitz Dashability Design
2012 59
A design that is usable, engaging, and enjoyable means a happy user, happy stakeholder, and happy technical communicator.