Making product comparison work on mobile
•Download as PPTX, PDF•
25 likes•12,159 views
Michele Brigante on designing to improve the usability of comparison tables on mobile from UX Lisbon.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Making product comparison work on mobile
Similar to Making product comparison work on mobile (20)
More from Foolproof
More from Foolproof (10)
Recently uploaded
Recently uploaded (20)
Making product comparison work on mobile
- 1. Product Comparison on Mobile
- 2. Interaction Designer Foolproof, London Michele Brigante @mkbrigante
- 4. The good and the bad of mobile Wayfinding
- 5. The good and the bad of mobile Social connection
- 6. The good and the bad of mobile Social connection Capturing moments
- 7. Mobiles are not good at everything
- 12. Apple Example
- 13. Why does this matter?
- 14. 1.2 billion people access the web from their mobile devices Source: Trinity Digital Marketing
- 15. 63% of people expect to be doing more shopping on their mobiles over the next couple of years Source: Latitude
- 16. 41% have turned to a competitor’s site after a bad mobile experience Source: Google
- 20. Horizontal table
- 21. Stacked table
- 22. Two-column view
- 23. Cognitive effort
- 27. Not knowing what to buy
- 28. “Research” mode
- 29. Organizing information with data tables
- 31. “Comparisons must be enforced within the scope of the eye span.” E. Tufte
- 35. Our solution
- 45. “That was really good, I wasn’t expecting that, I didn’t have to go back a page.” Male, 32 “Clever how it stays in the design of the page…it’s fun and engaging…sense of wizardry...I really appreciate little features that stop me having to faff.” Male, 46 “Visually this is very friendly on a small screen.” Male, 30
- 46. Control
- 47. Key Takeaways 2. Display only essential facts in the table. 3. Allow users to swap products in and out without leaving the table. 1. Provide a landing page that shows products at a glance, and allows shortlisting.
- 48. Control
Editor's Notes
- Today I would like to talk about mobiles. I am sure you have noticed that the mobile devices we carry in our pockets are maturing and getting smarter than ever.
- They help us not get lost…well…most of the time!
- Our smartphones help us keep connected with our friends, colleagues. And they help us create virtual communities
- Our mobiles allow us to capture the moments we don’t want to forget.
- So mobiles are making our lives a little easier, but they are not perfect. In fact there’s actually things they are not very good at.
- One example is product comparison. I discovered that a few months ago at Foolproof, when we worked on credit card comparison pages for a major UK bank.
- Product comparison tables work great on a desktop. It’s very easy to be able to compare different products and find the one the best meets our needs.
- When you move to mobile, things are not as easy. It’s virtually impossible to read anything until you zoom in. But when you do that, it’s very difficult to be able to compare effectively and you need to repeatedly pan around.
- This is another example. Things work fine on desktop. Very easy to compare.
- But when you access the same content from mobile, you get a slightly better experience, as the site as been optimized for mobile. However comparing products it’s very hard, as you cannot see more than one data set at the time.
- You may ask yourself: Why does product comparison matter on mobile?
- What makes product comparison hard on mobile is the limited screen size. So I would say that product comparisons is definitely one of the few areas where size matters!
- But I believe that as designers we love challenges, and thrive on them.
- So, my team and I realized that we had a very challenging problem ahead of us. We kick started our design process by identifying the most common design patterns used for product comparison on mobile.
- We identified three recurring patterns. The first one is the horizontal table. This is basically a transposition of what we normally see on desktop. All the data is grouped into horizontally aligned columns. And the user has to drag and pan around to see different parts of the table.
- The second pattern we identified is the Stacked table. The data is grouped into stacked modules. The user needs to scroll up and down to view different data sets.
- The third one is the 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 main problem with the patterns outlined is that they all require a significant cognitive effort.
- In fact, the user has to rely on her 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 allows to easily compare two pieces of information. The biggest drawback is that it lets you compare only contiguous columns.
- Because of the limitations highlighted we might end up doing a lot of pogo-sticking between product pages in order to compare products.
- In order to try and come up with a more usable solution, we wanted to understand the product comparison process a little better on a cognitive level. The comparison process is triggered when we are unsure what we want to purchase.
- When that happens we switch to what we can call “Research” mode. During this phase we want to evaluate what possibilities are available to us, in order to identify the product that better matches our needs.
- Well, 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 contained in tables can be easily scanned and digested.
- So, through tables we are able to quickly compare two or more data sets.
- The problem is that in order for a comparison table to be effective, all the relevant information should be presented within a screen. As Tufte said, comparisons must be enforced within the scope of the eye span.
- When we are considering more than two items, we go through a progressive reduction process. Basically, we gradually discard the products that don’t meet our needs.
- After our analysis of the cognitive processes behind product comparisons, I worked closely with a Visual designer and a User Researcher to explore a multitude of ways to offer product comparison on a mobile screen. We came up with a few different initial concepts. Then we chose 3 and built prototypes for user testing.
- We tested the prototypes with ten users. A first round of testing helped us understand what design worked better. So we selected a concept out of the three and followed the insights gathered to improve it.
- Here is a representation of our final solution. For confidentiality reasons I cannot show you the final designs as they are not live yet. I want to stress the fact that because of technical restrictions on the client side, we were only allowed to use portrait orientation. The concept is based on two elements. A landing page and a comparison table. First there is a landing page, where all the products available are listed. The user can expand in line a specific product to see some key information about it. From the expanded module it’s possible to add a product for compare. Once two or more products have been added, a button appears that, when clicked, will open the comparison table page.
- I would like to focus on the comparison functionality here. So, we decided to start from the two-Column view pattern I showed earlier, and try to improve it.
- 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 products would add a column with the new item selected. And the container column will shift to the right of the newly added column. I also want to add that we considered allowing the user to move the columns around and change the order. However, we decided not to do it, in order not to overcomplicate the interaction.
- The test participants reacted very positively to the solution we presented. And so did our client. Here’s some of the users’ comments.
- The participants appreciated that they had a good level of control and flexibility within the table. They liked the fact that they could remove items and so narrow down the shortlisted items. They also particularly liked the fact that they could add new products to the selection without leaving the table.
- Of course, our solution is far from being perfect, as no more than two items can be compared at the same time on the screen. But as Salvador Dàli said: “Have no fear of perfection. You’ll never reach it.”
- Thank you. Please get in touch, if you have any questions, or you have found better design solutions you would like to share. My Twitter handle is @mkbrigante