Hidden navigation hurts engagement

PARROT9
PARROT9
Published in
3 min readOct 11, 2019

The smallest design details impact your success, and it’s easy to overlook them. Bad advice is everywhere. So when authority figures make design recommendations, people don’t question them.

But that doesn’t mean they’re right. Material Design is a great example.

Google introduced Material Design to standardise the visual language of Android. It was the right thing to do. A consistent experience is a good experience. Consistency creates conventions, and conventions build habits.

There was just one problem. Material Design hid navigation.

An icon made up of three horizontal lines. Often called the hamburger menu.

People often call this the hamburger menu. The intention was good: store all navigation behind a single icon to free up space for other content. If you ever get lost, you only need to look for the 3 lines. Simple.

The hamburger menu spread like wildfire. Designed for mobile, it soon took over desktop apps and websites, where space isn’t even an issue.

The hamburger problem. A collage of hamburger menus taken from mobile apps, desktop apps, and websites.
Mobile apps, desktop apps, and websites all use the hamburger.

But what if it harmed engagement?

Turns out that hidden navigation reduces discoverability by almost 50%. Out of sight is out of mind. People are less likely to browse your website or app, and it takes them more time and effort to do so.

The zeebox mobile app. Hidden navigation decreased engagement. Visible navigation increased engagement.
The zeebox mobile app.

When zeebox tested the hamburger menu:

  • engagement time halved
  • time spent in app decreased
  • daily & weekly frequency of use fell
The Polar mobile app. Hidden navigation decreased engagement. Visible navigation increased engagement.
The Polar mobile app.

When Polar hid their navigation, engagement plummeted.

The Facebook mobile app. The hamburger menu decreased engagement. The tab bar along the bottom increased engagement.
The Facebook mobile app.

On the other hand, Facebook found that the tab bar outperformed other navigation in:

  • Engagement
  • Satisfaction
  • Revenue
  • Speed
  • Perceived speed
The Redbooth mobile app. The hamburger menu decreased engagement. The tab bar along the bottom increased engagement.
The Redbooth mobile app.

And when Redbooth replaced the hamburger with the tab bar:

  • session numbers more than doubled
  • session time increased by 70%
  • daily active users increased by 65%

That was in 2015. Yet the trend continues 4 years later.

The ICONex mobile app with a hamburger menu.

The problem with design is that it’s easy to get wrapped up in trends. When we see something repeated so often, we assume it’s popular for a reason. So we outsource our thinking to others.

But our actions have consequences. And we can’t afford to make those mistakes with ICON.

ICON needs an engaged voter base to keep the ecosystem vibrant. Hidden navigation hurts engagement. So let’s fix it.

A redesigned ICONex mobile app with the tab bar. Coming soon.
Our ICONex recommendations coming soon.

Follow us on our journey and learn how to design for real people.

In the meantime:

--

--

PARROT9
PARROT9
Editor for

A world-class software design team that can help you become the best in your industry.