Background

Navigation on mobile is a hot topic nowadays. I guess we could say that 2014 was the year of the “hamburger icon”. It has become the go-to icon to use whenever you want to save space on a small screen. It has become a no-brainer for designers when designing for mobile. You have a horizontal menu on large screens and you hide it inside a burger on smaller screens. It’s the best invention since sliced bread (pun could be intended). It has gotten so over used that even the “hamburger-morphes-into-an-x” animation had to be created so we wouldn’t get bored of it.

But is it good practice or has it become the most stupid no-brainer in the history of web design?

After reading Luke Wroblewski’s article on whether or not you should hide content from your users I guess we could agree once and for all that a hamburger icon alone doesn’t make your users interact with it. Only your developer and designer collegues will, because they can’t wait to see what happens when they click it. (At least that’s what I think every time I click one). “Will it turn into an X?”. “Will the menu slide in from the side or will it pop down from the top?”. “Surprise me!!!”

Since I haven’t done user tests regarding different types of mobile navigation variant efficiency I can’t give you a correct formula of how you should do your mobile navigations. Besides, all projects are different and you can’t use one kind of navigation on all, like we have been doing with our beloved burger. But what I can do is give you some inspiration and examples of good and bad usages.

Before we dive in to some examples, let’s define some success criterias of a navigation on a website.

“Through a navigation on my site/service I want my users to..”

  1. Find the content they are looking for as effortlessly as possible.
  2. Not feel excluded because of their vision impairment or any other kinds of disabilities
  3. Know where they currently are on the site/service
  4. Feel like there are no unknowns before clicking anything
  5. Find it aesthetically pleasing

(If you have any other success criterias, please put it in the comments.)

Examples

The following examples are not meant to be read as the classic clickbait “20 sweet mobile navigations”. It is a list of different user engagement approaches.

1. The “I’m as obvious as it gets” approach

I wonder why this one isn’t more used throughout the mobile navigation world. This one is also my favorite. “Why?” you might ask. For the user there is no question where the navigation is or what it contains. The buttons are right in front of your face and not hidden behind a button. But it is also one that only the privileged can use. If you’re making a website for a hospital and you have 30 top level navigation links, this one can easily get pretty messy. But it is one you should really consider if you’re dealing with a fairly small site or app.

The following screenshot is from the site svgontheweb.com. The site is more or less a book about everything you need to know about SVG on the web. As you can see they only have three top level links. But they have a table of content which has 11 list items. On larger screens this is floated to the left and on small screens it takes 100% of the width and is positioned right underneath the main navigation. For some people out there reading this, you might think this is a bad idea because the users won’t see anything related to the real content of the site after the site has been loaded. Yes, I am talking about the “above the fold” concept. It would be a shame to dedicate all of the “above the fold” space to the navigation, wouldn’t it? Or would it..? Let’s face it; People scroll and there is no “above the fold” on the web. At least they now know what the navigation contains and where they can find it. Screenshot from the website svgontheweb.com

The next one is a version which hides some of the content inside a horizontal overflow. You have to swipe horizontally to access the rest of the navigation if your screen isn’t wide enough to show all of the links. It isn’t as bad as jamming stuff into a hamburger, but you’re still hiding content from the user. But there is no doubt that this is a navigation and I guess the threshold to interact with it it very small. Link to the site. Screenshot from the website carrotweb.com

2. The select box approach

You may have read my in-debt article on the select element element. What you might notice is that I’m a big fan of leaving it alone and letting it do it’s job, which is to be a select box in a form. Some people choose to customise it so much that it looks like a hamburger icon. When the user taps on the icon, he/she will freak out when the device pulls up whatever device appropriate behavior it has for the select box. On iOS you have to tap the “Done” button to close/submit it. This takes all the attention away from the navigation. In addition the Previous, Next and Autofill buttons don’t work because it isn’t inside a form. Confusing for the user, bad for semantics, SEO and overall a big no-no. Navigation items should be links - not options in a select box which belongs in a form. Select box navigation

This one got really popular in 2012-2013. The first time I saw it was when I visited Happy Cog’s websites in 2011 (I think). They don’t have that kind of navigation today, and I guess it’s for good reasons. The good thing about this approach is that it is a timesaver if you already have a sitemap in your site. The downside about this is is that it may confuse the user unless you show the user that he/she is being taken to the bottom of the page by animating the scroll. I guess you could call it “internet vertigo” if you suddenly find yourself at the bottom of the page when you think you’re at the top. If you don’t know what I’m talking about, check out the example below. Animated gif with example

4. The “I’m a menu button” approach

This is my second favorite technique. If you see a button with supporting text in it, there is no doubt what will happen when you click it compared to if it was just an icon. In this case the text would say something like “MENU”. The only drawback with this one is that you are hiding the actual navigation behind the “MENU” button. It’s more likely that a user would click a navigation element if he/she wouldn’t have to work for it. Happy Cog

5. The “screw you” approach

Let’s finish off with a worst case example. This one violates all accessibility guidelines that ever existed and it also doesn’t fulfil any of our success criteria in this article. There is practically no contrast between the hamburger and its background. Putting white on beige excludes even your users with perfect vision. And in this case especially, since the site is for a summer music festival. And guess where your mobile users will be when they access the site? Anwer: In the sun. I ran the colors through this color contrast ratio calculator and if failed miserably. pipfest

Behold: pipfest

Conclusion:

  • Don’t hide the navigation for your users.
  • Try to fulfil the success criteria above.
  • A great design isn’t only pleasing for the eye, but also user friendly, accessible and inclusive.