Updated: May 23, 2018

Timeline

Intro

The timeline floorplan displays a list of items (objects, events, or posts) in chronological order. It provides the user with information about changes to an object or events related to that object. The items found on the timeline view are represented as tappable cells, and are focused on the most important information about the object. The timeline view can be filtered or searched.

Timeline in both compact and regular views
Timeline in both compact and regular views

Usage

Dos

  • Use the timeline floorplan to display a list of objects generated by the system in chronological order.
  • Use the timeline floorplan to view an object’s current progress or history of activities.

Don’ts

  • Do not use the timeline floorplan when the objects need to be sorted by a mechanism other than chronological order. Use List Report floorplan instead.
  • Do not use the timeline floorplan for adding a new item to the timeline.
  • Do not use the timeline floorplan when the users need to edit the content.

Structure

The Timeline floorplan contains a chronological axis, with nodes on it, with timestamps on the left and object cells to the right of the axis. The object (or event) cell contains the title of the object (or event) along with other key information. These cells may be made tappable to allow the user to navigate to the object (or event) details.

A. Nav Bar

The timeline can be filtered and searched (using the local search behavior). See Filter and Search for more details.

B. Timeline Start (Optional)

Use one start node for the start of the timeline.

C. Completed Object Cells

The node in completed object cells has a check mark to indicate the status. The cell background for completed objects is gray.

D. Today (Optional)

Highlight Today on the timeline if the timeline ends in the future.

E. Upcoming Object Cells

Upcoming Object Cells have a different background color and an empty node to indicate that they are not completed. Their appearance will change when the status of the objects changes.

F. Timeline End (Optional)

Use an end node for the end of the timeline.

Styles

Nodes

The nodes found in a to-do timeline may have different treatments to show the current state of the object (e.g., ‘Open’ or ‘Completed’). Use the ‘Start’ and ‘End’ nodes to show the start or end of the timeline. If the timeline represents a schedule, the nodes may also take colors to differentiate between groups of events.

Types of Nodes
Types of Nodes

Compact & Regular

Timeline supports both regular and compact widths, with its structure and hierarchy remaining the same in both.

In regular width, the timeline may use a split view floorplan to allow the user to see closely related content (for example, locations of work orders on a map).

In compact width, the timeline is typically displayed as a full screen. When additional required information must also be displayed, a split view controller should be used in compact view. For example, the calendar and timeline views could be displayed with the split view controller to provide the user with all relevant details of a schedule.

Types

The timeline cell provides the user with key information about an object or event. The background color of the card and/or node can change depending on the status of the object.

Timeline Card Type

Do
Don't

Navigation

In apps that use flat navigation, the timeline may be found in its own tab in the tab bar.

In apps using hierarchical navigation, the timeline can be accessed via the timeline preview cell. If the timeline acts as the landing screen of an app, it will not require the timeline preview cell.