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

enter image description here

share|improve this question
1  
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
add comment

4 Answers 4

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.

As for button order, checkout should be right aligned. There's an excellent article at http://uxmovement.com/buttons/why-ok-buttons-in-dialog-boxes-work-best-on-the-right/ that makes many points for this, but the one I'm getting at here is:

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.

share|improve this answer
add comment

As TJH pointed out, the "checkout" button should be on the right. To reinforce the continue along the process idea, I would also

  • Change the wording to "Proceed to Checkout"
  • Use a "pointy" button:

mockup

download bmml source – Wireframes created with Balsamiq Mockups


As far as the "continue shopping" button/link is concerned: with a layout as the above, do your users really need it?

Assuming I want to continue shopping, I can click

  • one of the left navigation menu items
  • the logo
  • the "home" top menu navigation item.

That's not one, not two, but three very obvious ways to continue shopping. I'd say you don't need a fourth one.


A "continue shopping" button would make sense in the context of a modal window/overlay, when an item has been added to the cart and the user has an actual choice to make:

mockup

download bmml source

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.