what's the most optimum sequence of actions to add a product to cart on product page

Question

Working on the product page for an e-commerce website I'm trying to decide what's the best sequence of the following user actions while giving the add to cart button highest visibility at the same time

size select - also in the case of the use being unsure about their, there's 2 more detailed ways to find the users size

estimated delivery time - stating the average time while an additional feature of giving a more specific time when the user enters their postal code.

if having the cta as 3rd from the top they will be pushed down if the user decides to expand and use other options to select size.

if you were do design this which order would you put the features and buttons on the right side column

Answer 1

From the looks of it, I find the size selector put in the wrong column. From numerous other e-commerce sites, you do the selections in the first columns for colors, dates, sizes and everything else. Then, when you’re done you move over to the “Add to CART”-button (Add to Bag in your case). That makes it a conscious and more prominent action than “just” sliding down the column as if it was another product customization option.

This would also solve your issue with having too many option in the buying column. When the user is done selecting, she should only BUY and nothing else. As an alternative, you could move the ETA-calculator to the next step of the wizard to further remove the clutter. You’d want the user to BUY and later on worry about different types of deliveries as you may have several options: Fast and Expensive or Slow and Cheap.

The Wish List option could also be down-sized in relation to the BUY-button. If you do that by increasing the BUY-button or decreasing the Wish List option is up to you.

Answer 2

I think Benny is right, move the ETA-calculator to the next step. Don't let the user worry about that at this stage (worst case scenario is that you are reminding the buyer that it will take some time to get the goods delivered, and they will not add the item). Also I would call it best practice to place the "add to bag" button more bottom right, think of this as a next button in a form. See this for reference: http://ui-patterns.com/patterns/ShoppingCart/ Most check out buttons are placed bottom right.

I guess that you rather want the users to add to bag instead of adding to wishlist? In that case it's a good idea to give add to wishlist a smaller visual impact (size, color, placement).

Answer 3

See, in fact you have 3 clear sets of content+actions, thus this makes it easier to uinderstand how to place elements within those sets.

1st set: Display

In this set, you present the product to the user. You may have different content elements (photo, name, price, maybe a short description), but it basically works as a teaser to go to the next step.

The display set has a subset of actions, althought the most common one is "click" to step 2. This is a pre-sell action and the part where you must pay more attention.

2nd set: Product

Here you have all expanded content and sub-sets of content and actions relative to content itself. This is where you expand info and allow the user to customize the product. ALL action sub-sets related to product go in this step. Thus, you can add the "add to favorites" here, but do it using iconography instead of buttons, and simply switch on/off visual treatment of the icon, don't add any additional noise.

Then, something I don't see in your wireframes: the actual CTA to effectively make the purchase by going to checkout or add to cart. The possible CTA options are "add to cart" and "add to cart and checkout" (don't mind the copy, just the concept)

3rd set: Purchase

Here, you have 2 options:

1) User selects product and adds to cart, then continues checking other content (pending purchase)

In this case, your second step/set is enough, you don't need your 3rd step AT ALL.

2) User adds to cart and checkout (effective purchase)

Here, you add a detail of the product, price, your ETA box, whatever. This is the final step, and you have to make it straight to the point. You want to sell, and nothing else. Do NOT add elements related to product other than maybe a "change" link at the side or a "go back" button, and an amount box (if applicable, in case people needs to change amount of purchased products without cancelling the process and starting again). But size, color and whatever infor about the product are totally out of place. Same goes for the "add to wishlist" button, because you can't add a checkout process to favorites or wishlist, you add a product!.

Thus, if you have your merchant process, you include it here, if you send users to a merchant processing flow (Paypal, processors, etc), then simply have a "buy now" button

See image below for a visual explanation of the above:

In short, try to always think in terms of logical blocks of information, and how can you group elements in sets, and you'll be able to manage the page/app strcuture in a lot easier way