The hamburger navigation is used frequently on desktop and mobile and 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 one hundred and seventy nine users that my colleague Raluca to you and I designed using what users do. And we looked at websites that had visible navigation, like their 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. And 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’m 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 with sixty four percent and the combo navigation was eighty five percent. On desktop, the content discoverability was only fifty four percent when the navigation was collapsed and a hamburger and it was eighty percent and seventy seven percent 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 the navigation is there and people are also able to see the lengths 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 mobile 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 and only twenty seven percent of cases and on desktop they use expand it. I mean visible navigation with the links exposed in forty eight percent of cases. So that’s twice as much that people used visible navigation on desktop than hidden navigation on desktop and on mobile. People use the collabs Hamberger navigation in fifty seven 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. Eighty six percent of cases so visible navigation on mobile or combo, I should say, was used one and a half times more than Hamberger or hidden navigation on mobile. So what does this all mean? No, Hamberger. It doesn’t work well on desktop. 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 November.
In the interest of full disclosure, I am a pescatore and.
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 say think mobile. First is mobile only mobile first is not mobile only.
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 of looking for these stories, the user was unable to locate the education category within the menu.
So I can see instantly from the page there’s no kind of menu on the menu button at the top categories or anything to select from initially. Scrolling down, I can see there’s a number of articles, I’m guessing these are just general articles. And all articles. I’m going to look at my new. And scroll through. I can’t see anything on. Educations are going to hit them over. OK, so look, that and not the menu and their arms underneath are actually. The option is actually had dinner with the menu. Are some of the others, I guess, in a. Menu options. I’m going to try. Take over and see if there’s anything on.