Prototypes + Guerrilla Usability Testing
Session 4 - April 24, 2014
School of Visual Concepts - UX1
http://svc-ux1.leannag...
Week 1: Introduction, process and interviewing
what is UX? what does “doing UX” look like?
Week 2: Analysis and storyboard...
Agenda
● Discussion: Sketches
● Prototyping
● Guerrilla usability
● Studio: Make a POP prototype
Let’s take a look at what we’re working on!
Pushup app sketches from Daria
Sketch from Colleen’s project (in other window)...
PROTOTYPING
From Bill Buxton’s “Sketching the User Experience”
Shit or get off the pot.
Sketches and prototypes are both
instantiations of the design concept.
However they serve different
purposes, and therefor...
PROTOTYPES HAVE PURPOSES
Working through a design
Shared communication
Selling your idea internally
Usability testing
Gaug...
WORKING THROUGH A DESIGN
Example: 93 Stars
From Bill Buxton’s “Sketching the User Experience”
Sketch a Move - https://vimeo.com/5125096
CREATE SHARED COMMUNICATION
Prototype example: ARMuseum. We used a sliding paper prototype to show how the augmented
reality overlay would change as t...
Example: TMO DR
Clay model of an Audi. Industrial designers, architects
and engineers build models to align investors and
stakeholders bef...
Prototype example: TMO Coverage Kiosk
USABILITY TESTING
Jeff Hawkins tested the PalmPilot’s design with his model, using a chopstick for a stylus. He took
prete...
http://leannagingras.com/prototypes/Videojet/Usability%20Test%20Prototype/Prototype/
Pong prototype, 1972.
From Wikipedia: “Dabney wanted the game
to "boo" and "hiss" when a player lost a
round. Alcorn had l...
One of ARMuseum’s more ambitious
features was to represent popular
walking paths through the museum
over time.
We used thi...
TOOLS
There are dozens and dozens out there. Use what fits the job. Here are
some very basic and cheap options:
● Paper pr...
http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes
FIDELITY
The fidelity should
match the degree of
finality. Sketchy and
unfinished is fast, easy
to iterate and invites
mor...
ONLY PROTOTYPE WHAT YOU NEED
Scenario 3: Find Performance Details for a Particular Printer.
Goals
■ Review the way the par...
8 PRINCIPLES OF PROTOTYPING
Understand the audience and intent
Plan a little—prototype the rest
Set expectations
You can s...
PROTOTYPING POP QUIZ
Your R&D team wants to develop a “smart” ball that you can play augmented
reality games with, such as...
GUERRILLA USABILITY
VALIDATE EARLY & OFTEN
The earlier you start getting
feedback about your design,
the better.
Don’t wait for perfect; get
y...
GUERRILLA USABILITY: PLANNING
Test goals:
● specific things you want to learn from this
● “do people understand what the c...
GUERRILLA USABILITY: EXECUTION
TIPS
● usability testing is actually an interview in disguise
● ask them to think aloud and...
93 STARS GUERRILLA USABILITY
TEST
Guerrilla usability test of the 93 Stars POP Prototype. This is as informal as it gets -...
93 STARS GUERRILLA TEST
VIDEOS
https://www.youtube.com/watch?v=tuB0PGCKFZkhttps://www.youtube.com/watch?v=1qUEpKYpvGY
93 STARS GUERRILLA TEST
FINDINGS
Bill:
● Improve setup: “pretend you’re sitting down to a meal”
● Not clear what the stars...
Studio: Make a POP prototype
Get into groups of 3-4.
Pick one of last week’s two app scenarios and build a POP prototype.
...
Timeline
Pick a concept (10 minutes)
Write a task scenario (5 minutes)
Break the scenario down into steps
Create rough ske...
Homework: Make a prototype
Sketch out one key workflow
Make a prototype in anything you want: paper, POP, Axure, Balsamiq....
Session 4: Prototyping + Guerrilla Usability Testing
Session 4: Prototyping + Guerrilla Usability Testing
Session 4: Prototyping + Guerrilla Usability Testing
Upcoming SlideShare
Loading in …5
×

Session 4: Prototyping + Guerrilla Usability Testing

1,253 views

Published on

It’s week 4 and we’re going to dive into the basics of prototyping! And since a good prototype always has a purpose, we’re going to dip our toe into guerrilla usability testing and learn just enough to understand what we need to prototype.

These are lecture slides for my UX class at the School of Visual Concepts. Check out the course site at http://svc-ux1.leannagingras.com/.

Published in: Design, Technology

Session 4: Prototyping + Guerrilla Usability Testing

  1. 1. Prototypes + Guerrilla Usability Testing Session 4 - April 24, 2014 School of Visual Concepts - UX1 http://svc-ux1.leannagingras.com
  2. 2. Week 1: Introduction, process and interviewing what is UX? what does “doing UX” look like? Week 2: Analysis and storyboards how do we make sense of the bigger picture? Week 3: User-centered design techniques how do we go from good concepts to good designs? Week 4: Prototyping and guerrilla testing how do we communicate and test design? Week 5: Measuring UX how do we measure UX impact and make UX actionable? ** tentative schedule. adjust to taste
  3. 3. Agenda ● Discussion: Sketches ● Prototyping ● Guerrilla usability ● Studio: Make a POP prototype
  4. 4. Let’s take a look at what we’re working on! Pushup app sketches from Daria Sketch from Colleen’s project (in other window) Joybroto - project screen Anybody else?
  5. 5. PROTOTYPING
  6. 6. From Bill Buxton’s “Sketching the User Experience”
  7. 7. Shit or get off the pot.
  8. 8. Sketches and prototypes are both instantiations of the design concept. However they serve different purposes, and therefore are concentrated at different stages of the design process. Sketches dominate the early ideation stages, whereas prototypes are more concentrated at the later stages where things are converging within the design funnel. –Bill Buxton, Sketching User Experiences
  9. 9. PROTOTYPES HAVE PURPOSES Working through a design Shared communication Selling your idea internally Usability testing Gauging technical feasibility and value From Protoyping: A Practitioner's Guide
  10. 10. WORKING THROUGH A DESIGN
  11. 11. Example: 93 Stars
  12. 12. From Bill Buxton’s “Sketching the User Experience”
  13. 13. Sketch a Move - https://vimeo.com/5125096 CREATE SHARED COMMUNICATION
  14. 14. Prototype example: ARMuseum. We used a sliding paper prototype to show how the augmented reality overlay would change as the user panned their phone across the room. We took this approach because it was difficult to communicate this with static images.
  15. 15. Example: TMO DR
  16. 16. Clay model of an Audi. Industrial designers, architects and engineers build models to align investors and stakeholders before investing in costly builds. SELL YOUR IDEA INTERNALLY
  17. 17. Prototype example: TMO Coverage Kiosk
  18. 18. USABILITY TESTING Jeff Hawkins tested the PalmPilot’s design with his model, using a chopstick for a stylus. He took pretend notes in meetings, and counted the steps it took to perform common tasks.
  19. 19. http://leannagingras.com/prototypes/Videojet/Usability%20Test%20Prototype/Prototype/
  20. 20. Pong prototype, 1972. From Wikipedia: “Dabney wanted the game to "boo" and "hiss" when a player lost a round. Alcorn had limited space available for the necessary electronics and was unaware of how to create such sounds with digital circuits. After inspecting the sync generator, he discovered that it could generate different tones and used those for the game's sound effects.[3][7] … The prototype impressed Bushnell and Dabney so much that they felt it could be a profitable product and decided to test its marketability.[3] In September 1972, Bushnell and Alcorn installed the Pong prototype at a local bar, Andy Capp's Tavern.” FEASIBILITY
  21. 21. One of ARMuseum’s more ambitious features was to represent popular walking paths through the museum over time. We used this more visually detailed, hi- fi prototype to more clearly communicate our vision and enable brainstorming with tech folks about how we could make it happen.
  22. 22. TOOLS There are dozens and dozens out there. Use what fits the job. Here are some very basic and cheap options: ● Paper prototypes ● POP iPhone app ● Balsamiq ● Fluid
  23. 23. http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes
  24. 24. FIDELITY The fidelity should match the degree of finality. Sketchy and unfinished is fast, easy to iterate and invites more discussion and critique. Shown: Balsamiq wireframe
  25. 25. ONLY PROTOTYPE WHAT YOU NEED Scenario 3: Find Performance Details for a Particular Printer. Goals ■ Review the way the participant searches for products, and finds specific product performance specifications. ■ Determine if the nomenclature reflects the user’s expectation for the content areas. Possible Paths ■ Path 1: Homepage > Our Solutions > Navigation: Small Character Ink Jet ■ Path 2: Homepage > Our solutions > Printers > Small Character Ink Jet > 1550 Product page Tasks ■ Now we would like to know where you would expect to find performance details. Please show us where to find the maximum line speed for our new small character printer, the Videojet 1550 printer. The pages I built for this prototype was based on what I needed for the usability test:
  26. 26. 8 PRINCIPLES OF PROTOTYPING Understand the audience and intent Plan a little—prototype the rest Set expectations You can sketch It's a prototype—not the Mona Lisa If you can't make it, fake it Prototype only what you need Reduce risk—prototype early and often Source: 8 Principles of Prototyping by Todd Zaki Warfel
  27. 27. PROTOTYPING POP QUIZ Your R&D team wants to develop a “smart” ball that you can play augmented reality games with, such as Catch or Capture the Flag. How would you prototype for these scenarios? ● You want to make sure that target users such as teenagers or college students like the concept. ● You want to make sure it’s easy to use the iPhone app to program the ball. ● The ball’s hardware team and iPhone’s design/dev team need to collaboratively build the interaction between the two devices. ● You want to convince your company’s C-level executives to fund your project. ● You want to fine-tune the gameplay mechanics before you finalize it and take it to market.
  28. 28. GUERRILLA USABILITY
  29. 29. VALIDATE EARLY & OFTEN The earlier you start getting feedback about your design, the better. Don’t wait for perfect; get your rough prototypes in front of users ASAP
  30. 30. GUERRILLA USABILITY: PLANNING Test goals: ● specific things you want to learn from this ● “do people understand what the camera icon does?” Tasks: ● give them a specific task, don’t just say “try it out” ● word tasks as scenarios - “imagine you need a new ski outfit” ● don’t tell them how to do it - ask them to show you how to do it
  31. 31. GUERRILLA USABILITY: EXECUTION TIPS ● usability testing is actually an interview in disguise ● ask them to think aloud and narrate what they’re doing ● “describe what you’re looking at” ● “what did you do there?” ● “what were you expecting to happen?” ● if they click on something that you didn’t build? ask them what they expected
  32. 32. 93 STARS GUERRILLA USABILITY TEST Guerrilla usability test of the 93 Stars POP Prototype. This is as informal as it gets - but still informative! TEST GOALS: Do people understand the app concept? Does the app’s design make sense? Does the basic workflow of documenting and rating a new meal make sense? TASK: This is a concept for an app that lets you track your meals. Pretend you’re sitting down to a big meal and show me how you would use it.
  33. 33. 93 STARS GUERRILLA TEST VIDEOS https://www.youtube.com/watch?v=tuB0PGCKFZkhttps://www.youtube.com/watch?v=1qUEpKYpvGY
  34. 34. 93 STARS GUERRILLA TEST FINDINGS Bill: ● Improve setup: “pretend you’re sitting down to a meal” ● Not clear what the stars represented (“this was pretty good”) ● Trends button looks like a turtle ● Trends screen: Unsure what the different color stars do ● Create clearer confirmation after photo was taken Christina: ● not clear what the camera icon does ● need clearer confirmation after photo is taken ● not clear that this is a healthy eating app (“stars” = “delicious”) ● Trends button looks like a Settings gear icon ● Trends screen is overall confusing, especially with color coding This informal model of guerrilla testing lends itself well to iterative prototyping. It’s relatively straightforward to pick out big problems and use paper, tape and scissors to tweak the prototype before inflicting it on the next participant.
  35. 35. Studio: Make a POP prototype Get into groups of 3-4. Pick one of last week’s two app scenarios and build a POP prototype. We’ll share our prototypes and discuss!
  36. 36. Timeline Pick a concept (10 minutes) Write a task scenario (5 minutes) Break the scenario down into steps Create rough sketches of screens Start constructing your prototype Start POPping your prototype Present Discuss
  37. 37. Homework: Make a prototype Sketch out one key workflow Make a prototype in anything you want: paper, POP, Axure, Balsamiq... Put it in front of some people and get feedback!

×