S**t just got real

18 Responses

1. Pro Adam Bubeníček

   I really like Chris Allen's concept, so I decided to realize it.

   Let's try it! :)

   Edit: Don't try to buy nothing, this button doesn't like it.

   12 months ago

2. Pro Bart Ebbekink

   That is just awesome work!

   12 months ago

3. Pro Adam Bubeníček

   Thank you @Bart Ebbekink :)

   12 months ago

4. Pro Ashley Staggs

   Holy Guacamole! This S**t is awesome

   12 months ago

5. Pro Adam Bubeníček

   Hahaha :D Thanks :D

   12 months ago

6. Pro Chris Allen

   Fantastic dude... love the animation. In Chrome, though, it's a little jittery - can that be smoothed out?

   @Adam Bubeníček By the way, we've been using this button for a while now at Peapod (in the mobile app), as well as on the Stop & Shop Shopping List application. You can see how we make it work here (just click the "Try It" button and then enter a NYC zip code like 10001): https://www.stopandshop.com/listmaster/user/login.htm

   12 months ago

7. Pro Adam Amran

   The original idea by @Chris Allen is so clever and this execution very well done, I love it!

   12 months ago

8. Pro Adam Bubeníček

   @Chris Allen thanks man, and you're right, that number isn't calm very much. Now it should be ok, check it out :)

   Huh, I thought it is just unused concept, I'm surprised. These buttons aren't animated, but still great :)

   12 months ago

9. Pro Adam Bubeníček

   Thanks @Adam Amran :)

   12 months ago

10. Pro Chris Allen

    @Adam Bubeníček Niiiiice. Much smoother now. Yeah, so the original concept of having the buy button turn into the quantity selector was created by my boss - I merely put a facade on it :)

    Not sure if you checked out our list application I linked to above, but when you have your cart (in this case, list) always present, you don't need to click again to actually buy the product. Once you click on the button for the first time, you visually see the product added to your list - from that point on, you're simply adjusting the quantity or removing the item from the list entirely.

    12 months ago

11. Pro Adam Bubeníček

    @Chris Allen Yeah, I saw that and I have to say it is really good and easy way to add stuff to your cart, my button above works a little bit worse :)

    12 months ago

12. Pro Chris Allen

    @Adam Bubeníček I'd say the opposite - your button is better! I've asked my developers to take a look at what you did to think about how we can animate the transition between buying and changing the quantity.

    One more suggestion for you - hover effects on the minus and plus buttons would be helpful, and maybe a tooltip when hovering over the middle section that says (click to buy). Now, in our button, you can actually click into the middle to directly edit the number so that you don't have to repeatedly click the plus button to get to a larger number. Personally, I don't think it's necessary to click to add to cart, then change quantity, then click again to purchase - only have the user click once to buy, then change the quantity from "1" only if they need to.

    1likes

    12 months ago

13. Pro Adam Bubeníček

    @Chris Allen Thanks, and you're totally right, I created this button just for fun, I know these controls should have some hover effects and maybe some help, because using it is not intuitive at all. But at the moment it was just very difficult, I coded it wrong in this way, so you can enjoy only the look and animation right now :)

    12 months ago

14. Pro Luboš Volkov

    cool idea! :)

    12 months ago

15. Pro Adam Bubeníček

    @Luboš Volkov Yes, very cool idea, just not mine :(

    12 months ago

16. Jorge Guevara

    nice style and smooth animation

    12 months ago

17. Pro Adam Bubeníček

    Thank you Jorge :)

    12 months ago

18. Pro Rıza Selçuk Saydam

    holy cool

    1likes

    12 months ago