user experience for ecommerce - ux riga 2014

51
Increase sales, engagement and satisfaction through better design Mo Syed @uxmo User experience for e-commerce

Upload: mosyed

Post on 15-Jan-2015

584 views

Category:

Design


4 download

DESCRIPTION

Increase sales, engagement and satisfaction through better design.

TRANSCRIPT

Page 1: User experience for ecommerce - UX Riga 2014

Increase sales, engagement and satisfaction through better design

Mo Syed @uxmo !

User experience for e-commerce

Page 2: User experience for ecommerce - UX Riga 2014

Why?

Conversion stubbornly low

Growth slowing

Competitive environment

Page 3: User experience for ecommerce - UX Riga 2014

A new way

What’s going on in the brain?How we perceiveWhat drives us

How we can use these insights?

Page 4: User experience for ecommerce - UX Riga 2014

A cognitive model of engagement

Page 5: User experience for ecommerce - UX Riga 2014
Page 6: User experience for ecommerce - UX Riga 2014
Page 7: User experience for ecommerce - UX Riga 2014

Attention is scarce, interruption is abundant.

Page 8: User experience for ecommerce - UX Riga 2014
Page 9: User experience for ecommerce - UX Riga 2014

The mindunconscious

conscious

Page 10: User experience for ecommerce - UX Riga 2014
Page 11: User experience for ecommerce - UX Riga 2014

Cues the breadcrumbs that lead us, without us knowing.

Page 12: User experience for ecommerce - UX Riga 2014

Seeking - dopamine system

Desire

Page 13: User experience for ecommerce - UX Riga 2014

Reward - opioid system

Satisfaction

Page 14: User experience for ecommerce - UX Riga 2014

Time spent in journey

Use

r en

gage

men

t

Buy threshold

Leave threshold

Page 15: User experience for ecommerce - UX Riga 2014

So why do we buy?

Page 16: User experience for ecommerce - UX Riga 2014

Purchase

Tablet App

Kiosk

POS Display

In-Store

Postal Mailing

Catalogue

Email Newsletter

Website

Recommendations

Social platforms

Search

Connected TV

Page 17: User experience for ecommerce - UX Riga 2014

Retargeting ads

Page 18: User experience for ecommerce - UX Riga 2014

Time spent in journey

Use

r en

gage

men

tBuy threshold

Leave threshold

Visit new

site

See retargeting add

Buy

Page 19: User experience for ecommerce - UX Riga 2014

cost benefit

Page 20: User experience for ecommerce - UX Riga 2014

Design approaches for conversion

or reducing cost

Page 21: User experience for ecommerce - UX Riga 2014
Page 22: User experience for ecommerce - UX Riga 2014

Effortless buying

Eliminate confusion

Meet expectations

Refine interactions

Page 23: User experience for ecommerce - UX Riga 2014

Where users look

Eye tracking

from http://www.useit.com/alertbox/reading_pattern.html

Page 24: User experience for ecommerce - UX Riga 2014

Where users look

F-Shape pattern

Page 25: User experience for ecommerce - UX Riga 2014

Visual priority

Page 26: User experience for ecommerce - UX Riga 2014

Take a look at this

Page 27: User experience for ecommerce - UX Riga 2014

A

B

C

B B

B

G

E

F

Page 28: User experience for ecommerce - UX Riga 2014
Page 29: User experience for ecommerce - UX Riga 2014

Path dependence

B

X

A

Page 30: User experience for ecommerce - UX Riga 2014

Path to completion

from http://rosenfeldmedia.com/books/webforms/

Page 31: User experience for ecommerce - UX Riga 2014

Path to completion

from http://rosenfeldmedia.com/books/webforms/

Page 32: User experience for ecommerce - UX Riga 2014

Layout grids

Highest priority

Medium priority

Low priority

Visual harmony

from http://en.wikipedia.org/wiki/Grid_(page_layout)

Page 33: User experience for ecommerce - UX Riga 2014

Layout grids

Clear scan lines

Clear path to completion

Page 34: User experience for ecommerce - UX Riga 2014

The F-pattern

Page 35: User experience for ecommerce - UX Riga 2014

Visual noise

Page 36: User experience for ecommerce - UX Riga 2014

Visual noise

Page 37: User experience for ecommerce - UX Riga 2014

Visual starting point

Page 38: User experience for ecommerce - UX Riga 2014

?

Visual starting point

Page 39: User experience for ecommerce - UX Riga 2014

Where users lookEye tracking on web forms

from http://rosenfeldmedia.com/books/webforms/

Page 40: User experience for ecommerce - UX Riga 2014

The cost of choice

£39/month Sign up now

or

Page 41: User experience for ecommerce - UX Riga 2014

EyeHandThought

Page 42: User experience for ecommerce - UX Riga 2014

cost benefit

Page 43: User experience for ecommerce - UX Riga 2014

Size, quality, price & perception.

Page 44: User experience for ecommerce - UX Riga 2014

A cognitive bias is a pattern of deviation in judgment that occurs in particular situations.

Page 45: User experience for ecommerce - UX Riga 2014

Anchoring describes the common human tendency to rely too heavily, or "anchor," on one trait or piece of information when making decisions.

Page 46: User experience for ecommerce - UX Riga 2014

5 19 25 9120

Page 47: User experience for ecommerce - UX Riga 2014

19 25 9 1205

Page 48: User experience for ecommerce - UX Riga 2014
Page 49: User experience for ecommerce - UX Riga 2014
Page 50: User experience for ecommerce - UX Riga 2014

Summary

Page 51: User experience for ecommerce - UX Riga 2014

References!

http://en.wikipedia.org/wiki/ List_of_cognitive_biases

Priceless by William Poundstone

Web Form Design: Filling in the Blanks by Luke Wroblewski

Why We Buy: The Science of Shopping by Paco Underhill