Making product comparison work on mobile

The smartphones we carry around in our pockets are good at many things but due to the limited screen size, using them for product comparison can be a rather poor experience.

In this post, I discuss the design patterns most frequently used for product comparison and provide some design suggestions to improve the usability of comparison tables on mobile. Over the past few years mobile commerce applications have been maturing. It's all pretty straightforward if you know exactly what you want to buy. But things get a little more complicated when you are in "research" mode. In fact, comparing two or more items often requires a lot of pogo-sticking back and forth between product pages.

Comparison tables have been a common feature of ecommerce desktop sites for some time. They are used to compare services, products and pricing plans. These patterns have proved effective time and time again, just look at Apple.

However, on mobile, we are still waiting for comparison table patterns to consolidate. As humans, we try to make sense of the world around us by giving it meaning and structure. Data tables allow us to organise information and present it in a clear manner. The information they contain can be easily scanned and digested.

Edward Tufte, data scientist, wrote that “comparisons must be enforced within the scope of the eye span”. So, in order for a comparison table to be effective, all the relevant information should be presented within a screen.

This is often not possible on a mobile display without sacrificing text legibility. Also scrolling down, the context is easily lost, as column headers move off the screen. As a result we need to use our memory when context is no longer available, or scroll the table horizontally and vertically to make sense of the data displayed.

Implementing product comparison on mobile clearly presents design challenges. But our mission as UX designers is to deliver the best possible experience within the limitations of the medium we are designing for.

Finding an effective way of comparing products on mobile

As highlighted above, tables are arguably the most powerful tool for displaying and comparing data sets so we explored how to best present tabular data on smaller displays. After reviewing what’s currently available across different industries, we discovered three design patterns most commonly adopted for data comparison on mobile.

Horizontal table

This is what is normally used on desktop. The data is grouped into horizontally aligned columns. On a mobile screen the user is required to pan around to see different parts of the table.

Stacked table

The data is grouped into stacked modules. The user needs to scroll up and down to view different data sets.

Two-column view

Two columns of data are displayed at the same time. The user can swipe across or tap on the prev/next buttons to view other columns.

The key problem with the patterns described above is that they all demand significant cognitive effort. In fact, the user has to rely on their memory in order to be able to compare two or more products. The two-column view is the most effective pattern of the three, as it does allow the user to easily compare two pieces of information. However, it only lets you compare contiguous columns.

Our solution

So, we decided to start from the two-Column view pattern and try to improve it. The pattern we developed is described here...

We split the data into columns that could be individually removed by tapping on a close button displayed in the column headers. This allows the user to adopt a progressive reduction process, whereby unwanted items are removed from view. So, the shortlisted items are narrowed down until, ideally, the user is left only with the product that best meets their needs.

It is important to ensure that column headers are always visible, by making them stick to the top of the screen. This ensures that it’s always clear which product the data refers to. As the comparison process is not necessarily linear, it was crucial for the user to be able to add more products to compare if needed. We wanted to incorporate this functionality within the table itself to avoid pogo-sticking between pages.

Therefore, we designed the rightmost column as a vertically scrollable container for all the products available. Tapping one of the other available products would add a column with the new item.

Our solution is not perfect, as no more than two items can be compared at the same time, but it gives the user control through the adding or removing of items for comparison, without leaving the table.

The user is free to adopt the comparison strategy that best suits them. We conducted eight user studies to test our design solution and all respondents commented positively.

Comparing products on mobile devices is challenging because of the limited size of the screen. But we cannot simply ignore the issue, as comparison is often an essential part of our shopping behaviour.

Perhaps the suggestions offered in this post will help you improve the usability of product comparison tables you will design in the future.