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.