Navigation models… … how people find stuff David Humphreys … user preference vs. 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

David Humphreys

Senior Usability Consultant

Peak Usability are Brisbane based

Usability & UX services & training

Our collective thoughts Our team had pretty strong opinions about a lot of nav models… … but we had no solid test data based on navigation models alone

The usual suspects Fly-out menus Dropdowns Index pages Mega-dropdowns Contextual dropdowns

Index pages – What we like Supports user decision making – provides context

Supports user decision making – provides context

Index pages – What we don’t like Too much text! Too much scrolling! 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.

Vertical drop downs Good for sites with frequent repeat users e.g. intranets Work well with index pages Needs a good IA & labels

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

Flyout menus Evil! Users hate them! “ that thing annoys me so much!” So many issues Don’t support users Users will follow as far at they go Don’t support natural mouse movement Poor fine motor skills? No chance

Evil!

Users hate them!

So many issues

Don’t support users

Users will follow as far at they go

Don’t support natural mouse movement

Poor fine motor skills? No chance

Mega drop downs We have never tested a site with them EBay uses them & Amazon used to. Why? Allow clearer chunking with subheadings “ We know from user testing that mega drop-downs work” Alertbox 23 March 2009

We have never tested a site with them

EBay uses them & Amazon used to. Why?

Allow clearer chunking with subheadings

Mega drop downs

Mega drop downs

Aims of the research Meet our curiosity and provide evidence Resolve office arguments Which nav models: Do users prefer ? Is the most efficient to use? Has the best completion rate? These became our test measures

Meet our curiosity and provide evidence

Resolve office arguments

Which nav models:

Do users prefer ?

Is the most efficient to use?

Has the best completion rate?

These became our test measures

Approach Worked with final year HCI students form University of Queensland 2 user groups using different user bases and website IAs QLD RSL (9 users) QUT Library (7 users) Built ‘pure’ interfaces – ‘white sites’ The IA and the UI Fewer variables Tested 4 scenarios on each nav UI

Worked with final year HCI students form University of Queensland

2 user groups using different user bases and website IAs

QLD RSL (9 users)

QUT Library (7 users)

Built ‘pure’ interfaces – ‘white sites’

The IA and the UI

Fewer variables

Tested 4 scenarios on each nav UI

Tool we recommended - Naview by Volkside

What was actually tested – RSL Group Drop downs Fly-outs

What was actually tested (RSL Group) Index pages “ Mega-menu” or contextual dropdowns

QUT Library prototypes for testing Drop downs Fly-outs

QUT Library prototypes for testing Index pages Mega drop down

Early results

Navigation model preference – RSL group Users preferred mega menus (contextual dropdowns) for efficiency* Landing pages were seen as inefficient* Users preferred drop downs for ease of use Fly-outs were seen as hard to use. Source: UQ Research Group 1 Source: UQ Research Group 1

Users preferred mega menus (contextual dropdowns) for efficiency*

Landing pages were seen as inefficient*

Users preferred drop downs for ease of use

Fly-outs were seen as hard to use.

Single dropdowns & homepage landing pages were preferred The mega dropdown menu was least preferred Fly outs were better than expected Navigation model preference – QUT group Source: UQ Research Group 2

Single dropdowns & homepage landing pages were preferred

The mega dropdown menu was least preferred

Fly outs were better than expected

Efficiency (time) - RSL group Mega menus (contextual drop downs) were most efficient!* Split the difference between dropdowns & landing pages The fly-outs caused difficulty for this group Source: UQ Research Group 1 Source: UQ Research Group 1

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

Split the difference between dropdowns & landing pages

The fly-outs caused difficulty for this group

Efficiency (time) – QUT Library The fly-outs performed well for this group What was different? Homepage style landing page also a strong performer The two dropdowns were generally less efficient Source: UQ Research Group 2 Source: UQ Research Group 2

The fly-outs performed well for this group

What was different?

Homepage style landing page also a strong performer

The two dropdowns were generally less efficient

Task completion rate – RSL group Mega menus (contextual drop-down) performed the best* Fly-outs the worst Landing pages caused some problems* Dropdowns performed marginally worse Source: UQ Research Group 1

Mega menus (contextual drop-down) performed the best*

Fly-outs the worst

Landing pages caused some problems*

Dropdowns performed marginally worse

QUT Library task completion Landing page was best performer Followed by fly-outs Seemed to be general difficulty with Tasks 3&4 Source: UQ Research Group 2

Landing page was best performer

Followed by fly-outs

Seemed to be general difficulty with Tasks 3&4

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

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 caveats We haven’t tested every nav model on the web Not statistically valid Not conclusive We have more to do! Raises more questions than it answers

We haven’t tested every nav model on the web

Not statistically valid

Not conclusive

We have more to do!

Raises more questions than it answers

Conclusions & Questions Refine further research - landing pages and dropdowns together Contextual drop downs are remarkably usable Should we stop using fly-outs? Can you have a good one? What about mega drop downs? Was age a factor?

Refine further research - landing pages and dropdowns together

Contextual drop downs are remarkably usable

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

What about mega drop downs?

Was age a factor?

Which nav should I use on my site? It depends!

Which nav should I use on my site?

Thank you David Humphreys [email_address] @peakusability @davemonkey http:// www.volkside.com/go/ozia /