Use streaming response for rendering partial generated output as events arrive; chat interface for the whole multi-turn conversation surface; progress bar for measurable operation completion; loading spinner for short indeterminate waits; and feed for chronological browsing of finished items or activity.
Use streaming response for rendering partial generated output as events arrive; chat interface for the whole multi-turn conversation surface; progress bar for measurable operation completion; loading spinner for short indeterminate waits; and feed for chronological browsing of finished items or activity.
Practice the judgment: Imagine this situation: Partial generated text looks complete, so users copy or act before final checks, citations, or tool results arrive. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Streaming response | Chat interface | Progress bar | Loading spinner | Feed |
|---|---|---|---|---|---|
| UI or UX | UI + UX - Incremental generated-output surface that renders response chunks before final completion | UI + UX - Multi-turn conversation surface with transcript, composer, assistant responses, and conversation history | UI + UX - Measurable system-operation progress indicator | UI + UX - Bounded indeterminate wait indicator for a named action or region | UI + UX - Dynamic stream of article-like updates that may load or insert content at either end |
| UI guidance | Render streamed output with a visible generation state, partial-answer label, stop control, final-complete state, and clear distinction between text that is still arriving and content that has passed final citation, safety, tool, or format checks. | Render chat as an ordered transcript with visible user and assistant roles, turn boundaries, timestamps or relative position, current draft composer, submitted prompt, response status, source or tool indicators, and conversation-level controls. | Show a labeled bar with a track, filled value, and nearby helper text that reports the measurable unit such as percent, bytes, rows, files, records, or stages. | Render a compact spinner only beside, inside, or over the affected action, component, or page region, and pair it with concise text that names what is loading or processing. | 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. |
| UX guidance | Use a streaming response when showing partial generated output helps users start reading or monitoring work before the model finishes, and when the product can explain that early chunks may still change, be filtered, or lack final sources. | Use a chat interface when users need a multi-turn assistant conversation where later prompts can depend on earlier turns, responses can be inspected or continued, and conversation history can be saved, resumed, deleted, or limited by policy. | Use a progress bar when the system can honestly report movement toward a known finish and users need to decide whether to wait, cancel, retry, continue elsewhere, or return later. | Prevent duplicate or conflicting actions while the operation is in flight, but keep context, status, safe cancellation, and timeout recovery available when the wait exceeds the expected threshold. | 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. |
| Good UI | A policy assistant shows Answer generating, streams paragraphs into a stable answer region, marks citations pending, exposes Stop generation, then changes to Complete when citations and safety checks finish. | A research assistant chat shows user and assistant bubbles, turn numbers, source chips, streaming status, Stop, Copy answer, Regenerate, New chat, and a conversations list with the active chat title. | A document upload card says Uploading evidence.zip, shows 64%, 32 of 50 MB, a Cancel action, and keeps the rest of the form usable. | A Pay invoice button becomes Processing payment with a small spinner, disables only duplicate payment actions, and leaves the invoice reference visible. | 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. |
| Bad UI | A streaming JSON answer is displayed as valid data before the closing braces and schema check have completed. | A conversation auto-scrolls to a new answer while the user is reading an older cited turn, then hides the old prompt after regenerate. | A progress bar reads 100% complete while virus scanning and server acceptance are still pending. | A search results panel shows skeleton rows, a spinner, and a progress bar for the same request. | New posts appear above the current paragraph and shift the page while the user is reading. |
| Good UX | A user sees the first-token state quickly, reads early outline bullets while the answer continues, stops generation after enough detail, and sees the result labelled Partial with Continue and Regenerate options. | A user asks for a policy summary, follows up with Compare that to the renewal clause, sees that the second answer used the first answer and selected file, then exports the two-turn transcript. | A user uploads evidence.zip, sees progress move from 12% to 64%, cancels before commit, retries after a network error, and gets a completed receipt only after server processing succeeds. | After submit, users see payment PAY-2048 processing, can tell the button is temporarily unavailable, and then get either success or retry guidance. | A user pauses live updates, reads three older posts, sees 2 new updates waiting, then chooses Jump to latest when ready. |
| Bad UX | A user copies an early legal recommendation before the final paragraph reverses the conclusion after a tool result arrives. | Latest answer is disconnected from the prompt and context that produced it. | Users leave after 100% transfer even though server processing later rejects the file. | The spinner blocks the whole workspace for a small table refresh and prevents users from continuing other work. | The feed jumps to the top whenever a new post arrives. |
| Best fit | Generated text or structured content can be read or monitored before completion. | The user needs a back-and-forth assistant conversation with follow-up questions and answer refinement. | A system operation has a measurable total or bounded progress value. | The operation has defined resolution, timeout, cancellation, or failure paths. | Users consume a continuing stream of updates, posts, stories, comments, media, or collaboration activity. |
| Avoid when | Intermediate chunks may expose unsafe, private, or misleading content. | The task can be completed with a single structured prompt box, form, or command. | The wait is short and only needs scoped activity feedback. | The content layout is predictable and a skeleton would better preserve structure. | The content is a finite set of objects that users need to filter, sort, select, compare, or manage. |
| Required state | Queued or receiving state before first output arrives. | Empty new chat with conversation title, mode, history or retention status, and a labelled composer. | Idle state before the operation starts. | Inline processing state for a button or small local action. | Default feed with heading, order label, rendered item count or range, and article-like items. |
| Accessibility burden | Expose stream milestones such as started, still generating, stopped, failed, citation ready, and complete as status messages. | Expose the transcript as an ordered region and use a sequential update strategy such as role=log for appended messages where appropriate. | Provide an accessible name that identifies the operation and affected object. | Give the spinner or affected region an accessible name that identifies the operation. | Give the feed a heading or accessible label and expose the current order or filter in text. |
| Common misuse | Letting partial output look finished before the final event arrives. | Auto-scrolling during streaming while the user is reading an older message. | Fabricating progress values just to make users feel movement. | Showing an unlabeled spinner on a blank page. | Calling any vertical card list a feed even when it is a bounded object collection. |