Express buy button for a complex product (diffrent size,colors). Any experience or examples?

Question

I want to launch a "Express Buy" button just under a product picture. The idea is to avoid one click, the one that goes to the product card. I want this to go straight in to my user's shopping cart. When you see the category page with all the product pictures, I want my customer to select the size and color and click on a "Express buy button" .

The issue is that I'm selling clothes so there are different sizes and colors. So I want to know if some brands already do it or if it is technically practical or not.

This is something like what I had in mind:

Answer 1

Taking in to account your requirement to remove the additional click I would actually slim this is as slimmed down as it can get. Although @obelia's & @abhinavc's answers are good they still require that one click to get to "add to basket". I can't actually find good example of what you want, so I have created what is below.

I would suggest something like this (Photoshop mock up - deliberate change of image see below)

Essentially you have a clean interface, which will automatically show the express checkout options when hovered on - essentially the "Express Checkout" button is not necessary other than to give the user clarity.

If you are trying to really streamline the process I would recommend the following

When someone clicks on a colour, change the image to that product

• Display errors inline

• After adding to basket, give the user the option to view the basket, not just a "Added to Basket"

Also note the following:

• I have deliberately used another image. It is likely not every image will fill the frame, there for this gives better context

• I would use different backgrounds as it provides a clear definition between different products/sections

Answer 2

Off the top of my head, I don't know any other stores that do this. However, your idea of not switching over to another page makes sense. If I were to go through a person-to-person interaction in my mind, it would sound something like this:

"Customer: I'd like to buy one of these shirts.
Sales: Great, what color would you like?
Customer: Red please.
Sales: OK, and what size?
Customer: Medium"

Maybe something like this (excuse the rough doodle):

^{download bmml source – Wireframes created with Balsamiq Mockups}

It lets you do what you need quickly and you can always click out to close it.

Answer 3

If your aim is to reduce clicks, it wouldn't make a difference whether the user chooses his size now or later.

Your options for the Express Buy button's interactions are

• Modal popup with selection. Upon clicking the button, a small popup modal can prompt for the Color and Size before confirming the action.

This is often implemented on sites as a 'Quick Look' hover state with a popup that has some variant of a buy button.

(Source: UrbanOutfitters, Jabong, Myntra respectively)

• Let the user add the item to cart, and let him make the size and color decision only during checkout. I haven't seen any sites doing this explicitly, but instead they use the 'Quick look' and then this option or a 'Favorites' which makes the action of buying without selecting size seem less permanent.

Answer 4

Copy Amazon.com. They have more experience doing this sort of thing than anyone.

You must allow the customer to have specified what they want to buy before they click on any button that says anything with the word "buy" in it. People are used to specifying the size/color etc. before clicking on "buy". They will be wary of clicking on "buy" if their order isn't fully specified before hand.

Amazon usually uses a drop-down list box to select the size and an array of boxes to select the color, so you can specify what you want (and the price might be updated, it may vary depending on what size/color is selected) before clicking on "Add to cart" or "Buy".