(Kara Pernice) The hamburger navigation is used
frequently on desktop and mobile.
In our qualitative studies over the years,
we found that the hamburger menu is not
very usable for people on mobile — or on
desktop, especially, so we decided to do a
quantitative study with 179 users,
that my colleague
Raluca Budiu and I designed, using
WhatUsersDo. We looked at websites
that had visible navigation like the
traditional navigation where you see all
the links, on desktop. We looked at sites
that have a combo navigation, which is
some visible and some hidden links,
on mobile, and then hidden navigation on
mobile and desktop. In these studies
we looked at factors such as how hard
was it for people to actually complete
the tasks. We considered how long did it
take people to complete the tasks.
We considered how long did it take people
to find the navigation. We looked at
whether people chose to use the
navigation, and we looked at how
discoverable the content was. I am going to
talk about just the last two right now:
The first one being content discoverability.
It was far less
discoverable on both mobile and desktop
when the navigation was collapsed like a
hamburger menu. On mobile the content
discoverability when they were using
hidden navigation was 64%
and the combo navigation was 85%.
On desktop, the
content discoverability was only 54%
when the navigation was collapsed in a hamburger
and it was 80% and 77%
when the navigation was combo navigation
or visible navigation, respectively.
Let's look at navigation use: whether
people even chose to use the navigation.
When a menu is visible across the top,
it's basically advertising that
navigation is there and people are also
able to see the links right away and
what is offered on the website,
versus when it's collapsed, so it's a shame if
you don't actually show those links on
desktop when the screen real estate
actually affords that.
Where the decision to use [hidden nav] on a
phone makes a lot more sense since you
don't have as much screen real estate.
For the usage though, on desktop people
when it had a hamburger menu people used
it on desktop in only 27%
of cases, and on desktop they use
expand it — I mean visible navigation with
the links exposed in 48%
of cases; so that's twice as much that
people used visible navigation on
desktops than hidden navigation on desktop.
On mobile, people use the
collapsed hamburger navigation in
57% percent of cases. So more
than on desktop but still not very much.
And they used the combination navigation,
where some of it was visible and some of
it was collapsed, 86% percent of cases.
So visible navigation on mobile
— or combo I should say — was used 1.5 times
more than hamburger or hidden
navigation on mobile. So what does this all mean?
No hamburger: it doesn't work well on
desktops, it doesn't work well on mobile,
though it is a little better on mobile
than it is on desktop. And what do we say
instead? Maybe use a small menu button
with a dropdown list; something that at
least tells the user it's a menu, and may
take up a slightly larger part of the
screen real estate on mobile. And on
desktop always use a full menu — there's
really very little reason not to, unless
you're thinking that your design needs
to be exactly the same on mobile as it
does on desktop. No hamburger.
In the interest of full disclosure, I am a pescatarian.
So why does this happen?
Some organizations will focus most of
their efforts on mobile and that's fine
if that's your strategy; and it's in fact good
if that's your strategy. But it doesn't
mean that you shouldn't also focus on
desktop. Sometimes we find that people
think mobile first is mobile-only.
Mobile-first is NOT mobile only.
(Angie Li) Here's a clip from a study we conducted
where we see a user struggling to
navigate using the hamburger menu.
Watch as he looks for articles about education;
a category found in the navigation menu.
After about two and a half minutes
looking for these stories the user was unable
to locate the education category within the menu.
(Test Participant) So I can see instantly
from going to the page there's no kind of
menu I'm sure see the menu button at the
top. There's not any kind of categories anything to
select from initially and scrolling down I
can see the number of articles and I can
these are just general articles and all
articles i'm going to click on that menu
and scroll through. I can't see anything on
education I'm gonna hit the more button
ok
okay so it looks like that isn't actually a menu
and the items underneath there are actually the options
it is actually a heading rather than a menu and
some of the others are getting a menu
option so I'm going to try I don't know tech?
I'll go over and see if there's anything on
education here.
I'm trying to tap into tech to see if anything
else appears next to it look like a
kind of menu thing they way it is selected
that your might be able to scroll across but that
doesn't do anything. I'll go back to home
not having much luck there
how about if I type in education in the
search
and I see that these 5 education stories
will dominate headlines in 2016 and I'm
guessing that is going to be quite an interesting article
so I'll go with that for my selected article. From it's title I'm guessing
that it's got more than one
there and we're okay rate how
difficult or easy it was to do. Very easy to very
difficult time. I'll say in terms of finding a specific
education one I thought it was very difficult
so I'd give it a six out of seven.