Image X Media

There appears to be two primary ways of showing expandability and collapsibility for navigation on sites. The use of pluses and minuses (+/-) or twisties (twisting triangles), in combination with indentation and/or bullets, appear to be the most popular methods used online today. But is there one preferred method or standard out there? This is what we wanted to find out in our research. From a usability perspective, both of these indicators work to convey the message that a menu item can be expanded or is already in expanded form.

The use of +/- on the Battery Direct site:

The minus sign, “-” indicates that the menu item cannot be expanded. The plus sign, “+” indicates that the menu item can be expanded and there are at least one more item underneath it. Once you click on a parent item (e.g. + Products), that item is shown in expanded form and the plus sign in front of the parent item turns into a minus sign. The minus sign tells the user to assume it’s expanded and empty at the same time. If child elements have items underneath of them, they will also be displayed with a plus sign in the front and so on.

The use of twisties on the TD Canada Trust site:

The twistie pointing to the right acts like the plus sign to indicate expandability. Once expanded, the twistie points downwards to indicate that it is in expanded form, similar to the minus sign. Child elements inside which cannot be expanded are listed with bullets next to them.

Conventional Plus/Minus Icons

W3C also describes this behavior in terms of widget tree views:

“Parent nodes generally have some visual icon to indicate the ability to expand or collapse the node. The convention is that a plus (+) icon is displayed when the parent node is collapsed, the user clicks on this icon to expand the node. A minus icon is displayed when the parent node is expanded, the user clicks on this icon to collapse the node. The expand and collapse behavior can also be invoked via the right and left arrow keys when focus is on the node.”

“A selected node should be indicated via a visual styling such as color difference and/or a distinct border.”

W3C seems to suggest that the plus and minus icon is the conventional way of showing expandability and collapsibility. One of the differences between this approach and the approach using twisties is that in the twisties approach, an extra style is sometimes needed such as a bullet to indicate that an item is a child node.

US Patent 7340690 – Space-efficient linear hierarchical view and navigation describes tree views and the limitations of them before proposing a new method using a linear view.

“Tree views are often used in modern GUI operating systems and application programs to represent hierarchical relationships between objects, and to allow a user to navigate and access those objects. A tree view may be used to represent a directory structure using “folder” icons arranged in a conventional manner, with lower level folders appearing below and indented to the right of corresponding higher level folders. Connecting lines may also be used to explicitly show the hierarchical relationships. Also, an indicator box may be positioned to the left of a folder to indicate that the folder is currently open (e.g. using the “-” sign), or closed (e.g. using the “+” sign).”

“While generally functional, the conventional tree view has some limitations. In particular, for a more complex hierarchical structure having many levels, the conventional tree view may quickly expand vertically and horizontally to exceed available screen space. In order to navigate such an expanded tree view, it may become necessary to scroll extensively back and forth and sideways, in a GUI panel. As well, the conventional tree view may not be suitable for displaying certain types of hierarchical relationships between objects.”

Most Users Prefer Twistie Icons

A blog posting on the IBM site was used to get feedback on How important a plus sign is in Lotus Notes 8. This lead to a lot of users stating that for usability reasons, some kind of indicator was important. After scanning all the comments, it appears that the majority of people preferred twistie indicators over plus/minus icons. One commenter noted that the + signs need to be kept since you do need the visual clue to where the nested folders are. “Think of it from the point of view of the assistant who accesses their managers mail, the manager may have made nested folders and the assistant would have no visual way of knowing without clicking on each and every folder.” Another commenter mentioned it is extremely important from an expectation and consistency standpoint to keep those indicators. He then goes off and says “We actually have done a study of this in the past with a custom Notes app where we used an empty expand/collapse graphic and found our new users to not realize that the potential of expand/collapse existed and that our current/historic users thought that it ‘looked weird’ not having them there.”

OSX, Vista, and Gnome.

Florida Disaster.org, a division of emergency management has provided a user’s guide based on their Groove Virtual Office software and services, which specifically asks for the use of twisties when a row is expandable when creating a response form.

Research-Based Web Usability Best Practices & Guidelines

Finally, my research led me to read through several chapters in the Guidelines Book provided by the U.S. Department of Health and Human Services. These guidelines are all based on research findings and the latest edition from 2006. The following is a list of guidelines taken straight from the book, which are relevant to this discussion.

• Graphics, Images, Multimedia – Use images that look like real-world items when appropriate.
• Links – Symbols usually must be combined with at least one other cue that suggests clickability. In one study, users were observed to click on a major heading with some link characteristics, but the heading was not actually a link. However, to some users bullets and arrows may suggest clickability, even when they contain no other clickability cues (underlining, blue coloration, etc.). This slows users as they debate whether the items are links.
• Links – Users should not be expected to move the cursor around a Web site (’minesweeping’) to determine what is clickable. Using the eyes to quickly survey the options is much faster than ’minesweeping.’ Similarly, relying on mouseovers to designate links can confuse newer users, and slow all users as they are uncertain about which items are links. Be consistent in your use of underlining, bullets, arrows, and other symbols such that they always indicate clickability or never suggest clickability. For example, using images as both links and as decoration slows users as it forces them to study the image to discern its clickability. Items that are in the top center of the page, or left and right panels have a high probability of being considered links. This is particularly true if the linked element looks like a real-world tab or push button.
• Links – One study found that when compared with the mouseover method, the ’point-and-click’ method takes eighteen percent less time, elicits fewer errors, and is preferred by users.

What can we take away from this? When dealing with multimedia and graphics, it is best to use images that look like real-world objects. For instance, the plus/minus and twistie approach is leveraging the same concept used on desktop computers. In designing websites, we should not rely on mouseover methods to reveal clickability; if the proper link characteristics are there, the point and click method is faster.

So after all this research, is there a best method? Plus/minus indicators or twisties? It seems that both methods work well for usability. However, note that there are limitations to both methods for hierarchical structures that contain many levels as mentioned in the article, US Patent 7340690 – Space-efficient linear hierarchical view and navigation. Another deciding factor is whether or not it works well for the theme of your design. Alternatively, you may decide to use neither of them and opt for just different colors and indentation. Many sites have also done this such as at&t Wholesale and Oprah.com. The disadvantage in this method is that there is no way in knowing whether or not a menu item has more items underneath it until you click on it.