11

Navigation models…Navigation models………how people find stuffhow people find stuff

David HumphreysDavid Humphreys

……user preference vs. user preference vs. efficiency.efficiency.

Who are we? Some of our clients

About David & Peak Usability

► David Humphreys

► Senior Usability Consultant

► Peak Usability are Brisbane based

► Usability & UX services & training

4

Our team had pretty strong opinions about a lot of nav models…

Our collective thoughts

…but we had no solid test data based on navigation models alone

55

The usual suspectsThe usual suspects

Fly-out menus Dropdowns Index pagesMega-

dropdownsContextual dropdowns

66

Index pages – What we likeIndex pages – What we likeSupports user Supports user decision making – decision making – provides contextprovides context

77

Index pages – What we don’t likeIndex pages – What we don’t like

Operational Procedures under Policies & Procedures for QAS and QFRS. 1st of 84 pages only

Related information or form appears as a link here which just looks like another link.Related information or form appears as a link here which just looks like another link.

Too much text!

Too much scrolling!

88

Good for sites with frequent repeat users

e.g. intranets

Vertical drop downsVertical drop downs

Work well with index pages

Needs a good IA & labels

99

Variant – Contextual vertical drop downsVariant – Contextual vertical drop downs

Provides more context to support user

@iiNet Looks good, particularly the menus/left nav, 10 points for putting phone numbers right there in the 'contact' menu. - @ben_h

1010

Flyout menusFlyout menusEvil!Evil!

Users hate them!Users hate them!

“that thing annoys me so much!”

So many issuesSo many issues► Don’t support Don’t support

usersusers► Users will follow as Users will follow as

far at they gofar at they go► Don’t support Don’t support

natural mouse natural mouse movementmovement

► Poor fine motor Poor fine motor skills? No chanceskills? No chance

1111

Mega drop downsMega drop downs

► We have never tested a We have never tested a site with themsite with them

► EBay uses them & EBay uses them & Amazon used to. Why?Amazon used to. Why?

► Allow clearer chunking Allow clearer chunking with subheadingswith subheadings

“We know from user testing that mega drop-downs work”

Alertbox 23 March 2009

1212

Mega drop downsMega drop downs

1313

Mega drop downsMega drop downs

Aims of the researchAims of the research

14

► Meet our curiosity and provide evidenceMeet our curiosity and provide evidence► Resolve office argumentsResolve office arguments► Which nav models:Which nav models:

Do users Do users preferprefer?? Is the most Is the most efficientefficient to use? to use? Has the best Has the best completioncompletion rate? rate?

► These became our test measuresThese became our test measures

ApproachApproach

► Worked with final year HCI students Worked with final year HCI students form University of Queenslandform University of Queensland

► 2 user groups using different user 2 user groups using different user bases and website IAsbases and website IAs QLD RSL (9 users)QLD RSL (9 users) QUT Library (7 users) QUT Library (7 users)

► Built ‘pure’ interfaces – ‘white sites’Built ‘pure’ interfaces – ‘white sites’► The IA and the UIThe IA and the UI► Fewer variablesFewer variables► Tested 4 scenarios on each nav UITested 4 scenarios on each nav UI

1515

Tool we recommended - Naview by VolksideTool we recommended - Naview by Volkside

1616

What was actually tested – RSL GroupWhat was actually tested – RSL Group

Drop downs

Fly-outs

What was actually tested (RSL Group)What was actually tested (RSL Group)

Index pages

“Mega-menu” or contextual dropdowns

QUT Library prototypes for testing

Fly-outs

Drop downs

QUT Library prototypes for testing

Index pages

Mega drop down

2121

Early results

Navigation model preference – RSL groupNavigation model preference – RSL group

► Users Users preferred preferred mega menus mega menus (contextual (contextual dropdowns) dropdowns) for efficiency*for efficiency*

► Landing Landing pages were pages were seen as seen as inefficient*inefficient*

► Users Users preferred preferred drop downs drop downs for ease of for ease of useuse

► Fly-outs were Fly-outs were seen as hard seen as hard to use.to use. 2222

Source: UQ Research Group 1

Source: UQ Research Group 1

► Single dropdowns & homepage landing pages were preferred► The mega dropdown menu was least preferred► Fly outs were better than expected

2323

Navigation model preference – QUT groupNavigation model preference – QUT group

User perceptions - "Ease of use"n = 7

4.33.7 4.0

2.7

0.0

1.0

2.0

3.0

4.0

5.0

Single dropdow n Flyout menu Landing page Mega dropdow n

Navigation model

Ease of use (1 = hard to 5 = easy)

Source: UQ Research Group 2

Efficiency (time) - RSL groupEfficiency (time) - RSL group

► Mega menus Mega menus (contextual drop (contextual drop downs) were most downs) were most efficient!*efficient!*

► Split the Split the difference difference between between dropdowns & dropdowns & landing pageslanding pages

► The fly-outs The fly-outs caused difficulty caused difficulty for this groupfor this group

2424

Navigation models - Average (mean) completion time (n=9)

0.0

1.0

2.0

3.0

4.0

5.0

6.0

Dropdow n Menu Flyout Menu Landing Page Mega menu

Navigation model

Ave

rag

e ta

sk c

om

ple

tio

n

tim

e (s

ec)

Navigation models - Median completion time (n=9)

0.0

1.0

2.0

3.0

4.0

5.0

6.0

Dropdow n Menu Flyout Menu Landing Page Mega menu

Navigation model

Ave

rag

e ta

sk c

om

ple

tio

n

tim

e (s

ec)

Source: UQ Research Group 1

Source: UQ Research Group 1

Efficiency (time) – QUT LibraryEfficiency (time) – QUT Library

2525

Navigation models - Average (mean) task completion timefor 4 common tasks (n=7)

12.4

9.9

7.68.3

0.0

2.0

4.0

6.0

8.0

10.0

12.0

14.0

Single dropdow n Mega dropdow n Flyout Landing page

Navigation model

Ave

rag

e ta

sk c

om

ple

tio

n t

ime

(sec

)

Navigation models - Median task completion timefor 4 common tasks (n=7)

7.0

9.0

7.0

4.0

0.01.02.0

3.04.05.06.07.0

8.09.0

10.0

Single dropdow n Mega dropdow n Flyout Landing page

Navigation model

Ave

rag

e ta

sk c

om

ple

tio

n t

ime

(sec

)

► The fly-outs The fly-outs performed well for performed well for this groupthis group

► What was What was different?different?

► Homepage style Homepage style landing page also landing page also a strong a strong performerperformer

► The two The two dropdowns were dropdowns were generally less generally less efficientefficient

Source: UQ Research Group 2

Source: UQ Research Group 2

Task completion rate – RSL groupTask completion rate – RSL group

► Mega menus (contextual drop-down) performed the best*Mega menus (contextual drop-down) performed the best*► Fly-outs the worstFly-outs the worst► Landing pages caused some problems*Landing pages caused some problems*► Dropdowns performed marginally worseDropdowns performed marginally worse

2626

Source: UQ Research Group 1

QUT Library task completion

► Landing page was best performer► Followed by fly-outs► Seemed to be general difficulty with Tasks 3&4

2727

Task Performance Rates(All Scoring Levels Combined = 100%)

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Tasks

%

Easy Medium Hard Assist Fail

Single dropdown Mega dropdown Cascading Landing page - links on page

Source: UQ Research Group 2

Thanks to our Research Students

► Group 1 – RSL Chin Zhun (Jerry) Ong Jason Antony Marles Chin Wai Ng Jared Robert Mallett

► Group 2 – QUT Library Daniel Jon Dawson Jacob Ryan Appleton Jenny Spiers

A few caveatsA few caveats

► We haven’t tested every nav model on the webWe haven’t tested every nav model on the web► Not statistically validNot statistically valid► Not conclusiveNot conclusive► We have more to do!We have more to do!► Raises more questions than it answersRaises more questions than it answers

2929

Conclusions & QuestionsConclusions & Questions

► Refine further research - landing Refine further research - landing pages and dropdowns togetherpages and dropdowns together

► Contextual drop downs are Contextual drop downs are remarkably usableremarkably usable

► Should we stop using fly-outs? Can Should we stop using fly-outs? Can you have a good one?you have a good one?

► What about mega drop downs?What about mega drop downs?

► Was age a factor?Was age a factor?

3030

3131

It It depends!depends!

Which nav Which nav should I use on should I use on

my site?my site?

Thank you

David Humphreysdavidh@peakusability.com.au

@peakusability@davemonkey

http://www.volkside.com/go/ozia/