Sub-menu dropdown vs tabs on mobile

Question

I am trying to figure out what a better UX is on a mobile phone. Either having the sub-navigation as tabs, or have it be a dropdown.

Method 1 - Dropdown on mobile

In the following images, the sub-navigation changes from tabs on a desktop, to a dropdown on a mobile phone.

The desktop shows the sub-nav across the top in white. You can see each of the options (Top-stories, world, U.S., Business, etc.)

The phone shows only the active sub-menu in the top nav. You access the other options (World, U.S., etc.) using the dropdown.

PROS:

• Saves precious screen real-estate
• Looks very clean

CONS:

• User does not know about other options until clicking the dropdown
• less room to expand main menu (heading text not included with hamburger button to expand the main menu)
• Hard to do a 3rd level of navigation

Method 2 - Tabs on mobile

In the following example, the main-menu stays as tabs.

PROS:

• User is aware of all important actions immedietly
• The hamburger menu can be combined with text to give a larger hit area

CONS:

• Takes up more valuable screen real-estate
• Hard to give a 3rd level of navigation

Method 3 - Everything in the left nav

If you put everything in the main nav, then the main-nav is usually no longer click-able. It's usually expandable, or shown as a header like this screen shot. The sub-nav is the one that is directly clickable. (Pretend that "Favorites" was "News" and everything under it was different links).

PROS:

• Saves screen real-estate
• 3rd level navigation can be displayed as tabs

CONS:

• Left nav is hard to go through and seems cluttered, especially with many links
• User does not know all of the options without clicking the main menu and looking through everything.

One final thought

Most of my exmaples were news apps. The sub-navs in these news apps could be seen as just a big filter of the news stories. I.e. you wouldn't necessarily have to click the sports link to see important sports stories. However, what if it wasn't exactly filtering stuff you could find on the main tab, but was showing extra info. I.e. an obituaries section. That wouldn't ever show up on the main page, but would still be something someone would want to navigate to.

Answer 1

I think you have answered your own question by saying the user does not know its there until they click on it. Also that is if they do click on the drop down or side menu.

I think if the user doesn't know it's there then it might as well not be there. The tabs will provide more visibility and they will take up more real estate but I don't see that as a huge problem. I also think you can use tabs have a deeper navigation, just look at most iOS apps that use tabs and Android ones too.

Not really much of an answer but I still hope this helps.

Answer 2

Tabs may take up more real estate, but many apps have been using a pattern that while scrolling down the page, the tabs (or any subheader/button-bar) will slide up behind the main header. A simple scroll towards the top of the page will reveal the tabs. This still allows the user to know where they are within the app, but will give a thumb's worth more of real estate while browsing downwards.

Seen in Yik Yak, Facebook, Instagram, etc.