Timeline

Types

Timeline displays upcoming, current, and past activities to the user. It can be both functional and informational:

Informational timeline

The informational timeline gives an overview to the user about the steps to achieve an action (e.g. activate a product).

Functional timeline

The functional timeline informs the user about an ongoing process by displaying upcoming, current and past activities (e.g. ticketing system).

The functional timeline component is not available in negative mode.

States

1. Default state
   State visible before click. Content is hidden and the chevron is pointing downwards.
2. Hover/Focused state
   State visible when the cursor hovers the step and chevron and triggered by keyboard navigation or click. Cursor becomes a pointer.
3. Opened state
   State visible when clicked. The branch opens, allowing the full content inside to be revealed. The chevron is pointing upwards.

Anatomy

1. Step timestamp (optional)
   Gives a precise indication about the time of the step. Allowing user to follow chronologically the timeline.
2. Step title
   Indicate the name of the step. Use clear and concise labels to facilitate user's understanding (e.g.: delivery method, document upload)
3. Chevron (optional)
   Informs the user about the state of the expandable step. Pointing down, the content is collapsed. Pointing up, the content is expanded.
   You have the possibility to open one by default.
4. Step indicator
   Displays the step information via the color and the icon/numbers.
5. Timeline bar
   Provides an additional hint about the progression, depending on its location.
6. Step content (optional)
   If needed, content provides a space to fit in additional content and/or component for the user to interact with.

Step with content

If needed, content provides a space to fit in additional content and/or component(s) for the user to interact with. This content can be directly displayed or hidden inside a accordion.

1. Default displayed
2. Hidden inside a accordion
   In case of accordion, you have 2 options available:
   • Parameter the accordion to have one step expanded by default.
   • Parameter the accordion to allow the user to expand multiple steps at once.

Functional timeline

Statuses

5 statuses are available for the functional timeline:

• Success
  The step is done.
• On going
  The step is ongoing.
• Pending
  The step is currently being process or in a waiting state.
• Error
  The step requires an input from the user.
• Inactive
  The step exists but hasn't started yet.

Reverted functional timeline

1. Chronological timeline
   Displays chronological events to the user.
2. Reverse chronological timeline
   Displays reverse chronological events to the user.

Best practise

1. Make it start; make it end.
   The user must know when the process starts and when it ends. Therefore, when using a timeline, the component will always begin with a discus and end with another one.

2. Anchors, anchors, anchors!
   Sometimes, the timeline will be bigger than the height of the screen. When accessing the page where the component is, try to use an anchor to allow the user to leapfrog to the latest step.

Related elements

Progress indicator vs. Timeline

Progress indicator offers an indicative information about the progression of the user within a multi step task. Whereas timeline is more adapted to offer the user an interactive set of elements to indicate a chronology of events. (e.g. tickets follow up, informative content about processes, etc.)

More infos about the progress indicator