The timeline preview displays a snippet of the timeline, offering a high-level overview of what the overall project consists of.
Timeline preview on mobile (left) and tablet (right)
The structure of the cell includes a header, timestamp, timeline, task title, and button footer.
The header summarizes the timeline preview.
B. Timeline Preview Object
The timeline preview object is a reduced representation of the timeline view objects. This includes reduced content such as the timestamp, node, and task title.
C. Button Footer
The button footer contains a button that will lead users to the timeline view with the task cards and descriptions.
Timeline preview anatomy
The timestamp displays the time of the timeline preview object.
The node indicates the current state of the object.
The title displays the name of the object.
Task object anatomy
Behavior and Interaction
Navigating from the timeline preview to the timeline
On mobile, the timeline preview allows the user to view the first two nodes. On tablet, a more extended view of the timeline allows displaying more objects, such as five nodes depending on the tablet orientation and screen size.