I working on the design of an ecommerce site and I was confused about the ideal placement for a continue shopping button when the user is presented with his cart page. I have three buttons on my page :

Update cart

Checkout

Continue shopping

I moved the update cart and checkout to the left of the page since the reader would read from left to right but I am concerned about having three buttons in a row.

Is there a reason for requiring an Update Cart button? Surely there is a high likelyhood of someone changing the basket qty to 5 and then hitting Checkout, but because they've not chosen Update Cart they end up accidently buying only 1 item. Can't the Update Cart just be linked to any changes made to the cart itself? Then there is no likelyhood of people not using it. (Not-script versions will naturally still require the button though, but in general I don't think it's really needed)
–
JonW♦Sep 26 '12 at 16:13

4 Answers
4

I would also question another one of the buttons. Why always show an "update cart" button? The way I see it, users can only do two things to change the form:

delete an item

increase/decrease quantity of an item

Now there's two alternative ways to go about this:

immediately update the cart when one of those things happens

provide an update action once changes occured

In my opinion, there's absolutely no need to make these changes two-action-processes for users. As the user updates the quantity of an item, update the cart. As the user deletes an item, remove it. I haven't found any research on this, but I would think that if there's an "update cart" button, but no "cancel modifications" this much rather would lead to confusion on the user's end:

Okay, I have changed to three books instead of one. Now there's an
"update" button – what should I do if I changed my mind, and want only
one book? Do I need to re-change the value and then click "update"?
What happens if I just proceed? Why is there no "cancel changes"
button?

Interestingly, Amazon uses both approaches. Delete will instantly delete the item, changing the quantity results in an added 'update' link.

I'm also with the vzwick on the "continue shopping" button: It's just another element that's not really needed.

I agree that the primary action of "Checkout" should be on the right. I would normally expect to find the link to continue shopping (it's not really necessary but it does reinforce the idea that they are free to take their time) on the left. I would normally present the Checkout call to action as a button and the link to continue shopping as a simple text link. As for the control to "Update Cart", am I right in thinking that this is purely for updating quantities? If so, I'd consider positioning it directly below that column in order to clarify its purpose.

I can see your point moving to the left, however positioning the button on the right might well give the user a sense they are continuing along the process, as "next" buttons tend to be on the right hand side.

Considering that, I'd consider realigning your buttons to the right (where they obviously were before from your question wording) but utilise whitespace to the left to draw the user's eye.

When users click secondary action buttons, they expect the application to do nothing and take them back to their original screen. Thus, ‘Cancel’ buttons function like ‘Back’ buttons. When users click primary action buttons, they expect the application to do the action the button says, and take them forward to the next screen. Thus, ‘Ok’ buttons function like ‘Next’ buttons. Placing the secondary action button on the left and the primary action button on the right maps to the ‘Back’ and ‘Next’ button functions the user can expect.

It’s similar to how pagination buttons are placed. The button that takes users to the next page is on the right, and the button that takes users back to their earlier page is on the left. This button placement works because it maps to the user’s left-to-right reading and navigating direction, where right is the direction to progress and left is the direction to regress.

So we know we have checkout on the right. What about the others? Well, Continue shopping is more like a back button in this instance, so the most logical place to put it is on the right. This will also suit your UI if the button is styled as text and the others are styled as full buttons. That leaves us with the update button in the middle - also good for UX as if we were to, as the user will subconsciously, compare this to pagination the "middle" or "current" page will take us nowhere.