13-11-05
Redesigning the Buy Button
Add me to the cart, do it now, please click me
Oh - BTWIt’s not only the button
It’s what happens around the act off putting something in the cart
13-11-05
Redesigning the Add to cart
This is a really good idea
5
And Dan Ariely can tell you why
Misattribution!
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?
Mobile first
7
=
Desktop last
The key Characteristic of Tablet is not mobile
8
It’s touch!
What is the job a poor little Buy button has to do?
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
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
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
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
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
Example - Mathem
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?
Hey - You can’t do that - or?
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
The signal should happen where the user is actually looking Let’s look at how Ginza does it
19
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
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
How to NOT do it
People can be influenced
BUT
They’re not looking for the same things before and after they’ve
added something to the cart
I’m still staring at the cat litter!
The
Pre AddPost AddCart Conversion RateTheory
P A P A C C R T
C A T C R A P P
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
@conversionista
conversionista.se/conversion-manager
Top Related