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?
