Mobile Navigation
There are some great debates and articles in the UI/UX designer world about “Should we use hamburger menus in our products?”.
If you are interested in the origin and history of this pattern, you can read this.
But this article does not intend to be one more, it tries to find alternatives navigations and explains them.
Why? Because personally, I have been convinced that hamburger menus are the easy solution which come with a lot of drawbacks :
- lack of efficiency (slow interaction);
- lack of visibility (hide your menu);
- full of unnecessary items;
And way more that you will find here.
So what are the others patterns you can use?
First of all, I believe that every product is unique and most of all, is designed for specific users. That is why you must be very careful in your experience. Some interactions might be obvious for you, but not for everyone.
1. Swarm and Tab bar menus:
For example, in the first version of Swarm by Foursquare, release in May 2014, the only way to get access to your profile information was to click on your head, on the very top left corner (picture below).
Which is actually clever. What could be best than your profile picture to represent a “profile button”? Well, a lot of other things apparently, because no one understands this interaction, besides designers. So one month later, Swarm updated its navigation and add a profile button in their tab bar.
For the rest of its navigation, this app use a simple Tab bar, which is, usually, pretty effective.
Tab bar are great because, even if they are fixed on your screen: -they display all your menus item; -restraint it to five main categories; -with one simple tap you can instantly go from one page to another. Even Facebook, after bringing back the Hamburger Menu in 2010, dropped it for a tab bar in 2013. More on tab bar VS Hamburger here
But, Swarm’s navigation could still be improved. For example, they use icons as buttons. Icon are nice because you don’t have to translate them, they could be seen as an international language. But they need to be very understandable or come with a name. Here is a comparison between Swarm tab bar (top) and Facebook Groups app (bottom).
As you can see, in all their app, Facebook add the name of every item, even for a well-known metaphor such as a gear for “settings”. Swarm invent a metaphor using what looks like a hive as their “Home” button, which is not understandable.
I exaggerate of course, to emphasize on the fact that what seems to be obvious for designers is not for the rest of the world.
2 Tinder and Swipe Menus:
Tinder, Snapchat and others application use what I call a swipe navigation, as a main navigation.
In one hand, the big plus of this pattern is that it seems to be a “natural experience”. The Tinder app feels like one big horizontal screen, you never leave the page but still access to different information and action. To get this feeling, they use the “swipe” interaction which is pretty good because you never have to take your finger off the screen comparing to a “tap” interaction.
On the other hand, you cannot quickly access to the “Moments” page on the Tinder app. And more important, the page is completely hidden on the main screen so it requires a walkthrough to be understand, it is not fully intuitive.
This navigation works great for the Midpic app which only have 3 main pages.
Maybe we could improve this navigation with an “infinite horizontal swipe” and always being able to go to the next pages. This would prevent the user from feeling “blocked” when he gets to the far right or left.
3 BAG and Vertical Swipe Menus:
A not so famous app called BAG introduce a new kind of navigation. Invented by its designer Nacho Rapallo, you have to swipe down the screen, the same way you would swipe to refresh, but then while swiping more or less, you choose an action.
What I really like in this interaction is that it works like a Hamburger menu but without a lot of drawbacks.
-You have access to a full written menu; -It doesn’t take any space on the screen; -You could have up to five categories; -It is fast.
One of the main problem of a Hamburger menu is that you will first tap on the icon, then wait for the menu to open, then tap on an item, then wait for the animation, then finally access the page. And do it all over again if you choose the wrong page. Very time-consuming.
Here, you access the category and choose one of them without leaving your finger from the screen.
But, because there is always a but, with this kind of menu, if you start scrolling on the timeline, you won’t be able to use it anymore, you will have to scroll back to the top (or add a button which bring to the top) to access the main navigation.
As an unusual menu, it also requires a tutorial to immediately understand how it work. Introducing a new concept of navigation can be very tricky depending on what your product is and who your users are. I do not recommend for startups who have to create their user base to be all creative in User Interface as they could get early users confused.
4 Navigation experiment :
Taking all of this in consideration, I wanted to try a new kind of navigation pattern, trying to avoid most of the drawbacks of the last ones.
I took the BAG app navigation as a start and used it on the side, this way, it avoid the all scrolling problem.
Here is how it looks (yeah I know, strange finger).
Of course, this is not perfect, because all the main navigation is hidden, the user would have to get used to it and finally, on iOS, this gesture is used as “back to the last page”.
But I think that on the plus, it use the same navigation pattern as an Hamburger menu, without the interaction problems.
How to choose a navigation?
Of course, the perfect solution does not exist yet. Mostly because all the products are so different that you cannot create one pattern for everything.
Even a Hamburger menu is sometime the best solution. Take a look at the Facebook mobile app. Facebook is the service which bring back drawers menu in the game, and everyone started to use it. But they replaced it with a tabbar, on which, one of the item is actually the hamburger icon.
The tabbar is nice because you can go from one page to another in less than a second, but in my opinion, it have to display only the main pages.
On the Facebook one, you have :
-Activity feed (the home and main page);
-Friends requests (not so usefull once you have reached 100 friends)
-Message (very useful back in time when messenger did not exist)
-Notifications ( very useful, but in third position. Why?)
-More (link to all kind of things not so organised)
I think that there is actually only Feed and Notifications which are useful here, but still, one part of the screen is hidden because of this tabbar.
So maybe, keeping the hamburger menu here would have been better?
What do I do?
So here is where I think working the User Experience and the User Interface of a product at the same time is very important and effective.
When I list all the different pages of a product, I start organizing them according to how important they are and how often will the user need the page.
You can also run some betatest with your users, in order to have interesting metrics to analyse and improve your interface.
And then, design the navigation as logical as possible. It should all be part of a big scenario where you can immediatly access the information you are looking for with 2 taps top.
I like sometime to gather several information in one page, using tabbar. For example, in one application I designed mostly for fun, I experienced with a navigation where all the “second level” pages were all in a profile page. This way, I was able to only have one button on the home page, bringing to settings/profile/notification/follow mgmt. Also, all those pages were related in the way that they are all about YOU.
In conclusion, I would say, try to focus on an experience which make sense to the product, to the user.
