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