Activity Timelines
A chronological record of what happened, which needs grouping and filtering to stay readable.
Definition
A timeline presents events in chronological order, usually newest first. It answers what changed, when, and by whom, and it becomes unusable at volume without aggregation.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
Making a timeline usable
- Group related events: 'Sam edited 12 fields' rather than twelve entries.
- Use relative time for recent events and absolute time for older ones, with the exact timestamp available on hover or focus.
- State the actor, the action and the object in a single readable sentence.
- Filter by actor, type and date range once volume passes a few dozen entries.
- Show what changed, not only that something changed, wherever the diff is small enough to display.
- Separate system events from human events visually, since they answer different questions.
In practice
Grouped edit events
Collaboration toolsCollapsing a burst of edits by one person within a short window into a single entry keeps the timeline about meaningful change rather than about keystrokes.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- ForgivenessPrinciple
- ContinuityUI foundation
Often used with
These usually appear in the same screen or the same decision.
- AvatarComponent
- Data TableComponent
- CollaborationPattern
- FilteringPattern
- NotificationsPattern