VOL. III · CH. 3.16 · COMPONENT
Timelines
Sequence made visible — what happened, in what order, and what's next.
1 min read · 117 words
3.16.1Definition & Anatomy
A timeline displays a sequence of events or steps in chronological or process order, typically as a connected vertical or horizontal line of markers.
3.16.2Common Mistakes
- Overcrowding a timeline with every minor event, burying the genuinely significant milestones.
- No clear current-state marker on a status timeline, leaving the user unsure where they are in the process.
3.16.3Best Practices
- Show only meaningful milestones; group or hide minor events behind an expandable detail.
- Clearly mark the current step distinctly from completed and upcoming ones.
ExampleOrder-tracking pages use a horizontal timeline (Placed → Shipped → Out for Delivery → Delivered) with the current stage visually highlighted, giving an at-a-glance status without reading text.