Dave O’Brien, Optimal Workshop
Improve your funnels with
be er website navigation
April 2015 Presentation
@ThueLMadsen #KISSwebinar
Join the conversation on Twi er
Dave O’Brien
Dave has been researching, designing, and testing user
interfaces for 20 years in North America and New
Zeala...
1 The problem of bad navigation
Testing early
Testing late
2 Finding and fixing navigation problems
3 Testing organization ...
WATCH WEBINAR RECORDING NOW
Bad navigation
1
Section One
Admi ing we have a problem
Bad navigation
Bad Labeling
ACC old tree
30%
67%
What’s to blame?
• Site structure ≠ users’ mental model
• Labels not clear and distinguishable
• Careless dumping of conte...
LOG IN WITH GOOGLE
Start Your Free KISSmetrics Trial
Section One
Why should we care?
~50% start with search
~50% browse
“Ge ing to the right page within a website or
intranet is the inevitable prerequisite to
ge ing anything done.”
— Jakob Ni...
1
We need to optimize website navigation
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
Navigation testing with Loop11
Playing back sessions with UserTesting.com
First-click testing with Chalkmark
Testing early
Roger Pressman, So ware Engineering: A
Practitioner’s Approach, McGraw-Hill
Testing early saves time and money
Testing organization and
labels (tree testing)
3
Just a spreadsheet
Create the site tree
Add some typical tasks
Add survey questions
Volunteer?
It’s the same…
…but different
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...
Don’t need to build a site first
Just a spreadsheet
“Think of it as analytics for a
website you haven’t built yet.”
— Sam Ng, Optimal Workshop founder
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
“You're currently paying for cell phone credit as you go. Work out
if a monthly plan would be er suit your needs.”
Selected areas
Why just test first clicks?
“Based on our findings, we suggest
that you work hard to ensure that
the first click is a correct click.”
— Bob Bailey, WebU...
What we find in first-click tests
• Labels that are not clear and distinguishable from
each other
• Important targets that g...
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 deep
Go deep
LATHER. RINSE. REPEAT.
Go wide
Going wide with Meridian Energy
Current site
•  Why join us?
•  Residential
•  Business
•  Agribusiness
•  Residential pricing
•  Join
•  Offers
•  Save e...
Idea 1
•  Residential
•  Plans and pricing
•  Offers
•  etc.
•  Small business
•  Plans and pricing
•  etc.
•  Corporate
•...
Tree 3
•  Your home
•  New customers
•  Current customers
•  etc.
•  Agribusiness
•  New customers
•  etc.
•  Small/med bu...
Current site
•  Why join us?
•  Residential
•  Business
•  Agribusiness
•  Residential pricing
•  Join
•  Offers
•  Save en...
Iterative design
is not enough
Hammer vs. screwdriver
Generate many designs
Section Five
An example design process
1
2
3
4 Lather, rinse, repeat
The wide/deep framework
1
2
In the real world…
• Create several site trees
• Tree-test “wide” until one wins
• Tree-test deep until it’s solid
•  Create wireframes/mocku...
•  Create several site trees
•  Tree-test “wide” until one wins
•  Tree-test deep until it’s solid
• Create wireframes/moc...
•  Create several site trees
•  Tree-test “wide” until one wins
•  Tree-test deep until it’s solid
•  Create wireframes/mo...
Wrapping up
6
•  Bad navigation is a major problem
•  You can test late, but testing early lowers
your risk and your cost
•  Nail your o...
•  Donna Spencer: paper testing
h p://www.boxesandarrows.com/view/
card_based_classification_evaluation
•  Dave O’Brien: on...
•  Finding and solving 3 common usability
problems
h p://neoinsight.com/insights/articles/2012/09/08/first-click-test-to-fin...
2015 KISSmetrics Guide KISSmetrics Demo
h p://kiss.ly/growth h p://kiss.ly/demo
Questions?
Dave O’Brien
UX designer
Optimal Workshop
@optimalworkshop
dave.obrien@outlook.co.nz
Thue Madsen
Marketing Oper...
Thank you
Dave O’Brien
@optimalworkshop
dave.obrien@outlook.co.nz
Evil a ractors
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Improve your funnels with better website navigation: Why? How? When?
Prochain SlideShare
Chargement dans…5
×

Improve your funnels with better website navigation: Why? How? When?

3 130 vues

Publié le

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

Publié dans : Internet, Marketing
0 commentaire
23 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 130
Sur SlideShare
0
Issues des intégrations
0
Intégrations
117
Actions
Partages
0
Téléchargements
130
Commentaires
0
J’aime
23
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Improve your funnels with better website navigation: Why? How? When?

  1. 1. Dave O’Brien, Optimal Workshop Improve your funnels with be er website navigation April 2015 Presentation
  2. 2. @ThueLMadsen #KISSwebinar Join the conversation on Twi er
  3. 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. 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. 5. WATCH WEBINAR RECORDING NOW
  6. 6. Bad navigation 1
  7. 7. Section One Admi ing we have a problem
  8. 8. Bad navigation
  9. 9. Bad Labeling
  10. 10. ACC old tree 30%
  11. 11. 67%
  12. 12. What’s to blame? • Site structure ≠ users’ mental model • Labels not clear and distinguishable • Careless dumping of content over time
  13. 13. LOG IN WITH GOOGLE Start Your Free KISSmetrics Trial
  14. 14. Section One Why should we care?
  15. 15. ~50% start with search ~50% browse
  16. 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. 17. 1 We need to optimize website navigation
  18. 18. How to find navigation problems in your website 1.  Analytics 2.  Navigation testing 3. Tree testing 4. First-click testing
  19. 19. Cheap and fast $
  20. 20. Finding and fixing navigation problems 2
  21. 21. Testing late
  22. 22. Kissmetrics analytics
  23. 23. Navigation testing with Loop11
  24. 24. Playing back sessions with UserTesting.com
  25. 25. First-click testing with Chalkmark
  26. 26. Testing early
  27. 27. Roger Pressman, So ware Engineering: A Practitioner’s Approach, McGraw-Hill Testing early saves time and money
  28. 28. Testing organization and labels (tree testing) 3
  29. 29. Just a spreadsheet
  30. 30. Create the site tree
  31. 31. Add some typical tasks
  32. 32. Add survey questions
  33. 33. Volunteer?
  34. 34. It’s the same…
  35. 35. …but different
  36. 36. Tree testing isolates 2 basic elements
  37. 37. Section Three Tree testing: analysis
  38. 38. Can users find items in our site?
  39. 39. Success rate
  40. 40. Where are the problems?
  41. 41. Where the heck did they go? Find the lowest cost home broadband subscription
  42. 42. Can they find things directly, without having to backtrack?
  43. 43. Backtracking
  44. 44. “Download a TrueTone ringtone for your cell phone”
  45. 45. “Download a TrueTone ringtone for your cell phone”
  46. 46. Can they choose between topics quickly?
  47. 47. Speed
  48. 48. Speed
  49. 49. Which parts of our tree don’t work well?
  50. 50. Which parts of our tree do work well?
  51. 51. 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…
  52. 52. Don’t need to build a site first
  53. 53. Just a spreadsheet
  54. 54. “Think of it as analytics for a website you haven’t built yet.” — Sam Ng, Optimal Workshop founder
  55. 55. Testing navigation (first-click testing) 4
  56. 56. Test navigation early
  57. 57. Create the screens
  58. 58. Add some typical tasks
  59. 59. Add survey questions
  60. 60. Still brave?
  61. 61. Section Four First-click testing: analysis
  62. 62. “You're currently paying for cell phone credit as you go. Work out if a monthly plan would be er suit your needs.”
  63. 63. Selected areas
  64. 64. Why just test first clicks?
  65. 65. “Based on our findings, we suggest that you work hard to ensure that the first click is a correct click.” — Bob Bailey, WebUsability.com
  66. 66. 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
  67. 67. How these methods fit in a project 5
  68. 68. Tree testing Card sorting First click testing + other tools The world is ge ing easier
  69. 69. Cheap and fast $
  70. 70. Going deep
  71. 71. Go deep LATHER. RINSE. REPEAT.
  72. 72. Go wide
  73. 73. Going wide with Meridian Energy
  74. 74. 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
  75. 75. 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
  76. 76. 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
  77. 77. 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?
  78. 78. Iterative design is not enough
  79. 79. Hammer vs. screwdriver
  80. 80. Generate many designs
  81. 81. Section Five An example design process
  82. 82. 1 2 3 4 Lather, rinse, repeat The wide/deep framework
  83. 83. 1 2 In the real world…
  84. 84. • 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
  85. 85. •  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
  86. 86. •  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
  87. 87. Wrapping up 6
  88. 88. •  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
  89. 89. •  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
  90. 90. •  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
  91. 91. 2015 KISSmetrics Guide KISSmetrics Demo h p://kiss.ly/growth h p://kiss.ly/demo
  92. 92. Questions? Dave O’Brien UX designer Optimal Workshop @optimalworkshop dave.obrien@outlook.co.nz Thue Madsen Marketing Operations Specialist KISSmetrics @ThueLMadsen tmadsen@kissmetrics.com
  93. 93. Thank you Dave O’Brien @optimalworkshop dave.obrien@outlook.co.nz
  94. 94. Evil a ractors

×