Compare Changes - Everyday Interface Patterns

A static compare-changes summary shows Button text field, Save as your version, Save draft as other version, and Review needed status.

Program

Compare summaries should put competing values side by side without running a merge engine.

compare_changes_summary.html

Visuals: captured from real browser rendering

<section class="compare-summary" aria-labelledby="compare-summary-title"><h2 id="compare-summary-title">Compare changes summary</h2><dl>
  <div><dt>Field</dt><dd>Button text</dd></div>
  <div><dt>Your version</dt><dd>Save</dd></div><div><dt>Other version</dt><dd>Save draft</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Review needed</span></dd></div></dl>
  <p class="check">Learner check: both versions are visible before any merge choice.</p>
  <p class="note">Static compare changes summary only; no collaboration service, realtime sync, document service, merge engine, save, conflict resolver, account lookup, notification, storage, route, API, network, script, event listener, form submit, analytics, timer, or live editing runs.</p></section>
<style>
  .compare-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .compare-summary dl { display: grid; gap: 8px; margin: 0; }
  .compare-summary dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .compare-summary dt { color: #475569; }
  .compare-summary dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the compare summary.
The section is labelled by its visible heading.
Show field row.
The field is exact pinned data.
Show both version rows.
Your version and the other version are exact pinned data.
Render review-needed status.
The status badge says review is needed.
Check compare readback.
The check says both versions are visible before any merge choice.
Check compare honesty.
Field, versions, status, and no live editing.

step flow step(1) labels the source, step(2) shows the field, step(3) shows your version and other version rows, step(4) shows review-needed status, step(5) checks the compare readback, and step(6) checks the honesty note.

compare readback The section heading names the compare changes summary surface.

compare rows Field, Your version, Other version, and Status values are exact pinned data.

no merge engine The lesson should not imply collaboration services, realtime sync, document services, merge engines, saves, conflict resolvers, account lookups, notifications, storage, routes, APIs, networks, scripts, event listeners, form submits, analytics, timers, or live editing.