Flag

We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Get exclusive access to thought-provoking articles, bonus podcast content, and cutting-edge whitepapers. Become a member of the UX Magazine community today!

Comparing Compare

by Joanna Lewis, James Breeze
6 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

Customers have come to expect top-tier ‘compare’ features when shopping online—have a look at what works and what doesn’t.

One of the major features of e-Commerce sites is ‘Compare’. Gone are the days of asking a sales person to explain the differences between products. The Internet gives customers the ability to compare products with many sites providing side-by-side comparisons. In the past, this has often been via an awkward add-on which involved searching high and low for the ‘Compare’ button—something that simply didn’t meet shoppers’ expectations. Sites are now increasingly providing a better comparison experience.

Comparing is a natural part of the purchase journey, especially when buying something that can be configured, or that has complex specifications. So how do online retailers help consumers compare products as part of a smooth and natural interaction in the purchasing journey?

Using the scenario of looking for a 3D TV as an example, we looked at how sites accommodate the desire to compare. Electronics were chosen because the product features are complex and the terms used to describe them often need explanation. 3D TVs were chosen as they are relatively new to the market, and many shoppers are keen to investigate the product’s features before making a purchase.

We found three common approaches to comparing complex products.

Approach 1: Select and Compare

The traditional way is a two-part process:

  1. Select two or more items to compare, and
  2. Click the compare button

There are three problem areas with this option.

First, you need to remember to select the items to compare as you browse and, too often, you’re halfway through a list when you realize the offering is complex enough that you need to compare products in the first place.

Second, it needs to be easy to select the items you want, but there is often so much competing information about a product that you can’t determine how to select the item.

Third, it’s difficult to find the compare button. It’s often a painstaking search up and down the page—unless the button really stands out, it can seriously interrupt the flow.

The Implementation

Dick Smith uses the ‘select and compare’ approach. Having found the right page for a 3D TV, it takes a truly dedicated shopper to scan the product list and find the compare checkbox in the product listing. The checkbox appears to be the only item in the larger box not given a design treatment.

Further complicating matters, the availability options—‘Home delivery’ and ‘Click and collect’—are repeated in the product info and the right side column, taking up precious space. The ‘Compare’ button is relatively easy to find, at the top and bottom of the list, but its clickable even if you have not selected an item.

The compare checkbox is easier to spot on the Radio Shack product list page, where a checkbox with the text ‘Select to Compare’ in red font rests underneath the image of the product.Still, it’s not exactly slick, and having found the compare checkbox, it is impossible to find the compare button … because there isn’t one! After several attempts, I finally figured out that I needed to click the red text next to the check box in each product listing to compare the products. Some shoppers would almost certainly be left hanging, hunting around for the compare button.

Target has solved the problem of finding the compare button by supplying a pop-up when you have selected three items, the maximum number you can compare. This is a nice way of doing two things—intuitively letting the shopper know that three is the maximum, and putting the compare button front-and-center.

 

Best Buy also has a nice feedback feature—comparison bars located at the top and bottom of the product-listing page. As you select items for comparison, the boxes on the bars are populated. The instructions and contrasting compare button are nice and obvious too.

Harvey Norman has taken the compare feature seriously. As the shopper selects the items to compare, they display in the fixed navigation bar at the bottom of the page. Nice system feedback! The downside is that upon clicking ‘Compare’, the comparison page is displayed in a new window—breaking the shoppers’ flow through the site, and increasing the likelihood that they will lose their sense of orientation. The other downside is that there is no specific page for 3D TVs, nor a filter option to narrow the results to 3D TVs only—so we didn’t actually find any.

So, you’ve selected your items and found the compare button—what happens next? Well, hopefully you land on a good comparison page. It should display a regular table, neatly rendered, which is easily read from left to right, with a row per data item. The ability to remove an item from the page is nice too.

Harvey Norman does a decent job on the actual comparison page, and when you add something to your cart, that pop-up window closes and the shopping cart displays.

Best Buy does a great job of presenting the product specs in a neat table. Their killer feature is the ‘Show Differences’ button, which highlights the rows where there are differences in the selected products. This shopper is happy!

Approach 2: Filter and Compare Product Listing

A second way to accommodate the desire to compare is to build it into the design of the product category pages themselves. While not strictly a compare feature, with careful design of the product list or grid view, you can compare on a category page without the clunky two-part process. This is easier when you are comparing apples with apples, and there is no excuse for messing it up.

With complex products such as electronics, using the product listing can work well if the product filter allows you to narrow down your choice. So it’s really a filter-and-compare process. If the product information is well laid out, the data is easy to scan.

The Implementation

The 3D TVs are easy to find in the mega-navigation menu at Kogan. The list view shown here has key features highlighted and color coded for quick scanning. If you know nothing about 3D TVs, this tells you the important aspects to compare. And interestingly, the site has no separate compare function.

The Kogan grid view, also color coded, makes it easy to compare more items in a small area. And it’s nice to see that there are labels on the List/Grid views, accommodating the less experienced shopper. However, those looking for more specs to compare may be disappointed.

Walmart has no separate compare feature, but the features of the TVs are listed in dot points, in the same order. This allows comparison, but it’s definitely clunky feeling going back and forth, to and from the product page to compare the details.

Approach 3: Having a Ready-Made Comparison Page

A third way to compare is the ready-made comparison page. This approach also works best when comparing apples with apples, so, not surprisingly, this is a feature of product manufacturer and comparison sites—such as in the Apple and Volvo examples below. It’s not often employed on retail sites, where product descriptions are provided by an array of manufacturers, making comparison less straight-forward.

Implementation

On the Apple site, the ready-made comparison page ‘Which Mac is right for you?’ uses layout to make specs comparable, although the addition of rows to distinguish between data would make it clearer.

Volvo’s ‘Compare Details’ page is accessible from the dropdown menu. The idea is good–the tabs across the top change the parameters displayed. However, the table does not work—the squares in the table represent different types of cars along a scale and require a lot of work by the shopper to interpret. A bar graph would have been easier to understand.

What Works Best

To summarize:

  • Standardize data using dot points in the product list as much as possible.
  • Color code similar data to improve scanability of the list.
  • Don’t crowd the product list with too much content.
  • Label views ‘Grid’ and ‘List’. Icons are cool, but let’s make it easy for the inexperienced shopper.
  • Provide feedback when shoppers select products to compare.
  • Make the compare button obvious.
  • Learn from the manufacturers—if possible, provide a ready-made comparison page to assist decision-making.

You really need design carefully for compare to satisfy savvy shoppers, especially when the products are complex. Online retailers that haven’t done so already need to shape up and provide easy-to-use comparison tools and tables to support shoppers in their decision-making process. Surely, retailers would rather keep shoppers on their site to compare and buy than have them leave to compare elsewhere.

 

Shopping couple image courtesy of Shutterstock

 

post authorJoanna Lewis

Joanna Lewis
A UX Designer at Objective Digital, Joanna once was a technical writer, providing user-friendly instructions for complex software. Then, to target usability head on, she moved into UX, making software less complex to begin with. She is highly recommended by clients for her ability to produce simple, user-focussed solutions in complex situations; and for bringing great knowledge, understanding and a creative eye to product design and business needs.

post authorJames Breeze

James Breeze

James Breeze has a Masters of Organizational Psychology and his goal is to improve people's lives through improved design and usability of things. He runs Objective Asia and Eye Tracking consultancy in Singapore and SE Asia. Objective Asia was set up in Feruary 2013 and is a subsidiary of Objective Digital, a UX consultancy in Sydney, Australia. An eye tracking evangelist, he is also a Tobii Eye Tracker partner in Asia Pacific.

Objective Asia is SE Asia's only customer research consultancy sepcialising in Eye Tracking to uncover people's conscious and unconscious experiences in online and mobile UX and Usability Testing. We work in Telecommunications, Banking and Finance, Travel, Government and many more industries. Objective Asia also apply these methods in Shopper Research and Market Research in retail and FMCG contexts.

 

Tweet
Share
Post
Share
Email
Print

Related Articles

Consistency in UI/UX builds trust and efficiency — without it, users feel lost. Learn how top brands maintain it and how AI can help.

Article by Rodolpho Henrique
Consistency in UI/UX Design: The Key to User Satisfaction
  • The article examines the role of consistency in UI/UX design for user trust and efficiency.
  • It showcases visual, functional, and interaction consistency in creating seamless experiences.
  • The piece warns about the negative effects of inconsistency, including confusion and frustration.
  • It promotes the use of AI and design systems to ensure consistency across digital platforms.
Share:Consistency in UI/UX Design: The Key to User Satisfaction
4 min read

If Mobile-First thinking has revolutionized the UX Design industry, AI-First is promising to be an even more spectacular kick in the pants.

Article by Greg Nudelman
The Rise of AI-First Products
  • The article explores how AI-powered operating systems are changing user interactions.
  • It covers AI-driven personalization, automation, and adaptive interfaces.
  • The piece discusses challenges like privacy, over-reliance on AI, and user control.
  • It highlights opportunities to design more intuitive and human-centered AI experiences.
Share:The Rise of AI-First Products
11 min read

AI is reshaping UX, and Figma may be sinking. As AI-driven systems minimize UI, traditional design roles must evolve — or risk becoming obsolete. Are you ready to adapt?

Article by Greg Nudelman
AI Is Flipping UX Upside Down: How to Keep Your UX Job, and Why Figma is a Titanic (It’s not for the Reasons You Think)
  • The article explores the fundamental shift in UX as AI-first systems minimize the role of UI, rendering traditional design tools like Figma increasingly obsolete.
  • It introduces the “Iceberg UX Model,” illustrating how modern AI-driven interfaces prioritize functionality and automation over visual design.
  • The piece argues that UX professionals must shift their focus from UI aesthetics to AI-driven user experience, emphasizing use case validation, AI model integration, and data-informed decision-making.
  • It warns that designers who remain fixated on pixel-perfect layouts risk becoming obsolete, urging them to adapt by engaging in AI-driven UX strategies.
Share:AI Is Flipping UX Upside Down: How to Keep Your UX Job, and Why Figma is a Titanic (It’s not for the Reasons You Think)
7 min read

Join the UX Magazine community!

Stay informed with exclusive content on the intersection of UX, AI agents, and agentic automation—essential reading for future-focused professionals.

Hello!

You're officially a member of the UX Magazine Community.
We're excited to have you with us!

Thank you!

To begin viewing member content, please verify your email.

Tell us about you. Enroll in the course.

    This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and