Overview
The “primary view” of the mobile navigation is shown against the key pages of an given app. While the definitions of what constitutes a key page is ultimately the decision of the UX designer and their project team, broadly speaking a primary view page should be a section of the app that is most widely used by users and/or is key to overall usability of the given app.
Within the navigation structure, there are two parts to the “primary view”, the top navbar and the bottom tabset. Whilst each has specific toggle-able features and states (more on these below) that are in place to encompass our diverse mobile suite, both of these items should always be present in this view.
Primary views in a sense act like “cover pages” to additional pages that are associated to them.
Key Features
Within the top navbar, there is two core sections: the menu icon and CTA group. At no point should the menu icon be replaced. This is a fixed part of the navigation structure across every one of our mobile experiences.
The second section, the CTA group, is more flexible. Here UX designers can select icons that allow users to conduct focused actions such as add a person, edit etc.
If these CTA action are applied, they are “app specific” rather than “page specific”. What this means is that in every primary view page, the CTA should be the same and not change according to the primary page the user is on. This is in order to drive consistency and provide the user with a degree of predicability for their actions.
- Menu icon, when selected this opens up the side menu view.
- CTA group. Here designers can add a primary and secondary CTA that represent key actions users can perform.
There are a number of areas in our mobile app suite that require UI elements to be used within the navigation structure. These include the use of a data range selector in Tempo and the inclusion of a segmented control element within Collaborate. To accommodate these functionalities as well future functionalities that might require this, designers can insert UI elements to the top navbar through a slot.
If used, our recommendation is to reframe from using CTAs altogether and if needed to absolutely avoid the use of a secondary CTA in this area.
- Slot that can be used to insert needed UI elements.
As the second part of primary view navigation, the bottom tabset should be thought of as a section of shortcuts to the most popular/important portions of an app.
In order to preserve users ability to quickly navigate to key app features in this section, there are a number of restrictions on it’s use. First, there is a hard limit of four tabs to be used within the bottom tabset. Secondly, we require that only solid icons (with matching labels) are to shown in this area.
- When active, the solid icon changes to the active navigation color.
- Don’t add more than 4 tabs into the bottom tabset.
Usage
Settings Tabs
Think of the bottom tabset as an area for shortcuts to the most crucial and popular sections of your app. Use this space only for key app features/sections.
Avoid placing setting related tabs within this section. Settings and configuration options should be located in the "side-menu" view only.
Tab Limit
Given that the bottom tabset acts as a shortcut for the most popular and crucial sections of a given app, we have a hard limit of four tabs to avoid overloading users.
Avoid inserting more than four tabs into the bottom tabset as this will overload and prevent users from quickly navigating to their desired location.
Tab Icons
In order to give greater emphasis to the tabs in the bottom tabset, all iconography in this area must be of the solid variant.
Don't use outline icons as users, particularly new users, may struggle to identify what area of the app they are in.
Tab Labels
Given the highly specialized nature of many of our mobile flows and features, providing accommodating labels to the tab icons is essential to ensuring user understanding.
Don't exclusively using icons as many of our mobile app's features don't directly link to recognisable iconography.
UI Element Insert Behavior
When a UI element (such as a segmented control or date range selector) is added to the top navbar, reframe from adding a CTA button.
Don't add a secondary CTA button when a UI element is added to the top navbar as this will off center this element while crowding this section of the app.