Updated: June 10, 2019

Timeline

Intro

The Timeline displays a list of items (objects, events, or posts) in chronological order. The information on the timeline view are presented as tappable cells, and are focused on the most important information about the object. The timeline view can be filtered or searched.

Structure

The Timeline contains a chronological axis, 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. The different nodes next to the object cell indicate the state of the object – open, completed, start or end.

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 a start node to indicate the beginning 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.

Compact & Regular

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

The timeline is typically displayed as a full screen. However, when required, the timeline can be viewed together with another view. For instance, it can be presented with a calendar view to display a schedule or with the map view to provide geographical reference.

Navigation

The navigation to a timeline depends on the application’s information architecture and navigation paradigm.

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

For 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.