Dave O’Brien Dave has been researching, designing, and testing user interfaces for 20 years in North America and New Zealand. In the IA community, he is best known for designing Treejack, the online tree-testing tool from Optimal Workshop. Section One Admitting we have a problem Bad Labeling What’s to blame? • Site structure ≠ users’ mental model • Labels not clear and distinguishable • Careless dumping of content over time Section One Why should we care? How to find navigation problems in your website 1.  Analytics 2.  Navigation testing 3. Tree testing 4. First-click testing Cheap and fast $ Finding and fixing navigation problems 2 Testing late Kissmetrics analytics Playing back sessions with UserTesting.com First-click testing with Chalkmark Testing early Create the site tree Add some typical tasks Add survey questions Volunteer? Tree testing isolates 2 basic elements Section Three Tree testing: analysis Can users find items in our site? Success rate Where are the problems? Where the heck did they go? Find the lowest cost home broadband subscription Can they find things directly, without having to backtrack? Backtracking “Download a TrueTone ringtone for your cell phone” “Download a TrueTone ringtone for your cell phone” Can they choose between topics quickly? Speed Speed Which parts of our tree don’t work well? Which parts of our tree do work well? Why we like tree testing • Easy to set up • Easy for users to do (~5 minutes for 10 tasks) • Isolates the organisation and labelling • Analysis is straightforward and visual • Lets us compare alternatives early • Cheap and quick to do • Reduces risk early in the project Testing navigation (first-click testing) 4 Test navigation early Create the screens Add some typical tasks Add survey questions Still brave? Section Four First-click testing: analysis Selected areas Why just test first clicks? What we find in first-click tests • Labels that are not clear and distinguishable from each other • Important targets that get “lost” in the clu er • Items that a racted clicks, but aren’t actually clickable • Slow clicks (both right and wrong) • Fast clicks to the wrong targets How these methods fit in a project 5 Tree testing Card sorting First click testing + other tools The world is ge ing easier Cheap and fast $ Going wide with Meridian Energy Iterative design is not enough Hammer vs. screwdriver Generate many designs 1 2 3 4 Lather, rinse, repeat The wide/deep framework • Create several site trees • Tree-test “wide” until one wins • Tree-test deep until it’s solid •  Create wireframes/mockups •  Nav-test “wide” until one wins •  Nav-test deep until it’s solid •  Usability-test the final design or early code The overall process 2015 KISSmetrics Guide KISSmetrics Demo h p://kiss.ly/growth h p://kiss.ly/demo

1. Dave O’Brien, Optimal Workshop
Improve your funnels with
be er website navigation
April 2015 Presentation

2. @ThueLMadsen #KISSwebinar
Join the conversation on Twi er

3. Dave O’Brien
Dave has been researching, designing, and testing user
interfaces for 20 years in North America and New
Zealand. In the IA community, he is best known for
designing Treejack, the online tree-testing tool from
Optimal Workshop.
Thue Madsen - KISSmetrics - @ThueLMadsen
Thue is the KISSmetrics Webinar Wizard and Marketing
Ops Specialist. Before joining forces with KISSmetrics, he
was a Ly driver in SF, which is also how he ended up as a
KISSmetrics marketer.
Whenever Thue is not trying to automate everything
around him, you can find him fishing and hiking in the
Sierras.

4. 1 The problem of bad navigation
Testing early
Testing late
2 Finding and fixing navigation problems
3 Testing organization and labels (tree testing)
Table of Contents
4 Testing navigation (first-click testing)
5 How these fit in a project

5. WATCH WEBINAR RECORDING NOW

6. Bad navigation
1

7. Section One
Admi ing we have a problem

8. Bad navigation

9. Bad Labeling

10. ACC old tree
30%

11. 67%

12. What’s to blame?
• Site structure ≠ users’ mental model
• Labels not clear and distinguishable
• Careless dumping of content over time

13. LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trial

14. Section One
Why should we care?

15. ~50% start with search
~50% browse

16. “Ge ing to the right page within a website or
intranet is the inevitable prerequisite to
ge ing anything done.”
— Jakob Nielsen, Web usability guru

17. 1
We need to optimize website navigation

18. How to find navigation problems in your website
1. Analytics
2. Navigation testing
3. Tree testing
4. First-click testing

19. Cheap and fast
$

20. Finding and fixing
navigation problems
2

21. Testing late

22. Kissmetrics analytics

23. Navigation testing with Loop11

24. Playing back sessions with UserTesting.com

25. First-click testing with Chalkmark

26. Testing early

27. Roger Pressman, So ware Engineering: A
Practitioner’s Approach, McGraw-Hill
Testing early saves time and money

28. Testing organization and
labels (tree testing)
3

30. Just a spreadsheet

31. Create the site tree

32. Add some typical tasks

33. Add survey questions

36. Volunteer?

37. It’s the same…

38. …but different

39. Tree testing isolates 2 basic elements

40. Section Three
Tree testing: analysis

41. Can users find items
in our site?

42. Success rate

43. Where are the problems?

44. Where the heck did they go?
Find the lowest cost home
broadband subscription

45. Can they find things
directly, without having
to backtrack?

46. Backtracking

47. “Download a TrueTone ringtone for your cell phone”

48. “Download a TrueTone ringtone for your cell phone”

49. Can they choose
between topics quickly?

50. Speed

51. Speed

52. Which parts of our
tree don’t work well?

55. Which parts of our
tree do work well?

58. Why we like tree testing
• Easy to set up
• Easy for users to do (~5 minutes for 10 tasks)
• Isolates the organisation and labelling
• Analysis is straightforward and visual
• Lets us compare alternatives early
• Cheap and quick to do
• Reduces risk early in the project
• And best of all…

59. Don’t need to build a site first

60. Just a spreadsheet

61. “Think of it as analytics for a
website you haven’t built yet.”
— Sam Ng, Optimal Workshop founder

62. Testing navigation
(first-click testing)
4

64. Test navigation early

65. Create the screens

66. Add some typical tasks

67. Add survey questions

70. Still brave?

71. Section Four
First-click testing:
analysis

72. “You're currently paying for cell phone credit as you go. Work out
if a monthly plan would be er suit your needs.”

73. Selected areas

74. Why just test first clicks?

75. “Based on our findings, we suggest
that you work hard to ensure that
the first click is a correct click.”
— Bob Bailey, WebUsability.com

77. What we find in first-click tests
• Labels that are not clear and distinguishable from
each other
• Important targets that get “lost” in the clu er
• Items that a racted clicks, but aren’t actually
clickable
• Slow clicks (both right and wrong)
• Fast clicks to the wrong targets

78. How these methods
fit in a project
5

79. Tree testing Card sorting First click testing
+ other tools
The world is ge ing easier

80. Cheap and fast
$

81. Going deep

82. Go deep
LATHER. RINSE. REPEAT.

83. Go wide

84. Going wide with Meridian Energy

85. Current site
• Why join us?
• Residential
• Business
• Agribusiness
• Residential pricing
• Join
• Offers
• Save energy & money
• Residential
• Business
• etc.
• My account
• My bill
• etc.
• About us
Idea 1
• Residential
• Plans and pricing
• Offers
• etc.
• Small business
• Plans and pricing
• etc.
• Corporate
• Products and pricing
• etc.
• Farm
• Plans and pricing
• etc.
• My Account
• About us
Idea 2
• Join
• Join
• Moving
• Plans and rates
• Residential plans
• Business plans
• etc.
• Better off with us
• Great online tools
• etc.
• Your account
• My bill
• How to pay
• etc.
• About us
46% 43% 47%
Tree testing – round 1

86. Idea 1
• Residential
• Plans and pricing
• Offers
• etc.
• Small business
• Plans and pricing
• etc.
• Corporate
• Products and pricing
• etc.
• Farm
• Plans and pricing
• etc.
• My Account
• About us
Idea 2
• Join
• Join
• Moving
• Plans and rates
• Residential plans
• Business plans
• etc.
• Better off with us
• Great online tools
• etc.
• Your account
• My bill
• How to pay
• etc.
• About us
Tree testing – round 1

87. Tree 3
• Your home
• New customers
• Current customers
• etc.
• Agribusiness
• New customers
• etc.
• Small/med business
• New customers
• etc.
• Large business
• New customers
• etc.
• About us
70%
Tree testing – round 2

88. Current site
• Why join us?
• Residential
• Business
• Agribusiness
• Residential pricing
• Join
• Offers
• Save energy & money
• Residential
• Business
• etc.
• My account
• My bill
• etc.
• About us
Idea 1
• Residential
• Plans and pricing
• Offers
• etc.
• Small business
• Plans and pricing
• etc.
• Corporate
• Products and pricing
• etc.
• Farm
• Plans and pricing
• etc.
• My Account
• About us
Idea 2
• Join
• Join
• Moving
• Plans and rates
• Residential plans
• Business plans
• etc.
• Better off with us
• Great online tools
• etc.
• Your account
• My bill
• How to pay
• etc.
• About us
43%
Meridian – what if?

89. Iterative design
is not enough

90. Hammer vs. screwdriver

91. Generate many designs

92. Section Five
An example design process

93. 1
2
3
4 Lather, rinse, repeat
The wide/deep framework

94. 1
2
In the real world…

95. • Create several site trees
• Tree-test “wide” until one wins
• Tree-test deep until it’s solid
• Create wireframes/mockups
• Nav-test “wide” until one wins
• Nav-test deep until it’s solid
• Usability-test the final design or early code
The overall process

96. • Create several site trees
• Tree-test “wide” until one wins
• Tree-test deep until it’s solid
• Create wireframes/mockups
• Nav-test “wide” until one wins
• Nav-test deep until it’s solid
• Usability-test the final design or early code
The overall process

97. • Create several site trees
• Tree-test “wide” until one wins
• Tree-test deep until it’s solid
• Create wireframes/mockups
• Nav-test “wide” until one wins
• Nav-test deep until it’s solid
• Usability-test the final design or
early code
The overall process

98. Wrapping up
6

99. • Bad navigation is a major problem
• You can test late, but testing early lowers
your risk and your cost
• Nail your organization and labelling first
with tree testing
• Test your page layouts and navigation with
nav testing or first-click testing
• Go wide with competing ideas
before you go deep on one
• Choose tools that let you go fast without
breaking the bank
Summary

100. • Donna Spencer: paper testing
h p://www.boxesandarrows.com/view/
card_based_classification_evaluation
• Dave O’Brien: online tree testing
h p://www.boxesandarrows.com/view/tree-testing
• Step Two Designs: tree-testing overview
h p://www.steptwo.com.au/papers/kmc_treetesting
• Treejack so ware (Optimal Workshop)
www.optimalworkshop.com/treejack
Tree testing – Learn more

101. • Finding and solving 3 common usability
problems
h p://neoinsight.com/insights/articles/2012/09/08/first-click-test-to-find-and-
solve-3-common-usability-problems/
• TV interface testing with Chalkmark
h ps://www.optimalworkshop.com/blog/testing-tv-interfaces-with-chalkmark/
• Testing accordion menu designs & iconography
h p://viget.com/inspire/testing-accordion-menu-designs-iconography
• Chalkmark so ware (Optimal Workshop)
www.optimalworkshop.com/chalkmark
First-click testing – Learn more

102. 2015 KISSmetrics Guide KISSmetrics Demo
h p://kiss.ly/growth h p://kiss.ly/demo

103. Questions?
Dave O’Brien
UX designer
Optimal Workshop
@optimalworkshop
dave.obrien@outlook.co.nz
Thue Madsen
Marketing Operations Specialist
KISSmetrics
@ThueLMadsen
tmadsen@kissmetrics.com

104. Thank you
Dave O’Brien
@optimalworkshop
dave.obrien@outlook.co.nz

105. Evil a ractors