Pocket Home Tab as a Menu

✋ What is it?

This is a solution found in the Pocket app. When using the bottom navigation tabs, users will notice that a secondary tap on the home tab will reveal a contextual menu that allows them to switch to other content views, effectively replacing the tab default behavior.

🤲 How does this interaction or solution work?

Pocket is a popular article and content saving/bookmark app that was acquired by Mozilla. Pocket allows users to save content they find online so that they can read it at a later time.

When users consume their saved content, they can move it to an archive folder where they can retrieve later if needed. Users can also favorite content and share it with friends. Shared content shows up on a different list.

Pocket will also classify your saved content into content type lists like Articles or Videos (when you save videos)and will also show you when a piece of content is trending or is considered "Best Of."

To switch between these different views, Pocket relies on a secondary menu that gets revealed when tapping the home menu a second time.

That tab uses a dropdown icon as an affordance that indicates that there's a menu bound to a secondary action (a double tap / an extra tap).

The menu that gets revealed after tapping the menu tab while it's active shows a list of the different content scopes. When the users navigate into another content scope, for example, when they tap the "Archive," the tab gets replaced with the "Archive" icon, and this view becomes the default view for the first tab.

In other words, the secondary menu that gets revealed after a second tap in the first tab can change the default view that lives under the first tab.

🙌 How does this interaction or solution work?

Navigability, Layout, and Customization

Organizing user content is a hard UX problem. In this particular case, one reasonable solution would have been to put the list of content scopes under a more traditional menu, like a hamburger menu.

However, Pocket went with a less conservative approach by changing the functionality of the first tab so it could emulate the behavior of a standard tab, a menu, and a segmented control or view switcher.

By doing this, Pocket is improving the navigability of its app since they don't need to clutter the top level of the app with more navigational elements, and they can keep all navigation functionality contained to a single component.

This approach can also help to declutter the app by creating a cleaner layout that doesn't require extra affordances to elicit key navigation routes. Instead, this solution only uses a single simple children affordance that it's part of the parent affordance.

Finally, by enabling this behavior, Pocket allows users to have a certain degree of control on what content scopes matter to them and creates a simple mechanism to overwrite the defaults.