First and foremost we are designing for humans. Machines can see beneath the curtain, crawlers can build a semantic map of your content and can reach under crazy contraptions for navigation, but humans only understand what they see. And don’t assume they will instantly understand everything that is visible to them.

Incrementally improving something that is broken, might not always be the best approach. When TIME.com built their mobile web app, they added a navigational drawer (or hamburger menu), then added the text MENU to it and then added a popup calling it out. All this, just to educate the visitor.

Credit: Luke Wroblewski

I am happy to see that developers and designer realize the hamburger menu is not a good idea. It is bad because it hides essential information from the user.

Sure you can argue that the content is #1 and in should be, however knowing what other content is available is a necessary piece of information for our digital experiences. More importantly for people who are just seeing your app for the first time it should be signaling what is there to do.

Obvious always wins

While the hamburger menu nowadays is something understood amongst many users, there are still people who don’t know what it is. Most people around us will know what it stands for, but is that really everyone?

Hiding things because they don’t fit, is just not a good idea. See how engagement dropped with such changes. And let’s be specific here what engagement really means, because you are interested in engagement that counts, that aligns with your overall goal.

Credit: Luke Wroblewski

Let’s not hide things under a menu to save space. Double down on what is important, and find a place to display it. That could be a tab or a segmented control or a bottom navigation bar.

Having it all out

Why does this work so well? Because options are always visible, which is good for two reasons:

• It is obvious to the new users what is available and what actions can be taken
• It provides quick access to areas of the application that might be buried under an additional interaction, like tapping on a hamburger menu or dropdown and then selecting the action

Three to five options

It usually makes sense to have from three to five options visible at any given moment. These should be your main top-level navigational items. Think of actions that people use all the time. Your views could focus on different jobs, so show only those actions that are relevant to the job at hand. Use short descriptions with meaningful icons and provide a reasonable tap area so that people can easily access items. Make sure to have the selected item stand out.

See an interactive demo of the Tab bar

Show more

If there are more than five options available, display a more button replacing the last item in the list. Tapping it should show the other available actions – these should be the least popular actions.

See an interactive demo of navigation with More options

Scrollable navigation

Another way of dealing with too many actions is by making the list scrollable. Be sure to make it obvious that the list is scrollable at a glance. The interaction model should be clear to the user.

See an interactive demo of Scrollable navigation

Badges

When you need to display additional information like a count of available items under a view – think number of pending friend requests, use badges on the action icons. This will instantly give the user an idea of what is associated with that view.

See an interactive demo of Navigation with badges

Making navigation as easy as possible should be one of your top priorities. How well people get around and find information on your website or in your app correlates with how likely they are going to stick around. You ultimately want people to stay, so help them.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.