We currently use descriptive back links next to the submit buttons at checkout:
1) Return to login (at the order information step)
2) Return to order information (at the review step)
3) Cancel payment (at the payment step)

Ryan looked at the Review page, and thought that the "Return to order information" text was too long and distracting from the main submit button, suggested we try the shorter "Go back".
Pros: Shorter
Cons: No longer contextual.

Look at the screenshots and tell me: A or B?

A

B

CommentFileSizeAuthor
#16 swap-order.png7.55 KBbojanz
back-link-B.png36.67 KBbojanz
back-link-A.png37.69 KBbojanz

Comments

bojanz created an issue. See original summary.

mglaman’s picture

Issue summary: View changes

Embedding :)

rszrama’s picture

B++, though we obviously want other opinions than mine. ; )

My rationale is the weight of the calls to action along with the fact that the real need for contextualization is "What's next?" not "What did I just do?"

replicaobscura’s picture

I like this change (B). Simplifies without making things less clear IMO.

However, will the link _always_ go back one single step in the checkout process? Are there cases where hitting Back would skip over a step and take someone anywhere other than the previous page in their checkout flow indicator?

The only time I think the text could be confusing at all is if that were to happen, however I don't think it would, since the only step usually "skipped over" from a UX perspective is payment processing, and you can't go back a step once that's complete. As long as that's the case everywhere, I see no downside to shortening the link text.

luksak’s picture

I agree with @rszrama. The important context is the next page, not the previous one. Choosing the right wording is also quite difficult to provide context. E.g. "Cancel payment" is kind of misleading whether you loose your order by clicking the link.

skyredwang’s picture

3) Cancel payment (at the payment step)

I was actually confused by "Cancel payment". When I saw the link, my expectation was that I can cancel my "order". But, it turned out it was just a simple "Go back".

Since we already have the breadcrumb on the top, I am in favor of using "Go back".

iaugur’s picture

B++ from me - (we need a poll facility on D.O for issues like this ;) oh the irony...)

sumanthkumarc’s picture

I think, we can remove go as well and let simple back button :p

olafkarsten’s picture

B++

guy_schneerson’s picture

+1 "Go back" had a site recently that the customer asked for all checkout buttons to say Go Back
Another request I get on almost all our commerce sites is to swap the back button so its on the left and the froward button on the right.

replicaobscura’s picture

I agree with guy_schneerson personally, from a UX perspective the buttons have the behavior of going forward or backward in the checkout process, so it'd seem to make sense if back were on the left. But, perhaps that's a separate issue, and perhaps there's some other reason for this choice.

nikathone’s picture

+1 for "Go back" and like the suggestion on #10

harings_rob’s picture

B seems the easiest to understand, the location where it will go back to is in the steps list anyway.\

As long as the go back text is not a button, the position seems fine.

In other cases it would indeed be better to have them left and right (of the wrapper.)

hubbs’s picture

+1 for B . Clear and concise since there are breadcrumbs. And even without breadcrumbs, I think it's still OK.

jon pollard’s picture

Plus one for b. Do you even need the back button? I also agree that the link to go back should be on the left and continue on the right.

bojanz’s picture

Title: Evaluate shorter back links on checkout » Shorten the back links on checkout
StatusFileSize
new7.55 KB

Then it's decided, we're going B.

I tried to swap the order, as in the screenshot, but Ryan was against it because he felt that it overemphasized the back action again (form usability guidelines say to left align the actions, and Drupal tends to follow that, with the most important one first).
So leaving that to custom form alters (it's just a matter of #prefix VS #suffix on the main button element).

  • bojanz committed 9d5bfda on 8.x-2.x
    Issue #2859608 by bojanz: Shorten the back links on checkout
    
bojanz’s picture

Status: Active » Fixed

Thanks, everyone.

wim leers’s picture

Why not *also* allow to click on "1. Order information"? In other words: make the tabs for previous steps clickable.

I hate every ecommerce site that doesn't allow this. Because it forces me to go through every prior step.

rszrama’s picture

I'm honestly not sure we've thought about making the breadcrumbs themselves clickable, but we did make clickable "Edit" links for each section on the review page that would lead to the appropriate page for editing that particular information.

bojanz’s picture

@Wim Leers
I thought we had an open feature request, turns out we didn't. Opened #2859834: Allow checkout progress to link to previous steps.

Only got unblocked recently (when we allowed going back via link and not just via button/POST)

sumanthkumarc’s picture

+1 for wimleers suggestion above.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.