Written by DROPS.ST.
Compare a small number of devices on the facts customers need to distinguish them: exact model, physical size, weight, included items and verified replacement-part family. Put those facts in a consistent order and keep them readable on a phone. A comparison is useful when it helps someone understand the purchase, not when every cell says “premium”.
DROPS gives customers a mobile product and checkout path. Clear comparison content can help them arrive at that path with a specific choice instead of several open tabs and an unanswered question about what the box contains.
Choose attributes you can source consistently
Use each manufacturer's current specification or manual for the exact model and regional version you stock. Keep units consistent. Where a fact is missing, say it is not supplied rather than guessing from a similar model.
Do not turn battery capacity into a guaranteed runtime, or a device specification into a health recommendation. A larger numeric value is not automatically a better choice for every customer. Your comparison should explain factual differences without inventing a universal winner.
The three devices below are entirely fictional. The numbers illustrate table design only; real comparisons need manufacturer sources.
| Attribute | Orbit Compact | Orbit Standard | Harbour Kit |
|---|---|---|---|
| Size | 95 × 22 × 14 mm | 112 × 25 × 15 mm | 105 × 28 × 17 mm |
| Published weight | 42 g | 58 g | 64 g |
| Retail contents | Device only | Device plus one specified pod | Device, two specified pods, case |
| Replacement family | OC family | OS family | HK family |
| Illustrative price | 24 currency units | 30 currency units | 38 currency units |
The table makes differences visible. It does not establish real compatibility, value or product performance.
Lead with the distinctions that change the purchase
For a returning customer, replacement-family continuity may be the decisive fact. For someone comparing retail kits, included items may explain more of the price difference than the device dimensions.
Keep shared facts short. If all three items use the same broad charging connector, that may not deserve the first row. Put the differences customers actually ask about near the top, and link to full product details for the remaining specifications.
Label prices by the sellable format and keep them current. A device-only price beside a complete-kit price needs the contents row to prevent a misleading comparison. Do not hide the extra items needed to reproduce the pictured offer.
Design for reading, not shrinking
A wide table squeezed into a narrow screen becomes a test of eyesight. Limit the number of products compared at once, use short row labels and consider stacked product summaries when that is clearer.
W3C's reflow guidance recognises that some data tables need a two-dimensional layout, while the surrounding page should still adapt to smaller viewports. If horizontal scrolling is necessary, make it obvious and keep row labels understandable as the customer moves across.
Test larger text and portrait orientation. Model names, prices and included items should remain distinguishable. Do not communicate differences only through colour or icons without a text explanation.
Take the chosen model into the order
Once a customer selects a product, the product page should show the same model and retail contents used in the comparison. Check that a later colour or pack selection does not silently change the offer.
Use the mobile-first shop guide to review the route to checkout. Keep the underlying listing format aligned with consistent descriptions, particularly when several staff members maintain the catalogue.
Bring three real device listings to DROPS. Compare them on a phone, open the selected product and inspect the order line. Give customers facts they can use and a clear next step when they have made their choice.