Posted by & filed under Navigation.

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. [1]  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. [2]

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 [3] 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.

Screen Shot 2016-04-20 at 3.45.12 PM

 

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 touch screens.

 

Screen Shot 2016-04-20 at 3.38.16 PM

 

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 sub-menu to the right that overlays the content area.

 

contentv3b42413

 

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.

V-SearsMegaSide

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.

 

Screen Shot 2016-04-20 at 3.58.29 PM

 

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.

 

Screen Shot 2016-04-22 at 1.59.44 PM

 

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 [3].  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.

 

[1] Navigation: Left is Best, by Bob Baily, April 1, 2006, http://www.usability.gov/get-involved/blog/2006/04/left-navigation-is-best.html

[2] The Case against Vertical Navigation, by Louis Lazaris, Smashing Magazine, Jan 11, 2010.  https://www.smashingmagazine.com/2010/01/the-case-against-vertical-navigation/

[3] Menu Design: Checklist of UX Guidelines to Help Users, Kathryn Whitenton, Nielsen Norman Group, Nov 29, 2015.  https://www.nngroup.com/articles/menu-design/

2 Responses to “Going Vertical: A look at multi-level vertical navigation for enterprise applications”

  1. A useful variation of the persistent column pattern would be to add horizontal collapse/expand behaviors to the second-level nav (with a configurable default). When open, the menu would have a visual cue to indicate it can be collapsed. The collapse behavior would shift the second-level nav to the left, overlaying the primary-level nav. When collapsed, the menu would have a visual cue to indicate it can be expanded.

    This variation would allow users to prioritize nav vs content visibility for themselves.

    Reply

Leave a Reply

(will not be published)