What are the best alternatives to drawer navigation?

There are plenty of articles and discussions about drawer navigation (three-icon/hamburger menu). This article is not intended to join these discussions, just want to find a better alternative, after all, the flaws in the drawer navigation has become a verdict >>>

Inefficiency: interaction is troublesome.

Poor navigation: I don't know where I am.

Crammed with all sorts of messy functions.

Let's take a look at some of the common navigation patterns

Before this I want to make a cliché: each product is designed for a specific user group, you need to carefully ponder the user's use of the scene, some methods may be suitable for you, but not for others.

1. Swarm and Label navigation

In the 1.0 version of Swarm by Foursquare, clicking on the head in the upper left corner is the only way to go to a personal center.

Swarm by Foursquare

This looks very witty, there are more than the avatar can represent the personal center of the icon? But the reality is that no one can understand this interaction except the designer, hehe. So after only one months, swarm the personal center to the bottom tab bar.

Tag navigation is the most common and practical, and although it takes up some screen space, it does have plenty of benefits:

Visibility is strong: it's all on your screen.

Clear structure: Up to five labels only

Easy to interact: just click, get it done.

Even Facebook, which has been using a drawer to navigate since 2010, has been in the arms of label navigation since 2013.

But Swarm's navigation also has room for refinement, such as their navigation only icon without text. It is true that the icon will be more intuitive and image, but the requirements of the icon will be very high, it must be easy to understand, otherwise it is like Facebook to use text to explain the better.

Swarm&facebook

As you can see, Facebook adds text to each icon, even if it's a conventional metaphor like "set-gears". Swarm, however, uses a hive-like icon to metaphor a personal center, which is clearly expensive to understand.

It may not be as serious as I say, but it is true that many things that are obvious to the designer may be difficult for others to perceive.

2. Tinder and sliding navigation

I refer to navigation as the Tinder, Snapchat, and other apps, which are called sliding navigation.

This type of navigation pattern is characterized by the nature of the experience, which complements the sliding gesture: The entire app is like a large, horizontal bar, and no matter how you slide it, it switches to just one part of the larger screen, which allows you to almost discard the "click" Action.

One of the big drawbacks of sliding navigation is that you can't switch from page 1th to page 3rd, more importantly, as the page title of the navigation icon can only display 3, the rest will be hidden, you need to traverse all the pages to know what pages of the app, where they were, This is really not intuitive and convenient.

But for apps with only 3 home pages, such as midpic, sliding navigation can be a duck in the face.

Midpic

Perhaps we can improve this navigation mode by "infinite horizontal sliding", which eliminates the user's sense of left at the top/right end of 2 pages.

Tinder

3. Bag and Pull-down navigation

Bag's designer, Nacho Rapallo, introduced an entirely new way to navigate: the drop-down screen-just like a drop-down refresh feeds, but it needs to be pulled more-to switch pages.

BAG

The pleasure of this interactive pattern is that it resembles a drawer navigation, but does not have some of the disadvantages of drawer navigation:

Do not occupy the land son

Five labels

Interactive fast

The biggest problem with drawer navigation is that when you switch pages, you need to click on the burger icon (or right), wait for the navigation to open, and then click on the target icon, if you're not careful, you have to do it again, it's a waste of time. In this way, your fingers do not need to leave the screen at all, and the efficiency is greatly increased.

However, this interaction is not without flaws, if your app contains timeline, and users need to switch pages after scrolling, first return to the top to do the operation. At the same time, as an invisible way of interacting, users need to be guided, which can be difficult. So I'm not recommending startups too much to use innovative interactive mode, which can make early users confused.

4. My Alternative

After careful deliberation, I tried out a navigation pattern that would avoid all of the disadvantages. I changed the bag down to sideslip so that I could avoid the problem of scrolling. Let's see what it looks like:

Slide navigation Pattern by Benjamin Berger

I admit that it is not perfect, for example, navigation is still hidden, users need to learn and habits. It also has a conflict with our commonly used right stroke return gesture. But it's really better than a drawer-style navigation.