UI + UX Input And Data Entry established

Draft state

Expose the draft as a separate recoverable object state with clear labels, last-saved time, resume and discard choices, published-version comparison, collaborator scope, unavailable-draft recovery, and a distinct publish or activation boundary.

Decision first

Choose this pattern when the problem matches

Use when

  • Users create or edit objects that should not become visible, active, submitted, or externally effective until a later action.
  • Users need to pause and resume unfinished work across sessions, devices, or routes.
  • A live version can remain available while unpublished changes are being prepared.
  • Drafts need discovery in recent-work lists, dashboards, worklists, or deep links.

Avoid when

  • The change is a small one-field edit that should be saved or canceled immediately.
  • The product has no persistent draft storage or reliable way to distinguish active from draft versions.
  • Every change should become active immediately and there is no review, publish, or activation boundary.
  • The work is only a transient unsaved-changes prompt inside a single route.
  • Collaboration or compliance rules make unpublished parallel versions unsafe without a stronger review workflow.

Problem it prevents

Users lose trust in draft-capable products when they cannot tell whether they are editing a draft or the active version, who can see the changes, how to resume them, and what publish or discard will affect.

Pattern anatomy

What a strong implementation has to make clear

User need

The product supports creating or editing content, records, rules, pages, policies, listings, workflows, or business objects before they become active.

Pattern promise

Expose the draft as a separate recoverable object state with clear labels, last-saved time, resume and discard choices, published-version comparison, collaborator scope, unavailable-draft recovery, and a distinct publish or activation boundary.

Required state

Published or active state with no draft.

Recovery path

A draft label is missing from the editor, so users publish or discard the wrong version.

Access contract

Expose Draft, Published, Unpublished changes, Locked, and Unavailable as text in the page title area and list rows, not only by color or icon.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A knowledge article header says Draft saved today, shows the currently published title, and offers Resume draft, Compare with published, Discard draft, and Publish.
  • A work list has editing-status chips for Own draft, Unpublished changes, Locked by another user, and Published so users know which rows are safe to open.
  • A user opens a published article that has an unpublished version, chooses Resume draft, reviews a change summary, publishes, and sees the page become visible to viewers.
  • A user follows an old draft link after the draft was discarded and gets an unavailable-draft message with a link back to the published item.
Weak implementation

Vague, hidden, hard to recover from

  • An editor opens directly into draft text but the header only says Saved, so users cannot tell whether viewers see the changes.
  • A Delete draft action appears beside Publish without explaining that shared unpublished changes from collaborators will be lost.
  • A user closes an editor after seeing Saved, later discovers the page was never published, and cannot find the draft in the content list.
  • A user discards a shared draft and unknowingly removes another editor's unpublished changes.
UI guidance
  • Label the current version explicitly as Draft, Unpublished changes, Published, Active, Locked, or Unavailable, and place that label near the object title, list row, editor header, and publish actions.
  • Render separate actions for Resume editing, Save draft, View published, Compare changes, Discard draft, and Publish or Activate; never rely on one generic Save label for every state.
UX guidance
  • Use draft state when users need to pause work on an object, return later, and decide whether to publish, activate, discard, or keep editing an unpublished version.
  • Treat discarding or publishing a draft as a lifecycle decision: explain visibility, collaborator impact, last-saved time, and whether the active version will change.
Implementation contract

What the implementation must handle

States

  • Published or active state with no draft.
  • Published or active state with an available draft.
  • Draft editor state with draft label and last-saved time.
  • Unpublished changes state for an already-published object.

Interaction

  • Opening a draft from a list lands in draft edit mode and preserves the unpublished values.
  • Opening a published object with an existing draft prompts Resume or Discard with object name and last-saved time.
  • Resume shows the latest draft, not the active version, and labels it as draft throughout editing.
  • View published or Compare shows what viewers currently see versus what the draft will change.

Accessibility

  • Expose Draft, Published, Unpublished changes, Locked, and Unavailable as text in the page title area and list rows, not only by color or icon.
  • Use headings and status regions so screen reader users know whether they are editing a draft or viewing the active version.
  • Give Publish, Save draft, Discard draft, Compare, Resume, and View published controls distinct accessible names.
  • When a resume or discard dialog opens, move focus into it and return focus to the triggering object after dismissal.

Review

  • Can users tell whether they are viewing draft, published, active, locked, or unavailable content?
  • Where can users find drafts after closing the editor?
  • Does Save draft clearly differ from Publish or Activate?
  • What exactly is lost when the user discards this draft?
Interactive lab

Inspect the states before you copy the pattern

Manage an unpublished version

Resume a saved draft, compare it with the live version, publish it, discard it, and inspect stale draft-link recovery.

Draft state
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

Published or active state with no draft.

Keyboard / Access

Tab reaches draft status, editor controls, compare controls, Save draft, Publish, Discard, and View published in a predictable order.

Avoid Generating

Using Saved to mean both saved draft and published content.

Evidence trail

Source-backed claims behind this guidance

SAP Fiori: Draft Handling

SAP Fiori Design System - checked

SAP Fiori supports active versus draft entities, resume or discard choices, draft deep links, draft filters, unavailable draft recovery, and locked editing status.

Atlassian Confluence: Drafts

Atlassian - checked

Confluence supports draft and unpublished-change labels, recovery through Recently worked on, resume editing, publish, revert, delete draft, and shared-draft warnings.

GitLab Pajamas: Saving and feedback

GitLab Pajamas Design System - checked

GitLab Pajamas supports draft save status language and clarifies when progress is saved as a draft rather than as final changed data.

Full agent/debug reference

Problem Context

  • The product supports creating or editing content, records, rules, pages, policies, listings, workflows, or business objects before they become active.
  • Users may pause work, close the editor, follow deep links, return from a dashboard, or collaborate on unpublished changes.
  • The draft can differ from a live version that remains visible to viewers, customers, systems, or downstream workflows.
  • Discard, delete, publish, or activate can affect collaborators, public visibility, search visibility, locks, or business state.

Selection Rules

  • Choose draft state when a recoverable unpublished version exists separately from a published, active, or previously saved version.
  • Use autosave form when the main need is reliable background persistence while a user is filling fields, not a separate draft lifecycle.
  • Use inline edit when one local value enters edit mode and is saved or canceled immediately without durable unpublished-version management.
  • Use complete complex form when many related fields need section ownership, validation, and review; add draft state only if the whole configuration has a separate inactive version.
  • Use multi-step form when the work is primarily a sequence of pages with Back, Continue, saved step state, and final review.
  • Show whether the current view is draft, published, active, locked, or unavailable before users edit or publish.
  • When opening an active object that has a draft, ask users to resume the draft or discard it before silently showing either version.
  • Keep Publish, Activate, Submit, or Send visually and semantically distinct from Save draft.
  • Before discard, identify whether the draft is personal, shared, includes other contributors, or differs from the active version.
  • For draft lists, expose filters or labels for own drafts, shared unpublished changes, locked records, active records, and deleted or unavailable draft links when relevant.

Required States

  • Published or active state with no draft.
  • Published or active state with an available draft.
  • Draft editor state with draft label and last-saved time.
  • Unpublished changes state for an already-published object.
  • Resume draft confirmation state when an active object has a draft.
  • Compare draft with published state before publish or discard.
  • Discard draft confirmation with scope of loss.
  • Published or activated state after draft promotion.
  • Locked or another-user draft state.
  • Unavailable draft state for deleted, published, inaccessible, or stale deep-linked drafts.

Interaction Contract

  • Opening a draft from a list lands in draft edit mode and preserves the unpublished values.
  • Opening a published object with an existing draft prompts Resume or Discard with object name and last-saved time.
  • Resume shows the latest draft, not the active version, and labels it as draft throughout editing.
  • View published or Compare shows what viewers currently see versus what the draft will change.
  • Save draft keeps the item unpublished and recoverable without implying viewer visibility.
  • Publish or Activate promotes the draft to the active version and updates visibility or downstream effects.
  • Discard removes only the stated draft scope and returns users to the active version or draft list.
  • Stale draft links explain why the draft is unavailable and offer a path to the active object or list.

Implementation Checklist

  • Model active, draft, unpublished-changes, locked, unavailable, and published states separately instead of deriving them from a generic dirty flag.
  • Store draft owner, collaborators, last-saved timestamp, source active version, and publish readiness.
  • Add labels and filters wherever drafts appear: dashboards, object lists, editor headers, breadcrumbs, recent-work surfaces, and deep-link recovery pages.
  • Separate Save draft from Publish, Activate, Submit, or Send in copy, placement, disabled logic, analytics, and permissions.
  • Provide Resume, View published, Compare, Discard, and Publish actions only when each action is valid for the current state.
  • Warn before discard or delete when the draft is shared, has collaborators, or contains unpublished changes by others.
  • Handle missing drafts, stale bookmarks, deleted drafts, published drafts, permission loss, session expiry, locks, and another user's draft.
  • Test draft discovery, resume, publish, discard, reload, deep links, permissions, collaboration, mobile return, screen reader labels, and keyboard access.

Common Generated-UI Mistakes

  • Using Saved to mean both saved draft and published content.
  • Opening the draft silently when users expected to view the active version.
  • Hiding draft labels in lists so users cannot find unpublished work later.
  • Making Publish and Save draft adjacent buttons with identical visual weight and vague labels.
  • Discarding shared unpublished changes without collaborator scope warnings.
  • Treating a draft as merely a form dirty state even though it survives navigation and appears in object lists.
  • Failing to explain why a bookmarked draft is gone after publish, discard, deletion, or permission change.

Critique Questions

  • Can users tell whether they are viewing draft, published, active, locked, or unavailable content?
  • Where can users find drafts after closing the editor?
  • Does Save draft clearly differ from Publish or Activate?
  • What exactly is lost when the user discards this draft?
  • Can users compare the draft with the active version before publishing or discarding?
  • What happens to collaborators' unpublished changes, locks, and stale draft links?
Accessibility
  • Expose Draft, Published, Unpublished changes, Locked, and Unavailable as text in the page title area and list rows, not only by color or icon.
  • Use headings and status regions so screen reader users know whether they are editing a draft or viewing the active version.
  • Give Publish, Save draft, Discard draft, Compare, Resume, and View published controls distinct accessible names.
  • When a resume or discard dialog opens, move focus into it and return focus to the triggering object after dismissal.
  • Before destructive discard, describe the affected draft scope in dialog text and button labels.
  • Do not announce every background save as a publish event; draft status and public visibility must remain separate.
  • For unavailable draft links, provide a clear heading, reason, and navigable recovery target.
Keyboard Behavior
  • Tab reaches draft status, editor controls, compare controls, Save draft, Publish, Discard, and View published in a predictable order.
  • Enter or Space activates Resume, Discard, Publish, and comparison controls without changing state until confirmation where needed.
  • Escape closes resume or discard dialogs and restores focus to the object or action that opened them.
  • After publishing, focus moves to a confirmation or the promoted active object, not to a stale draft editor.
  • After a stale draft link loads, focus starts at the unavailable-draft heading and recovery link.
  • Draft lists preserve keyboard position when a row changes from draft to published or is removed after discard.
Variants
  • Content draft
  • Unpublished changes
  • Shared draft
  • Personal draft
  • Draft with published version
  • Draft resume dialog
  • Draft comparison
  • Draft discard confirmation
  • Draft publish workflow
  • Locked draft record
  • Unavailable draft deep link

Verification

Last verified: