Going vertical: a look at multi-level vertical navigation for enterprise applications
Blast from the #PatternPast! This article was formerly located on our old WordPress blog. It was originally written by Matt Carrano and published on April 25, 2016.
Vertical navigation is increasingly the solution of choice for enterprise web applications. It is more scaleable and adapts more easily to small viewport sizes (i.e. mobile). It has also been shown that locating all levels of navigation on the left-hand side of the page outperforms hybrid approaches that combine top and left navigation menus. At the same time, some known drawbacks for vertical navigation systems include the consumption of valuable pixels that otherwise can contain page content and difficulty with interaction if fly-out menus are employed.
For PatternFly, we require a vertical navigation solution that will support information hierarchies that go up to three levels deep. Representing deep hierarchies and making options visible while using a minimal amount of screen real estate is a challenge. Any recommended solution should provide clear guideposts that provide the user with visibility to where they currently are and where they can go within the navigation hierarchy.
A 2015 article published by the Nielsen Norman Group makes the following recommendations to designers of web navigation systems:
- Options should be made visible when possible — don’t hide navigation options on large screens.
- Make sure there is sufficient visual contrast between menus and other screen content.
- Always provide clear feedback about current location to let users know where they are at all times.
- Make link labels easily scannable.
- Make it easy to navigate locally within a section.
After an informal survey of existing examples of vertical navigation used across a variety of web sites and applications, I suggest that vertical navigation solutions can be grouped into several categories as follows.
Accordion style or stacked navigation
Accordion style navigation supports the presence of multiple levels of navigation within a single menu.
Key features of an accordion style solution are the ability to expand and collapse branches within the hierarchy to provide access to secondary items. This approach works well for representing large hierarchies in a single menu, but does not work so well for representing hierarchies more than two levels deep. It also is not very scannable as users must open each top level items to see items below.
Drill-down
In this approach, a single column is still maintained but rather than open sub-categories in a stacked design, lower levels replace the original menu and a breadcrumb placed at the top of the menu allows navigation back up the tree. This is similar to the “hub-and-spoke” style navigation used on device based interfaces before the advent on touchscreens.
The drill-down approach is designed to keep users focused within a single area of the site enabling easy movement locally between pages within a single section. The major disadvantage is that visibility to other parallel sections is lost, and moving across sections of the site requires the user to navigate back up the tree before drilling back down.
Fly-out
Fly-out menus are commonly used to access secondary and tertiary categories below a single top level menu by “flying-out” a submenu to the right that overlays the content area.
While fly-out menus provide a flexible solution to the mutli-level navigation problem and are easily extensible, they do not provide good visibility to options at the same level of navigation after a page has been selected since these menus do not persist. This effect can be offset by good use of breadcrumbs to tell users where they currently reside in the page hierarchy. Fly-out menus can also be difficult to interact with as they represent a small target for mouse travel (see Fitts’ Law). Alternatives to fly-outs are Mega-Menus and Non-Persistent Columns that are described below.
Mega-menu
The mega-menu opens as a panel that can accept rich content of any type. Typically these menus are used a retail sites and enable grouping of large numbers of links.
Mega-menus provide good visibility to all options and can include links to content at multiple levels without the cascading effect of standard fly-outs. Because content is intentionally pre-formatted within the panel, they are less flexible and dynamic when adding or removing content and cover large amounts of the page content area.
Non-persistent columns
Another approach is to distribute levels of navigation to one, two, or three fly-out columns that cascade to the right.
This approach is similar to the standard fly-out menu except that the fly-out panel fills the height of the screen. This may offset some of the mouse-travel problems associated with the fly-out menu while covering more screen area when the menu is open.
Persistent columns
A final approach is to display multiple levels of navigation in persistent columns. This is the technique used in the existing PatternFly Vertical Navigation Pattern.
Here, the second-level navigation is always visible in a permanent column that cascades to the right. This provides the user with great visibility to where they are within the information hierarchy and allows easy movement between local categories. But this comes at a cost since the two-column approach uses a significant amount of screen real estate. Because of this persistent columns are not really practical for navigating when the hierarchy contains more than two levels.
Comparison of navigation styles
The following table compares these different approaches by applying the four of the five criteria for effective navigation design identified in the Nielsen Norman Group article. The requirement for providing good visual contrast was ignored based on the assumption that any of these approaches can succeed from that perspective by applying good visual design principles.
You can see that there is no perfect solution here. Based on the criteria, a vertical navigation with persistent columns may provide the best overall usability, but it also consumes the most screen area (taking away from content) and is therefore constrained to practically showing no more than two levels of navigation. Other options trade some degree of visibility to current location and options for minimizing the amount of screen width dedicated to navigation. Also weighing the importance of navigating inside of a section (i.e., local navigation) against easy movement between sections will likely bear on a choice of navigation style. For PatternFly, the right answer might include a small subset of styles/patterns or some hybrid pattern.
What’s next
Our goal is to arrive at an approach to vertical navigation that can work across multiple enterprise applications. This may include one or more new patterns and will be based on prototyping and testing of existing solution. More to come on this.
What are your thoughts? I am interested in hearing about how you have applied vertical navigation approaches within enterprise applications your have worked on. What has worked well? What has not? And do you feel there are options that I haven’t explored or do you have ideas on combining patterns into a more optimal approach? I’d love to hear from you.
Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.