Plan an interactive comparison people can inspect

Use comparison when the options share criteria

Start with the choice a visitor faces and the small set of differences that genuinely affect it. Side-by-side comparison works when options can be described through the same criteria: included support, lead time, capacity, contract term or compatibility. If the desired output is a number calculated from visitor inputs, plan a calculator. If answers produce a diagnostic category, plan an assessment. If one choice changes which later choices are valid, the concept is closer to a configurator.

Write a neutral completion statement: “After using this tool, a visitor can identify which options meet their stated needs and inspect the remaining trade-offs.” Avoid defining success as pushing everyone toward the option the business most wants to sell. A recommendation can be present, but its criteria, commercial relationship and limitations need to be visible enough for a person to challenge it.

Build the comparison-data worksheet first

Create one row for each criterion and one column for each option. Keep the underlying data independent from the interface so it can be reviewed before visual emphasis is added.

• Criterion: What decision does this difference support, and can a visitor understand the label without internal product language?
• Definition: What exactly is included or measured, including any threshold, condition or exception?
• Unit and format: Are all options expressed in the same unit, time period and tax or fee basis?
• Value: Is it a fact, range, category or unavailable item? Do not turn “unknown” into zero or “not included.”
• Source and date: Where did the value come from, when was it checked and who owns the next review?
• Missing-value rule: Will the tool show unknown, not applicable or not supplied, and what does each state mean?
• Display rule: Can visitors sort or filter it, and could a default or visual treatment unfairly hide another option?

Make the criteria genuinely comparable

Normalize units before display. Monthly and annual prices, working and calendar days, usable and total capacity, or included and optional services can look equivalent while describing different things. Preserve important qualifiers beside the value. When a price depends on a quotation, say so rather than inventing a number for visual symmetry. When information cannot be verified, mark it unknown and explain how the visitor can confirm it.

Choose criteria from customer decisions, not from whatever data is easiest to collect. Give every listed option the same opportunity to supply evidence and apply the same freshness rule. Record financial relationships, ownership or sponsorship that could affect inclusion or placement. The UK Competition and Markets Authority describes how online choice architecture can influence decisions; review defaults, rankings, scarcity messages and preselected filters for pressure or distortion.

Hypothetical example: comparing support plans

Consider a hypothetical software studio comparing three support plans it offers. The worksheet defines support window, initial response target, included review time, supported channels and change-request treatment. Each value uses the same time zone and period. “Initial response” is explicitly not a resolution promise. A plan without included change work displays “quoted separately,” not a misleading zero.

Visitors can select the criteria important to them and compare all plans without providing contact information. The default order follows the published plan sequence rather than an undisclosed margin. The highest plan is not labelled “best”; a note explains which operational needs each plan is designed to meet. Source dates link to maintained service definitions, and an owner reviews values when those definitions change. This is a hypothetical planning example, not a Kinetivy offer or client result.

Keep the comparison understandable in every layout

A wide table is often the clearest representation on a large screen. W3C’s table tutorial explains how headers and data cells need structural relationships so screen readers can interpret them. Use a caption or nearby introduction, mark row and column headers correctly and avoid conveying meaning through position or color alone. If users can sort, announce the new order and keep the control available by keyboard.

On narrow screens, preserve the relationship between option, criterion and value. A card layout can repeat criterion labels for each option; a horizontal table can work if the current context remains clear. Do not hide inconvenient criteria behind an interaction that keyboard or screen-reader users cannot reach. WCAG 2.2 also requires visible focus and supports content that remains usable under zoom. Test with long labels, missing values and more than two selected options.

Use this fairness and launch checklist

Ask someone who did not assemble the data to explain what every row means and identify the evidence for a value. Then test whether changing order, device or input method changes access to material information. Publish an update date only when a named owner can maintain it.

• Each criterion supports a real choice and uses one documented definition across all options.
• Units, periods, inclusions, exclusions, ranges and missing values are explicit.
• Sources, review dates, commercial relationships and data owners are recorded.
• Default order, highlights, filters and recommendations have a stated, defensible rule.
• Tables use proper headers; mobile alternatives retain labels and keyboard access.
• Unknown and not-applicable values remain distinct, and stale data has a visible handling rule.
• The complete comparison is available before any optional contact or save action.