The document discusses usability and user-centered design in web development, emphasizing the importance of usability testing. It outlines five practical methods for improving usability: task-based usability tests, first click tests, five-second tests, comprehension tests, and online surveys. The document encourages developers to conduct tests regularly and adapt websites based on user feedback to enhance user experience.

1. Volkside
Interaction & information design,
Interaction and information design
User experience and usability
User experience and usability
Usability testing – Just Do It
Five methods for improving usability in-house
Jussi Pasanen, April 2011
1

2. About Volkside
We help you listen to your users and create
them engaging online experiences
Products: Naview and Wirify
Founded in 2008
2

3. What is usability?
Usability measures how easy user interfaces
are to use
It’s also the methods for improving ease-of-use
during the design process
3

4. 4

5. 5

6. 6

7. 7

8. 8

9. Usability is about focusing
on the users’ best interests
9

10. Are we designing or testing?
User-centred design: Involve users throughout
the design process to understand and meet
their needs
Usability evaluation: Review and test the
usability of an existing website
10

11. What is usability testing?
Usability testing is observing and listening to
your users whilst they interact with your
website
11

12. Why do usability testing? Why
See how people actually use your website for
its key purposes and find and fix issues they
run into
12

13. Typical web project
Pre-project Design and development Live site
Kick off
Launch
Usability testing
13

14. Typical web project with usability
Pre-project Design and development Live site
Kick off
Launch
Usability testing
14

15. Web project in an ideal world
Pre-project Design and development Live site
Kick off
Launch
Usability testing
15

16. The traditional usability test …
Participant, facilitator, maybe note-taker
Usability lab with one-way mirror
Video cameras and screen recording
Lots of stakeholders watching
Detailed reports and long turnaround times
I 16

17. Google's Usability Lab
youtu.be/esUfsi7bPu4 17

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23

24. ... is not what we're talking about today
Instead:
Lightweight usability methods
that you can regularly use yourself
in your own projects to
make and keep your website usable
24

25. Interlude
“If you can afford to hire a usability professional
to do your testing for you, do it.”
– Steve Krug
25

26. Five usability methods
to use on your own
26

27. Five usability methods
1. Task-based usability test
2. First click test
3. Five second test
4. Comprehension test
5. Online survey *
With compliments to Steve Krug and Christine Perfetti
* Bonus: not a usability method as such
27

28. 1. Task-based usability test
28

29. Task-based usability test Why
See how people actually use your website for
specific tasks and find issues they run into
29

30. Task-based usability test
Participant completes a set of tasks using
a sketch, prototype or the actual website
Facilitator observes and listens to the
participant, making notes of issues
Mainstay of usability testing and
foundation of many other methods
I I 30

31. Task-based usability test How
1. Prepare your sketch, prototype or website
2. Prepare user tasks
3. Prepare participant profile and recruit users
4. Prepare test sessions
5. Run test sessions
6. Revise your design based on findings
7. Retest
31

32. Fidelity: Sketch 32

33. Fidelity: Wireframe 33

34. Fidelity: Visual comp 34

35. Define your tasks
Write up the tasks you want participants to
perform using your website
Make sure your tasks are clear & concise and
provide just the right amount of context
It’s essential to get these tasks right
35

36. *
Printed tasks * Not a good task
36

37. Example tasks
“According to this website, what are the two
ways of referencing quotes in essays?”
“Where would you find the lecture schedule for
the linguistics course?”
“Where would you go to register your
attendance?”
“How would you ...”
37

38. Running the test
youtu.be/QckIzHC99Xc 38

39. 39

40. Couple of things not to worry about
Having a ‘final’ design ready
Testing with large number of participants
Perfect audience profile and recruitment
Recording and annotating videos
Writing reports
Strict protocols
40

41. Some things to keep in mind
You’re always testing your website, never the
participant
It’s a personal one-on-one session, not a focus group
Test with people with no prior exposure to the website
Write good tasks
41

42. Some more things to keep in mind
Let the participant do the talking
Ask what they’re thinking and trying to do but
do not lead the participant
Be careful with 'feedback' and 'opinion' type
questions
Learn to be a good tour guide and therapist
42

43. Task-based usability test Tips
Most important thing: just do it
Address the main issues you find
as soon as you can
Test early and test regularly
Improve by doing the least you can
43

44. 44

45. 2. First click test
45

46. First click test Why
Measure the effectiveness of your homepage
or landing page
I 46

47. “The number one purpose of the homepage is
to get people off of it.” – Christine Perfetti
47

48. First click test How
Give your participant a task and a page on your
website
Participant clicks the page at the point they think
is most appropriate for completing the task
You analyse results using click heat map and
response timings
48

49. Your task Demo
“You want to sell an old coffee table and are
considering the Trading Post.
Where would you go to find out how much it
costs to post a classified there?”
49

50. “You want to sell an old coffee table and are considering the Trading Post.
Where would you go to find out how much it costs post a classified there?”
50

51. Where did you click?
51

52. *
Infomaki * Not a good task
52

53. Infomaki – Results 53

54. ClickTest 54

55. ClickTest – Results 55

56. *
Usabilla * Not a good task
56

57. First click test Tips
Not useful for content pages
Tools: paper, pdf, Chalkmark, ClickTest, Usabilla,
Infomaki
57

58. Warning signs
Long response times
“Scattergun" click results
Going for the back button
Blank stares
58

59. 3. Five second test
59

60. Five second test Why
Measure the effectiveness of content pages
with single primary purpose
I 60

61. Five second test Why
Understand if you are communicating a particular
message or goal
Learn what are the most prominent parts of your
design from the user’s point of view
See if your page priorities are right
61

62. Five second test How
Give your participant a page to look at
for five seconds only
Ask questions afterwards
62

63. Background Demo
“You are in the market for broadband internet.
One of the service providers offers a bundled
product, and you want to learn more about it.”
63

64. Instructions Demo
The following page will be displayed for
five seconds only
Try to remember as much as you can
Answer the questions provided afterwards
64

65. 65

66. Questions Demo
1. What was the most important information
to you on this page?
2. What were the signup options?
3. Was is clear what the product is?
4. Was is clear what to do next?
66

67. Five second test Tips
Most useful for pages with one main point and
purpose
Not so useful for homepage or landing page with
multiple priorities
Very quick but you will need to test with multiple
participants
Tools: paper, pdf, FiveSecondTest, Clue
67

68. FiveSecondTest 68

69. FiveSecondTest 69

70. Clue 70

71. Clue 71

72. 4. Comprehension test
72

73. Comprehension test Why
Confirm that users understand complex
information on your page
I 73

74. Comprehension test How
Let participant read your content page without
time limit
Ask questions afterwards without taking the
page away
74

75. Demo
www.slv.vic.gov.au/services/join-library 75

76. Finished reading the whole page?
76

77. Questions Demo
1. Which three ways can you register as a
Library user?
2. Once you have joined the library can you
request items from the catalogue before
your Library card arrives?
3. Once you have received your Library card
can you borrow and take material home?
77

78. Comprehension test Tips
Similar to reading comprehension tests except
you’re not scoring or assessing the reader but
the content itself
Multiple choice questions are preferred
Not useful for homepage or landing page
Remember: good online content is always
written for the web
78

79. 5. Online survey
79

80. Online survey Why
Learn about your users
I 80

81. Online survey How
Prepare a set of questions relevant to your
website and target audience
Publish as an online survey and send link to
participants
Analyse results and make changes
81

82. Wirify customer survey – Way too long 82

83. Pollenizer customer development survey - Better 83

84. Google Docs survey and results 84

85. Online surveys Tips
Keep surveys short and painless to maximise
response rate
Take action and change your website based on
findings
85

86. Online surveys Tips
Explain how information will be used
Collect email address in an optional field
Useful for later usability testing
Include privacy notice
Tools: email, Excel, Google Docs,
SurveyMonkey-Wufoo
86

87. Questions?
87

88. In closing
Usability is easy and anyone can do it
Observe and listen to learn about your users
Testing with one person is heaps better than none
Change and improve your website continuously
88

89. Thank you
www.volkside.com
team@volkside.com
twitter.com/jopas 89

90. www.naviewapp.com 90

91. www.wirify.com 91

92. References
Steve Krug (2005): Don’t Make Me Think! - A Common Sense Approach to Web
Usability http://www.sensible.com/dmmt.html
Steve Krug (2009): Rocket Surgery Made Easy. The Do-It-Yourself Guide to Finding
and Fixing Usability Problems http://www.sensible.com/rocketsurgery/index.html
Steve Krug: Demo Usability Test for Rocket Surgery Made Easy
http://youtu.be/QckIzHC99Xc
Christine Perfetti (Webstock 2011): Adventurous Usability Techniques: Novel
Approaches for the Seasoned Pro
http://www.webstock.org.nz/talks/speakers/christine-perfetti/adventurous-usability-
techniques-novel-approaches-/
TechWeb: Touring Google's Usability Lab
http://www.youtube.com/watch?v=esUfsi7bPu4
92

93. Tools
Chalkmark: http://www.optimalworkshop.com/chalkmark.htm
ClickTest: http://theclicktest.com/
Usabilla: http://www.usabilla.com/
FiveSecondTest: http://fivesecondtest.com/
Clue: http://www.clueapp.com/
93

94. Articles
Volkside: What is usability and why should I care?
http://www.volkside.com/2009/04/what-is-usability-and-why-
should-i-care/
Volkside: Test your screen designs with Infomaki
http://www.volkside.com/2009/07/usability-test-with-infomaki/
Volkside: Tip: Print out your usability testing tasks
http://www.volkside.com/2009/12/tip-print-out-your-usability-
testing-tasks/
Volkside: Using Treejack to test your website structure
http://www.volkside.com/2009/04/using-treejack-for-ia-testing/
94

95. Image credits
4. Ice-storm car door handle on my son's Toyota by George Wiman 44. TYPO3-Addict: Web Usability; 2 books reviewed
http://picasaweb.google.com/george.wiman/Design? http://www.typo3-addict.com/2009/08/web-usability-2-books-reviewed/
Pearson Education: Rocket Surgery Made Easy
feat=embedwebsite#5422209759047102930 http://www.pearsoned.co.uk/bookshop/detail.asp?item=100000000354128
5. Left & right all over the place by By futureshape Alexander Baxevanis 47. Adventurous Usability Techniques: Novel Approaches for the Seasoned Pro by Christine Perfetti
http://www.flickr.com/photos/futureshape/503634012/ (Webstock 2011)
http://www.webstock.org.nz/talks/speakers/christine-perfetti/adventurous-usability-techniques-
novel-approaches-/
6. Aggravated Usability Failure http://www.livedogproductions.com/?p=588
50. Trading Post http://www.tradingpost.com.au/
7. Recycled Coat Hangers by Antonello Fusé
http://www.eco-artware.com/catalog/Antonello-Fuse-Recycled-Coat-Hangers.php?c=hangers 52-53. Volkside
8. Bicycle budget - will it go backwards by Marrickville & Petersham-Newtown Greens 54-55. ClickTest by Angry Monkeys http://theclicktest.com/
http://marrickvillegreens.wordpress.com/2009/06/14/bicycle-budget-will-it-go-backwards/
56. Usabilla http://www.usabilla.com/
17-22. Touring Google's Usability Lab by TechWeb http://www.youtube.com/watch?v=esUfsi7bPu4
65. iiNet http://www.iinet.net.au/bob/bob-lite-promo.html
23. Accounting work by Forwardcom http://www.sxc.hu/browse.phtml?f=download&id=911459 68-69. FiveSecondTest http://fivesecondtest.com/
32. PDF Prototypes: Mistakenly Disregarded and Underutilized by Kyle Soucy 70-71. Clue http://www.clueapp.com/
http://www.boxesandarrows.com/view/pdf-prototypes
75. State Library of Victoria http://www.slv.vic.gov.au/
33. Volkside
87. Volkside: Wirify Customer Survey - March 2011 - Volkside
https://spreadsheets.google.com/viewform?formkey=dEI3V0l1ekhfOGhiU0JjQ242Qi1mYnc6MQ
34. Volkside: Test your screen designs with Infomaki
http://www.volkside.com/2009/07/usability-test-with-infomaki/
88. Pollenizer: Shopping Habit Survey
https://spreadsheets.google.com/a/pollenizer.com/viewform?
36. Volkside: Tip: Print out your usability testing tasks formkey=dExkNzQ1akQ5eHhnRzA1X0Q5U00wcEE6MQ&ndplr=1
http://www.volkside.com/2009/12/tip-print-out-your-usability-testing-tasks/
89. Creating Your Own Results Charts for Surveys Created with Google Forms by Tony Hurst
http://blog.ouseful.info/2009/02/17/creating-your-own-results-charts-for-surveys-created-with-
38. Steve Krug: Demo Usability Test for Rocket Surgery Made Easy http://youtu.be/QckIzHC99Xc google-forms/
39. Touring Google's Usability Lab by TechWeb http://www.youtube.com/watch?v=esUfsi7bPu4 90-91. Volkside
98. Creative Commons: http://creativecommons.org/
© 2011 Volkside
95

96. Licensed under the Creative Commons License:
© 2011 Volkside Attribution-Non-Commercial-Share Alike 2.5 Australia
96