Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Optimistic Feedback

optimistic-feedback

Add to comparison +

Before the server confirms an action, the interface immediately shows the result the action is expected to produce; once the request returns, the interface reconciles with the actual result, or rolls back to the prior state with a clear explanation if the request fails.

Illustration · Editorial artwork, no interactive specimen yet
In a fictional FIELDNOTES list, a newly added item already appears in its place with a faint dashed outline and a tiny in-progress dot, while the rest of the list stays solid and displays normally.
In a fictional FIELDNOTES list, a newly added item already appears in its place with a faint dashed outline and a tiny in-progress dot, while the rest of the list stays solid and displays normally.

Recognizing it

  • After a click or submit, the interface shows the expected success state immediately, without waiting on the network round trip
  • That state is visually marked as unconfirmed (for example a dashed outline or a small in-progress marker), distinguishable from already-confirmed content
  • When the request returns, the state converges seamlessly into the real result, or rolls back clearly with an explanation and a retry path on failure

Concept boundary

Optimistic feedback presents an unconfirmed, expected result, unlike a skeleton or indeterminate progress indicator, which admit they are still waiting rather than impersonating a result; it also differs from a status message, which only reports a result that has actually happened, whereas optimistic feedback shows it before it happens. It trades honesty about uncertainty for perceived speed, so it is appropriate only where failure is rare and recovery is cheap.

When to consider it

  • The action has a low failure rate, and failures can be safely undone or retried
  • Perceived speed matters for this interaction, and waiting for server confirmation would break the sense of continuous action
  • The cost of recovering from a failure is small, so a brief incorrect display of success causes no real harm to the user

When to be cautious

  • The action is irreversible, financial, or has legal consequences, where a mistaken optimistic display could cause real loss
  • The failure rate is high or the outcome is highly uncertain, so impersonating success would repeatedly mislead users
  • Users need to see honestly that the system is still waiting or processing rather than being led to believe it already finished (a skeleton or progress indicator fits better here)

Tradeoff

Optimistic feedback makes the interface feel instantly responsive and keeps users from losing the sense of continuity while waiting, but it sacrifices honest disclosure of uncertainty; if a request fails and the rollback is not handled clearly, users start to doubt the interface's trustworthiness.

Conditional rules · Editorial advice

When Deciding whether to use optimistic feedback for a given actionMustUse it only where the action's failure rate is low and failures can be undone or retried cheaply; never use it for irreversible, financial, or legal actions.
When A request behind an optimistically shown action ultimately failsMustRoll the interface back visibly to the state before the failure, and give a plain explanation and a retry path; never silently drop it or leave an inconsistent interface state.
When Designing the visual treatment of the optimistic stateRecommendedKeep unconfirmed optimistic content visually distinguishable from confirmed content (such as an outline, opacity, or a small in-progress marker) so users do not mistake it for a finalized result.

Related entries

Status Message ↗Works with · The request eventually returns a confirmation or a failure

Optimistic feedback shows the expected result first; once the real result is confirmed or fails, a status message follows up to report it, and the two need to connect so users always know the current state's actual truth.

Determinate Progress Bar ↗Conditional alternative · Whether the task is worth impersonating an unconfirmed result for a sense of speed

A determinate progress bar honestly shows an ongoing, unfinished process; optimistic feedback shows the expected already-completed result directly, and the two are opposite answers to the same waiting problem.

Error Prevention ↗Conditional conflict · The action is irreversible, costly, or needs careful confirmation

Error prevention requires avoiding letting users bear consequences while an outcome is still uncertain; optimistic feedback shows success first and asks questions later, which conflicts with situations that need errors intercepted upfront.

Skeleton Screen ↗Conditional alternative · Whether the interface is willing to admit it is still waiting for content

A skeleton honestly shows a not-yet-loaded placeholder structure; optimistic feedback skips the sense of waiting and shows the expected content directly, so the two handle uncertainty in opposite ways.

Sources and what they support

Nielsen Norman Group · Response Times: The 3 Important Limits ↗

0.1 second is the limit for users to feel the system is reacting instantaneously, requiring no feedback beyond displaying the result directly; past roughly 1 second, users notice the delay and lose the sense of continuous, direct action, which is the waiting window optimistic feedback tries to mask.

Retrieved: 2026-09-15 · Archived 2026-09-16
Nielsen Norman Group · Progress Indicators Make a Slow System Less Insufferable ↗

The article argues for being forthcoming and transparent about wait times to reduce user uncertainty, and explicitly opposes using tricks to mask delays or make a system feel faster than it is; this is the basis for using optimistic feedback cautiously and rolling back honestly on failure.

Retrieved: 2026-09-15 · Archived 2026-09-16
React · useOptimistic ↗

useOptimistic renders the expected state immediately before an async action completes, and on success the optimistic state converges with the real state in the same render; if the action fails, the interface automatically falls back to the real state from before the failure, an authoritative technical definition of optimistic updates and their failure-rollback mechanism.

Retrieved: 2026-09-15 · Snapshot unconfirmed

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

This entry has no operable specimen yet; the illustration is an editorial sketch. When applied to a product, still verify that the real failure rate is low enough to support optimistic display, that rollback copy and retry paths are clear across error types, that the optimistic marker is perceivable by screen readers, and that convergence between the optimistic and real state does not cause flicker or inconsistency under weak or high-latency networks.

{
  "states": [
    "idle",
    "optimistic",
    "confirmed",
    "rolled-back"
  ],
  "a11y": [
    "The difference between the optimistic and confirmed states must not rely on color alone; pair it with text or a pattern marker",
    "When a rollback happens, announce the failure reason through a live region rather than silently removing the content"
  ],
  "motion": "Optimistic content appears with a slight fade-in or directly, avoiding exaggerated motion; under reduced motion it appears directly, and a rollback likewise appears directly rather than flashing quickly"
}
Full Agent entry JSON
{
  "id": "optimistic-feedback",
  "type": "micro",
  "name": {
    "zh": "乐观反馈",
    "en": "Optimistic Feedback"
  },
  "aliases": [
    "Optimistic UI",
    "Optimistic Update",
    "乐观更新"
  ],
  "granularity": "state",
  "intents": [
    "inform",
    "reduce-interruption"
  ],
  "tags": [
    "optimistic update",
    "immediate feedback",
    "rollback",
    "perceived performance",
    "optimistic"
  ],
  "definition": "Before the server confirms an action, the interface immediately shows the result the action is expected to produce; once the request returns, the interface reconciles with the actual result, or rolls back to the prior state with a clear explanation if the request fails.",
  "boundary": "Optimistic feedback presents an unconfirmed, expected result, unlike a skeleton or indeterminate progress indicator, which admit they are still waiting rather than impersonating a result; it also differs from a status message, which only reports a result that has actually happened, whereas optimistic feedback shows it before it happens. It trades honesty about uncertainty for perceived speed, so it is appropriate only where failure is rare and recovery is cheap.",
  "signature": [
    "After a click or submit, the interface shows the expected success state immediately, without waiting on the network round trip",
    "That state is visually marked as unconfirmed (for example a dashed outline or a small in-progress marker), distinguishable from already-confirmed content",
    "When the request returns, the state converges seamlessly into the real result, or rolls back clearly with an explanation and a retry path on failure"
  ],
  "when": [
    "The action has a low failure rate, and failures can be safely undone or retried",
    "Perceived speed matters for this interaction, and waiting for server confirmation would break the sense of continuous action",
    "The cost of recovering from a failure is small, so a brief incorrect display of success causes no real harm to the user"
  ],
  "when_not": [
    "The action is irreversible, financial, or has legal consequences, where a mistaken optimistic display could cause real loss",
    "The failure rate is high or the outcome is highly uncertain, so impersonating success would repeatedly mislead users",
    "Users need to see honestly that the system is still waiting or processing rather than being led to believe it already finished (a skeleton or progress indicator fits better here)"
  ],
  "tradeoff": "Optimistic feedback makes the interface feel instantly responsive and keeps users from losing the sense of continuity while waiting, but it sacrifices honest disclosure of uncertainty; if a request fails and the rollback is not handled clearly, users start to doubt the interface's trustworthiness.",
  "comparison": {
    "focus": "Letting users feel that an action has already taken effect before the request completes, to preserve the continuity of the interaction",
    "mechanism": "Render the expected result locally and immediately, reconcile with the real result once the request returns, and roll back with a message on failure",
    "cost": "Requires designing a rollback path and failure copy for each type of action; otherwise the impersonated certainty backfires on trust when it fails"
  },
  "sources": [
    {
      "id": "nng-response-times",
      "title": "Nielsen Norman Group · Response Times: The 3 Important Limits",
      "url": "https://www.nngroup.com/articles/response-times-3-important-limits/",
      "claim": "0.1 second is the limit for users to feel the system is reacting instantaneously, requiring no feedback beyond displaying the result directly; past roughly 1 second, users notice the delay and lose the sense of continuous, direct action, which is the waiting window optimistic feedback tries to mask.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/response-times-3-important-limits/",
        "status": "available",
        "checkedAt": "2026-09-16T03:50:36.309Z",
        "jobId": "spn2-a445b35eeb0d266caa0107c5f3694ef90bec60e8",
        "url": "https://web.archive.org/web/20260916035201/https://www.nngroup.com/articles/response-times-3-important-limits/",
        "timestamp": "20260916035201"
      }
    },
    {
      "id": "nng-progress-indicators",
      "title": "Nielsen Norman Group · Progress Indicators Make a Slow System Less Insufferable",
      "url": "https://www.nngroup.com/articles/progress-indicators/",
      "claim": "The article argues for being forthcoming and transparent about wait times to reduce user uncertainty, and explicitly opposes using tricks to mask delays or make a system feel faster than it is; this is the basis for using optimistic feedback cautiously and rolling back honestly on failure.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/progress-indicators/",
        "status": "available",
        "checkedAt": "2026-09-16T05:46:58.176Z",
        "jobId": "spn2-9f1cb6ee0ec1afcc2efcbc9c16a74dd503faf511",
        "url": "https://web.archive.org/web/20260916054722/https://www.nngroup.com/articles/progress-indicators/",
        "timestamp": "20260916054722"
      }
    },
    {
      "id": "react-use-optimistic",
      "title": "React · useOptimistic",
      "url": "https://react.dev/reference/react/useOptimistic",
      "claim": "useOptimistic renders the expected state immediately before an async action completes, and on success the optimistic state converges with the real state in the same render; if the action fails, the interface automatically falls back to the real state from before the failure, an authoritative technical definition of optimistic updates and their failure-rollback mechanism.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://react.dev/reference/react/useOptimistic",
        "status": "pending",
        "checkedAt": "2026-09-16T04:00:57.443Z",
        "error": "status-request-failed",
        "jobId": "spn2-e5a7f1fe895c3929e49237c7b13c849c95220ebb"
      }
    }
  ],
  "relations": [
    {
      "target": "status-message",
      "kind": "composes_with",
      "condition": "The request eventually returns a confirmation or a failure",
      "reason": "Optimistic feedback shows the expected result first; once the real result is confirmed or fails, a status message follows up to report it, and the two need to connect so users always know the current state's actual truth.",
      "basis": "editorial"
    },
    {
      "target": "determinate-progress",
      "kind": "alternative",
      "condition": "Whether the task is worth impersonating an unconfirmed result for a sense of speed",
      "reason": "A determinate progress bar honestly shows an ongoing, unfinished process; optimistic feedback shows the expected already-completed result directly, and the two are opposite answers to the same waiting problem.",
      "basis": "editorial"
    },
    {
      "target": "error-prevention",
      "kind": "conflicts_when",
      "condition": "The action is irreversible, costly, or needs careful confirmation",
      "reason": "Error prevention requires avoiding letting users bear consequences while an outcome is still uncertain; optimistic feedback shows success first and asks questions later, which conflicts with situations that need errors intercepted upfront.",
      "basis": "editorial"
    },
    {
      "target": "skeleton",
      "kind": "alternative",
      "condition": "Whether the interface is willing to admit it is still waiting for content",
      "reason": "A skeleton honestly shows a not-yet-loaded placeholder structure; optimistic feedback skips the sense of waiting and shows the expected content directly, so the two handle uncertainty in opposite ways.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Deciding whether to use optimistic feedback for a given action",
      "instruction": "Use it only where the action's failure rate is low and failures can be undone or retried cheaply; never use it for irreversible, financial, or legal actions.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "A request behind an optimistically shown action ultimately fails",
      "instruction": "Roll the interface back visibly to the state before the failure, and give a plain explanation and a retry path; never silently drop it or leave an inconsistent interface state.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Designing the visual treatment of the optimistic state",
      "instruction": "Keep unconfirmed optimistic content visually distinguishable from confirmed content (such as an outline, opacity, or a small in-progress marker) so users do not mistake it for a finalized result.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "requirements": [],
  "behavior": {
    "states": [
      "idle",
      "optimistic",
      "confirmed",
      "rolled-back"
    ],
    "a11y": [
      "The difference between the optimistic and confirmed states must not rely on color alone; pair it with text or a pattern marker",
      "When a rollback happens, announce the failure reason through a live region rather than silently removing the content"
    ],
    "motion": "Optimistic content appears with a slight fade-in or directly, avoiding exaggerated motion; under reduced motion it appears directly, and a rollback likewise appears directly rather than flashing quickly"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "demoCapabilities": [],
  "implementationNote": "This entry has no operable specimen yet; the illustration is an editorial sketch. When applied to a product, still verify that the real failure rate is low enough to support optimistic display, that rollback copy and retry paths are clear across error types, that the optimistic marker is perceivable by screen readers, and that convergence between the optimistic and real state does not cause flicker or inconsistency under weak or high-latency networks.",
  "image": {
    "src": "/images/optimistic-feedback.webp",
    "alt": "In a fictional FIELDNOTES list, a newly added item already appears in its place with a faint dashed outline and a tiny in-progress dot, while the rest of the list stays solid and displays normally."
  },
  "searchTerms": [
    "乐观更新",
    "即时反馈",
    "回滚",
    "感知性能",
    "预期结果"
  ]
}