Tabbed navigation and sidebar use in interactive design

Imagine you need to design a page that contains many pages and modules that do not display the full application in one screen. You must first think of designing a Tab navigation at the bottom or top. Wait a minute, the extra row of navigation seems a bit obtrusive? We try to put them in the sidebar, or call the Android team to give it the name "side drawer navigation."

If your application is also multi-view, the following topics often lead to heated discussions in your team:

Is the navigation options are displayed on the screen, so that your users can clearly understand the app structure, and avoid unnecessary operation to find; or use the side navigation to the main screen display area larger.

At present, side navigation is more popular on Android devices, and the use on the iOS platform is not very common yet. Therefore, we have to discuss a problem: Android and iOS applications are not the same user habits, the same navigation mode?

I think it is of great value to share our experience here.

Usability vs. clean design

When starting the zeekbox project for the first time, we use the tab navigation at the top. Our reason is very simple "do not see do not remember." Since you do not see the entrances at first glance, then maybe you will not know where they are.

For example, if you do not see the guide, you may not really find out where the navigation is. If it's found once, will you remember the side-navigation's entry each time you return to zeebox? Even if you remember, you may need to click twice each time you switch columns.

But from another perspective, there is no navigation in that row of tabs, making the design look cleaner, putting navigation into the side drawer, giving the main content area more room.

Side drawer navigation this design model rose 18 months ago.

Facebook used a new navigation method around September 2013 - and probably the Facebook app that I'm using as a sample of A / B test. Of course, since Facebook has done that, then this program should be good, I think so.

Then, the Google Play team, who is friendly and helpful, recommends sidebar navigation drawers as a new navigation method for Android apps.

So after 6 months, we decided to take the risk of trying to navigate to the sidebar. In order to ensure that users can clearly find the side navigation, we opened the application in the first time, set the sidebar is expanded display

When the new version was first released, our user feedback was great (all such feedback as "like new design, all 5 points!") But when we saw our data, this was really a disaster! User engagement was reduced Half, it is like "can not see do not remember" this sentence really fulfilled.

Surprising fact

After realizing the seriousness of the result, we returned to the top tab navigation mode with a release in two weeks. At the same time, in order to prevent disappointment from users who like new navigation, we have the option of side navigation in the settings.

After 6 months, zeebox has undergone many changes, we have a new "My TV" page, which is more rich in content, including subscriptions and ads, is a page that is important to users. In order to show more content on this page, we thought of trying side navigation. Based on previous experience, this time, we decided to use a smarter way to test A / B test.

My favorite A / B test tools and methods

We use Flinto to make a high-fidelity, clickable prototype that makes the design look like a real application, and the user can do it in a fraction of the time. Here you see the Flinto prototype we created: Case 1, Case 2 - Get the best click performance on your iPhone: Click anywhere on the page, the interactive hotspot will show a highlight, you can click These hot spots, just like you use a real application.

We've recruited people who like to watch TV shows, come to our studio twice a week, test different concepts and prototypes we design. In some cases, we can test the alternatives with a small sample of users, just like the prototype tests mentioned above for the "My TV" page. For other situations, like verifying the use of sidebar navigation, you need to observe the actual usage history of a large number of users. At this moment, we need to use A / B Test.

For Mobile Apps A / B Test we use Swrve - the most sophisticated A / B Test tool in my opinion that not only provides Goal Seeking (A / B Test Server automatically switches all Users to the best option), but also to choose different users to provide different experience programs.

For example, if you are a subscriber to a Comcast source and you do not see any remote control of Xfinity in our app, Swrve will let zeebox pop up a window to tell you about it. A / B test tends to be a more reasonable test result every day through the adjustment and control of this message reminder mechanism.

For a sidebar test of performance, we used the 15/85 approach, a sidebar solution for 15% of users and a way for 85% of users to keep Tab navigation. We released this new version for A / B Test, waiting for the final test results ...

The frequency of weekly usage is declining, the frequency of daily usage declining, and the amount of time spent by users in applications is declining. Sidebar navigation looks like a disaster in the first round of testing.

Thanks to A / B test, let's quickly switch all users to tab navigation after a period of verification.

If the debate about the use of the sidebar or tab is also on your team, I think our research experience deserves to be shared with you.

When we decided on the A / B test that the sidebar was not for our products, facebook also released a new version of the app, or fixed bottom tab navigation. So, on the iPhone, they eventually chose the conservative way to navigate.

And on Android, how do they deal with it again? On my Android device, there is a solution to the left in the next image (different pages are switched through the second level tab). On my colleague's cell phone, the right one is displayed. (Side navigation switches different pages). Facebook must also use A / B test to test users' different responses to drawer navigation and tab, and I'm looking forward to facebook's final result on this test.

Translator by: In the current version of the latest face using a program 1, which is the way tab navigation,

So, when is it suitable for side navigation?

My advice is that if the application's main features and content are in one page. Just a few user settings and options need to be displayed on other pages. In the main page looks clean and beautiful purpose of these auxiliary functions can be placed in the sidebar.

And if your app has different views and they are level and require equal treatment by users, the sidebar will waste most of the potential users' engagement and interaction with the sidebar entries.