Updated: September 28, 2017

Timeline

Intro

The timeline floorplan displays a list of items (objects, events, or posts) in a chronological order. It provides the user with information about changes to an object or events related to that object. The items found on the timeline view are represented as tappable cards, and are limited to the most important information about the object. The timeline view can be filtered or searched.

Timeline in both compact and regular views
Timeline in both compact and regular views

Usage

Do’s

  • Use the timeline floorplan to display a list of objects generated by system in a chronological order.
  • Use the timeline floorplan to view the current progress or history activities around one object.

Don’ts

  • Do not use the timeline floorplan when the objects need to be sorted by other machoism rather than chronological order. Use List Report floorplan instead.
  • Do not use the timeline floorplan for creating a new item to the timeline.
  • Do not use the timeline floorplan when the users need to edit the content.

Structure

The Timeline floorplan contains a chronological axis, with nodes on it, timestamps on the left and object cars on the right of the axis. The object (or event) card contains the title of the object (or event) along with key information that needs to be surfaced. These cards may be made tappable to allow the user to navigate to the object (or event) details.

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 one start node for the start of the timeline.

C. Completed Object Cards

The node in completed object cards has a check mark to indicate the status. The card background for completed objects is gray.

D. Today (Optional)

Highlight Today on the timeline if the timeline ends in the future.

E. Upcoming Object Cards

Upcoming Object Cards have with background and an empty node to indicate that they are not completed. The visual treatment will change when the status of objects changes.

F. Timeline End (Optional)

Use an end node for the end of the timeline.

Styles

Nodes

The nodes found in a to-do timeline may have different treatments to show the current state of the object (e.g., ‘Open’ or ‘Completed’). Use the ‘Start’ and ‘End’ nodes to show the start or end of the timeline. If the timeline represents a schedule, the nodes may also take colors to differentiate between groups of events.

Types of Nodes
Types of Nodes

Compact & Regular

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

In regular width, the timeline may use a split view floorplan to allow the user to see closely related content (e.g., locations of work orders on a map).

In compact width, the timeline is typically displayed as a full screen. When additional required information must also be displayed, a split view controller should be used in compact view. For example, the calendar and timeline views could be displayed with the split view controller to provide the user with all relevant details of a schedule.

Types

The timeline card provides the user with key information about an object or event. The background color of the card and/or node can change depending on the status of the object.

Timeline Card Type

Do
Don't

Navigation

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

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

Resources