Expandable Collapsible List Behaviors
Posted on April 24, 2007 under Random Rants.
I got recently into a rather intellectual debate about what is the commonly agreed upon "standard" on expandable collapsible list behavior. Thought I should share the summary in the hope of offering some guidance about the complexity of the problem.
The question is rather simple: How are expandable /collapsible menus (+ / -) supposed to behave as a best practice? The answer is very simple for simple lists, where the heading expands or collapses a list of items. You got a plus sign if it's collapsed and a minus sign if it's expanded.
Real life collapsible lists are rarely that simple. First what happens if one heading does not contain any items. Do you display a plus or a minus? Do you let the user click on it and toggle between plus and minus with no effect because there is nothing to display? Or do you just not display neither a plus nor a minus.
Well from a usability and user friendliness perspective don't let the user click on it in the first place. If the user's engagement of the control does not produce any result do not let the user engage at all, it will only frustrate them. The user cannot know that it's empty, the web developer however can and he should take the extra effort to go the extra mile for it's users. This means, absolutely no +/- toggling in vain. Design and consistency considerations may make you feel compelled to provide a plus or a minus icon nonetheless. In that case, if no third indicator icon for that specific case can be applied use a minus. Why? -- Well technically if it's empty at any given time it can be both expanded and collapsed, it's just that minus tells the user to assume it's expanded and empty at the same time.
There is more to it and that's where it gets really complicated. What if you have nested lists that display content on the right as well, like Windows Explorer? There are more states to track. First you track whether a branch of the nested list structure is expanded or collapsed then whether the parent node is displayed on the right side. Then you track what kind of content is displayed on the right side, i.e. the files in the folder if it's a directory structure.
Logically, the plus and minus iconography should track purely whether the items in the given list are expanded or collapsed. But the user may not necessarily expect such a strict behavior. What happens if the sublist is collapsed and the item is selected with say files in the right panel, does the user expect it truly to be a plus or is it a minus? Common sense would say plus and most of these instances are coded in such a way. Because otherwise access strictly in the left nested list will be highly confusing. But what happens if there are no sub folders in a given folder but files and it is not selected to display the files in the right side? Do you put a plus or minus in front of the folder name? None really apply because plus would tell the user it has sub folders, which it doesn't but minus would tell the user it's empty, but it has files.
So maybe in such situations we need 2 sets of icons, one to reflect the file content and one the sublists content, although it may be seriously confusing to the user. But users do seem to be fairly acquainted with navigating these lists because of their ubiquity in Windows, so chances are they know how to navigate your list intuitively for the most part, even if the functionality may not be the same.
The question is rather simple: How are expandable /collapsible menus (+ / -) supposed to behave as a best practice? The answer is very simple for simple lists, where the heading expands or collapses a list of items. You got a plus sign if it's collapsed and a minus sign if it's expanded.
Real life collapsible lists are rarely that simple. First what happens if one heading does not contain any items. Do you display a plus or a minus? Do you let the user click on it and toggle between plus and minus with no effect because there is nothing to display? Or do you just not display neither a plus nor a minus.
Well from a usability and user friendliness perspective don't let the user click on it in the first place. If the user's engagement of the control does not produce any result do not let the user engage at all, it will only frustrate them. The user cannot know that it's empty, the web developer however can and he should take the extra effort to go the extra mile for it's users. This means, absolutely no +/- toggling in vain. Design and consistency considerations may make you feel compelled to provide a plus or a minus icon nonetheless. In that case, if no third indicator icon for that specific case can be applied use a minus. Why? -- Well technically if it's empty at any given time it can be both expanded and collapsed, it's just that minus tells the user to assume it's expanded and empty at the same time.
There is more to it and that's where it gets really complicated. What if you have nested lists that display content on the right as well, like Windows Explorer? There are more states to track. First you track whether a branch of the nested list structure is expanded or collapsed then whether the parent node is displayed on the right side. Then you track what kind of content is displayed on the right side, i.e. the files in the folder if it's a directory structure.
Logically, the plus and minus iconography should track purely whether the items in the given list are expanded or collapsed. But the user may not necessarily expect such a strict behavior. What happens if the sublist is collapsed and the item is selected with say files in the right panel, does the user expect it truly to be a plus or is it a minus? Common sense would say plus and most of these instances are coded in such a way. Because otherwise access strictly in the left nested list will be highly confusing. But what happens if there are no sub folders in a given folder but files and it is not selected to display the files in the right side? Do you put a plus or minus in front of the folder name? None really apply because plus would tell the user it has sub folders, which it doesn't but minus would tell the user it's empty, but it has files.
So maybe in such situations we need 2 sets of icons, one to reflect the file content and one the sublists content, although it may be seriously confusing to the user. But users do seem to be fairly acquainted with navigating these lists because of their ubiquity in Windows, so chances are they know how to navigate your list intuitively for the most part, even if the functionality may not be the same.