Optimistic Updates and Rollback UX

Learn to design optimistic updates so your application feels instantaneous to the user, and how to manage network failures with elegant rollback experiences.

info Quick Definition
Optimistic Updates are an interaction design technique where the user interface updates immediately after an action (such as giving a “Like” or sending a message), assuming the server will process the request successfully, without waiting for its actual response. Rollback is the process of reversing that visual change if the request ends up failing.

The Secret of Speed in Modern Apps

Imagine you press the “Like” button on Instagram. If the heart icon didn’t turn red until the server returned an “OK,” the application would feel slow and heavy.

Thanks to optimistic updates, the heart turns red in milliseconds. The user feels the app is lightning fast, even though the server request is actually still traveling through space. It is a Perceived Performance technique that removes the friction of waiting.

The Lifecycle of an Optimistic Action

To implement this technique correctly, the system must follow these visual steps:

  1. User Action: “I click on the Save button.”
  2. Optimistic State: The system immediately shows success (button pressed or green check) and sends the request in the background.
  3. Successful Response: If the server responds OK, the optimistic state is silently consolidated.
  4. Failed Response (The Fallback): If the server responds with an error, the system must execute the Rollback.

The Challenge of Rollback: Designing for Failure

Failure is inevitable. If your user’s connection cuts out just after they’ve given an optimistic “Like,” the system must revert the visual change. But how to do it without the user feeling cheated or confused?

Bad Rollback Practices:

  • Having the heart “disappear” suddenly without any explanation.
  • Showing a giant error modal that blocks the user.

Good Rollback Practices:

  • Synchronization Indicator: If something is taking time or seems like it’s going to fail, use a small spinner or “Syncing…” icon discreetly.
  • Rollback Microinteraction: Use a clear animation so the user sees the action has been undone (e.g., an exit animation for an unsent message).
  • Notification and Retry Option: Show a “Toast” or notice saying: “The change could not be saved. Do you want to try again?”. This gives control back to the user.

When NOT to use Optimistic Updates?

Not all actions should be “optimistic.” There are moments where security is more important than perceived speed:

  • Critical Security Actions: Changing a password or bank PIN.
  • High-Risk Irreversible Actions: Making a bank transfer of €5,000. In these cases, the user wants and needs to see that the system is validating the operation securely.
  • Destructive Actions: Deleting the entire user account. It’s better to wait for the server OK to confirm that destruction is complete.

Mentor’s Tips

  • Design for the “In Progress” state: Sometimes the user clicks a button several times if they don’t see anything. A small visual change (such as a different color tone) can indicate that “the system is already working” in optimistic mode.
  • Rollback Consistency: If the user has sent a message that failed and rolled back, don’t let the message be lost. Keep it in the text box so they don’t have to re-type it.
  • Collaborate with Engineering: This technique requires a lot of technical coordination (usually with libraries like React Query or Apollo). Talk to your developers to see which actions are ideal candidates for being optimistic.

Useful Resources and Tools

perceived-performance-design offline-first-flows conflict-resolution error-prevention-vs-recovery