3

I have a checkout page on my application that has two buttons, one to review the order, and one that goes back to the shopping cart.

Screenshot of checkout page. The navbar has a shopping cart button, there is a progress indicator, a shipping address, and the two buttons to either review the order or go back to the cart

My product owner feels that the Back to Cart button needs to be more prominent, despite there being multiple ways to get back to the cart (the link in the header, browser back button, or the Back to Cart button). It's also a secondary action, so it really shouldn't be prominent in my opinion. In early testing of this, nobody had trouble getting back to the shopping cart, regardless of how they chose to get there.

Is there a reason to make this stand out more, and is there a way to make it "more prominent" without pulling focus from the primary action?

Improve this question
4
  • 3
    This is the screen you see when you've already decided to buy something right? Most webshops don't even offer this many 'ways out'. You want them to continue, so offering any additional buttons that take them out of that flow is a bad idea. Just the button next to the primary one should be enough, this is where people will look for it.
    – Wendy Wojenka
    Commented Sep 26, 2018 at 14:45
  • Im not sure also "Order status" link and that menu belongs to checkout. Could you explaing context bit more, whats application is this, and what is top menu for?
    – xul
    Commented Sep 26, 2018 at 15:32
  • The Order Status and other stuff is part of the header, so it's always there. We are hiding a search bar that's normally there, but yes, the idea is to funnel them through checkout without giving too many escape hatches. That's why I went for subtle with the Back to Cart button, but it seems to be a sticking point with the product owner.
    – Stubnortz
    Commented Sep 27, 2018 at 13:48
  • You could suggest your product owner whether they want people to drop off or actually check out? What is more important? Additionally, I would recommend the stepper active state to be less prominent than the CTA (they are competing each other now).
    – Nicolas
    Commented Dec 10, 2018 at 17:59

1 Answer 1

Reset to default
1

It looks like you may be using Material Design, is that true? If that is the case, refer to this link, https://material.io/design/components/buttons.html#hierarchy-placement for a better understanding of primary, secondary and tertiary buttons. Look at the do's and don'ts section.

You are on the right path. The primary button should correlate with the ideal and most commonly taken path and always be on the same side.

Secondary buttons identify the alternate path, but still allow the user the full control they need.

In addition the color prominence of the primary button helps the user find their way through the task more quickly.

When I use primary, secondary and tertiary buttons in the footer of applications that I design, the primary is in the bottom right corner and full saturation blue, the secondary button is 10px to the left and just an outline button with blue text.

The tertiary is all the way to the bottom left corner because if I have one, it is a destructive button like a Delete or Reset, and I want the user to have to think more before moving that direction.

Common examples of primary and secondary would be Submit (primary) and Cancel (secondary). Now these are desktop applications, but the idea is the same.

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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