In our application an "order" (subscription to an event) can be (partly) modified after it has been paid for. For this reason orders aren't removed from the visual indication during or after payment.

The normal behaviour is that once you click the "pay" button, certain fields become "locked" while others can still be modified. Also the user is forwarded to the payment provider and expected to fill in the details there. (Payment provider will return back to the overview page the user left).

When the payment provider reports the payment as "paid" this status prevails (and the order is considered paid). The pay button is then displayed with a "check mark".

If the provider reports the payment as "canceled" or "expired" the locked status will be removed, and the pay button will be displayed once more.

This leaves one particular point though: what if the user leaves the payment provider's page (close button), and returns manually to the overview page. In this case the order "pay" button is replaced with a spinner. However the order payment status is "open" - ie a payment is underway. And the payment provider will not provide an "expired" until the payment link has expired, which is multiple weeks.

From a user experience point of view what should I display while the payment is underway and the user reopens their orders? I could make the spinner into a button that reopens the link, but a user wouldn't ever expect to click a spinner would he?

Small view of button (locations) here

  • I'm not sure if I understand the status that you want to communicate correctly. Why would you show a spinner, if the user actually spends their time in the payment provider's dialogue? I would remove the spinner as soon as the redirect happened. Then the button will still read "Pay", whatever happens. – Andy Mar 25 '19 at 14:26
  • @Andy to show "something" if the user opens an extra tab to return to above page while he is paying in a separate tab. (Or incidentally has that tab closed - which is the problem). – paul23 Mar 25 '19 at 14:29
  • 1
    It's tough coming up with a logical button to display, but I would not go for a spinner. A spinner communicates (to me) that something is loading just now and will be ready in a short while. I think you should display something that communicates "Continue with your payment", as you are still waiting for a user action to continue. – Ivo Coumans Mar 25 '19 at 14:44
  • The user's intention is to pay, so leaving the payment form by tab navigation is quite an exception. Hence I would optimize for the more likely case and keep it simple. The button will still be named "pay", and open the tab again. The payment form that got opened at first will become invalid, but that's ok. – Andy Mar 25 '19 at 15:24

So the scenario is:

  1. User fills an order

  2. User clicks Pay, and partially fills out the payment information

  3. User goes back to the Orders page to check or correct it

  4. User returns to Pay page to complete the order

So, what would be the most sensible thing for the user to click on to get back to the Pay page in Step 4? For consistency it seems to me it should be the same thing as in Step 2: The Pay button. This is really just basic navigation. You can put text under the button saying “Partially Completed,” if you think that helps.

If you cannot pass order corrections to the payment page, or otherwise update the payment page from changes to the order page, then maintain the locks on the necessary order fields. You probably should add additional text over the locked fields saying "To change this order, [cancel payment] in progress", where [cancel payment] links to the Pay page like the Pay button (assuming you can't remotely cancel the payment).

It’s great that you preserved the users’ inputs to the Pay page so it’s there when they return, but the users really need to know that before they go back to Orders, so they know they can click Back or Close without losing their work (but I guess you can't control that).

I agree with the commenters that a spinner is misleading. That means "wait" not "you're in the middle of something somewhere else."

  • Is there actually an indication "you're in the middle of something elsewhere, and modifying this will invalidate that"? Other than nag screens like "are you sure you want to do that". Like when you close a browser window? – paul23 Mar 26 '19 at 18:58
  • @paul23: There is no convention for that indication, probably because it's a problematic design, as you realize, so it's generally avoided. Instead, make invalidation impossible, either by using modes on "this" (e.g., locking fields) or by communicating with "that" (e.g., updating the cost). I added a paragraph on the modal approach, but it sounds like that won't work even though you say you lock fields. Why is invalidation possible in your case? What am I missing? – Michael Zuschlag Mar 28 '19 at 12:35
  • While not directly in this topic, an example would be the "extra options" - where you can get extra options for the "entry" - say order X t-shirts. Now the max amount would be equal to the amount of teammembers, thus if the user would remove a teammember they would also invalidate the extra options. - Or at least "modify" the extra options implicitly, if I then go back to the payment page the options one has might surprise people. – paul23 Mar 28 '19 at 16:26

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.