Redesigning the buy button
1 like559 views
The document discusses the redesign of the 'add to cart' button for e-commerce, emphasizing its crucial functions such as signaling the possibility to add items, selecting product variations, and guiding users to next actions. It highlights the importance of considering factors like page type and user intent, advocating for a design that addresses both mobile and desktop experiences. The content also suggests that the 'add to cart' process must adapt to user behaviors and preferences to improve conversion rates.
Redesigning the buy button
- 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
- 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