I've been involved in a website redesign where the navigation includes a primary horizontal navigation menu with one level of dropdowns and secondary navigation in the left column that repeats the submenu from the primary menu and an additional level of items in a tree format.
Top navigation:
Books
Fiction
Science
Web Design
Side Navigation:
Fiction
Literary
Historical
Twilight
Science
etc
etc
The side navigation sublevel (like Literary in the example) can get really long (10 or more links) and extend far below the end of the content. The side nav acts like an accordion panel for each item.
Does anyone know of any UX studies or even anecdotal discussions of this type of system affecting, positive or negative, user interaction? I'd like to provide some reasons to move away from this type of navigation - just based on internal testing and different monitors, etc, we lose a lot of real estate to navigation without any real benefit (there's zero budget for anything like A/B testing, etc). It seems to me that mega-menus or two-level dropdowns is more the norm these days.
Answer
Kingsbury JR & Andre AD (2004, A Comparison of Three-level Web Menus: Navigation Structures. Proceedings of the 48th HFES Annual Meeting, p1513-1517; summarized) have done some research on hierarchical menus like yours that suggests users have generally better performance when selecting from the left sidebar menu first, then the top menu, rather than the other way around.
However, it sounds like your second-level menu can be too long to be at the top. You could break off the lower level items in your second-level menu to make a third level menu at the top in order to fit everything. This performed well for Kingsbury and Andre but they only tested 3-level menu hierarchies, and in general a single-level menu of 10 grouped items or so will outperform two hierarchical short menus. (e.g., see Snowberry K, Parkinson SR, & Sisson N (1983), Computer Display Menus, Ergonomics, 26(7), p699-712).
I would consider putting everything on the sidebar menu, which Kingsbury and Andre found had performance close to left-then-top on various measures. However, this performance is based on having two sidebar menus, one for each level, which may take too much horizontal of space in your case. You can use expanders to keep all levels in the same margin, but I don't know what that will do to user performance
Speaking more from anecdote than research, I’m a little concerned about the sidebar repeating the pulldown menu from the top bar. Like you, I’m not clear what the benefit of this redundancy is –I don’t see how one method would be substantially superior to another depending on the users or circumstances (e.g., it’s not like the world is divided into side-bar-navigating users and pulldown-navigating users). Meanwhile it has the following potential issues:
Users may wonder if the links are really the same or not, and end up clicking on them both. This is especially the case if you are not using a recognizable color code to distinguish visited from unvisited links (which hardly anyone does anymore).
Even if users realize the links are the same, user now have to decide which method of navigation to use. This bit of thought slows them down. Forcing that thought is good when the payoff results in a net faster response, but I don’t think you have that here.
Often it’s preferred to give users one best way to do something rather than a choice. If you are concerned about some users not realizing the sidebar is determined by the top menu (or vice versa), then solve that with graphic design visually connecting the current primary menu selection with the secondary menu.
For a relatively complex menu like you have, those pulldown menus can be problematic, which would suggest you go with the sidebar only. However, given your real estate concerns, mega-dropdowns may indeed be the way to go, given they address many of the limitations of ordinary dropdowns.
No comments:
Post a Comment