Navigation
Navigation Styles and Usage
Overview
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
Top Bar |
The navigation bar that sits at the top of the prodcut view |
Side Navigation |
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. |
Secondary Navigation |
A vertical navigation pane that extends out from the side navigation. |
Search Bar |
The primary Beeline One search bar. |
Quick Links |
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.
Name: Blue5
Hex:
#001b38
RGB:
rgb(0,27,56)
|
Top Bar
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
-
Product Logo
For all product logos you can visit Logos in the Brand Guidelines section
-
Search Bar
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
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 Navigation
The side navigation pane is our primary navigation. It is collapsable and grows vertically. It should extend the entire height of the view-
Menu Header
All 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 -
Links
Links should be accompanied with an icon, the font weight is bold -
Main Menu Toggle
When the side navigation is expanded the main menu toggle changes to a close icon -
Secondary Navigation Button
This icon button indicates that “Requests” has a secondary navigation pane that is triggered when clicked -
Overlay
When 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); -
Hover State
Background Color Font Color Transition Blue 1: #4fa7ff White: #ffffff all 0.3s ease; -
Navigation Panel
The navigation panel is the outer container that holds the side navigation.Background Color Width Blue 5: #001b38 250px
Secondary Navigation
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.
-
Active State
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
Responsive Navigation
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.
Mobile Navigation
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 State
Background: color Blue 1: #4fa7ffFont Color: White: #ffffffTransition: all 0.3s ease;- Menu Items with icons
- Background Color is our standard navigation background colorName: Blue5Hex:
#001b38RGB:
rgb(0,27,56) - Product Logo
- View of current active screen