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

User experience for ecommerce - UX Riga 2014

Jan 15, 2015

Download

Design

mosyed

Increase sales, engagement and satisfaction through better design.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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