CopyTrans.net mobile version concept
Date: 2015 - 2016
The research purpose
The “hamburger” issue
A responsive website is made to fit all device screens. Usually the navigation menu consists on a clickable "hamburger" icon on one of the top corner of the window, which displays the menu items. The issue with this kind of navigation behavior is that by default the navigation is hidden, which that means the user has to click on the icon and so he has to know the meaning of the icon. That behavior is a blocking point when using a website, reducing the conversions on the menu items. Both responsive websites & native apps share this issue.
Good articles about mobile menu navigation:
Not so new but still great articles about the "hamburger" menu issue:
- The Hamburger Menu Doesn't Work →
- Kill The Hamburger Button →
- Why and How to Avoid Hamburger Menus →
- How to solve the hamburger icon problem →
One simple solution is the use of a tab bar navigation. It allows us to display the most important items within the tab bar, so there are directly visible to the user. We can then hide the other items in a "more" section. All icons have their own labels, which make the meaning clear for the user.
This solution comes from native mobile applications, but totally answers the issue.
1. Moving the menu from top to bottom
Another critical issue with mobile interaction, especially with big phone screens, is the distance between the user's thumb and the top of the screen (also know as the "thumb zone"). By moving the navigation from the top to the bottom of the screen, we simplify the access to a critical element of a website.
2. Displaying main items & adding labels
Making the mobile menu even more adaptative
So now all "less important" items are hidden in the "more" section, which is a good compromise for phone screens. But what about tablets? After all, on tablets screens are wider (usually close to a small laptop screen) meaning we have more space to display more items.
Images, logos, product name & icons - © CopyTrans® / WindSolutions