Show UI changes with matched before-and-after screens

Write a narrow claim before selecting screenshots. “The owner filter moved into the toolbar” needs location evidence. “Finding an owner takes fewer actions” additionally needs a verified action sequence. The same pair of attractive screens cannot support both claims automatically.

Choose a comparison state that isolates the update. If a panel is open in the new screen and closed in the old one, decide whether opening the panel is the change or merely a capture inconsistency. Label intentional differences instead of leaving the viewer to guess.

• Identity controls: account role, workspace and example record.
• Layout controls: viewport, zoom, theme and scroll position.
• State controls: selection, filters, open panels and loaded data.
• Release controls: the version and capture date for each screen.

In this fictional update, the owner filter moves from a side panel to the list toolbar. Use the same illustrative request list, filtered to Awaiting review, in both versions. Keep the same row count and visible sample names. The before screen shows the side-panel route; the after screen shows the toolbar control.

Comparison log: record R-042 remains in row two; role remains Reviewer; zoom remains fixed; the owner choice remains Example owner. Intended difference: control location. Unintended difference: the new capture uses a shorter sidebar and exposes an extra row. Recapture or crop both to equivalent context before approving the pair.

• Opening label: “Owner filter: previous location.”
• Transition: hold a shared list anchor while changing the surrounding control view.
• Closing label: “Owner filter: now in the toolbar.”
• Proof limit: location has changed; no measured speed improvement is established.

A side-by-side view helps inspect layout differences, but it reduces each screen's available size. An alternating matched crop may be clearer for a small control, provided persistent labels prevent confusion about which version is visible. Use a wide view first when the crop would otherwise hide the location.

Avoid morphing every old UI element into the new layout. Such animation can imply a real in-product transition or make unverified intermediate states look factual. A labeled editorial cut is often sufficient.

Inspect labels and control text at the size they will actually appear. A high-resolution source does not guarantee a readable split-screen composition. Keep comparison labels visible long enough to identify the versions.

Finally compare the prepared asset with the source captures. Record any masking or sample-data replacement. A cleaner scene should not remove an essential warning, permission restriction or empty-state message that changes the meaning of the update.