Designing usable Web widgets with client-side scripts

Expandable/collapsible menus

Expandable/collapsible menus, also known as tree navigation menus, are Web widgets that allow users to expand and shrink a list of navigation options. They are often designed to look like file folder menus found in PC and Macintosh applications. The Microsoft Developer Network (MSDN) Library site (see Figure 1) is an example of an expandable/collapsible navigation menu built with JavaScript.

Figure 1. MSDN expandable/collapsible menu

These types of menus can improve the usability of a Web site's navigation scheme, especially sites with deep navigation structures like the MSDN Library. This dynamic menu allows users to only look at the details of sections that are of most interest. Viewing the entire structure of the MSDN Library at one time would probably be overwhelming and cumbersome to some users.

To maximize the usability of an expandable/collapsible menu, consider these tips:

• Mimic the appearance and behavior of widgets with which users have had previous experience. Microsoft has made a notably good attempt with the MSDN Library. Knowing that most of their users are familiar with Windows Explorer, the developers made a conscious effort to duplicate its appearance and behavior as much as possible.
• Keep navigation labels short to avoid requiring users to expand a frame or horizontally scroll to view the complete label. As an alternative, truncate long navigation labels.
• Inform users when an action is not possible. At the MSDN site, for example, some users might think that files can be dragged and dropped as they can in Windows Explorer. On the Web site, however, this is not possible. The developers included a script to change the mouse cursor to a prohibitory symbol when a user tries to drag a folder in the menu to another location.
• Avoid designing menus with more than two or three levels. After a few levels, labels will shift too far to the right and beyond the viewable area.
• Clearly indicate when a navigation option is open and closed. Use graphical user interface (GUI) guidelines with which users are familiar. At the MSDN site, the plus sign (+) means closed; the minus sign (-) means open - making it look and behave like the menus in Windows Explorer.