Intro

The hierarchy view is a set of columns that show the hierarchical relationships between objects. Typically, the hierarchy view shows a parent/child relationships but may also show more complex relationships that are several levels deep such as a great-grandparent/great-grandchild. Additionally, the hierarchy view is useful for seeing the sibling relationship of an object to understand its context.

Usage

Do’s

  • Use the hierarchy view if the user needs to see the relationship of an object such as its parent, children, and sibling objects.

Don’ts

  • Do not use the hierarchy view for a single level of data. Instead, use a list of object cells.
  • Limit the number of content types used in the hierarchy object cell. Due to the hierarchy accessory, space is limited.

Structure

The hierarchy view is organized into columns depending on how many levels are expanded and the kind of device that the user is using.

Mobile

A. Navigation Bar
The navigation bar is used only for the hierarchy view on smaller areas. It is used to navigate up and down the hierarchy levels. This includes all instances on mobile and the dialog version of the hierarchy view.

B. Object Cell
The hierarchy view cell is based on the object cell’s design. The only difference being the hierarchy accessory. For more information, please see the guidelines for object cells.

C. Hierarchy Icon
The hierarchy icon allows users to view an object’s children. When selected, the icon toggles from a default state to a selected state. If there are no further children, then the hierarchy accessory will be empty.

D. Direct Objects Count
The direct objects count shows the total number of direct child objects. Displaying the direct objects count is optional.

Tablet

E. Object Cell
The hierarchy view cell is based on the object cell’s design. The only difference being the hierarchy accessory. For more information, please see the guidelines for object cells.

F. Overflow Preview
The overflow preview displays a hint of the parent and/or child level that is outside of the viewport. This is only available in larger viewports like tablet.

G. Hierarchy Icon
The hierarchy icon allows users to view an object’s children. When selected, the icon toggles from a default state to a selected state. If there are no further children, then the hierarchy accessory will be empty.

H. Direct Objects Count
The direct objects count shows the total number of direct child objects. Displaying the direct objects count is optional.

Hierarchy List Picker

I. Navigation Bar
The navigation bar is used only for the hierarchy view on smaller areas. It is used to navigate up and down the hierarchy levels. This includes all instances on mobile and the dialog version of the hierarchy view.

J. List Picker Form Cell
The list picker allows users to select options that have different hierarchy levels. Provide the hierarchy view cell with either radio buttons for single select or checkboxes for multi-select. For more information, please see the guidelines for list picker form cells.

Types

The hierarchy view can accommodate several levels of hierarchical content that is organized within columns.

1-column with Navigation Bar (mobile only)

2-columns (tablet only)

2-columns with Overflow Preview (tablet portrait only)

3-col (tablet landscape only)

3-col with Overflow Preview (tablet landscape only)

Hierarchy List Picker (mobile)

Hierarchy List Picker (tablet)

Behavior & Interactions

Hierarchy Accessory

Tapping on the hierarchy accessory leads the hierarchy view to access the selected object’s children. On tablet, it will expand into another column. On mobile, the screen will transition to another view. If the user has navigated into more levels than the device can display, then the view shifts to display the newest views and the highest ancestor level is out of view.

Horizontal Scroll

Swiping horizontally allows the user to navigate to see additional ancestor or child levels in the hierarchy.

Vertical Scroll

Scrolling up and down in a column allows the user to see the siblings within a hierarchy level.