Do

• Use the timeline preview component to display read-only objects and their respective timestamps.
• Use the timeline preview as an overview and allow the user to navigate to the timeline view for details.
• Use the timeline preview component to indicate the status of objects via the nodes and node lines.

Don't

• Don’t use the timeline preview to show detailed or extended descriptions of objects.
• Don’t use the timeline preview to show objects or tasks which require direct interactions with them.

A. Header

The header provides an overview of the timeline preview.

B. Timeline Preview Object

A timeline preview object is a reduced representation of the timeline view objects. This includes reduced content such as the timestamp, node, and object title.

On mobile devices, the timeline preview displays two timeline preview objects.

On tablets, the timeline preview displays four timeline preview objects.

C. “See All” Button

See All (#)” indicates the total number of objects in the timeline view.

D. Timestamp

The timestamp displays the time or date of the timeline object. The format can be customized. If the object is current, the timestamp should indicate that the event is occurring “Today”.

E. Node and Node Line

The node and the node line indicate the status and the relative tense (past, current, or future) of the object.

F. Object Title

The object title provides the name of the object. The title should be succinct but may wrap up to two lines.

Timeline preview anatomy

Timeline preview anatomy

The nodes and node lines use color, shape, and icons to indicate the status and tense of the timeline preview object.

Start and end objects have diamond-shaped nodes. They are the first or the last object of the whole timeline preview project.

From left to right: A past event with start status, a future event with end status

All other objects have circle-shaped nodes. For open status, the node is an open circle. For in-progress status, the node contains three ellipses. For completed objects, the node contains a checkmark.

To ensure flexibility, colors and node icons may be customized together according to the user’s needs.

From left to right: open status, in progress status, completed status

Besides the shape-based node status, colors are used to indicate past, current, and future events.

From left to right: past tense, current tense, future tense; from top to bottom: start status, end status, open status, in progress status, complete status

The objects in the timeline preview are read-only, and tapping anywhere within the timeline preview navigates the user to the full timeline view.

Tapping in the timeline preview navigates to timeline view