Design a genuinely useful product comparison

Limit products and criteria

Choose a small set of products visitors genuinely hesitate between. Define relevant measurable criteria: dimensions, compatibility, material, care or timing. Separate a fact from an editorial judgement.

If a value is missing, say so rather than showing “no” or zero. The product page remains the detailed source for each characteristic and term.

• Products genuinely comparable.
• Criteria support a decision.
• Missing values identified.

Explain consequences

Connect each difference to a specific use. Fictional example: two storage units are 38 and 42 cm deep, but the available space allows only 40; explain what the measurement includes and any clearance needed for opening. Numbers require matching units and conditions. When information is missing, keep uncertainty visible rather than declaring a winner.

Avoid “best” labels without context or scores without a method. The honest comparison guide offers principles that apply to products too.

Fictional exercise with no real commercial offer: pack A contains twelve 250 mL bottles for €24, pack B six 500 mL bottles for €21, using the same price basis. A contains 12 × 250 = 3 000 mL, or 3 L; B contains 6 × 500 = 3 000 mL, also 3 L. Price per litre is therefore 24 / 3 = 8 €/L for A and 21 / 3 = 7 €/L for B. Price per bottle, €2 and €3.50 respectively, answers a different question.

Normalise quantity first, then divide pack price by that quantity in the chosen unit. NIST states 1 L = 1 000 mL; retain units with values and round only at the chosen display stage. Equal volume proves neither equal composition, quality nor suitability. Compare charges, terms and characteristics separately, then find the same reference on the product page and in the basket. If quantity or price is missing, leave the calculation undefined instead of replacing unknown data with zero.

• Effects of differences explained.
• Judgements put in context.
• Comparison method visible.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

Make the table usable

On a narrow screen, keep product names associated with values; a huge scrolling table can lose context. Check reading order, headers and keyboard navigation. Cards may work better for a small set.

Each product needs its own main image and a link to its page. Units must be consistent, and colour alone must never convey a value.

• Product-value relationship preserved.
• Phone and keyboard reading tested.
• Images and units consistent.

Maintain price and availability

Source price and availability from the same records as product pages and baskets. Fictional example: a comparison shows a range’s starting price while a more expensive variant is selected; identify the exact reference and update its values together. State the context of variable measurements. A current price paired with an old specification can still mislead.

Test selection, product-page links and the final decision. When an item is retired or a variant added, revise the criteria rather than leaving an empty column.

• Values match product pages.
• Links and selection tested.
• Comparison reviewed after catalogue changes.

Keep comparable data meaningful in every view

Check that missing characteristics do not become zero in tables or exports. Units and pricing conditions accompany values. When heterogeneous data cannot support meaningful sorting, explain the limit or change presentation instead of implying a ranking.

Compare visible sections with tabs. People should combine useful facts without memorising hidden views. Match image captions to the correct product and preserve meaningful details in mobile cropping.

Publish readable and accessible data tables · Choose and test tabbed web views · Choose and test an image carousel or gallery