Design your way

How does the ideal mobile navigation look like?

To start with, it has to be easily accessible, discoverable, and occupy as little screen space as possible.

There are good and bad sides to each navigation concept, but the general rule is that you have to balance your mobile menu design, making sure it is not too exposed or completely hidden in another hamburger menu.

The final decision you will make will depend on the site/app you’re running, based on which you will narrow down choices to several solid mobile-navigation quandaries.

The challenge is that when designing mobile navigation, you also need to embed a searching functionality, and they both take their toll.

You will have to devote both enough screen space and make them attractive for users, especially when designing a universal piece for all mobile devices, and this may lead you to the concept of hamburger navigation.

Menu examples where designers really needed to save screen space usually go for search boxes and short navigation links that don’t interfere with users’ capacity to find the information they need.

When designing your mobile interface, try to deal with navigation and search first, and make sure they are accessible and discoverable. Keep in mind the main tenet of mobile usability: content matters more than chrome!

This is exactly what makes mobile navigation difficult, as most of the time you have to sacrifice either accessible navigation or content prioritization.

Top navigation bars

Top navigation bars are among the few original remains of traditional desktop designs, which simply enumerate the main menu options on top of the mobile screen.

The option is efficient and doesn’t consume that much space, but it has 2 important disadvantages to keep in mind: It will only work for limited navigation options; it will take away a lot of valuable estate right over the fold.

Tab bars

Tab bars are quite similar to top navigation bars, but they only appear on mobile-exclusive apps.

They are usually placed on the top of the screen (Android ones), or in the bottom area (iOS devices). What is specific about them is that they appear on every page of the app, which is why you may find them just as inconvenient as top navigation bar.

What is more, they will persistently appear on the screen regardless of whether the user is scrolling or not, unlike top navigation bars that disappear as the user moves downwards.

Which are the good sides of top navigation bars then? We’d say they communicate neatly and accurately the location of the user, and offer icons and labels as visual cues to avoid any confusion.

Tab bars, on the other hand, appear on the screen all the time, and often compromise the user’s ability to see information or access it with a single click.

When it comes to downsides, both top navigation bars and tab bars limit the options you can offer to users (up to 5) as adding too many fields would make the menu look cluttered and decrease the optimum touch-target size.

Can you think of something that could be more frustrating to users?

So what is Android’s and iOS’s rationale behind these bars?

First of all, both platforms have a different set of guidelines and rules regarding usability, and those must be taken into consideration for your app to be accepted in future.

You should design a top tab bar for Android, and a bottom one for iOS, but also remember to enable view switching for the later. In the Android case, top placement ensures full view control, while all additional actions are displayed as separate bars on the bottom.

The best course of action according to us would be to use both icons and labels, as icons are not submitted to severe size restrictions, and labels can communicate the meaning on their behalf. In order to guarantee conversions, you must ensure users understand where clicking on the icon will take them.

Basically, top navigation bars and tab bars are perfect for websites that offer a limited number of navigation options.

With more than 5 fields each they’d risk affecting the menu’s optimal touch-target size, and they should definitely avoid these so-called carousel navigation options.

A Hamburger Menu and its alternatives

Each menu that has few main categories that hide new lists of detailed options can be considered a hamburger menu.

The popularity of the hamburger navigation concept is growing, but it still has alternatives such as icons and labels that will do just as good.

If you read a bit about it on the net, you may as well discover that users prefer the term ‘menu’ to ‘hamburger icon’, and appreciate the large number of option it contains. That, however, depends on how much experience with similar sites they’ve got.

The ‘magic’ of hamburger menus is that they assemble a vast number of navigation options in a tiny piece of your real estate, and include comprehensive submenus that give them even more accumulation power.

The disadvantage, as we mentioned before, is the difficulty of discovering information that is not placed directly in front of users. We recommend this option to browse-sites and complex apps that have plenty of content to display.

For some sites, the navigation challenge will be a bit easier: If you’ve just launched your website, for instance, users won’t have to navigate to specific fields, but will rather ‘consume’ whatever data you’ve presented to them as important.

In such cases, the best choice is a standard navigation menu that occupies minimal space, and still makes it possible for users to find what they need.

Nevertheless, bear in mind that despite of menus being salient enough, content will still be hidden inside, and it will be up to the user to decide whether he wants to open it or not.

Therefore, you must make it look relevant, and yet organize it in a standard manner users have already seen elsewhere.

If you confuse them with uncommon patterns, they won’t feel confident to browse your content. How possible do you think it is that they will come back and check it later?

With a standardized navigation bar, on the other hand, navigation will require additional methods and techniques, including the presence of an IA site structure where information can be discovered clicking on cross-selection links.

Ending thoughts

Designers of mobile sites and apps are facing the challenge of maing navigation easily accessible, and yet preserving enough screen space to display all UI elements and to prioritize content.

There are several navigation patterns developed to deal with this problem, and which one you will choose depends on your own usability needs.

They all have their downsides, and the best scenario is to choose one where those inevitable disadvantages won’t interfere too much with users’ quality experience.

This means that the navigation pattern you’ve chosen shouldn’t stop users from doing the following:

Discover information. Hamburger menus, for instance, can accommodate as many options as you want, but it is questionable whether users will be experienced enough to find them.

Access that information easily. Top navigation bars and tab bars do a good job here, but only if you have a limited number of options that won’t affect optimum touch-target sizes.

Understand what that information is about. The truth is that all navigation patterns occupy real estate, but that shouldn’t make the app look cluttered with a limited number of options and UI elements.

Mobile navigation inspiration

Navigation is an important part of every user interface, whether it is for a website or for a mobile app. This may come in many forms and styles, horizontal, vertical, maybe minimalistic or highly detailed and graphical.

Probably more importantly than having a navigation that looks good is to have one that is intuitive and easily accessible. Mobile navigation combines the usability idea with the aesthetic one and delivers really spectacular results, making you want to use and appreciate a menu user interface, not just make it a means to an end.

This article features a lot of mobile menu UI examples that I’m presenting to you for inspiration and which I hope will help you develop a menu interface easier and better when you’re facing an idea crisis.