+ All Categories
Home > Design > Making product comparison work on mobile

Making product comparison work on mobile

Date post: 22-Nov-2014
Category:
Upload: foolproof
View: 394 times
Download: 0 times
Share this document with a friend
Description:
Michele Brigante on designing to improve the usability of comparison tables on mobile from UX Lisbon.
Popular Tags:
49
Product Comparison on Mobile
Transcript
Page 1: Making product comparison work on mobile

Product Comparison on Mobile

Page 2: Making product comparison work on mobile

Interaction DesignerFoolproof, London

Michele Brigante

@mkbrigante

Page 3: Making product comparison work on mobile

Mobiles are maturing…

Page 4: Making product comparison work on mobile

The good and the bad of mobile

Wayfinding

Page 5: Making product comparison work on mobile

The good and the bad of mobile

Social connection

Page 6: Making product comparison work on mobile

The good and the bad of mobile

Social connection

Capturing moments

Page 7: Making product comparison work on mobile

Mobiles are not good at everything

Page 8: Making product comparison work on mobile

Product comparison

Page 9: Making product comparison work on mobile

Apple Example

Page 10: Making product comparison work on mobile
Page 11: Making product comparison work on mobile

Sainsbury’s Example

Page 12: Making product comparison work on mobile

Apple Example

Page 13: Making product comparison work on mobile

Why does this matter?

Page 14: Making product comparison work on mobile

1.2 billion people access the web from their mobile devices

Source: Trinity Digital Marketing

Page 15: Making product comparison work on mobile

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

41% have turned to a competitor’s site after a bad

mobile experience

Source: Google

Page 17: Making product comparison work on mobile

Screen size

matters!

Page 18: Making product comparison work on mobile

Constraints feed creativity

Page 19: Making product comparison work on mobile

Our design process

Page 20: Making product comparison work on mobile

Horizontal table

Page 21: Making product comparison work on mobile

Stacked table

Page 22: Making product comparison work on mobile

Two-column view

Page 23: Making product comparison work on mobile

Cognitive effort

Page 24: Making product comparison work on mobile

Reliance on memory

Page 25: Making product comparison work on mobile
Page 26: Making product comparison work on mobile

Pogo-sticking between pages

Page 27: Making product comparison work on mobile

Not knowing what to buy

Page 28: Making product comparison work on mobile

“Research” mode

Page 29: Making product comparison work on mobile

Organizing information with data tables

Page 30: Making product comparison work on mobile

Product compariso

n

Page 31: Making product comparison work on mobile

“Comparisons must be enforced within the scope of the eye span.”E. Tufte

Page 32: Making product comparison work on mobile

Progressive reduction process

Page 33: Making product comparison work on mobile

User research insights

IxD+VisD+UXC

Page 34: Making product comparison work on mobile

User research insights

Page 35: Making product comparison work on mobile

Our solution

Page 36: Making product comparison work on mobile
Page 37: Making product comparison work on mobile
Page 38: Making product comparison work on mobile
Page 39: Making product comparison work on mobile
Page 40: Making product comparison work on mobile
Page 41: Making product comparison work on mobile
Page 42: Making product comparison work on mobile
Page 43: Making product comparison work on mobile
Page 44: Making product comparison work on mobile
Page 45: Making product comparison work on mobile

“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

Control

Page 47: Making product comparison work on mobile

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

Control

Page 49: Making product comparison work on mobile

Thank you.

Michele Brigante@mkbrigante

[email protected]


Recommended