Dynamic Page Elements-Cloak and Dagger Web Design - Explorer Menus (collapsible list navigations)
(Page 6 of 10 )
Explorer tree menus are vertical list menus that expand and collapse the sub-menus when you click their parent element - much like the explorer tree on windows showing sub-folders and programs when you click on a folder name. While posing less problems than a foldout menu, there are still some pitfalls to avoid.
1. Content overload
The rules of "content overload" apply here, the user may be confused or even annoyed by the amount of links not related to this section.
2. Not maintaining the current state
A good explorer navigation should keep the current section expanded when the page loads - something that can be easily achieved. As the current sub section stays visible after choosing an element, highlighting this element and keeping a visited state should also be no big issue.
3. Mouse dependence
Expanding and collapsing the elements on hover is not possible without trading off keyboard users. Therefore we should stick to clicking the menu sections to expand sub-elements. As the menu items are arranged vertically, expanding the sub sections when hovering over each of the parent elements could appear rather annoying. Users want to reach link number 5, not expand and collapse all sub-menus in between 1 and 5 before reaching it.
4. Unknown functionality
Elements that have sub elements should tell the user so, to avoid frustration loading a page when in reality there was a shortcut. We should make sure that this highlighting is only applied when the solution is working.
Next: Collapsible Page Elements >>
More Design Usability Articles
More By Christian Heilmann
