What is a timeline in UX design?
A timeline is a UI component that organizes information in chronological or sequential order along a visual axis. It communicates the sequence and relative timing of events, milestones, or content items. Timelines appear in version history and audit logs that show changes over time, in project management tools that display task sequences and milestones, in activity feeds that show recent actions in reverse chronological order, in onboarding flows that show the steps of a process in sequence, and in media players where the scrubber represents position within the content timeline.
What are the different types of timeline in UX?
Vertical timelines place events in a top-to-bottom sequence, either with the most recent event at the top in reverse chronological order, as in activity feeds and audit logs, or with the oldest event at the top in forward chronological order, as in historical narratives or process documentation. Horizontal timelines place events left to right, common in project planning tools and media player scrubbers. Process timelines show the steps of a multi-stage process, focusing on sequence and current position rather than on specific dates. Each type serves different cognitive needs: process timelines communicate where users are in a sequence, while historical timelines communicate what happened and when.
How to design clear and accessible timelines?
Timelines must communicate sequence clearly through visual design, not just through positional convention that users may not know. Use explicit date and time labels rather than relative references like "3 days ago" alone, which become meaningless over time. Use visual distinctions to differentiate past, current, and future events. Ensure that the timeline direction, whether it reads top to bottom or bottom to top, is consistent with user expectations for the context. For screen reader users, the sequence of events in the DOM should match the intended reading order, and time-related information should be expressed in text rather than conveyed only through visual positioning.