Beyond Usability
-
Upload
christina-wodtke -
Category
Business
-
view
4.275 -
download
0
Transcript of Beyond Usability
![Page 1: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/1.jpg)
Beyond Usability:User-Centered Design Strategies
- - - - - - - - - - - - - - -
Christina Wodtke :: [email protected] Carbon IQ User Experience Group http://www.carboniq.comtel: 415 824 7090
![Page 2: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/2.jpg)
Introduction to user-centered design
What is it?
NO!
It’s more than usability testing
![Page 3: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/3.jpg)
Introduction to user-centered design
What is it?
A method for understanding and considering the person who will experience your design while you design
![Page 4: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/4.jpg)
Introduction to user-centered design
What is it?
•A way to get user reactions and feedback to design
•Performed throughout the entire product development cycle
•Used to ensure a usable product
•Iterative
![Page 5: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/5.jpg)
Introduction to user-centered design
Test while you buildTest before you build
Test after you think you’re done
![Page 6: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/6.jpg)
Introduction: How does it work?
• Learn who the user is.
• Design for that user
• Create a rough prototype to test with the people who will use it.
• Revise based on what you learned.
• Build a prototype that is close to the finished thing.
• Test again.
• Make fixes based on what you learned.
• Ship the product. Include a feedback device so you can make
the next version even better.
![Page 7: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/7.jpg)
Introduction: Who does it?
• Internal User Research Specialist
![Page 8: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/8.jpg)
Introduction: Who does it?
• Internal User Research Specialist
• Outside Consultant
![Page 9: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/9.jpg)
Introduction: Who does it?
• Internal User Research Specialist
• Outside Consultant
• You
![Page 10: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/10.jpg)
Introduction: Why do it?
• Know if the product meets user needs before you build it
• Cheap to change a sketch
• Affordable to change a Photoshop comp
• Expensive to change fully coded product
• Customer service expensive as well
![Page 11: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/11.jpg)
Introduction: Why do it?
• Enable you to develop easy-to-use products
• Satisfy customers
• Decrease expenditures on technical support and training
• Advertise ease-of-use successes
• Improve brand perception
• Ultimately increase market share
Next: who are the users?
![Page 12: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/12.jpg)
Who are the users of the system?
Start by collecting pre-existing information
• Hunt down previous data (marketing demographics,
surveys, past usability tests)
• Hold stakeholder interviews
• Conduct customer service interviews
Next: Talk to the user: recruiting
![Page 13: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/13.jpg)
Finding the end user
Recruiting • Develop a portrait of the user (a la the persona)• Develop a screener based on this• Recruit typical end users
• Professional recruiter• Do it yourself
• Offer a consideration: cash or a gift• Watch for ringers
• Professional testers• Inarticulate users
![Page 14: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/14.jpg)
Not the end user
• Employees• Designers• Programmers• Market researchers• You
Next: Contextual Inquiry
![Page 15: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/15.jpg)
Talk to the end user: Questionnaires
What is it?
• Series of questions to be answered by users
• Mail,or on website
• Quantitative, rather than qualitative
• Good for gathering large amounts of facts
• Less reliable when dealing with opinions
People lie, and with very little reason
![Page 16: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/16.jpg)
Talk to the end user: Questionnaires
Two types:
• Factual
» Gender: male or female
» Do you drink coffee daily?
• Opinion
» From a scale from 1 to 5 where 1 is easy and 5 is difficult, how
hard was it to use this system?
» Would you buy this product?
![Page 17: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/17.jpg)
Talk to the end user: Questionnaires
Tips:
• Keep it short
• Do multiple surveys, rather than one long
• Phrase questions cautiously
• Use Likert scales
• Keep it anonymous, and state that in the beginning
• Allow single vote per IP
Next: Contextual Inquiry
![Page 18: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/18.jpg)
Talk to the end user: Contextual Inquiry
Onsite observation.
![Page 19: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/19.jpg)
Talk to the end user: Contextual Inquiry
What is it?
• Observe users in the environment they use your product
• Watch them use the product
• Understand their behavior by encouraging them to “think out loud”
• Remember to compare what they say and what they do.
![Page 20: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/20.jpg)
Talk to the end user: Contextual Inquiry
Technique: Thinking-out-loud
• Also used in usability testing, participatory design
• Users encouraged to voice their thoughts as they use the
product
• Try an exercise to illustrate
![Page 21: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/21.jpg)
Talk to the end user: Contextual Inquiry
Running a contextual inquiry
• Recruit a number of typical end-users• Visit the location where they would use your product• Ask them to show you how currently do their tasks• Ask them to accomplish those tasks with your product• Analyze your results
Next: personas
![Page 22: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/22.jpg)
Personas
![Page 23: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/23.jpg)
Persona development
Personas are:
• A key to user-centered design
• Not “The User” but “one particular user”
• Inform the entire design process
• Who are we designing for?
• What are we designing?
• How will we design it?
• Does this design work?
![Page 24: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/24.jpg)
Persona development/user profiling
Personas are:
• Archetypal users
• Conglomerates based on user data
• Built collaboratively by team
• Useful for keeping users front-of-mind
![Page 25: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/25.jpg)
Grace
(62/ female/ widowed/ Little Rock, AR.)“I like playing my favorite games online, but if I can play with friends, well that’s even better!” Personal Background: Her husband has passed on. She has two grown kids, both of whom live far away. She misses the kids, but has a fairly large circle of friends that she spends time with. Technical Proficiency Profile: Limited. Can use her browser and her email. MS Word confuses her, and she doesn’t like using it. Doesn’t know what an OS is. Tends to click yes if the browser prompts her to do anything, and will click wildly until things work.History with Shockwave and/or AtomFilms: Plays crossword puzzles daily and saves them. Plays card games, PhotoJam, but is offended by South Park cartoonsShockwave’s opportunity: If Grace can be convinced to participate in community activities, she will become a loyal user of the site. She needs to be sheltered from the sick and twisted content, however.
![Page 26: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/26.jpg)
Sarah
(22/ female/ single/ Washington, DC.)“I like AtomFilms because it’s just about the films” Personal Background: Liberal arts education at college in the Midwest Just graduated and moved to DC. Has a dog Likes music and art. Went to Lilith Fair. Sends out mass emails about causes she cares about, or jokes. Profession: Editor for non-profit organization ($35K/yr)History with Shockwave and/or AtomFilms: First came to AtomFilms because she did a search on Sundance content. She’s heard about the merger with AtomFilms, and is very worried about AtomFilms losing its edge, or begin buried in the Shockwave.com site. She thinks some controversial material might be hidden if AtomFilm gets merged with Shockwave. Shockwave’s opportunity: If Shockwave can prove they are trustworthy enough to coax her into signing up, she will become a loyal visitor and shortlist subscriber. If she feels clicking through ads will help Shockwave support independent film, she will.
![Page 27: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/27.jpg)
Scott
(17/ male/ single/ Shaumburg, IL.)“I want something cool and really on the edge. Something you can’t get on TV”#2 most common user Profession: Full time student (studies exercise and sport science)Personal Background: Youngest kid in family of five. Likes to be seen as a little rebellious. Excited to be in college, but not really brave enough yet to actually do anything rebellious, so uses Internet to express his self-image.History with Shockwave and/or AtomFilms: he’s been to Shockwave a few times, and usually clicks games as soon as the navigation bar loads. He likes playing arcade games, and “shoot ‘em up’s.” Spend two hours playing “King of the Hill paintball” recently.Shockwave’s opportunity: he is already hanging out in the games section regularly. If shockwave can introduce him to it’s sick and twisted material, it can keep him on the website longer, and use his tendency to send out links to spread the word.
![Page 28: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/28.jpg)
Persona development/user profiling
How to create:
• Summarize findings, distribute to stakeholders.
• Hold a work session with stakeholders & development team
to brainstorm personas.
• Prioritize and cull lesser personas to develop primary and
supporting personas.
![Page 29: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/29.jpg)
Prioritize personas
![Page 30: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/30.jpg)
Prioritize personas
primary
secondary
special
![Page 31: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/31.jpg)
Prioritize personas
primary
secondary
special
![Page 32: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/32.jpg)
Use personas
Keep them near
• Hang them on your wall
• Make poster, placemats, puppets
• Role-play personas
• Evaluate with them
Next: mental models
![Page 33: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/33.jpg)
Analyzing what you’ve learned.
Mental Models - diagram of the end user’s perception of product
• Study the user
• Map the mental model
• Design from the mental model
![Page 34: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/34.jpg)
Designing with what you’ve learned.
plan
task
infoexecution
info
evaluate
![Page 35: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/35.jpg)
A simple mental model
![Page 36: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/36.jpg)
A simple mental model
![Page 37: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/37.jpg)
A complex model
![Page 38: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/38.jpg)
Map the mental model
• Pencil and paper
• Write down how the user thinks
• Sketch it– don’t worry about being pretty
• Adjust by addingbusiness restraints
• Design from this model
• Share with developmentteam
![Page 39: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/39.jpg)
Designing with what you’ve learned
Persona Scenarios – the power of story telling
• Get your personas out
• Tell ideal user experience for one persona
• Adjust for business constraints
• Build for this scenario
![Page 40: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/40.jpg)
Example Persona Scenario
![Page 41: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/41.jpg)
Designing what you’ve learned.
Task analysis
• Step by step breakdown of scenarios
• Helps define interface/interaction needs
• Flushes out potential opportunities for errors
![Page 42: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/42.jpg)
Designing what you’ve learned
Task analysis
• Start with scenario
• Break it up into discreet tasks
• Subdivide into smaller steps
![Page 43: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/43.jpg)
Task analysis
“CHECK OUT” BECOMES
a. Select checkout
b. Sign in/sign up
c. Input shipping address
d. Input billing address
e. Input payment
f. Review order
g. Finalize checkout
Purchasing a purse at nordstroms.com might include the tasks:
1. locate purse
2. add purse to shopping cart
3. check out
![Page 44: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/44.jpg)
Task analysis
“CHECK OUT” BECOMES “INPUT BILLING ADDRESS” BECOMES
a. Select checkout d. Input billing address (prepopulate all fields from c.)
b. Sign in/sign up i. Input first name
c. Input shipping address ii. Input family name
d. Input billing address iii. Input street address
e. Input payment iv. Input street address
f. Review order v. Input state (dropdown of standard abbreviations)
g. Finalize checkout vi. Input country
And so on…
![Page 45: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/45.jpg)
Example Task analysis
![Page 46: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/46.jpg)
Designing for the end user - and with them!
Prototyping
• Simple low-fi mockup
• Often paper or simple html
• Early or not designed
• Quick, easy to revise
![Page 47: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/47.jpg)
Designing with the user
How to: Designing and Preparing a paper prototype test
• Required: paper, pens, tape, scissors and 3 people • Use paper and hand draw prototype
• One person acts as the computer, one as moderator, one
takes notes
• Ask users to accomplish tasks
• Make small changes as needed
Paper prototyping kit available at http://www.infodesign.com.au/usability
![Page 48: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/48.jpg)
Rapid prototyping
• Paper or html
• Very early stage design, or half complete design
• Allow time between tests to make changes
• Note where design gets better or worse
• You should be making fewer changes as the test continues
• The report is partly the final prototype
Next: card sorting
![Page 49: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/49.jpg)
Participatory Card Sort
• Way to understand user’s mental models and language
• Useful on sites with large amount of content
![Page 50: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/50.jpg)
How to: Running a successful card sort
• 50-75 pieces of content (not categories!)
• Provide as much information as possible while not
overwhelming
• Lay all content out on a large table, shuffled thoroughly
• Provide blanks for category labels
• Encourage thinking-out-loud
• Be helpful, but do not suggest or advise. Play psychiatrist.
• Collate results and look for patterns.
![Page 51: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/51.jpg)
Usability testing—at last– or at first?
Do testing while you still have time to fix problems
Do testing before a redesign
![Page 52: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/52.jpg)
Fighting for it.
EXCUSE ARGUMENT
“We have great designers.” “Designers are not users.”
“We don’t have the budget.” “Use discount methods.”
“We don’t have time.” “Use discount methods.”
“It’s never been done before; so there’s nothing to test.”
“Test prototypes.”
“Users don’t know what they want.” “Observe, don’t ask.”
“Everybody is our market.; that’s too many people to test”
“User-centered techniques help define target market.”
“We’ve done market research.” “Market research is not the same.”
You will have to fight. Prepare your arguments in advance.
![Page 53: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/53.jpg)
More reading
• Contextual Design
• Don’t Make Me Think
• Designing Web Usability
• Inmates are Running the Asylum
• Software For Use
All can be found at
http://www.eleganthack.com/reading/
(and more!)
![Page 54: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/54.jpg)
More reading
• Usable Web
http://www.usableweb.com
• Usability Toolbox
http://www.best.com/~jthom/usability/
• Ask Tog
http://www.asktog.com/
• Useit.com – Jakob!
http://www.useit.com
• UIE.com – Jared
http://www.uie.com
![Page 55: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/55.jpg)
Conclusion
• User-centered design works
• It makes good business sense
• It’s affordable
• It’s satisfying
![Page 56: Beyond Usability](https://reader030.fdocuments.net/reader030/viewer/2022013011/55493a91b4c905194d8b4bfa/html5/thumbnails/56.jpg)
Questions?
- - - - - - - - - - - - - - -
Christina Wodtke :: [email protected] Carbon IQ User Experience Group http://www.carboniq.comtel: 415 824 7090