What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience...

35
What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS [email protected] MARCH 11, 2014 • YaleSites DrupalCamp

Transcript of What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience...

Page 1: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

What is USABILITY and

why should I care?Adriana Corona, Senior Experience DesignerUser Experience & Web Services @Yale [email protected]

MARCH 11, 2014 • YaleSites DrupalCamp

Page 2: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

2

USABILITY The extent to which something is easy to use for an intended audience

USABILITY TESTING

Observing someone use what you’ve made with the aim of improving usability

DISCOUNT USABILITY TESTING

Usability testing on a budget, with just as many benefits

Page 3: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Why should you care?• Better serve your users• Less frustration• More satisfaction• Cost effective, quick & easy

3

Page 4: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

4

123456

7

It always works!When to testWhom to testWhat to testHow to testAnd now what?

Demo

AGENDA

Page 5: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

It always works!

• You’re too “close” to your design• No website is perfect• Biggest problems are usually the

easiest to find

1

5

Page 6: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

When to test2

6

Page 7: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

When to test2

7

As early as possible(Before you think you should)

Page 8: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

But… but.. It’s not ready!!!

8

Even better!

Page 9: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

9

TESTING on Day 0

‘back-of-the-napkin usability test’

Hours spent: 0.25

Page 10: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

10

TESTING on Day 30

Hours spent: 40

Page 11: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

11

TESTING on Day 120

Hours spent: 160

Page 12: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

12

Page 13: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

When to test2

13

As early as possible(Before you think you should)

or…

Now!

Page 14: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Whom to test3

14

Users unfamiliar with your site

Don’t worry too much about “representative users” for initial tests

3 – 5 users per test

Page 15: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Why 3 – 5?

15

Biggest problems are usually the easiest to find

• Will be found by most people• Will prevent them from finding other

problems

Page 16: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Usability problems on your site*

16

* adapted from Steve Krug’s

“Don’t Make me Think”

(2006, p. 139)

Page 17: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

One Test8 Users

17

Total Problems found: 5

Page 18: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Two Tests3 Users per test

18

First test3 Users

Problems found: 3

Page 19: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Two Tests3 Users per test

19

Second test3 Users

Problems found: 5

Page 20: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Two Tests3 Users per test

20

Total Problems found: 8

Page 21: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

21

More evidence-based answer from the Nielsen Norman Group

http://www.nngroup.com/articles/how-many-test-users/

Why 3 – 5?

Page 22: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

What to test4

22

ImpressionsWhat do they think the site is about?What do they think they can do here?

Goal-based TasksIs the user successful in doing the

task?Were there confusing steps?Do they understand the terminology?

Page 23: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

How to test

1. Choose goal-based tasks2. Write scenarios3. Find a location and 3 participants4. Practice a script5. Test!

5

23

Page 24: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

What should a user be able to do on this site? (Why are they here?)_______________ ______________________________ ______________________________ ______________________________ ______________________________ _______________

24

1. Choose Goal-based Tasks

Page 25: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Task: Find Yale bikeshare locations.

Scenario:

25

2. Write Scenarios

You are a Yale employee working at 55 Whitney Ave. You’ve decided to be healthier and more ‘green,’ and your coworker told you about Yale’s bike rentals and suggested you find one nearby. Find out if there are Yale bikes near your work.

You are a Yale employee working at 55 Whitney Ave. You’ve decided to be healthier and more ‘green,’ and your coworker told you about Yale’s bike rentals and suggested you find one nearby. Find out if there are Yale bikes near your work.

Page 26: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

26

You are a Yale employee working at 55 Whitney Ave. You’ve decided to be healthier and more ‘green,’ and your coworker told you about Yale’s bike rentals and suggested you find one nearby. Find out if there are Yale bikes near your work.

You are a Yale employee working at 55 Whitney Ave. You’ve decided to be healthier and more ‘green,’ and your coworker told you about Yale’s bike rentals and suggested you find one nearby. Find out if there are Yale bikes near your work.

1

1 Provides context

2

2 Goal-based task

No leading or domain-specific terms.Don’t say “bikeshare” or “Zagster”

Page 27: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

27

3. Find a Location & Participants

• Stake out where your users are• Print flyers• Ask your friends and neighbors• Offer incentives

Page 28: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Write your own, or use a template: e.g., http://sensible.com/

28

4. Practice a script

• We want to see if our site works well for users. It should take about __ minutes

• We are testing the site, and not you! Don’t worry if you make any mistakes, we’re hear to learn from your experience

• You won’t hurt our feelings, our aim is to improve the site.• Please try to think out loud as you do the tasks• Ask me if you have questions, but understand that I may

not answer them immediately because we’re trying to see how people use the site on their own

• We are recording the session. Only our team will see this recording (Consent form)

• We want to see if our site works well for users. It should take about __ minutes

• We are testing the site, and not you! Don’t worry if you make any mistakes, we’re hear to learn from your experience

• You won’t hurt our feelings, our aim is to improve the site.• Please try to think out loud as you do the tasks• Ask me if you have questions, but understand that I may

not answer them immediately because we’re trying to see how people use the site on their own

• We are recording the session. Only our team will see this recording (Consent form)

Page 29: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

29

5. Test!• Have a bookmark of your site• Prepare screen capture software• Have scenarios in different cards• Read script, sign consent form if needed• Start screen recorder• Open your site• Start with impression test

“Tell me what you think this site is for? What things can you do here? Don’t click on things yet, just narrate your thoughts”

• Run through the scenarios• Thank them. Give incentive• Stop screen recorder

Don’t take notes

!

Page 30: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

And now what?6

30

List the 3 most critical usability problems

Try to fix them!

Rinse & repeat

Page 31: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Further Reading

31

Page 32: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

Thanks!

Adriana Corona, Senior Experience DesignerUser Experience & Web Services @Yale [email protected]

MARCH 11, 2014 • YaleSites DrupalCamp

Page 33: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

33

1.Slide 8: “Frustration” photo used under creative license from Sybren Stüvel (http://www.flickr.com/photos/sybrenstuvel/)

1.Slide 10: “website” photo used under creative license from tourist_on_earth (http://www.flickr.com/photos/tourist_on_earth/)

1.Slides 13-17: Krug, S. (2000). Don't make me think!: a common sense approach to Web usability. Pearson Education India.

CREDITS

Page 34: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

34

FEEDBACK

drupalcamp.yalesites.yale.edu/session-feedback

Page 35: What is USABILITY and why should I care? Adriana Corona, Senior Experience Designer User Experience & Web Services @Yale ITS adriana.corona@yale.edu MARCH.

DEMO7

35