Updated: September 28, 2017

Split View

Intro

The split view floorplan is a full-screen layout containing two related panes of information. These are placed side-by-side in regular view or accessible via drill-down in compact view.

The master pane contains a header area, a content area, and an optional footer area. In regular view, it is found on the left side of the screen; in compact view, it is the first screen presented to the user.

The details pane contains a header area and a content area, each made up of vertically-stacked sections. It does not include a footer. In regular view, the details pane is found on the right side of the screen; in compact view, it is presented when a user has drilled-down from the master pane.

Usage

Do’s

  • Use the split view when users need to review and process different items quickly and with minimal navigation.

Don’ts

  • Do not use split view with a flat navigation structure (i.e., for an app that uses a tab bar).
  • Do not use split view when users need to see different attributes for each item in the list and compare these values across items.
  • Do not use split view if the app moves back and forth from a full-screen display view.

Structure

Hierarchy

The split view is an efficient way to present object collections that are organized into multiple categories and sub-categories.

Split view acts as a standalone floorplan within a workflow; the master pane contains a table with a list of categories or objects, and the details pane contains either a list of sub-categories, a list of objects, or object details, depending on where the user is in the information hierarchy.

If it is necessary to display an additional level of detail for a particular object attribute, a detail details drill-down screen can be used.

 

Structure

The split view floorplan is a full-screen layout made up of two related panes.

The information displayed in either pane’s Content Area varies depending on how far the user has drilled-down into the content tree:

  • The master pane may display a list of object categories, object sub-categories, or objects themselves.
  • The details pane may display a list of sub-categories, a list of objects, or object details, depending on what has been selected in the master pane.

 

Content Hierarchy

By default, items in the content area are sorted based on type. For example, if knowing when an item was received is important to the user, items should be sorted by received time and date. Sorting options can be changed by the user within the filter menu.

Compact & Regular

Split view supports both regular and compact widths. Sections in the Content Area maintain the same vertical structure across the two width, and individual cells expand horizontally to fit the actual screen size.

In regular width, the two panes are located side-by-side, with the master pane on the left side and the details pane on the right.

The master pane contains a header area, a content area, and an optional footer area. The details pane contains its own header area and a content area (there is no footer in the details pane). There is only one status bar, shared by both panes.

In compact view, the master pane is the default view presented to the user, with the details pane accessed by drilling-down into a category or object.

Behavior & Interaction

Toolbar

The toolbar is an optional component that can be used when filter, feedback, and/or actions are needed, and it will only appear in the master pane.

Drill-Downs

In order to navigate the content hierarchy, the user is able to drill down through list items.

In regular view, drill-downs can only take place in one pane of the split view—either the master pane or the details pane, but not both.

In compact view, drilling down is accomplished by pushing from one full screen to another.