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

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 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.

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

WATCH WEBINAR RECORDING NOW

http://grow.kissmetrics.com/webinar-101?utm_medium=slideshare_deck&utm_campaign=slideshare&utm_source=slideshare&utm_content=webinar101&utm_term=null

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 content over time

LOG IN WITH GOOGLE

Start Your Free KISSmetrics Trial

http://grow.kissmetrics.com/googlesignin?utm_medium=slideshare_deck&utm_campaign=slideshare&utm_source=slideshare&utm_content=google_signin_km&utm_term=null

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 Nielsen, Web usability guru

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 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…

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, WebUsability.com

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 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 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

Idea 1






Idea 2





•  About us


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%


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






Idea 2





•  About us

43%

Meridian – what if?

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/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

•  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

•  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

Wrapping up

6

•  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

•  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

•  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

2015 KISSmetrics Guide KISSmetrics Demo

h!p://kiss.ly/growth h!p://kiss.ly/demo

Questions?

Dave O’Brien UX designer

Optimal Workshop @optimalworkshop

[email protected]

Thue Madsen Marketing Operations Specialist

KISSmetrics @ThueLMadsen

[email protected]

Thank you

Dave O’Brien @optimalworkshop

[email protected]

Evil a!ractors

Internet

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