Typical Appearance

In its idle state, the tree component displays a hierarchy of data typically in two fashions: an outline view or a column view. In an outline view, items that can possibly be expanded or collapsed will be denoted with a specified icon. For example, disclosed arrows, pluses and minuses, "x"s and "o"s, etc. These sets of data are expanded and collapsed in a vertical fashion. On the contrary, a column view asserts expansion and collapsing of data in a horizontal fashion. With a column view, expandable and collapsable items may or may not have an icon denoting further options. If existent, the icon is typically positioned on the right.

Typical Behavior

In its dynamic state, the tree component will generally display more options upon expansion or less options upon collapsing. In an outline view, when an expanded or collapsed item is clicked, its icon changes responsively. If it is expanded, further data will be displayed and its icon will change into a "expanded" state. If it is collapsed, less data will be displayed and its icon will change into a "collapsed" state. In a column view, when an item is clicked, the expanded data will simply display to the right of the selected data.

Events

The most relevant event to the tree component is the click. In order for a user to experience the tree aspect, they must initiate the functionality with a single click. This can be circumvented in a column viewed tree by simply using the arrow keys to navigate through the data.

State Diagram

Component in Action

Key Characteristics

According to Apple, different guidelines are appropriate for different views. In the outline view, where hierarchical data is expanded vertically, items presented upon expansion should be indented. Further, the column width is to be resized so that it is just wide enough to display the widest item when a user expands or collapses items.

In terms of the column view, Apple says that this component view should be used when the data can only be sorted in one way, or if a user desires the information to be sorted in one way. Further, Apple provides 2 general rules to follow in a column view tree component:

1. Display the first or root level of the hierarchy in the leftmost column
2. In general, allow users to resize columns

Feedback

Tree components in various design interfaces have feedback mechanisms implemented in order for the user to determine whether the intended action has been performed and specifically whether the data sought is existent. This is achieved in different ways for different tree designs.

In terms of outline-view trees:

• The designated icon provides the feedback to indicate whether the user correctly expands or collapses an item; if the icon changes its state, the user has accurately accomplished the desired task
• Once the icon is clicked, the item should expand. If no items are presented, there is no further data.
• In the proceeding animated example, pay close attention to the change in state of the designated icon when clicked (i.e. expanded and collapsed)

In terms of column-view trees:

• On the contrary, the column view does not depend on the state of a particular icon. Rather, the general form of feedback is denoted by a selection of that item
• In the proceeding example, note that the highlighted item is the one being expanded and the grayed item on its immediate left is the root or parent from which it was derived

Variants

Nested menu items are very close to tree components in behavior-they display further options for the user when clicked or hovered over. Nested menu items are categorized as a subset of a menu are are applicable in differing situations from tree components therefore having distinctions.

Dropdown Buttons can be considered to have tree-like properties such that upon being clicked, the button displays ore options for the user, which is similar to that of expansion. Despite this facet, similar to menus, dropdown buttons are not effectively capable of organizing items hierarchically in consideration of files or folders on a harddrive for example.

Priority Metrics

Learnability/Memorability: Tree components are widely used across various operating systems and interface designs today. Argumentatively, the tree component provides the most efficient way of navigating through folders and files to find the intended destination. Tree components effectively bridge the gap between the user's mental model and the designer's mental model such that they are very much user-friendly, and act in the way a hierarchy is actually perceived. Therefore, first-time users should have minimal problems learning to navigate through a tree component. The high priority of learnability also implies the high priority of memorability.

Efficiency/Errors: As aforementioned, the tree component allows a user to navigate through a plethora of files and folders with uttmost efficiency. An alternative view to tree is an icon view. Here, each item must be doubled-clicked in order to be prompted with the contents within those items. The tree component makes use of a single click to expand and display all contents of that item. Alternatively, the tree component makes use of arrow keys to effortlessly navigate through a directory. The only room for errors here is a misclick in the designated icon that would expand or collapse the item or arrowing into an unintended directory.

Satisfaction: If any metric at all can be considered as a “low priority” for tree components, it would be satisfaction. Generally, all tree components will be designed comparably with the exception of color choices, icons, fonts, etc. The efficiency and easiness of the design of a tree component is of foremost importance. Attempting to make a tree component "fun" seems counter to its purpose.