© danalyn loitz dashability design20121 designing for usability

© Danalyn Loitz Dashability Design 12012

Designing for Usability


What is Usability?


Usability is a quality attribute that assesses how easy user interfaces are to use.

Jakob Nielsen http://www.useit.com/alertbox/20030825.html

2012

http://www.useit.com/alertbox/20030825.html


• 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


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


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



User experience: The overall experience a user has with a product that evokes a feeling about the product, company, or brand.

2012



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



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


2012 12

Legibility vs. Readability

http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces/

http://alexpoole.info/which-are-more-legible-serif-or-sans-serif-typefaces/

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 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


2012 14


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.




2012 15


serif





2012 16


serif





2012 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© 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


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


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


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


2012 22

How people see


2012 23

http://www.youtube.com/watch?v=IGQmdoK_ZfY© Danalyn Loitz Dashability

Design2012 24

http://www.youtube.com/watch?v=IGQmdoK_ZfY

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 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 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


2012 27

Peripheral vs. central vision

Color blindnessfull-color vision

red-green color deficiency blue-yellow color deficiency


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


2012 29

http://colorfilter.wickline.org/



How people remember


2012 30

Look over the list of terms

staffwhiteboardphonechairshelftablesecretarybreakroom

meetingworkpresentationofficedeadlinecomputerpaperspen


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


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


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


2012 34

what did you remember?

write down the words you

remember from the list


2012 35

Look over the list of terms

staffwhiteboardphonechairshelftablesecretarybreakroom

meetingworkpresentationofficedeadlinecomputerpaperspen


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


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


2012 38

How people decide


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


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


2012 41

What people don’t do well


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


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


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


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


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


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

51

A design framework

Content design Information design User experience design

PurposeSubstancePresentation

LocationNavigationLabelingSearching

AestheticsFuture iterations


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?


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?


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?


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?


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?


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?


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.


2012 59

A design that is usable, engaging, and enjoyable means a happy user, happy stakeholder, and happy technical communicator.

© danalyn loitz dashability design20121 designing for usability

Documents

readability slide

dont slide

usercentered design

sans serif typefaces

user experience

favour of serif

user satisfaction

website design