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.

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

2. Oh - BTW
It’s not only the button
It’s what happens around the act
off putting something in the cart

3. Redesigning the
Add to cart
13-11-05

5. This is a really good idea
Misattribution!
And Dan Ariely can tell you why
5

6. For E-commerce go “Tablet first”
This is to get sh*t done
This is to check sh*t up
This is to
kick back
and enjoy
In the mind of your customer: Where do you want to be?
6

7. Mobile first
=
Desktop last
7

8. The key Characteristic of Tablet is not
mobile
It’s touch!
8

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

10. Lots of stuff
The add to cart button - together with surrounding
controls must be able to:
1.
2.
3.
4.
5.
Signal the possibility to “add to cart”
Be able to select quantity, colour, size and other variables
Signal something has been added to the cart
Be able to change what has been added
Lead the visitor to the next desired actions
10

11. Hey we ain’t done with you by damn sight
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?
11

12. Hey we ain’t done with you by damn sight
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?
12

13. 1. Signal that you can use it to “add”
Select the quantity in the box and press the button
in order to place the item in the shopping cart
1
Add to cart
13

14. Possible
variations
>
a. Symbolic
+
Add
b. Minimal
c. Basic add
Add to cart
Single Item action
d. Add 1 Item
Add 1 to cart
Multiple item action
e. Input & Add
f. Select & Add
1
1
Add to cart
Add to cart
14

15. Example - Mathem

16. Maybe there’s a way around it?
1
Add to cart
Add to cart
1
2
3
4
1
2
3
4
5
6
More
5
6
More
If possible - use native controls?
16

17. Hey - You can’t do that - or?

18. Lots of stuff
The add to cart button - together with surrounding
controls must be able to:
1.
2.
3.
4.
5.
Signal the possibility to “add to cart”
Be able to select quantity, colour, size and other variables
Signal something has been added to the cart
Be able to change what has been added
Lead the visitor to the next desired actions
18

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

20. It doesn’t really solve the problem of
adding many - but maybe this?
1
Add to cart
:3
Change
1
2
3
4
5
6
More
20

21. Lots of stuff
The add to cart button - together with surrounding
controls must be able to:
1.
2.
3.
4.
5.
Signal the possibility to “add to cart”
Be able to select quantity, colour, size and other variables
Signal something has been added to the cart
Be able to change what has been added
Lead the visitor to the next desired actions
21

22. How to NOT do it

28. People can be influenced
BUT
They’re not looking for the same
things before and after they’ve
added something to the cart

33. I’m still staring at the cat litter!

34. The
Pre Add
Post Add
Cart
Conversion Rate
Theory

35. PAPACCRT

36. CATCRAPP

38. 1
Add to cart
:3
Change
Good for:
Good for:
1. Task driven visits
2. Buying from category
view
3. Buying more than 1 item
4. No other variables than
quantity
1. Browsing visits
2. Buying from product page
3. Buying 1 item
38

39. conversionista.se/conversion-manager
john@conversionista.se
@conversionista