CopyTrans Mobile

Rethinking the mobile navigation

← Back to portfolio mobile version concept

Date: 2015 - 2016

CopyTrans website mobile design

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 solution

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.

The thumb zone preview

2. Displaying main items & adding labels

Facebook tab bar example

The result

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.

Mobile navigation on iPad

Images, logos, product name & icons - © CopyTrans® / WindSolutions

↑ Back to top Continue to portfolio →

Beam me up, Scotty!