| UI or UX | UI + UX - Bounded chronological record of past, current, or expected events | UI + UX - Dynamic stream of article-like updates that may load or insert content at either end | UI + UX - End-to-end ordered journey guidance with linked tasks | UI + UX - Linear multistep task progress indicator |
| UI guidance | Render the timeline as a labelled chronological sequence where each event has a visible date or time, event title, actor or system source when known, status or type, and a short summary. | Render the feed as a labelled stream of item boundaries where each item has a source or author, timestamp, title or body summary, type, actions, and enough context to stand alone as an article-like update. | Present the process as a numbered ordered list of three to ten high-level steps, each with a short parallel action heading and enough supporting text or links to complete that stage. | Show a compact ordered list of named steps near the task heading, with visually distinct completed, current, upcoming, optional, and error states. |
| UX guidance | Use timeline when users need to understand what happened, where they are now, and what may happen next in a case, claim, application, order, incident, or process. | Use feed when users consume a continuing stream of posts, updates, stories, events, or collaboration activity and need to keep their reading position while new or older content appears. | Use process lists to help users understand an end-to-end journey that may span guidance pages, transactions, departments, offline actions, or separate sessions. | Use step navigation to reduce uncertainty in long linear tasks by showing where users are, what is done, and what remains. |
| Good UI | A benefits application timeline groups events by date and shows Application submitted, Evidence requested, Evidence received, Decision pending, and Next review, with actor, timestamp, and status marker. | A project feed shows source avatar, actor, timestamp, object name, excerpt, item type, unread marker, reply and save actions, and a visible queued-new-items banner while the reader is midstream. | A 'Apply for a permit' guide shows numbered steps for Check eligibility, Prepare documents, Submit application, Pay fee, and Track decision, each expanding to relevant links and conditions. | A five-step application shows Eligibility complete, Contact details current, Documents upcoming, Review upcoming, and Submit upcoming, with the current step emphasized and a matching page heading. |
| Bad UI | A vertical line lists Approved, More, Update, and Done with no dates, actors, status, or explanation. | New posts appear above the current paragraph and shift the page while the user is reading. | A live form page shows a process list where the Continue button should be, so users leave the transaction to read unrelated guidance. | A two-page form adds a large stepper that consumes space without explaining meaningful progress. |
| Good UX | A caseworker filters the timeline to System events, sees two date groups hidden, restores all events, and the event order and current marker stay stable. | A user pauses live updates, reads three older posts, sees 2 new updates waiting, then chooses Jump to latest when ready. | A user unsure where to start expands 'Prepare documents' and sees both online upload guidance and an offline identity check requirement before starting the application. | After a user enters valid contact details and continues, Contact details becomes complete and Documents becomes current. |
| Bad UX | A user sees a future appointment marker styled like completed history and assumes the appointment already happened. | A feed keeps loading forever, hides the footer, and gives no way to resume from a saved position. | The process list says 'Complete identity check' but opens another step-by-step page that loops back to the original guide. | Clicking Review skips Documents, clears the contact form, and then blocks final submission without explaining the skipped prerequisite. |
| Best fit | Users need a chronological record of important events for one object, case, order, application, or process. | Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity. | An end-to-end journey spans several pieces of guidance, service links, departments, or channels. | A linear form, application, checkout, or setup flow has three or more meaningful steps. |
| Avoid when | The surface is a live stream whose content keeps arriving and must preserve reader position. | The content is a finite set of objects that users need to filter, sort, select, compare, or manage. | The user is inside a live transactional form or wizard. | The journey has only one or two screens. |
| Required state | Default timeline with heading, order label, date or phase groups, and event markers. | Default feed with heading, order label, rendered item count or range, and article-like items. | Standalone process overview with introduction and ordered high-level steps. | Default state with completed, current, and upcoming steps. |
| Accessibility burden | Use semantic list or ordered-list structure with date-group headings and text event labels. | Give the feed a heading or accessible label and expose the current order or filter in text. | Use semantic ordered-list structure so step order is available without relying on visual counters. | Use aria-current on the current labeled step and include hidden or visible status text for completed, current, upcoming, optional, and error states. |
| Common misuse | Using timeline as decorative chrome around a normal list with no meaningful time sequence. | Calling any vertical card list a feed even when it is a bounded object collection. | Using a process list as a transactional progress indicator. | Using a step indicator as breadcrumbs, tabs, side navigation, or pagination. |