Designing with Emotion for E-Commerce

30
E-Commerce Success & Conversions By Ross Johnson @3PointRoss Designing For Thursday, July 26, 12

description

The best performing e-commerce websites are designed with an understanding of human psychology. By understanding potential buyers and how emotions influence their actions you can craft product pages that make them feel safe, comfortable and ready to purchase. This happens on a conscious, semi-conscious and subconscious level.

Transcript of Designing with Emotion for E-Commerce

Page 1: Designing with Emotion for E-Commerce

E-CommerceSuccess & Conversions

By Ross Johnson @3PointRoss

Designing For

Thursday, July 26, 12

Page 2: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Design for E-Commerce is All About Psychology

Thursday, July 26, 12

Page 3: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

How does a user think? How can you persuade them to buy your product?

Thursday, July 26, 12

Page 4: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Focusing on:

Product Pages

Thursday, July 26, 12

Page 5: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Buyer psychology can be broken down into three major emotional categories.

VisceralBehavioralReflective

Thursday, July 26, 12

Page 6: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

It’s important to preface this with an understanding that...

All of our behavior is ultimately driven by emotion, not logic.

Thursday, July 26, 12

Page 7: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Visceral Emotions

Thursday, July 26, 12

Page 8: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Subconscious

The first reaction you have

Survival Seeking and Threat Avoidance

Thursday, July 26, 12

Page 9: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

In Design, This Means•Maximize Trust•Reduce Visual

Clutter•Minimal > Fancy•Cost Benefit

Principle•Hicks Law

Thursday, July 26, 12

Page 10: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Cluttered design produces physical, measurable anxiety.

Thursday, July 26, 12

Page 11: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Abercrombie & Fitch is clean but dark.

Thursday, July 26, 12

Page 12: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Clean, open & bright design mimics “safe” environment.

Thursday, July 26, 12

Page 13: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Hicks Law:Too many options makes it more difficult to decide.http://3.7designs.co/blog/2010/07/ten-laws-to-design-by/

Thursday, July 26, 12

Page 14: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Extremely cluttered design builds distrust as it mimics an “unsafe” environment.

Thursday, July 26, 12

Page 15: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

We are a visual species. Realistic imagery that tie to survival (shelter, food, reproduction) create positive visceral reactions.

Thursday, July 26, 12

Page 16: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

BehavioralEmotions

Thursday, July 26, 12

Page 17: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Semi-conscious

What it feels like to “use” something or perform an action.

Closely tied to usability.

Thursday, July 26, 12

Page 18: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Make all actions obvious and visible.

“Recall vs Recognition”

Give necessary affordances

Include calls to action.

Thursday, July 26, 12

Page 19: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Call to action

Thursday, July 26, 12

Page 20: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Actions visible and obvious

Thursday, July 26, 12

Page 21: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Cart withorder visible.

Thursday, July 26, 12

Page 22: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Buttons look like buttons (affordance.)

Thursday, July 26, 12

Page 23: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

ReflectiveEmotions

Thursday, July 26, 12

Page 24: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Conscious

Slowest emotion

Tied to memories, experiences, self image, etc...

Thursday, July 26, 12

Page 25: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Trust Indicators

Social Validation

Authority

Imagery

Thursday, July 26, 12

Page 26: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Simple privacy policy presented the user at the time of submitting a form.

Thursday, July 26, 12

Page 27: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Reassurance that transactions are secure.

Thursday, July 26, 12

Page 28: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Social Validation

People are instinctively influenced by social pressures. Testimonials reassure users that other people like a product, therefor it must be good.

Thursday, July 26, 12

Page 29: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Social Validation

Amazon uses reviews rather than testimonials. Interestingly enough, all positive reviews are often seen as questionable. People expect a few average / bad reviews.

Thursday, July 26, 12

Page 30: Designing with Emotion for E-Commerce

E-Commerce Design for Success & Conversions

Questions?Follow me on the Twitters @3PointRoss

Thursday, July 26, 12