tab navigation and side drawer Navigation Peak showdown

Editor's note: This writer, Anthony Rose, co-founder and CTO of social networking Radio Zeebox, analyzes the pros and cons of sidebar Navigation and tab navigation, as well as the detailed process of a/b test for the revision process, and finally gives advice, After reading can have a clear understanding of these two kinds of navigation, very valuable experience to share:

================ Text Split Line ================

Imagine that you need to design a page with a lot of pages and modules, not in a screen to display the full application. You must first think of designing a tab navigation at the bottom or the top. Wait a minute, the extra row of navigation looks a little unsightly? We tried to get them in the sidebar, or the Android team gave its name to "side drawer navigation".

If your application is also multiple views, in your team, the following topics will often lead to intense discussion:

The navigation options are displayed on the screen so that your users can clearly recognize the app structure and avoid unnecessary operations to find out, or use side-navigation to make the main screen display area larger.

At present, side navigation is more popular on Android devices, and the iOS platform is not widely used. So our discussion also faces the question: does Android and iOS apps have the same user habits that apply to the same navigation mode?

I think it is valuable to share our experience here.

Usability vs. Clean design

When we first started the Zeekbox project, we used the tab navigation at the top. Our reason is very simple "do not see the mind." Since you can't see the entrances at the first sight, you may not know where they are.

For example, on the left of the diagram above, if you don't see the guide, you may not be able to find the navigation. If you find one, will you remember the side navigation entrance every time you come back to Zeebox? Even if you remember, you will need to click two times each time you switch columns.

But from another point of view, without that row of tab navigation, so that the design looks much cleaner, the navigation into the side drawer, so that the main content area has a greater space.

Side drawer Navigation This design pattern arose 18 months ago.

Facebook used a new way of navigating around September 2013-and probably a sample of the Facebook app I was using as A/b test. Of course, since Facebook has done that, it should be a good plan, I think.

Then, the Google Play team, which is friendly and willing to provide guidance, advises the sidebar drawer navigation (navigation drawers) as a new navigation method for Android applications.

So 6 months later, we decided to take the risk of trying to change to sidebar navigation. In order to ensure that the user can clearly find the side navigation, we use the first time to open, set the sidebar is unfolded, as shown in the following figure:

When the new version was released, our user feedback was great (like "The new design, all 5 points!"). Such feedback) but when we look at our data, it's a disaster! The user participation is reduced by half, as if the phrase "Don't miss" is really fulfilled.

A surprising fact

After realizing the severity of the result, we used a version of two weeks to restore to the top tab navigation mode. At the same time, in order not to let those who like the new navigation disappointed, we have left the option of side navigation in the setup.

After 6 months, Zeebox has undergone a lot of changes, and we have a new "my TV" page with more content, including subscriptions and ads, which is a very important page for users. To allow more content to be displayed on this page, we thought of trying side navigation. Based on previous experience, this time, we decided to use a smarter approach, A/b test.

My favorite A/b Test tool and method

We use Flinto to make high-fidelity clickable prototypes that make the design look like a real application, and users can do it in a very short time. You see here we created the Flinto prototype: Case 1, Case 2--on the iphone can get the best hit effect: In any area of the page click, can interact with the hot zone will show a highlight, you can click on these hot areas, as you use a real application.

We recruited people who liked to watch TV shows and came to our studio two times a week to test different concepts and prototypes of our designs. In some cases, we can test the options with small sample users, like the prototype test for my TV page mentioned above. For other situations, like verifying the use of sidebar navigation, you need to look at the actual usage records of a large number of users. At this point, we need to use A/b Test.

For A/b test for mobile applications, we use swrve--, the most mature A/b test tool in my opinion, which not only provides goal seeking (when the winning solution is clear, A/b test server can automatically switch all users to the best option), You can also choose to offer different experience scenarios to different users.

For example, if you are a subscriber to a Comcast source, you do not find that there is a Xfinity remote control function in our application, Swrve will let Zeebox play a window to tell you the relevant information. With this message-reminding mechanism, A/b test tends to be a more reasonable test result every day.

For the side bar to use the effect of the test, we adopted a 15/85 method, that is, 15% of users to the side bar of the scheme, 85% of users to maintain the way tab navigation. We released this new version for A/b test, waiting for the final test results ...

The test results are amazing, as shown in the following figure.

The effect of drawer Navigation and tab navigation on the frequency of user usage

The frequency of the week is decreasing (the contrast is obvious), the daily use frequency is decreasing, the time that the user spends in the application is decreasing. Side bar navigation looks like a disaster in the first round of testing.

Thanks to A/b test, let's quickly switch all users to the tab navigation scheme after a period of validation.

If the debate about using Sidebar or tab is also on your team, I think our research experience is worth sharing with you.

When we decided by A/b test that the sidebar was not suitable for our product, Facebook also released a new version of the application, or a Fixed bottom tab navigation. So, on the iphone, they finally chose a conservative way to navigate.

And what do they do with Android? On my Android device is shown on the next figure on the left one (through the two tab switch to different pages), on my colleague's phone show is the right one of the scheme, through (side navigation switch to different pages). Facebook must also be testing the user's different response to the drawer Navigation and tab with a/b test, and I'm looking forward to Facebook's final results on the test.

The translator: In the current face version of the introduction of the scheme 1, that is, the way tab navigation, as shown in the following figure

Facebook's latest decision plan

So, when is the right time to use the side navigation?

My suggestion is that if the main function and content of the application are in one page. Just some user settings and options need to be displayed on other pages. You can put these auxiliary functions in the sidebar in order to make the main page look clean and beautiful.

And if your application has a different view, and they are peers and need to be treated equally by the user, the sidebar will waste most of the user's potential involvement and interactivity in the sidebar entry.

Navigation from the birth, disputes constantly, which is good or bad, read the following article has its own decision.