As the percentage web browsing done on mobile devices continues to skyrocket, we as designers have needed to rethink many layout issues in our websites. Extensive navigation menus are essential for visitors to find their way to your content, but can quickly become a frustration. Screen real estate is at a premium as the device gets smaller, and user interaction is completely different on a handheld device (tapping and swiping vs clicking and hovering). The old tried and true static menu with dropdown child items is great for a desktop browser, but they can be a nightmare to scale down.
Below we’ll analyze a few popular types of mobile navigation, their pros and cons, and their most useful applications.
Select or Dropdown menu
szeliu.com
As the name implies, this method simply replaces the navigation menu with a styled (or often unstyled) dropdown menu. This is typically a standard HTML select menu.
Pros
- Lightweight. Requires no javascript, just basic HTML.
- Familiar. Everyone knows what to do with a dropdown, right?
Cons
- Not very flexible. You can really only include one level of navigation here. Standard select menus don’t have a way to add a child menu.
- Difficult to style. In my opinion, these are ugly. Often it’s difficult to style form elements to be cohesive with the rest of the site design, especially across different browsers.
Application
This is a quick and dirty solution. I’d only recommend use if you’re great at styling forms, or don’t really mind an amateur-looking menu.
Off-Canvas Navigation
target.com
This is a favorite of mine. Swiping the page to the side with your thumb (or tapping the familiar little hamburger icon) pushes the page content aside to reveal a vertical menu.
While this is a natural interface element for mobile, I’ve seen it used on desktop-sized websites as well.
Pros
- More than a menu. Many sites include a search bar or some other calls to action in this revealed area.
- Space saver. Just an icon is visible most of the time, so the focus can be on your branding and content.
Cons
- Requires Javascript. This isn’t a super huge problem anymore, but if you’re a fiend for CSS-only solutions (and browser support), maybe you should try something else, like a dropdown list or a menu in the footer.
- Unfamiliar (to some). If your target demographic isn’t real comfortable interacting with mobile apps (you know who you are), they may not recognize a menu icon, or know what to do with it. Same goes for any style that uses an icon. A way around it is to write out “menu” in the link, but that’s not very clean, is it?
Application
I tend to use this method in most of my responsive websites, when I want to add a bit of interactivity, or have a menu with multiple levels. Lots of web and native mobile apps have adopted this method as well.
Dashboard Navigation
southwest.com
Go here, here, or here. That’s it. Some mobile sites will strip away the whole home page, or most of the content, leaving just the navigation. Often there is a less prominent menu with the rest of the pages, but the primary path is pretty clear.
Pros
- Direction. If your site has a few primary content areas that you want to target, or specific tasks you want a user to accomplish, it’s nice to limit their options.
- Clarity. This limits the number of decisions a user has to make when entering the site.
Cons
- Interior navigation. This is nice for a home page, but how does a user navigate once they’re inside? There has to be a backup navigation for interior pages. Southwest handles this with second dropdown navigation menu that offers a complete set of options.
- Not a responsive solution. Usually this requires creating a separate mobile site from the desktop site, since the primary content changes for a mobile homepage. If your intent is to create a fully responsive design, this won’t fit the bill.
Application
Again, this is most useful for a site that has a clear path you want the user to travel, or if there are very common tasks that are performed primarily on mobile devices.
Footer list navigation
smashingmagazine.com
I rarely see this method in practice, but wanted to include it as it’s an interesting solution. Click on a menu icon at the top of the page, and you’re transported, either by smooth-sliding or a jump, down to the menu in the footer.
Pros
- Easy to implement. All you need to do is add an anchor link at the top of the page that slides you down to the menu. Or don’t, and let the user find it.
- Simplicity in code. Just HTML, that’s it.
- Out of the way. No worries about the navigation taking over your content real estate.
Cons
- Confusing. Especially if you don’t see the content sliding down, it’s easy to lose the sense of where you are on the page if you decide not to click on one of the menu items.
- User may never find it. With especially long pages, the user may never make it down to the menu.
Application
A good implementation may be on a site that’s light on content and doesn’t require the user to scroll a long way to get to the bottom. Another use might be for a complex menu that requires specific styling. These can be difficult to show and hide efficiently, whereas marking it up within the main page structure is pretty straightforward.
Conclusion
These are just a few of the prominent navigation UI styles out there for mobile. Of course, any decision regarding navigation should be made with the site’s specific content in mind, so there’s no cut and dry “right” way to do it. When you make your decision, consider the complexity of your menu and its context within the page, how savvy your user base is, and how the interaction will fit in with the overall layout and behavior of your site.
Of course, this is hardly a comprehensive list of possibilities. If you have another method you’ve seen or like to use, let us know in the comments.
