Overview
The side menu view is the third part of our mobile navigation structure. This view should be used for three types of items: user profiles, settings tabs and additional items (non-crucial navigation items).
In all our apps, the user profile should be accessible through the side menu view at the bottom of the element. Here the user’s name, image (shown through initials if no profile image is shown) and the user’s status is provided.
Another aspect of this navigation view, is the listing of settings type content from a given app being exclusively contained within the side menu. At no point should an entry point to the settings page/items exist in the bottom tabset of the primary and secondary view of the navigation. All settings tabs are to be listed in this side menu view.
The last core element of this navigation view is it’s use as a container for secondary/non-crucial tab elements. We’re conscious that UX teams and designers need to provide an entry point for actions and features that while not crucial (and therefore not necessitating their inclusion in the bottom tabset) need to be provided to the user. Think of the side menu as a holding container for this type of content.
Aside from the persistent listing of profile and setting tabs and as long as UX teams and/or designers adhere to the hard limit of 6 tabs being shown in the side menu, we provide flexibility in what can be shown in this side menu view.
Key Features
Within the side menu view, there are three key elements: app name, tab container and the profile avatar.
- Along with the listing of the “bold-g” logo, the app name should be included in this space.
- All settings and non-crucial items should be listed here. To prevent user overload we have set a hard limit of 6 tabs being shown at any one point here.
- This space is for profile information to be included. Along with the name, profile image and status being shown, designers can assign profile relevant flows/screens behind this if a user clicks on the profile avatar.
Usage
App name
To ensure brand identity within a mobile suite, the name of the given app should be shown alongside the bold-g logo at the top of the side menu.
Avoid the generic use of Genesys or unclear naming conventions to represent a given apps brand identity.
Label quantity
Limit the amount tab items shown (settings and non-crucial elements) to 6 or lower.
Do not include more than 6 tab items within the side menu view.
Shroud appearance
The shroud is a key element of this navigation view given that the side menu view is a overlay element.
As the side menu view overlays on top of an apps contents, the absent of this may cause confusion and overwhelm users.