39
13-11-05 Redesigning the Buy Button Add me to the cart, do it now, please click me

Redesigning the buy button

Embed Size (px)

DESCRIPTION

The poor little buy buy button has many jobs to do. But designs are not based on what would be best for the user or the business. Most of it is done because "hat's how we always did it" This presentation challenges conventions and talks about how to display the add to cart button, what happens when you press it, and what happens afterwards.

Citation preview

Page 1: Redesigning the buy button

13-11-05

Redesigning the Buy Button

Add me to the cart, do it now, please click me

Page 2: Redesigning the buy button

Oh - BTWIt’s not only the button

It’s what happens around the act off putting something in the cart

Page 3: Redesigning the buy button

13-11-05

Redesigning the Add to cart

Page 4: Redesigning the buy button
Page 5: Redesigning the buy button

This is a really good idea

5

And Dan Ariely can tell you why

Misattribution!

Page 6: Redesigning the buy button

For E-commerce go “Tablet first”

6

This is to get sh*t done This is to check sh*t upThis is to kick back and enjoy

In the mind of your customer: Where do you want to be?

Page 7: Redesigning the buy button

Mobile first

7

=

Desktop last

Page 8: Redesigning the buy button

The key Characteristic of Tablet is not mobile

8

It’s touch!

Page 9: Redesigning the buy button

What is the job a poor little Buy button has to do?

Page 10: Redesigning the buy button

The add to cart button - together with surrounding controls must be able to:

1. Signal the possibility to “add to cart”

2. Be able to select quantity, colour, size and other variables

3. Signal something has been added to the cart

4. Be able to change what has been added

5. Lead the visitor to the next desired actions

Lots of stuff

10

Page 11: Redesigning the buy button

We also need to consider these factors:

A. Where will the “add” happen?

- Category page

- Product page

- Search bar

B. What is the normal/average quantity?

C. Are there product variations (size,

colour etc?

D. Task-driven or browsing?

Hey we ain’t done with you by damn sight

11

Page 12: Redesigning the buy button

We also need to consider these factors:

A. Where will the “add” happen?

- Category page

- Product page

- Search bar

B. What is the normal/average quantity?

C. Are there product variations (size,

colour etc?

Hey we ain’t done with you by damn sight

12

Page 13: Redesigning the buy button

1. Signal that you can use it to “add”

13

Select the quantity in the box and press the button in order to place the item in the shopping cart

1 Add to cart

Page 14: Redesigning the buy button

Possible variations

14

a. Symbolic

b. Minimal

c. Basic add

d. Add 1 Item

e. Input & Add

f. Select & Add

1 Add to cart

1 Add to cart

Add 1 to cart

Add to cart

Add

+>

Single Item action

Multiple item action

Page 15: Redesigning the buy button

Example - Mathem

Page 16: Redesigning the buy button

Maybe there’s a way around it?

16

1 Add to cart Add to cart

1 2 3 4

5 6 More

1 2 3 4

5 6 More

If possible - use native controls?

Page 17: Redesigning the buy button

Hey - You can’t do that - or?

Page 18: Redesigning the buy button

The add to cart button - together with surrounding controls must be able to:

1. Signal the possibility to “add to cart”

2. Be able to select quantity, colour, size and other variables

3. Signal something has been added to the cart

4. Be able to change what has been added

5. Lead the visitor to the next desired actions

Lots of stuff

18

Page 19: Redesigning the buy button

The signal should happen where the user is actually looking Let’s look at how Ginza does it

19

Page 20: Redesigning the buy button

It doesn’t really solve the problem of adding many - but maybe this?

20

: 3 Change

1 Add to cart

1 2 3 4

5 6 More

Page 21: Redesigning the buy button

The add to cart button - together with surrounding controls must be able to:

1. Signal the possibility to “add to cart”

2. Be able to select quantity, colour, size and other variables

3. Signal something has been added to the cart

4. Be able to change what has been added

5. Lead the visitor to the next desired actions

Lots of stuff

21

Page 22: Redesigning the buy button

How to NOT do it

Page 23: Redesigning the buy button
Page 24: Redesigning the buy button
Page 25: Redesigning the buy button
Page 26: Redesigning the buy button
Page 27: Redesigning the buy button
Page 28: Redesigning the buy button

People can be influenced

BUT

They’re not looking for the same things before and after they’ve

added something to the cart

Page 29: Redesigning the buy button
Page 30: Redesigning the buy button
Page 31: Redesigning the buy button
Page 32: Redesigning the buy button
Page 33: Redesigning the buy button

I’m still staring at the cat litter!

Page 34: Redesigning the buy button

The

Pre AddPost AddCart Conversion RateTheory

Page 35: Redesigning the buy button

P A P A C C R T

Page 36: Redesigning the buy button

C A T C R A P P

Page 37: Redesigning the buy button
Page 38: Redesigning the buy button

38

: 3 Change

1 Add to cart

Good for:

1. Task driven visits2. Buying from category

view3. Buying more than 1 item4. No other variables than

quantity

Good for:

1. Browsing visits2. Buying from product page3. Buying 1 item