Making product comparison work on mobile

Post on 22-Nov-2014

394 views 0 download

Tags:

description

Michele Brigante on designing to improve the usability of comparison tables on mobile from UX Lisbon.

transcript

Product Comparison on Mobile

Interaction DesignerFoolproof, London

Michele Brigante

@mkbrigante

Mobiles are maturing…

The good and the bad of mobile

Wayfinding

The good and the bad of mobile

Social connection

The good and the bad of mobile

Social connection

Capturing moments

Mobiles are not good at everything

Product comparison

Apple Example

Sainsbury’s Example

Apple Example

Why does this matter?

1.2 billion people access the web from their mobile devices

Source: Trinity Digital Marketing

63% of people expect to be doing more shopping on their mobiles over the next couple

of years

Source: Latitude

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

mobile experience

Source: Google

Screen size

matters!

Constraints feed creativity

Our design process

Horizontal table

Stacked table

Two-column view

Cognitive effort

Reliance on memory

Pogo-sticking between pages

Not knowing what to buy

“Research” mode

Organizing information with data tables

Product compariso

n

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

Progressive reduction process

User research insights

IxD+VisD+UXC

User research insights

Our solution

“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

Control

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.

Control

Thank you.

Michele Brigante@mkbrigante

michele.brigante@foolproof.co.uk