User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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 :
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.
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.
As TJH pointed out, the "checkout" button should be on the right. To reinforce the continue along the process idea, I would also
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
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:
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 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:
Now there's two alternative ways to go about this:
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.
