The Timeline Pattern
Lays out the steps in a process sequentially, from start to end, so that the user can see a clear sequence of what needs to be done to get through a path.
The timeline gives the user a grasp on an otherwise ambiguous process with a clear, glanceable representation of a complex series of steps. It can support the user to decide if this process fits their needs and abilities, and then can ensure the user knows how to follow through on the process, step-by-step.
Type of Design
Good for Contexts like
Understanding the System
Navigating a Process
Problems & Contexts It Can Work For
Use a Timeline when there is a series of steps that must be taken to get through a certain system’s process. It best fits a situation when a person has a discrete path to follow, so that it is clear what the steps to take are and what order to do them in. The Timeline can give clarity and direction in an otherwise ambiguous situation, so that the user has the confidence that they know what steps to take, what deadlines to meet, and what the end-point will be.
How to Make It
Use a vector image editor, like Adobe Illustrator or Omnigraffle, to lay out a timeline.
The Knight Lab offers a free open source code base to make timelines: Timeline JS. Use this to lay out an interactive, click-through timeline that goes event by event on browser.
Examples of the Timeline Pattern
Society of Grownups, Bridge US