Ecom Ideas
  • Homepages & nav
  • Category pages
  • Product pages
  • Cart pages
  • Checkout
  • Site search
  • Internationalization
  • Holiday ideas
  • Featured idea gallery
  • Topical articles
Subscribe

Get daily ideas

LinkedIn
💡
Ecom Ideas
/Category pages
Category pages
/
⚖️
Compare tables
⚖️

Compare tables

Tap any tip to open toggle ⚡ some gifs may take a moment to load

Featured ideas 🦄 are rare ideas you may not have seen before ;-)

❓FAQ

‣
Do you really need a compare table?
💡
Baymard Institute recommends always providing a comparison tool for spec-driven products, and it’s great advice. However, I’m observing a trend of major retailers dropping their compare tables. I can only spec-ulate (see what I did there?), but it’s possible that customers simply don’t use them that often, especially mobile users, which today make up the bulk of visitors for most ecommerce sites. 👉 Compare tables can be high effort to design, develop and maintain 👉 Compare checkboxes add clutter to product list details 👉 Compare tables are tricky to display well in mobile view 👉 Compare tables aren’t necessary for visually-driven products (so you may implement the feature site-wide unnecessarily) 👉 Compare tables require bulletproof product data. Any gaps in data fields can “break” their usefulness 👉 Compare tables simply may not solve users’ problems as well as filters and product finders That said, compare tools are very common for high-tech electronics, industrial equipment, travel and hospitality, telecom, home furnishings and home improvement categories. If it’s table stakes in your industry, it may be best to play it safe and support product comparison.
‣
How many products should we allow users to compare at a time?
💡
According to Nielsen Norman Group, you should show a maximum of 5 items. In practice, the most common number is 4 items (by my observation across 200+ ecommerce sites to prepare this section of Ecom Ideas)
‣
Should our tables use zebra striping?
🦓
The thought behind alternating shaded rows (zebra striping) is it can help users better associate cell data to its corresponding row headers.

At least one experiment showed that zebra striping in tables did not improve task accuracy or speed, but the author notes that there’s aesthetic value to the pattern that still makes it a solid choice. She was so curious, she conducted further research and ultimately found that the usability impact doesn’t matter as much as the subjective value — web users do prefer the aesthetics of zebra striped tables compared to alternate patterns. While this data dates back some years, there’s no harm in adding subtle shading to your tables across your site (including for spec lists on product pages), like Tractor Supply does, below:

image
‣
What’s the most inspirational product comparison reference example?
🏆
Hands down, Best Buy USA’s compare tool is the most feature-rich and cleverly designed compare table on the Web. If your Product team is looking for inspo - give it a spin. Most of their rich features are captured in the ideas below.

💡 Ideas and tips

Product grid details

‣
Treat your compare link as a call to action
💥
Make your Compare link POP in your product list — don’t use a simple black text link!

🚰 Delta Faucet’s bold red compare link attracts attention

image

⌚ FitBit’s white checkboxes pop against the gray product card field

image

🥾 REI’s Compare button is easy to see

image

😑 Compare the above examples to links that compete with many other details

image

🤔 This design pattern isn’t bad - the Compare link’s ragged alignment below the Add to Cart button does attract eyeballs

image
‣
Change “Compare” link text to “Compare Now” after 2 items selected

💡 Menards provides instant feedback once 2 products have been selected so it’s a one-click launch when they’re ready to compare

image
‣
Make sure your Compare buttons are easy to see in your builder widget
☝
Many sites use an overlay “compare builder” widget that shows your active selections before you hit Compare. Make sure this is as easy to use as the rest of your site!

🙈 Best Buy’s blue-on-black button is hard to see…

image

🐵 “Compare” this to a bold button on a white field…

image

🐵 Another example…

image

⌚ FitBit’s buttons are the easiest to see of all - popping against a gray field instead of white-on-white (desktop)

image

Mobile:

image
‣
Avoid “invisible compare widget syndrome”

Costco’s widget blends in with the product grid, making it oh-so-easy

image
‣
Consider testing bottom vs right-pinned builder widget

💡 A horizontal pattern may be more useful in mobile view

image

Table details

‣
Always have a View Product link at the bottom of the table

☠️ The longer your table, the more annoying it is to scroll to the top — and how can you compare specs when you’ve lost context of which products they relate to? Kill the “dead end” tables ☠️

image
‣
Promote and truncate spec sections

📺 To aid scannability, Best Buy prioritizes some specs, and hides others behind a Show More Specs button

image
‣
Use accordions to expose additional detail

⌚FitBit puts users in control to show/hide additional detail if they want it

image
‣
Use tooltips for specs that need clarity

🎧 Crutchfield shows definitions on hover — but be careful not to stuff too much text inside a tooltip

image
‣
Use infowidgets for specs that need clarity
😅
Ok, I totally made up the term infowidget but I think it captures the spirit of the interactive infographic, mmkay? Brilliant Earth is a shining example of what’s possible with creative product design. Its product comparison table bakes education into its spec table. The only shame is they’re hidden behind tooltips that not every customer will understand holds “diamonds” behind them… 💎 These tools really empower the buyer to make their digital purchase with confidence. For high-ticket, emotional investments like diamond rings, they’re worth their weight in gold!

💍 BrilliantEarth’s Carat sizer

image

💍 BrilliantEarth’s Cut slider

image

💍 BrilliantEarth’s Color slider

image

📺 Best Buy’s widgets are cool too, I guess 😜

image
‣
Offer a “Save this Comparison for Later” feature

📺 It’s tiny — but this simple link lets you save your compare table for later

image
‣
Include a back to [last Product List] breadcrumb

🚜 Tractor Supply includes a breadcrumb back to the product list

image

Zoom:

image

Comparison aids

‣
Don’t make your sticky element too tall

🚰 Sticky rows have a clear benefit to keep important stuff in context, but beware when they eat more than half the screen real estate

image
‣
Snap your grid to reduce sticky element height

⌚FitBit solves the “heavy header” problem by collapsing thumbnail images. When users are actively comparing specs, “looks” become less important

image
‣
Allow users to “Hide similar” attributes

🙈 Crutchfield provides a Hide similar checkbox to strip out redundant table values and focus on true comparison

image
‣
Let users highlight differences

📺 Best Buy provides a toggle to highlight only what’s different, giving a quicker way to scan (but I do prefer a “Hide similar” tool)

image
‣
Don’t highlight differences by default
☝
Highlighting can be “too much of a good thing,” and worse — users don’t intuitively understand why some rows are shaded and others are not. In cases where most specs are different, this can be a real eye sore — especially with a deep shade like this seafoam green:
image
‣
🦄 Allow users to selectively hide rows

🥾 REI’s Hide links let customers customize their tables for granular comparisons

image
‣
🦄 Let users reorder columns within the compare grid

📺 Best Buy lets you customize your table for easier head-to-head comparisons

image
‣
Try graphic icons instead of text (where appropriate)

📺 Best Buy helps scannability by replacing text details with icons+labels in certain sections

image
‣
🦄 Show recommended similar products with quick add-to-compare

📺 Best Buy shows similar products in the right rail so shoppers can quickly swap selections in and out of the table without returning to the category page

image

Zoom:

image

🛋️ IKEA places similar products below the grid, with the same add-to-compare ability

image
‣
Use color to aid scannability and comprehension

⌚FitBit uses green for yes and hot pink for no, making it easy to compare things at-a-glance

image

Creative sections

‣
Consider “Availability” and/or “Current Offers” sections

📺 Best Buy includes fulfillment specs and current offers in its compare grid

image
‣
🦄 Summarize pros and cons from user reviews

📺 Best Buy provides a quick snapshot of customer sentiment, similar to how Amazon summarizes reviews on its PDPs

image
‣
🦄 Embed size comparison image galleries (for smaller DTC catalogs)

💡Tortuga’s “See Model Photos” link opens a gallery showing its 2 backpack sizes on models with different height/weight combos — their catalog is small enough to produce this content

image

💡Genius!

image
‣
Link to customer image galleries

📺 Best Buy pulls customer images into its compare grid for those that wanna see ‘em

image
‣
Include a live help CTA

📺 It’s subtle, but spot Best Buy’s CTA for a free home consultation from a Home Expert

image

Zoom:

image
‣
🦄 Collect user feedback at the bottom of the table

💻 Dell asks customers what they think of their compare table experience

image
‣
🦄 Add a product finder quiz to the bottom of the table
💡
If you’ve built a product finder quiz, advertise it from your compare tables — some customers will prefer this tool to make their decision

⌚ FitBit includes a juicy call-to-action button for its product finder quiz

image

🫣 Cautions

‣
Don’t place your Compare links out of context

🤨 Placing your Compare button or link above your product grid makes it super hard to notice. Pair this with no product-level Compare CTAs (checkboxes or links), and you have a recipe for confusion

image

🤨 Similarly, placing your Compare checkboxes above product thumbnails isn’t ideal

image
‣
Don’t detail-stuff your fields

🤨 Product data is so important, if it’s not formatted well or consistently, this can happen…

image
image
‣
Don’t let your compare table go on and on and on (and on)
☝
This GIF is large and is gonna take it’s sweet time to load, but if you’ve made it this far down the page, you’re likely one of the committed folks who can wait 10s ;-) So let me ramble on here for a bit to buy time while the example loads. Depending on how many sections you include in your table, your list can get long. Real long. The longer your table, the more work for your user. If you auto-expand each. and. every. section. by. default, it becomes downright painful. Consider collapsing most sections, save the ones most critical to the purchase. Don’t know what’s most critical to the purchase? You need to hire more product experts on your team!
image
‣
NEVER hide your compare checkbox behind a hover effect

🤨 I think this goes without saying

image
‣
Don’t leave your table “raw”
☝
By “raw,” I mean no pinned elements that help customers reference what product each spec relates to. PIN YOUR HEADERS!

This retailer’s table is all fine and good…

image

Until you scroll down a bit and completely lose context of what you’re comparing

image
‣
Avoid empty data fields
🫥
Missing product data can kill the usefulness of your compare table — COMPLETELY. It’s best to remove your compare function entirely if your data is full of holes
image

Back to Category page ideas

👉 Follow on LinkedIn for daily ideas 💡