UI + UX Feedback, Status, And System State standard

Confirmation page

Route successful final submit to a dedicated confirmation page that proves completion, gives any needed reference or submitted details, explains next steps and timing, provides contact or tracking paths, and offers a sensible way to keep or revisit the record.

Decision first

Choose this pattern when the problem matches

Use when

  • A transaction or service journey has ended and users need durable proof plus next-step information.
  • Users may need to keep a reference number, receipt, booking detail, submitted-response proof, or contact path.
  • The product can distinguish committed success from pending, failed, denied, or still-editable states.
  • Users should be able to close the journey with confidence that there is nothing else required right now.

Avoid when

  • The user remains inside an ongoing task and only needs local proof near the changed object.
  • The next step is still pre-submit review or correction.
  • The outcome is a previous-page message before a continuing task page.
  • The action failed, is still pending, is denied, or needs validation recovery.
  • The completion is so low-risk and self-evident that a brief success confirmation or toast is enough.

Problem it prevents

Users finish a transaction but do not know whether it is complete, what reference proves it, what will happen next, how long it will take, who to contact, or how to recover the receipt later.

Pattern anatomy

What a strong implementation has to make clear

User need

The user has completed a transaction such as applying, booking, paying, submitting a survey, publishing, closing an account, or sending a consequential request.

Pattern promise

Route successful final submit to a dedicated confirmation page that proves completion, gives any needed reference or submitted details, explains next steps and timing, provides contact or tracking paths, and offers a sensible way to keep or revisit the record.

Required state

Submitted state immediately after authoritative commit routes to the confirmation page.

Recovery path

Users contact support because the page did not say when they should expect a response.

Access contract

Use one clear page H1 or panel title that communicates completion without relying on green color alone.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A grant application page says Application complete, shows reference APP-48291, lists what happens next within 5 working days, and offers Save record, Track application, and feedback links.
  • A booking complete page shows the appointment location and time under the success panel, explains that an email was sent, and keeps related links secondary.
  • A user copies the reference, saves the receipt, follows Track application, and later returns from a bookmark to the same confirmation details or a helpful tracking fallback.
  • A user who needs to correct submitted details sees contact or amend guidance that matches the service rules rather than pre-submit Change links.
Weak implementation

Vague, hidden, hard to recover from

  • A submitted application only redirects to a dashboard toast that says Done, with no reference, receipt, or next-step details.
  • A green completion page contains six unrelated cards, a marketing banner, edit links, and no clear statement of whether the transaction is finished.
  • A user closes the page after seeing a transient message and later cannot prove the payment or application happened.
  • A permission failure is displayed as a successful confirmation page, so the user waits for a next step that will never happen.
UI guidance
  • Render a full page after commit with a prominent completion panel, a page heading that names what finished, a reference or receipt when users need one, and a clear section for what happens next.
  • Place contact, tracking, save, print, feedback, and related-service links below the completion panel in a restrained hierarchy so the receipt remains the primary page purpose.
UX guidance
  • Use a confirmation page when the transaction or service journey has ended and users need durable proof, reassurance, next-step timing, or a record they can bookmark, print, quote, or revisit.
  • Define the post-commit lifecycle: users should not see pre-submit Change links, but they should know how to track, amend, cancel, contact support, start another transaction, or recover when a bookmarked receipt can no longer be shown.
Implementation contract

What the implementation must handle

States

  • Submitted state immediately after authoritative commit routes to the confirmation page.
  • Completion panel state with success heading and reference or receipt details when available.
  • Next-step state that names timing, responsible party, contact route, and whether any user action remains.
  • Record-keeping state with save, print, email, copy reference, or downloadable receipt when users may need proof.

Interaction

  • The page appears only after the final action succeeds according to the authoritative system of record.
  • The H1 or panel title names the finished transaction rather than saying only Success.
  • Reference numbers, timestamps, submitted details, and next steps are generated from canonical committed data.
  • Pre-submit Change links are removed after commit; any correction path uses explicit amend, cancel, contact, or track rules.

Accessibility

  • Use one clear page H1 or panel title that communicates completion without relying on green color alone.
  • Keep interactive controls out of low-contrast panel treatments unless focus and text contrast are explicitly verified.
  • Put next-step headings, submitted details, and contact links in logical reading order after the completion panel.
  • Make reference numbers selectable and readable by assistive technology; avoid encoding proof only in an image or QR code.

Review

  • What system event proves the transaction is complete?
  • What reference, receipt, timestamp, or submitted details will users need later?
  • What exactly happens next, who owns it, and when should the user expect it?
  • Is the page still offering pre-submit editing after commit?
Interactive lab

Inspect the states before you copy the pattern

Close a completed transaction

Submit an application, copy the reference, save or email the receipt, track the case, revisit from a bookmark, start another application, and compare endpoint misuse.

Confirmation page
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

Submitted state immediately after authoritative commit routes to the confirmation page.

Keyboard / Access

After successful submit, keyboard focus lands on the confirmation page heading or success panel.

Avoid Generating

Showing a toast or local success strip as the only proof of a completed transaction.

Evidence trail

Source-backed claims behind this guidance

GOV.UK Design System Confirmation pages

GOV.UK Design System - checked

GOV.UK supports confirmation pages at transaction end with reference, next steps, contact details, useful onward links, feedback, save-record behavior, and bookmarked returns.

NHS digital service manual Confirmation page

NHS digital service manual - checked

NHS supports a green panel, next-step details, optional reference numbers, submitted detail summaries, feedback links, and restraint to avoid overwhelming users.

ONS Service Manual Confirmation page

Office for National Statistics - checked

ONS supports survey endpoint confirmation and avoids using confirmation pages for service problems, permission denial, or further guidance.

Full agent/debug reference

Problem Context

  • The user has completed a transaction such as applying, booking, paying, submitting a survey, publishing, closing an account, or sending a consequential request.
  • The action is committed enough that pre-submit editing is no longer the main model, but the service may still need track, amend, cancel, or contact routes.
  • The user may need to show proof later, quote a reference number, wait for a response, prepare for an appointment, or understand that there is nothing more to do.
  • The page may be bookmarked, printed, screenshotted, emailed, or reopened from browser history, so the service needs a helpful return behavior.

Selection Rules

  • Choose confirmation page when the transaction is finished and the user needs endpoint proof plus what happens next.
  • Include a reference number only when it has a real support, tracking, payment, booking, or audit use; explain what it is for and whether users should keep it.
  • State the next responsible party, expected timing, and whether the user needs to do anything else.
  • Summarize submitted details when they help the user verify an appointment, payment, booking, application, or survey response after commit.
  • Provide contact, tracking, amend, cancel, save, print, email receipt, feedback, or related-service links only when they support the completed transaction.
  • Use success confirmation instead when the user remains in the same task and the success proof belongs near the changed object.
  • Use review before submit instead when users still need Change links and final pre-commit inspection.
  • Use notification banner instead when a previous-page action succeeded but the current journey continues.
  • Use error state, service unavailable page, permission denied state, or error summary instead when completion did not happen.
  • Avoid filling the endpoint with unrelated promotional content or multiple equal calls to action that obscure the completion message.

Required States

  • Submitted state immediately after authoritative commit routes to the confirmation page.
  • Completion panel state with success heading and reference or receipt details when available.
  • Next-step state that names timing, responsible party, contact route, and whether any user action remains.
  • Record-keeping state with save, print, email, copy reference, or downloadable receipt when users may need proof.
  • Submitted-detail summary state for bookings, payments, survey responses, or applications where details matter after commit.
  • Post-commit correction state that replaces pre-submit Change links with amend, cancel, track, or contact guidance.
  • Bookmarked-return state that either restores the receipt or provides a helpful tracking or support path.
  • Start-again state for users who need to begin another transaction without confusing it with the completed one.
  • Failure handoff state where uncommitted, denied, invalid, or unavailable outcomes do not render as completion.

Interaction Contract

  • The page appears only after the final action succeeds according to the authoritative system of record.
  • The H1 or panel title names the finished transaction rather than saying only Success.
  • Reference numbers, timestamps, submitted details, and next steps are generated from canonical committed data.
  • Pre-submit Change links are removed after commit; any correction path uses explicit amend, cancel, contact, or track rules.
  • Save, print, email, copy, feedback, and tracking actions preserve the completion context and keep users on or return them to the receipt when appropriate.
  • Starting a new transaction clears the old flow state while leaving the completed reference accessible through tracking or history if supported.
  • Returning through a bookmark does not show stale private data without authorization; if the receipt cannot be restored, the page explains how to track or contact the service.

Implementation Checklist

  • Identify the authoritative commit event, receipt identifier, user-visible reference, timestamp, submitted details, and next-step owner before rendering the page.
  • Write the completion heading as a finished outcome, such as Application complete, Booking complete, Payment sent, or Response submitted.
  • Show the reference in a durable readable form and explain why users may need it.
  • Add next-step content with concrete timing, responsible organization or system, and what the user should do if nothing happens.
  • Provide a record-keeping route such as print, save PDF, email receipt, copy reference, or tracking link when the receipt is useful later.
  • Remove review-page editing controls and replace them with post-submit amend, cancel, contact, or support guidance.
  • Handle browser Back, reload, refresh, duplicate submit, bookmarked return, expired sessions, and unauthenticated access without creating a second transaction.
  • Test mobile layout, print styles, screen reader heading order, focus after submit, long reference numbers, repeated applications, privacy-sensitive receipts, and unavailable tracking.

Common Generated-UI Mistakes

  • Showing a toast or local success strip as the only proof of a completed transaction.
  • Using a confirmation page before the transaction is committed.
  • Leaving Change links active after final submit.
  • Showing a reference number without explaining whether users need to keep it.
  • Omitting what happens next or when the user should expect a response.
  • Using a green completion page for permission denial, service failure, or validation recovery.
  • Adding so many unrelated links and cards that the completion message no longer reads as the page purpose.
  • Breaking bookmarked returns with a blank or hostile expired-session page.

Critique Questions

  • What system event proves the transaction is complete?
  • What reference, receipt, timestamp, or submitted details will users need later?
  • What exactly happens next, who owns it, and when should the user expect it?
  • Is the page still offering pre-submit editing after commit?
  • How can users save, print, email, copy, track, amend, cancel, or contact support from this endpoint?
  • What happens if users bookmark, refresh, go Back, submit twice, or return after their session expires?
Accessibility
  • Use one clear page H1 or panel title that communicates completion without relying on green color alone.
  • Keep interactive controls out of low-contrast panel treatments unless focus and text contrast are explicitly verified.
  • Put next-step headings, submitted details, and contact links in logical reading order after the completion panel.
  • Make reference numbers selectable and readable by assistive technology; avoid encoding proof only in an image or QR code.
  • Provide print and saved-record output that preserves the reference, next steps, contact details, and page title.
  • Avoid overwhelming screen reader users with many competing widgets immediately after the completion panel.
  • When navigating from submit to confirmation, move focus to the main heading or confirmation panel.
Keyboard Behavior
  • After successful submit, keyboard focus lands on the confirmation page heading or success panel.
  • Tab order moves from the completion proof to next steps, record-keeping actions, contact or tracking links, feedback, and start-again actions.
  • Copy reference, print, save, email receipt, and track actions are real buttons or links with accessible names that include the confirmed object or reference.
  • Browser Back does not resubmit the transaction; it should show a safe previous state, a submitted warning, or the confirmation page according to service rules.
  • Refreshing the confirmation page does not create duplicate transactions.
  • If a bookmarked receipt requires authentication, focus moves to the sign-in or tracking recovery heading with the reference context preserved when allowed.
Variants
  • Application complete page
  • Booking complete page
  • Payment receipt page
  • Survey submitted page
  • Order confirmation page
  • Account closure confirmation page
  • Publication complete page
  • Email receipt confirmation
  • Trackable reference page

Verification

Last verified: