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.
Timeline view on iPad
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. Navigation Bar
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. Now Indicator
The Now Indicator node marker indicates the user’s current position on the timeline.
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.
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.
Flat navigation (left), hierarchical navigation (right)
The 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.
Adaptive design of the Timeline view
Timeline View Cell
The Timeline view cell components have two states—past and present. Each timeline cell state has three status: open, in progress, and complete,