Navigation Styles and Usage
One of the single most important usability aspects of any digital products is that navigation is clear and consistent. Here we’ll define how to make navigational areas recognizable and showcase some of the patterns we use to make them easy to discover and use.
Naming and Terms
|The navigation bar that sits at the top of the prodcut view|
|The primary navigation. The navigation is a vertical pane of links, placed on the left side of the product view and is capable of being hidden or minimized.|
|A vertical navigation pane that extends out from the side navigation.|
|The primary Beeline One search bar.|
|links or buttons usually accompanied with an action panel that allow the user to quickly access views.|
Style and Structure
Here’s some of the defining style characteristics of navigational areas
Navigation Background Color
All navigation sections use Blue5 as the backgorund color for that section. We do this so that any user’s in our system can recognized navigational areas by this color.
The top bar is positioned at the top of the view. It’s a fixed bar that doesn’t scroll with the page content
Main Menu Toggle
The first item in the top bar is the main menu toggle button. This button toggles the side navigation open and close
For all product logos you can visit Logos in the Brand Guidelines section
When we did a usability test on the existing VMS navigation we found that the majority of user’s ignored the navigation all together and used the search bar to find their way around the products. For that reason, we allow the search bar to take up as much horizontal space that is available after the product logo
Quick Links are not required but many of products have needs for certain views to be quickly accessed. Quick links work great with Action Panels , and although it’s not a rule we encourage no more than 4 quick links at any given time.
Side NavigationThe side navigation pane is our primary navigation. It is collapsable and grows vertically. It should extend the entire height of the view
Menu HeaderAll side navigation menus have a header that tells the user what the purpose of the navigation pane is. The background color of this view is Blue Primary: #0575e6
LinksLinks should be accompanied with an icon, the font weight is bold
Main Menu ToggleWhen the side navigation is expanded the main menu toggle changes to a close icon
Secondary Navigation ButtonThis icon button indicates that “Requests” has a secondary navigation pane that is triggered when clicked
OverlayWhen the side navigation is expanded we place an overlay over the page content to block any activity while open. Clicking on this overlay triggers the side navigation to close. The background color for the overlay is rgba(0, 0, 0, 0.4);
Background Color Font Color Transition Blue 1: #4fa7ff White: #ffffff all 0.3s ease;
Navigation PanelThe navigation panel is the outer container that holds the side navigation.
Background Color Width Blue 5: #001b38 250px
In the past we’ve used a mega menu style horizontal menu system. This was never ideal but it was carried over from our legacy UI because we were not in a position to make a drastic change to the navigation without a lot of change management. However, most of our primary links are really just top level categories that have sub views that our user’s access. The secondary navigation pane is a pattern that allows our navigation to grow indefinitely, whereas the older mega menu pattern had limits.
When hovering or when a user clicks to load a secondary navigation pane we indicate these events by changing the text color to
Blue 1: #4fa7ff
Secondary Navigation Panel
The secondary navigation panel carries the same style properties as the main navigation panel
We understand that the legacy VMS cannot be fully responsive without extensive work. However, any new products are expected to to be fully responsive and accessible on any desktop or mobile device. the above image demonstrates the layout and positioning of the navigation UI elements when in mobile view. We define mobile view any screen size that has a width less than or equal to 1024px.
Our mobile menu pattern uses a push and shrink animation. Essentially the existing view scales down .8 of it’s size and pushes over off screen but leaves some of the screen in view, while the navigational elements slide in from the left.
- Close Icon
- User Profile Data (Optional)
Active StateBackground: color Blue 1: #4fa7ffFont Color: White: #ffffffTransition: all 0.3s ease;
- Menu Items with icons
- Background Color is our standard navigation background colorName: Blue5Hex:
- Product Logo
- View of current active screen