making product comparison work on mobile
DESCRIPTION
Michele Brigante on designing to improve the usability of comparison tables on mobile from UX Lisbon.TRANSCRIPT
![Page 1: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/1.jpg)
Product Comparison on Mobile
![Page 2: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/2.jpg)
Interaction DesignerFoolproof, London
Michele Brigante
@mkbrigante
![Page 3: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/3.jpg)
Mobiles are maturing…
![Page 4: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/4.jpg)
The good and the bad of mobile
Wayfinding
![Page 5: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/5.jpg)
The good and the bad of mobile
Social connection
![Page 6: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/6.jpg)
The good and the bad of mobile
Social connection
Capturing moments
![Page 7: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/7.jpg)
Mobiles are not good at everything
![Page 8: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/8.jpg)
Product comparison
![Page 9: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/9.jpg)
Apple Example
![Page 10: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/10.jpg)
![Page 11: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/11.jpg)
Sainsbury’s Example
![Page 12: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/12.jpg)
Apple Example
![Page 13: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/13.jpg)
Why does this matter?
![Page 14: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/14.jpg)
1.2 billion people access the web from their mobile devices
Source: Trinity Digital Marketing
![Page 15: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/15.jpg)
63% of people expect to be doing more shopping on their mobiles over the next couple
of years
Source: Latitude
![Page 16: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/16.jpg)
41% have turned to a competitor’s site after a bad
mobile experience
Source: Google
![Page 17: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/17.jpg)
Screen size
matters!
![Page 18: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/18.jpg)
Constraints feed creativity
![Page 19: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/19.jpg)
Our design process
![Page 20: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/20.jpg)
Horizontal table
![Page 21: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/21.jpg)
Stacked table
![Page 22: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/22.jpg)
Two-column view
![Page 23: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/23.jpg)
Cognitive effort
![Page 24: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/24.jpg)
Reliance on memory
![Page 25: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/25.jpg)
![Page 26: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/26.jpg)
Pogo-sticking between pages
![Page 27: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/27.jpg)
Not knowing what to buy
![Page 28: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/28.jpg)
“Research” mode
![Page 29: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/29.jpg)
Organizing information with data tables
![Page 30: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/30.jpg)
Product compariso
n
![Page 31: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/31.jpg)
“Comparisons must be enforced within the scope of the eye span.”E. Tufte
![Page 32: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/32.jpg)
Progressive reduction process
![Page 33: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/33.jpg)
User research insights
IxD+VisD+UXC
![Page 34: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/34.jpg)
User research insights
![Page 35: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/35.jpg)
Our solution
![Page 36: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/36.jpg)
![Page 37: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/37.jpg)
![Page 38: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/38.jpg)
![Page 39: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/39.jpg)
![Page 40: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/40.jpg)
![Page 41: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/41.jpg)
![Page 42: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/42.jpg)
![Page 43: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/43.jpg)
![Page 44: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/44.jpg)
![Page 45: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/45.jpg)
“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
![Page 46: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/46.jpg)
Control
![Page 47: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/47.jpg)
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.
![Page 48: Making product comparison work on mobile](https://reader033.vdocuments.mx/reader033/viewer/2022061123/5470546baf7959214b8b459b/html5/thumbnails/48.jpg)
Control