Sometimes it’s hard to comprehend how much smartphones have evolved over the last decade. Only iPhone made its way from the 1st generation in 2007 to iPhone 7 in 2016. Naturally not just the hardware but the software has evolved tremendously.
In this article we would like to ponder on the subject of app’s navigation mostly comparing Side Menu vs Tab Bar. If you are curious why do we praise Tab Bars in our title so much and why to avoid Hamburger Menus keep on reading!
Three whales of navigation
Of course, there are more than three types of navigation systems, however, we decided to sift out the most used and practical solutions. Here they are:
- Side Menus
- Tab Bars
- Custom solutions
Let’s go over these three models and figure out pros and cons for each of them to help you choosing navigation UI for your app. However, we will mostly talk about what would be a better choice: a Side Menu or a Tab Bar solution for your app.
Side Menus
So what is a Side Menu? Well, the name is pretty much self-explanatory. Basically the main principle of Side Menu navigation is as follows: all menu items are located on either left or right side of the app screen. By using swipe gestures users can open/close a Side Menu.
However, default state of a Side Menu is usually closed (i.e. hidden). Therefore newcomers often have no idea what the menu items could possibly be. Nor do they know what other screens the app can offer.
What’s even worse, users are first required to identify the hamburger icon as actionable. Some developers even feel need to give people a hint, for example, provide a “menu” tooltip or label for the “hamburger”. Sounds sad, doesn’t it?
Possible confusions
It can cause some problems, as not all users will instantly grasp that there are other menu items and screens except for the one they started from and are currently looking at.
One of possible solutions for this issue would be putting more emphasis on the Side Menu icon and trying to grab user’s attention to it from the get-go. In other words, you should kinda shout out “Hey! We got a Side Menu here!”.
But don’t rush into this “solution of the problem”! You should first think whether your goal is focusing user’s attention on the fact that your app’s got a Side Menu, or putting more emphasis on the actual content and functions of your application.
Takes extra time to open/close
You gotta admit, waiting for the Side Menu to open or close takes time. And even if it’s not that significant you would be much better off if you could save your users from the trouble of any navigation friction.
Besides, once the Side Menu is open people first need to spot a desired feature and only then tap on it. On another hand Tab Bars allow saving lots of time by simply letting users see all items right away.
Besides, Tab Bar solution works much better as it lets users better memorize positioning of the menu items. This will make people more familiar with your app and, who knows, maybe even pump up your retention rate.
Fifty shades of inconvenience
Another downside of the Side Menu solution is that it’s pretty inconvenient. Let us explain why.
When a user surfs down through the app the odds are good they are gonna have troubles switching to other menu items with the help of Side Menu. This is particularly pain for the iOS platform.
Back button disaster
As you know, there’s no physical “Back” button on iPhones and iPads. Therefore iOS developers have created a platform navigation pattern where the “Back” button is automatically inserted into the top tab on its left.
This may lead to the conflicts like the one on the picture above. Looks pretty stuffed, doesn’t it? Well, it’s either this or force users navigating through a number of screens in order to get through to the longed-for hamburger: “Mmmmm … hambuuurgggeerrr”.
Buckle up! We’re going dooooooown!
Here’s another “fine feature” of the Side Menu solution. In a nutshell it’s about users not being able to access the menu button from their current screen.
Because of the screens stacking up it often happens that in case people want to get to a certain menu item they should go up a step or a few and then open the Side Menu and only then they finally would be able to get to the desired menu item. Quite painful, isn’t it?
Other issues
One of the key problems is the fact that users select one thing on one screen and that causes stuff on another screen to change…
Besides, as phones with big screens are becoming a commonplace, dragging your finger to the “hamburger button” in order to open up the menu is turning out to be a tricky and rather inconvenient task.
As you can see Side Menus have not too many advantages. The next paragraph is gonna compare Tab Bar vs Side Bar featuring pros and cons of Tab Bars.
Tab Bars
Now that we criticized Side Menus – Tab Bars’ mains competitors – it’s time to talk about the article protagonist. As you probably already understood from our “subtle” implications we find Tab Bars to be a much more convenient solution for navigation than Side Menus.
As a matter of fact, Tab Bar makes up for virtually all the downsides we discovered in Side Menus. Firstly, all items of the menu are seen by user at all times. Honest Tab Bars got nothing to hide! Just like the politicians, but for real!
In fact, both newcomers and old users wouldn’t have any trouble in case some app developers decided to switch to the Tab Bar navigation system as an alternative to the app’s old Side Menu solution.
Even better, newcomers would probably be delighted by such switch! Even though they wouldn’t even know the switch was made in the first place 😀
Level up on convenience
To top it off, menu items are located in the highest comfort touch zone – no matter which hand is the device held with. And the best thing is – whatever screen a user is currently at they can always switch to another one if necessary.
Also, besides the menu items Tab Bars often hold some important functions or particular key elements of the app. It can be, for example, checkins attachment or adding posts into storytelling.
The “4 + 1” rule
Besides all the pros, there are some issues. The main of which is that if you use a Tab Bar rather than a Side Menu you might run into a problem of too many menu items.
However, there is a solution. In such case usually 4 main menu items are used and the 5th item plays role of a kinda group element for the other items. Facebook app is a prominent example that makes good use of this solution.
Again – the goal is picking out 4 main menu items and put the rest into the 5th separate item (usually it’s stuff like settings and user account customization).
By the way, LunApps came up with a custom solution for that as well as Facebook did. You can check it out here.
Here you can read our case study where you’ll find out how we’ve developed it.
A side note
Now a little science for ya: Actually the official name for the rule is “7 +- 2”. Psychophysiology tells us that the perfect number of objects a human is most comfortable perceiving at the same time lies in the boundaries of “7 +- 2”.
Basically, if the number is higher than 9 people subconsciously try to avoid the solution (memorizing) of the objects. However, being minimalistic and thinking “less is better” developers tend to keep the number of objects at 5 (which is where the “4 + 1” came from).
Scrollable Tab Bars
If you’re not happy with the “4+1” concept you can try and implement a scrollable Tab Bar. That’s what Rookie developers did. This is a much better solution than a usual slow Side Menu.
However, you should factor in a possibility of higher error rates because of the need to distinguish between tap and scroll intentions. Still, if your goal is to provide users with a wide list of actions rather than just navigation this is a solution you might wanna take a look at.
What’s out of sight, is out of mind
In a nutshell, the title says it all: if an object isn’t intended to draw user’s attention to itself people just won’t use it or even think about using it.
It’s often called “Anti-UX”. The point is, there are some actions you don’t really want people to do (delete the account, change privacy settings, sign out, etc.). The solution can be hiding this kind of actions behind a weird button with an unclear name (or without any) 😀
This way you minimize the possibility of users doing all those unwanted things. You might wanna throw those actions behind an “Account” button or a gear wheel (learning from the great – Facebook).
Who knows, maybe this little trick will help you keep much more users and some day you’ll thank us for it 😉
Get creative with Tab Bars!
We’d like to share an interesting solution with you. Guys from Ramotion came up with an idea that makes use of the micro UX concepts.
In a nutshell, they give users the possibility to delete writings under the icons in the Tab Bar. The point is, when users have used your app for a while and have become quite familiar with its Tab Bar menu they have an opportunity to give it a fresh look.
Not that it’s gonna make your users feel omnipotent but it’s sure a cool option. People always like customizing app designs and you gotta admit – Tab Bar icons without writings look kinda cool 😉
Custom solutions
This is the third item on our “Three whales of navigation” list. However, this one isn’t really restricted by shapes, forms or structure. There might be a hundred different situations and a thousand unique solutions for them.
Sometimes an app can only have 2-3 main/additional screens. In this case you should come up with a navigation solution that would … wait for it! … eliminate the concept of navigation from your app. That is – trying to get your app to a so called single-screen view.
In other situations your goal is to think of the best navigation structure for maximum usability and the best user experience. You should necessarily consider what items you should hide from users (in case of their rare usage).
Always keep in mind that if a user can’t see an item most likely they won’t find it and therefore they’re never gonna use it at all.
Conclusion
So why is a Tab Bar so convenient for users? The most important of its upsides is the convenient location. As we already mentioned, Tab Bars are located in a “golden” zone, i.e. the most comfortable zone for reaching menu items.
On top of that users are always aware what item are they on at the time and what items can they switch to. And for us humans having control over a situation is an important, even crucial thing!
To sum it up: in the battle called “Hamburger Menu vs Tab Bar” we got an obvious undisputed winner. Next time you’re choosing a navigation method for your app we recommend you first asking yourself “How to avoid Hamburger Menus?”.
If you have any questions regarding your future project, feel free to contact us. We kick asses when it comes to developing apps with smart custom design!