Overview
The “secondary view” of the mobile navigation is at the most basic level shown for any item that doesn’t meet the requirements of the the “primary view”. Much like the primary view, the secondary view navigation is composed in two parts: the top nav bar and the bottom tabset.
Due to the broad range of features and functionalities in which this view encapsulates, there are several variants of the secondary-view that are applicable for specific use cases, these include “content page”, “chat page” and “filtering/action page”.
The “content page” refers to page content/features that are directly accessible from the primary view pages. These are typically read-only pieces of content that don’t require any direct interaction/action from the user. Here the bottom tabset is shown, albeit without any tab in an active state.
The “chat page” specifically serves our Collaborate mobile experience, given that it’s a chat based experience. Within this view, which is shown against the messaging window, the bottom tabset is hidden with only the interaction block visible.
Lastly in the “filtering/action page”, this page view is shown for filtering based tasks (specific large amounts of filtering - more detail on this in the filtering pattern documentation) with features that require direct user intervention. In this view the bottom tabset is replaced with a button dock that allows for a primary, secondary and tertiary button to be shown depending on the needs of the given screen.
Key Features
Within the “content page” variant of the secondary-view, the structure of this changes very little from that of the primary-view, albeit with the additional of the page title and back button that replaces the menu icon button.
- The back button, as an item cannot be altered. While it can be toggled off and on, like the menu icon in the primary-view, it cannot be changed into a different item
- The page title is located in the top navbar to provide context to users. The page title should conform as close as possible to the purpose of the page. If the page title is too long (resulting in it being truncated) then an alias - shortened version of the page title - should be created that sufficiently provides context to users on the purpose of the given page
- The central purpose of this icon is for the close function. In limited circumstances and when absolutely needed, this icon can be used as a CTA for the page’s function. Designers have the flexibility to either show the close icon versus showing the back button but at no point should either the back button and the close icon not be visible.
- For content page, the bottom tabset should always be visible and available for the user to interact with. Regardless of the app’s page associated to a primary view, no tab in bottom tabset should be active.
This view is only to be used when a chat conversation is initialled by the users. Given that currently the only app in our mobile suite that supports this feature is Collaborate this view should only be used in this app.
- Primary action button to send typed messages.
- Text input that by default is in a placeholder state until the user enters a message.
- Camera icon to allow users to upload media into a conversation.
This view is for sections of an app that require direct user intervention/action. This should be used in scenarios like completing a request/submitting a request - action use cases - or for filtering a long array of options. In this view the bottom tabset is replaced by the button dock with the page title changing to better convey the action.
- In this view the button dock, managed through the button group should have the primary action button closest to the user (i.e positioned closest to the bottom of the screen).
Usage
Page title placement
Page titles are crucial to providing context and spacial awareness to the user and are to placed in the center of the top navbar
Don't create pages/flows without a page title.
Page title length
Page titles should capture the purpose of the app in a clear and effective manner.
Don't allow page titles to go into a state of truncation. In instances where the real page title is too long, consider creating a shortened "alias" title that captures the purpose of the page in a shortened manner.
Page exit affordance
While in most circumstances, users are able to navigate back through the bottom tabset, it's important to provide the ability to go back or exit through the top navbar
Avoid exclusively depending on the bottom navbar for users to navigate out of a given app page
Bottom tabset persistence
The bottom navbar (barring action pages and chat secondary pages) should always be present at the bottom of the screen.
Do not exclude the bottom tabset in secondary pages (content-pages)
Bottom tabset active item
Regardless of the relationship that a secondary page has to a primary page, none of the bottom tabset items should be in an active state.
Avoid displaying an active state for bottom tabset items when in secondary pages.