1

I'm working on a redesign project of an ecommerce. The shopping cart page has 3 CTA. 1. Go to checkout process 2. Continue shopping 3. Delete order

The last CTA isn't usual in ecommerce, but is important to keep it because users of this kind of ecommerce may want to leave the order and delete it for safety reasons (their pc is used also by other people). Where can I put those CTA?

One solution could be:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

In this way the button delete order is far from the other 2 but visible. The other 2 are close each other because they represent 2 possible alternative (1. I've finished my order 2. I need to add something else) but they're not destructive.

Another alternative could be

mockup

download bmml source

What do you think about it? Do you have better alternatives?

Thank you

  • 2
    What is the purpose of the "Delete order" button? If no order has been actually created/completed by going through Checkout, an order doesn't exist that can be deleted :-) Does it just empty your cart of its products? I'd let the cart's delete/remove buttons (that I assume are not shown in your early wireframes) to allow someone to empty their cart. – Kip Dec 1 '15 at 23:26
  • I'd say that you have only one call to action: Check Out. That is the next step for most users. The other two are necessary, but not primary. – Ken Mohnkern Dec 2 '15 at 12:20
7

1) Ideally an order is generated once an user is done with the payment. You could call it Order summary, where an Order ID is usually attached to it for reference. At cart stage, "Delete Order" as an interaction does make much sense. To me, its ambiguous.

2) At cart, there are items - hence deletion should happen on each line item (product).

3) In special cases, an empty cart functionality might be useful (very context driven), so the term could be like "Empty Cart". I just quickly placed it as seen. Important to note is, Checkout/Continue shopping are related and hence grouped together, which is not with Empty Order case. It offers a different purpose, and should be more closely related to the cart itself.

enter image description here

  • Good solution but where did that "Share cart" option come from? I know having another action next to the "Empty cart" link brings balance and meaning to the element, but it should not be a reason to coming u with a totally new, random feature. I would remove it and place the "Empty cart" link aligned to the right. I would also get rid of the "<" in "Continue shopping", since it gives a sense of going back, but it's saying "continue" which means going forward... that's confusing. – luchomolina Dec 2 '15 at 19:06
  • Totally agree with you @Amit. Label "delete order" is wrong. I meant "empty cart". The choice to put this button on this page is "context driven" as you said. I don't know if a link next to the title page is enough visible. Maybe put the link in the bottom left is better. I agree on separate "checkout/continue" from "empty", even for prevention error purpose. – Matteo Vacca Dec 2 '15 at 19:46
  • @luchomolina Share cart was just a way of suggesting that features like these can be grouped together (Empty, share, save etc), are context driven and could be placed as suggested. I do not see why that is an issue. Also i tend to disagree when you say continue shopping is going forward - as the app creates a physical space in a users mind, and i would like to believe that in the mental model - continue shopping means getting back to adding more items and checking out would mean taking the next step. – Amit Jain Dec 2 '15 at 19:57
  • @Matteo - Glad it helps! – Amit Jain Dec 2 '15 at 19:58
2

In my opinion 2 is the better option, but you shouldn't have the delete order CTA. Never seen that in other ecommerce website cart pages. also it works against driving conversions. A better alternative would be to have delete item for each item. Even if delete order was there for safety reasons, your average basket size would be 2 on average so its not a relatively bigger effort to delete 2 items individually.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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