Tweet
Tweet

Slide 1

Slide 1 text

usability testing regan davis BUILD | deep dive #2 PYROS

Slide 2

Slide 2 text

regan davis product leader from chicago, il BACKGROUND EIR @ 1871 Sr. Director of Product @ SpotHero Advisor, Coach regandavis.com VP of Product @ Jellyvision VP of Product @ info.com

Slide 3

Slide 3 text

case study regandavis.com

Slide 4

Slide 4 text

bill nguyen 7x founder, Color app regandavis.com an instant feed of photos of everyone around you Color app (2011):

Slide 5

Slide 5 text

bill nguyen 7x founder, Color app regandavis.com $41 million raised: all before launching and any users

Slide 6

Slide 6 text

regandavis.com inundated with negative reviews

Slide 7

Slide 7 text

regandavis.com “Within 30 minutes I realized, ‘Oh my God, it’s broken. Holy s——, we totally f——ed up.’ ” —Bill Nguyen, Founder of Color

Slide 8

Slide 8 text

regandavis.com

Slide 9

Slide 9 text

regandavis.com usability • Learnability • Efficiency • Memorability • Errors • Satisfaction let’s talk (credit: Nielsen Group)

Slide 10

Slide 10 text

regandavis.com usability • Learnability • Efficiency • Memorability • Errors • Satisfaction let’s talk

Slide 11

Slide 11 text

regandavis.com usability • Learnability • Efficiency • Memorability • Errors • Satisfaction let’s talk

Slide 12

Slide 12 text

good vs bad ux regandavis.com

Slide 13

Slide 13 text

(credit: Adobe) regandavis.com terminology

Slide 14

Slide 14 text

regandavis.com terminology • Use clear, understandable language. • Match your language to the terms and definitions your users are comfortable with.

Slide 15

Slide 15 text

(credit: Adobe) regandavis.com hierarchy

Slide 16

Slide 16 text

regandavis.com hierarchy • Structure information in a way that makes it clear what’s most important. • Make ‘call-to-action’ buttons (CTAs) easy to distinguish and press.

Slide 17

Slide 17 text

(credit: Adobe) regandavis.com explain/reduce errors

Slide 18

Slide 18 text

regandavis.com explain/reduce errors • Provide clear messaging of an error. • Avoid errors by: • Hiding irrelevant options that cause errors • Providing clear examples of what success looks like • Using placeholder text • Using consistent patterns, symbols, and placement

Slide 19

Slide 19 text

regandavis.com accessible Accessibility: making your product work for all types of users. 15-20% of users have some form of disability. usabledesign design is

Slide 20

Slide 20 text

regandavis.com accessible design (credit: Monsido.com)

Slide 21

Slide 21 text

testing regandavis.com

Slide 22

Slide 22 text

is the most expensive way to test your idea. regandavis.com building production-quality software cheap by comparison research is

Slide 23

Slide 23 text

(credit: Teresa Torres, Product Talk) regandavis.com ladder of evidence Time and Effort Value of Learning listen specific stories of the past what they’ve done in the past what they would do watch observe them in a real-life instance ask to show you what they did

Slide 24

Slide 24 text

regandavis.com usability testing Goal: to find out if your users can effectively complete the task that they set out to do. NOT: do they ‘like this color’?

Slide 25

Slide 25 text

regandavis.com usability testing • A plan. • A prototype or sketch. • A way of note-taking. • A timer or watch. • Four to five participants of each user type • A facilitator. • An observer. STUFF NEEDED PEOPLE NEEDED (credit: Erika Hall, Just Enough Research)

Slide 26

Slide 26 text

recording requires consent regandavis.com (app: otter.ai) “Are you comfortable with me recording this conversation so that we can refer to it later? We won’t plan on sharing any of your statements outside of [our company].”

Slide 27

Slide 27 text

(credit: Erika Hall, Just Enough Research) regandavis.com The greatest danger is… “…that [founders won’t] sit idly by while their creation fails to perform or elicits derision from the participant.”

Slide 28

Slide 28 text

try to avoid “If you click that over in the bottom right…” “Do you like that you can…” regandavis.com hints leading questions filling silence user self-blame (credit: Erika Hall, Just Enough Research)

Slide 29

Slide 29 text

regandavis.com take note. Frustration, non-verbal responses, and quotes How long it takes to complete the task. If the user failed to complete any step or task. Any terminology that presented a stumbling block. (credit: Erika Hall, Just Enough Research)

Slide 30

Slide 30 text

(Source: “How do you know when a design fails a usability test?”, webdesignerdepot.com) regandavis.com

Slide 31

Slide 31 text

regandavis.com how many interviews? Only 4-5 interviews per round will find ~80% of the issues. Then, fix the biggest issues and test again. (Source: Nielsen Norman Group)

Slide 32

Slide 32 text

regandavis.com learn & iterate (credit: ”The Founder” movie clip) our goal is to

Slide 33

Slide 33 text

examples regandavis.com

Slide 34

Slide 34 text

regandavis.com slide deck

Slide 35

Slide 35 text

regandavis.com

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

regandavis.com mockup + video

Slide 38

Slide 38 text

regandavis.com paper prototype

Slide 39

Slide 39 text

competitor site

Slide 40

Slide 40 text

let’s try it.

Slide 41

Slide 41 text

regandavis.com Task #1 You want to see what delivery options are near you. QUESTIONS • What do you see on the screen? • What do you think this is for? Link: lettuce.com

Slide 42

Slide 42 text

how to know what to test. regandavis.com

Slide 43

Slide 43 text

regandavis.com user story mapping • A technique to visually break down user stories into prioritized paths for delivering your MVP • and… A technique to generate your usability test plan

Slide 44

Slide 44 text

regandavis.com

Slide 45

Slide 45 text

regandavis.com (Source: Teresa Torres, Continuous Discovery Habits) mapping assumptions

Slide 46

Slide 46 text

let’s try it. regandavis.com

Slide 47

Slide 47 text

regandavis.com ex: streaming service (Source: Teresa Torres, Continuous Discovery Habits) Assumptions of: • Value • Usability • Feasibility ‘I want to watch live sports’

Slide 48

Slide 48 text

recap regandavis.com

Slide 49

Slide 49 text

regandavis.com “Within 30 minutes I realized, ‘Oh my God, it’s broken. Holy s——, we totally f——ed up.’ ” —Bill Nguyen, Founder of Color

Slide 50

Slide 50 text

Diagram courtesy of Jussi Pasanen, with acknowledgements to Aarron Walter, Ben Tollady, Ben Rowe, Lexi Thorn and Senthil Kugalur. regandavis.com

Slide 51

Slide 51 text

(credit: Teresa Torres, Product Talk) regandavis.com ladder of evidence Time and Effort Value of Learning listen specific stories of the past what they’ve done in the past what they would do watch observe them in a real-life instance ask to show you what they did

Slide 52

Slide 52 text

regandavis.com usability testing • A plan. • A prototype or sketch. • A way of note-taking. • A timer or watch. • Four to five participants of each user type • A facilitator. • An observer. STUFF NEEDED PEOPLE NEEDED (credit: Erika Hall, Just Enough Research)

Slide 53

Slide 53 text

try to avoid “If you click that over in the bottom right…” “Do you like that you can…” regandavis.com hints leading questions filling silence user self-blame (credit: Erika Hall, Just Enough Research)

Slide 54

Slide 54 text

regandavis.com competitor usability options mockups paper

Slide 55

Slide 55 text

(Source: “How do you know when a design fails a usability test?”, webdesignerdepot.com) regandavis.com

Slide 56

Slide 56 text

regandavis.com (Source: Teresa Torres, Continuous Discovery Habits) mapping assumptions

Slide 57

Slide 57 text

regandavis.com assignment: 1. Take your user story map from Deep Dive #1 and underneath each step, add some assumptions. 2. Write out a usability test with tasks to complete • Either use your own prototype, or pick an existing product / competitor. Next week, you’ll run a user test with each other in breakouts. BUILD | deep dive #2

Slide 58

Slide 58 text

questions? NEXT STEPS regandavis.com/speaker #pyros_build on slack @regan on slack regandavis.com download feedback contact