UI + UX Error Prevention And Recovery established

Retry

Expose a scoped Retry control only for retryable failures, preserve the original request context, show attempt and pending states, prevent duplicate activation, use idempotency for side-effecting operations, back off repeated attempts, and stop retrying when correction, fallback, or escalation is more honest.

Decision first

Choose this pattern when the problem matches

Use when

  • A load, save, submit, upload, export, sync, payment, or background request failed for a transient or uncertain reason.
  • The original request scope can be preserved and repeated safely.
  • Users benefit from controlling the next attempt or seeing automatic attempt status.

Avoid when

  • The error is caused by invalid user input and correction is required.
  • The user lacks permission or the operation is blocked by policy.
  • The operation is final, irreversible, or cannot be deduplicated safely.
  • The product cannot preserve the request context or determine whether a previous side effect completed.
  • A broader offline, service-unavailable, conflict, or error state should own the recovery surface.

Problem it prevents

Users face a failed load, save, export, upload, payment, sync, or submit operation and need a safe way to attempt the same operation again without losing context or causing duplicate side effects.

Pattern anatomy

What a strong implementation has to make clear

User need

The product can distinguish transient failures from validation, permission, policy, irreversible, or final-state failures.

Pattern promise

Expose a scoped Retry control only for retryable failures, preserve the original request context, show attempt and pending states, prevent duplicate activation, use idempotency for side-effecting operations, back off repeated attempts, and stop retrying when correction, fallback, or escalation is more honest.

Required state

Retryable failed state with affected operation, object, and preserved request context.

Recovery path

Retry button does nothing because no original request context was saved.

Access contract

Use an action label that names the operation, not only an icon or generic phrase.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A report export card says Export CSV failed, keeps the saved filters visible, shows Attempt 1 of 3, and offers Retry export with request EXP-2048.
  • A payment authorization retry shows the same order, same amount, idempotency reference, disabled duplicate button while sending, and a cooldown before another attempt.
  • A user retries the same export after a network timeout, sees the attempt change to sending, and then returns to the recovered download state without re-entering filters.
  • A second failure increases the wait before the next attempt and then offers cached export, background notification, or support reference after attempts are exhausted.
Weak implementation

Vague, hidden, hard to recover from

  • A generic Try again button appears after every error, including validation and permission failures users cannot fix by repeating the request.
  • Retry and Submit again are both enabled during an in-flight payment request with no idempotency reference or duplicate guard.
  • The app retries aggressively every second during an outage and makes the service harder to recover.
  • A user retries a non-retryable permission denial and receives the same failure repeatedly instead of an access request path.
UI guidance
  • Place Retry next to the failed operation, object, or request summary, and name the exact action being retried such as Retry export or Retry payment authorization.
  • Show attempt count, in-flight state, last tried time, cooldown or next retry time, request reference, and the preserved inputs or scope when retry safety depends on context.
UX guidance
  • Use retry when a specific operation likely failed for a transient reason and the same operation can be attempted again without losing user context or duplicating side effects.
  • Cap retry attempts, back off repeated attempts, guard duplicate submission while pending, and route users to correction, fallback, support, or later return when retry no longer fits the failure.
Implementation contract

What the implementation must handle

States

  • Retryable failed state with affected operation, object, and preserved request context.
  • Retry-ready state with a specific action label and safe scope.
  • Retry pending state that disables duplicate attempts and confirms the same request is being sent.
  • Retry succeeded state that returns users to recovered content, completed action, or download access.

Interaction

  • Retry repeats the same failed operation against the same request scope unless users explicitly edit that scope first.
  • Activating Retry moves the control into a pending state and prevents a second activation until the attempt resolves or is cancelled.
  • The interface reports success, still failed, cooldown, exhausted, or non-retryable outcome after each attempt.
  • Retry does not clear forms, filters, selected files, drafts, or destination context unless the user deliberately resets them.

Accessibility

  • Use an action label that names the operation, not only an icon or generic phrase.
  • Expose pending, failed again, cooldown, succeeded, exhausted, and non-retryable outcomes through status text or live regions.
  • Keep focus near the failed operation after retry fails again, and move focus to recovered content or a success status when retry succeeds.
  • Use disabled state with an adjacent explanation for cooldown or in-flight retry rather than relying on color alone.

Review

  • What exact operation will run again, and can users see that scope before activating Retry?
  • Why is this failure retryable rather than user-correctable, permission-related, final, or a broader outage?
  • What prevents duplicate charges, records, messages, uploads, or exports if the first attempt actually reached the server?
  • What is the attempt cap, backoff rule, and next path after repeated failure?
Interactive lab

Inspect the states before you copy the pattern

Retry a failed operation safely

Fail a report export, retry the same request with attempt count and duplicate guards, then compare cooldown, wrong-scope, non-retryable, infinite retry, and hidden-context failures.

Retry
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Retryable failed state with affected operation, object, and preserved request context.

Keyboard / Access

Retry controls are reachable in logical order near the failed operation.

Avoid Generating

Offering Retry for every error regardless of whether the user or system state can change.

Evidence trail

Source-backed claims behind this guidance

Full agent/debug reference

Problem Context

  • The product can distinguish transient failures from validation, permission, policy, irreversible, or final-state failures.
  • The same request, object, inputs, filters, or upload can be preserved and attempted again.
  • Repeated attempts can create duplicate records, charges, emails, exports, queue items, or service load unless guarded.
  • Users need to know whether a retry is pending, waiting, succeeded, failed again, exhausted, or unavailable.

Selection Rules

  • Choose retry when a specific failed operation can plausibly succeed if attempted again under the same scope.
  • Name the retried operation and object so users understand what will repeat before they activate it.
  • Keep user-entered data, request parameters, selected files, filters, and destination details intact across failed attempts.
  • Disable or debounce Retry while an attempt is in flight, and never leave an unsafe duplicate submit path beside it.
  • Use idempotency keys, request references, upload IDs, message IDs, or server deduplication for side-effecting operations.
  • Use capped backoff, jitter, attempt limits, or server-provided retry timing rather than immediate repeated loops.
  • Stop offering retry for validation errors, missing required data, denied permission, final deletion, unsupported state, or policy decisions.
  • After repeated failure, switch to fallback, cached data, background completion, export local copy, contact support, or return-later guidance.
  • Use error state for the broader persistent failure surface and Retry as one action inside that surface.
  • Use offline state when the primary issue is connection mode and local or queued work behavior rather than one failed operation.

Required States

  • Retryable failed state with affected operation, object, and preserved request context.
  • Retry-ready state with a specific action label and safe scope.
  • Retry pending state that disables duplicate attempts and confirms the same request is being sent.
  • Retry succeeded state that returns users to recovered content, completed action, or download access.
  • Retry failed again state with updated attempt count and cause.
  • Cooldown or backoff state with next allowed attempt time or wait reason.
  • Retry exhausted state with fallback, background, support, or return-later path.
  • Non-retryable state that routes to correction, access request, policy explanation, or support instead of Retry.
  • Duplicate-guarded side-effect state with idempotency, request reference, or deduplication visible enough for support.

Interaction Contract

  • Retry repeats the same failed operation against the same request scope unless users explicitly edit that scope first.
  • Activating Retry moves the control into a pending state and prevents a second activation until the attempt resolves or is cancelled.
  • The interface reports success, still failed, cooldown, exhausted, or non-retryable outcome after each attempt.
  • Retry does not clear forms, filters, selected files, drafts, or destination context unless the user deliberately resets them.
  • If retry would create external side effects, the client and server share an idempotency or deduplication contract.
  • Automatic retries respect attempt caps and backoff; manual retry does not bypass safety limits that protect the user or service.
  • When the failure cause changes to validation, permission, policy, or final state, the UI replaces Retry with the action users can actually take.

Implementation Checklist

  • Classify failures into retryable transient, retryable after cooldown, user-correctable, permission-related, final, and unknown categories.
  • Persist the original request payload or safe request reference so Retry does not broaden scope or lose user-entered data.
  • Add idempotency keys or server-side deduplication for create, update, payment, send, invite, export, import, upload, and queue actions.
  • Track attempt count, last attempt time, next allowed attempt, current in-flight request, and terminal exhausted state.
  • Show operation-specific copy such as Retry export, Retry upload, or Retry connection check instead of an unexplained Try again.
  • Guard against double click, keyboard repeat, back navigation, page refresh, and multi-tab duplicate attempts.
  • Apply capped backoff and jitter for automatic or repeated attempts, and respect Retry-After or equivalent server timing when available.
  • Announce retry pending, success, repeated failure, cooldown, exhausted, and non-retryable changes in a status region.
  • Test success after retry, repeated failure, timeout, cancellation, offline transition, duplicate activation, stale request reference, and support escalation.

Common Generated-UI Mistakes

  • Offering Retry for every error regardless of whether the user or system state can change.
  • Retrying immediately in a tight loop during service overload.
  • Leaving both Retry and the original submit button enabled for the same side-effecting operation.
  • Changing filters, selected files, amount, recipient, or destination between attempts without telling users.
  • Hiding attempt count and cooldown, making users think the control is broken.
  • Using retry to mask validation, permission, or policy errors that need correction or access.

Critique Questions

  • What exact operation will run again, and can users see that scope before activating Retry?
  • Why is this failure retryable rather than user-correctable, permission-related, final, or a broader outage?
  • What prevents duplicate charges, records, messages, uploads, or exports if the first attempt actually reached the server?
  • What is the attempt cap, backoff rule, and next path after repeated failure?
  • Does the retry preserve forms, filters, files, scroll context, and request identity?
  • Can keyboard and assistive technology users tell when retry is pending, cooled down, exhausted, or unavailable?
Accessibility
  • Use an action label that names the operation, not only an icon or generic phrase.
  • Expose pending, failed again, cooldown, succeeded, exhausted, and non-retryable outcomes through status text or live regions.
  • Keep focus near the failed operation after retry fails again, and move focus to recovered content or a success status when retry succeeds.
  • Use disabled state with an adjacent explanation for cooldown or in-flight retry rather than relying on color alone.
  • Ensure keyboard activation cannot trigger multiple duplicate attempts through key repeat.
Keyboard Behavior
  • Retry controls are reachable in logical order near the failed operation.
  • Enter or Space activates Retry once and then the pending state suppresses repeated activation until resolution.
  • When Retry is cooled down or exhausted, keyboard focus can reach the reason and alternate action.
  • After success, focus returns to the recovered object, download, saved record, or clear success status.
  • Keyboard shortcuts for retry, if present, follow the same in-flight, cooldown, and duplicate-guard rules as the visible control.
Variants
  • Manual retry button
  • Retry with preserved form
  • Retry upload
  • Retry payment authorization
  • Retry failed save
  • Retry with cooldown
  • Automatic retry with status
  • Retry after idempotency key
  • Retry exhausted escalation
  • Non-retryable failure handoff

Verification

Last verified: