Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

THIS WHAT I WANT TO ACHIEVE, I DID IT MYSELF

share|improve this question
    
You're wanting to "express buy" from a search results page or the product page? –  cimmanon Jan 23 at 17:21

4 Answers 4

up vote 1 down vote accepted

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)

enter image description here

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

share|improve this answer
    
Thanks for your answer. It is exactly What I had in mind. Is it technically heavy? –  Jybz Jan 24 at 11:16

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):

mockup

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.

share|improve this answer
    
This is what I would do as well. It's simple and allows a user to go through the whole process quicker if need being. –  Majed Jan 23 at 17:43
    
Really appreciate your Idea. It is a easy and quick process. –  Jybz Jan 24 at 11:35

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.

Hover state on UrbanOutfitters.com, Jabong.com and Myntra.com Modal on UrbanOutfitters.com

(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.

Shopping cart on UrbanOutfitters

share|improve this answer

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". enter image description here

share|improve this answer
    
This doesn't fulfil the criteria of removing that button click. I think in terms of "Break the Rules for Better UX" applies here, just because Amazon makes you click on the product doesn't mean it's a required step no? –  tim.baker Jan 24 at 1:24

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.