sxsphinxstack

Skills / Working / Design a comparison interface

Working Design skill

Design a comparison interface

Design a comparison interface with normalized attributes, transparent missingness, user-relevant differences, and accessible scanning.

Normalize the underlying facts before aligning the columns.

When to use

  • Use when several options share decision-relevant attributes.
  • Use separate detail views when forcing options into one schema would mislead.

Procedure

  1. Define users, decision, options, criteria, source, freshness, and consequences of incorrect comparison.
  2. Normalize units, periods, currencies, definitions, scope, and option versions.
  3. Separate facts, calculated values, estimates, opinions, and unavailable data.
  4. Prioritize meaningful differences while allowing full-detail inspection.
  5. Keep row labels and option identity visible during navigation and responsive changes.
  6. Explain missing, not applicable, unknown, estimated, and excluded values distinctly.
  7. Support sorting or filtering only when it preserves the comparison contract.
  8. Test keyboard, screen readers, zoom, narrow screens, long labels, many options, print, and user-selected criteria.
  9. Validate comprehension and decisions with representative data, including a near-tie and an incomplete option.

Failure plan

  • If options use incomparable definitions, show separate measures or block the derived comparison.
  • If source freshness differs materially, expose dates beside the affected values.

Related skills

  • Design a command palette — Design a command palette with discoverable search, scoped actions, keyboard access, permissions, confirmation, and recovery.
  • Design a cookie consent interface — Design a cookie consent interface with genuine purpose-level choice, equal refusal, evidence, and withdrawal.
  • Design a bulk action flow — Design a bulk-action flow with explicit selection scope, previews, authorization, progress, partial-result reconciliation, and recovery.