Vertical Navigation Types and Usability
This article, vertical menus and usability, is part 2 of a multi-part series on main navigation types and their impact on usability. The first part is Main Navigation: Horizontal Menus and Usability.
(For ease of reading, I’ll use the term ‘website’ in place of ‘website or web-based applications.’)
Vertical menus (or left side menu navigation as it’s sometimes referred to) are another commonly used web site main navigation technique and have several usability advantages and disadvantages. With vertical menus, typically a web page is divided into 2 or more columns, the vertical menu column being used for the main navigation, and the other column or columns for content, advertising, links and so forth.
It is important to note that vertical menus as main navigation do not have a horizontal menu bar present at the top (or bottom) of a web page. To be classified as a vertical menu main navigation, ONLY the vertical menu is present. Web sites that use a horizontal and vertical menu configuration are referred to as L shaped configuration menus, which I’ll cover in more detail in the next post in this series.
Left Side Vertical Menu
The example below demonstrates a left side vertical menu configuration.
Right Side Vertical Navigation
For the vast majority of web sites that use vertical menus for main navigation, the vertical menus are present on the left side of the page (thus the name ‘left side menu’ or ‘left side navigation’). However, vertical menus can be located on the right side of the web page as is demonstrated below.
From a usability perspective, it makes little difference which type of vertical menu, left or right, is used as long as the use is consistent throughout the web site.
In the past, say about 9 or 10 years ago, there were examples of large web sites using right side vertical menus for main navigation. However as I documented in my post ‘Right Side Main Navigation is Gone’ the use of right side vertical main navigation has all but disappeared from large web sites.
One example of a large web site using right side vertical menus for main navigation was Adobe. Back in 2002, Adobe used right side vertical menus for access to content as can be seen in the screen shot below.
To be 100% technically correct, Adobe also had a horizontal main navigation bar (containing Store, Products, Support, Corporate) thus could be termed a reverse L shaped main navigation scheme, however for purposes of this discussion we will use it as an example in that the primary user content links and attention is drawn to the right via the use of icons and larger font size text.
Structure of Vertical Menus and Usability
The structure or organizational formatting of the vertical menu has dramatic impact on usability. Smart web sites will structure their vertical menu main navigation to the mental map (expectations) of their typical users. There are primarily two types of Vertical menu structure:
- Category: lists links in categorical order
- Alphabetical: lists links in alphabetical order
Using the correct vertical menu structure for typical web site users is the easiest way to ensure good navigational usability and user experience satisfaction. Using the incorrect vertical menu is the easiest way to ensure poorer usability and can be the cause of many users abandoning a site.
Amazon uses a vertical menu that is based on a category structure, as is seen in the screen shot below.
Ebay uses a vertical menu that has an alphabetical organizational structure as can be seen by the screen shot below.
Vertical Menu Display Methods and Usability:
There are a variety of ways to display the vertical menu links, and as with the organizational structure the display method used can have a dramatic impact on usability.
In general, there are three primary ways to display vertical menu links:
- Standard display listing
- Tree listing
- Grouped listing
Standard vertical menus from a usability standpoint are very efficient and user friendly. Standard vertical menus have listings of first level links only. Because they use minimal vertical and horizontal space, well thought-out standard menus enable the display of more web site content, which also helps create a more user friendly experience. However, standard vertical menus cannot display sub-level links and thus are not useful for larger sites with many sub-level pages.
Tree vertical menus are a variation of standard menus in which 2nd or 3rd level items are displayed using indents to indicate the subordinate level. Tree vertical menus solve the problem of providing additional navigational links for sub-levels, however they do have their own usability issues. Indents must be great enough to visually differentiate sub-levels from main levels. This has the undesirable effect of making the menu take up more horizontal space which negatively impacts the space available for content.
In addition, if there are many 2nd and 3rd level links, the vertical menu can become very long horizontally, creating undesirable usability issues with large amounts of scrolling, which requires users to remember where potential links are, and forcing some important links to be well below the fold.
To counter the issue of a very long vertical menu bar, designers can use an icon for expanding and contracting sub-levels (as demonstrated in the Tree listing above) to reveal or hide sub-level links. The benefit for usability is the ability to reveal or hide additional sub-levels of navigation, which keeps the vertical navigation menu shorter and thus more convenient for users to scan and use.
Typically arrows or other forms of icons are used to visually inform users that a 1st level link contains sub-levels.
As with the example of Windows Explorer demonstrated below, clicking the icon reveals the sub-levels, and the icon changes to indicate the sub-level is now in its revealed state (as with the downward arrow in the above example). A second click on the icon once again hides the sub-level, and the icon returns to the original view to demonstrate the sub-levels are in a hidden state.
Screen shots showing Explorer hiding & revealing the Pictures folder sub-levels
Another variation of using Tree based navigation is the use of fly-out menus to reveal sub-levels of links. As is demonstrated in the Amazon.com screen shot below, fly-outs enable 2nd and 3rd level links to be displayed to users. Fly-outs improve usability by minimizing the amount of screen space the vertical menu bar uses.
Fly-out menus can be triggered via mouse clicks or as is demonstrated below with mouseovers. From a usability standpoint choosing which type of trigger to use to reveal the fly-out will depend on the abilities of the typical users who interact with the web site.
A recent variation of this fly-out method is the Mega Fly-out vertical menu, as is demonstrated in the screen shot from Sears.com. Mega fly-out menus can contain a large number of sub-level links, and can be grouped and categorized using headers, white space and font sizes.
Mega fly-out menus have the usability advantage of providing a much larger set of sub-level links for the user to find and evaluate.
However, mega fly-out menus also have potential usability issues that should be noted, some of which include:
- Mega fly-out menus may be difficult for certain users to access, especially users with mobility issues.
- Mega fly out menus can cause designers to consider adding additional navigation links in the mega fly-out that technically are not sub-levels of the main vertical navigation link. This could add to user navigation errors if uses become confused about what sub-level content belongs under each main vertical navigation link.
Grouped vertical menus generally use a combination of labels, white space and font and size treatments to visually cluster similar links together. From a usability perspective the use of these visual techniques helps users scan and navigation vertical menu links.
Grouped vertical menus can be organized either by categories or alphabetically. As can be seen in the screen shot from USA.gov, this vertical menu is grouped by categories.
Typical grouped vertical menus share several traits in common:
- Large headings define each cluster or group of vertical menu links
- Headings are often not links themselves
- 2nd and 3rd level links are usually not displayed in the main vertical menu
Grouped vertical menus can help improve usability, by visually grouping or clustering similar main navigation links. When used with an information architecture that is carefully mapped to user expectations, this can be a very powerful means of improving navigation usability. This is because grouped menus reduce the cognitive load of users by helping users focus on clusters of links, instead of having to read and comprehend each link a long listing of links (as happens with a standard vertical menu using a categorical listing).
Benefits of Vertical Menus:
- Enables larger number of menu links to be displayed down the length of the page
- Provides easy scanning of menu items
- Scales well vertically, with the ability to add additional menu links downward
Limitations of Vertical Menus:
- Does not scale well horizontally, especially if displaying 2nd or 3rd level menus
- Longer vertical menus may hide important links below the fold
- Adding 2nd and 3rd level menus typically requires using fly-outs or other display methods which can cause additional usability issues
- Large numbers of vertical menu links may cause additional user cognitive load
Summary: Main navigation using vertical menus
Vertical menus as a main navigation type are useful when displaying longer listings of menu links, and thus have an advantage over horizontal menus in this regard. However, vertical menus come with usability issues that must carefully be addressed if the number of menu choices exceeds the visible space above the fold.
Using the Group or Tree types (with fly-outs) of vertical menus is a common way to present additional 2nd and 3rd levels of menu selections for vertical navigation. However, the information architecture must align with user’s mental maps to ensure maximum usability of these more complex navigation systems.
For more information, see Main Navigation Types and Usability, Part 1, Horizontal NavigationGoogle+