How can I make it extremely clear that the user needs to take one last action?

Question

I am developing a new checkout wizard for my company's website, and I've added a "confirm your selections" panel as the last step in the wizard:

From my perspective as the designer, I feel that I have at least three clues that indicate that the user still needs to press a button before their order is complete:

1. It says "you're almost done" at the top of the panel.
2. The progress bar at the top shows that they are still in the midst of the "submit" stage.
3. There is a large green button that says "submit request", albeit at the bottom.

However, I am still afraid that some users will misunderstand and mistake this for a "your order is complete, here is your summary" page, thus failing to submit their request.

The way I see it, I could approach this by one of:

1. Not worrying about it. No user would be that dumb.
2. Automatically submitting their request before they get to this section. This, I feel may be disingenuous/illegal.
3. Using some sort of annoying Javascript pop-up if they try to navigate away or close the browser before clicking "submit request".

None of these sound satisfactory to me. Is there anything else I can do? I'd like to avoid removing this page altogether, as we've noticed that users frequently misspell their email addresses.

Update: I will try combining the payment and confirmation steps into the last step. Please note that the customer is not to actually be charged when they submit their request - we simply record their card information with Stripe.

For a better idea of my goal, you can see the live version of this form at: http://bloomingtontutors.com/get-tutor

Answer 1

Change the behavior to fit the intuition

You might want to change the behavior to fit the user intuition, instead of changing the design to "make the user understand" the behavior that you originally intended.

If there are no major reasons for the details to be set in stone at that point (and they aren't, since apparently they can cancel it before the first session anyways without being billed), then any mistakes can be corrected later if/when needed. So you can remove that one final action (since from the point of user, they have already input everything that's needed, and the minimum should be enough), have the request already be "saved" at that point, and re-title the last screen to "Review your info and correct it if you suddenly find a mistake" instead of "Review it before submitting".

Answer 2

Render the confirmation in a modal:

This will highlight explicitly to the user that one more action is needed.

Answer 3

I don't like the words Submit Request - as a designer that is what pressing the button does. For a user, it is more-or-less as meaningless as Press This Button. I don't think Send Request is much better, possibly worse (where is the request going to be sent to?).

• I suggest Place Booking if that is what your system is about: booking a course somewhere.

• Alternatively:

  • "Book Course"
  • "Finalize Booking"
  • "Confirm Booking"

You could also warn (as some sites do):

Your course is not booked until you click the "Place Booking" button. Check your details are correct and click it when you are ready.

---

What does the "Complete ->" button do? Is that the same as "Submit Request"? If not, what is its purpose?

Answer 4

You should really change the wording on your primary action buttons to make it absolutely clear.

"Submitting request" or "Send request" is what your browser does when the user clicks a link or button, but "Pay for session" is what the user wants or has to do in this context to continue.

By using a modal dialog you show the user that he has to complete the dialog first before he can do anything else on the website, however modals are known to cause problems on small cellphones when the "close" button is outside the viewport.

Answer 5

Add a 'confirmation' tab last, after 'submit' (and change 'submit' text to 'summary'), so the user knows there's another section to go before they're done. It's odd for user to be on the last step in tabbed checkouts, but not be done.

Answer 6

You should consider that your checkout funnel is too long. ( so many steps in your progress bar. Think about combining or eliminating of some steps ) , this may scary users + too many opportunities for user to leave funnel w/o converting.

Answer 7

Your page gives everything equal weighting, and this is why it looks like a summary page - your instincts are correct. Pick some stuff to highlight, such as what they have bought and how much.

The summary information you have here is good. My previous user testing has shown that customers really do read it and use it for correction. For that reason I don't think it's that important that you ask them to 'make sure it is correct' - because they are likely to read it anyway. You can downplay this info, and highlight instead what they are paying for and how much it is.

Use the word 'Pay' or similar, rather than the generic 'Submit information'

Answer 8

Not a full answer, but your approach #1 is wrong, as you likely guessed.

Bank of America has a similar page when transferring money between accounts or to a friend's account. You pick the from account, the to account, the total amount, the date of the transfer, then hit next. Then you're on the "review everything" page. Once you click "complete transfer", then it starts the actual transfer.

I have, on several occasions, mistakenly thought I was finished on that final page, then wondered why my money didn't transfer. I always notice it because the next thing I do is check my account to make sure the transfer shows in my payment log, but I can definitely see people making the same mistake, especially on a website they don't purchase from often. Since you don't immediately process payment, they don't even have the option of checking their account balance to ensure the payment went through, but if they were that fastidious, they probably would have waited for a payment confirmation page to print or save anyways, then realized why they didn't have one yet.

Answer 9

Is there a very good reason why you are putting the confirmation page after the payment details page?

Normally, one confirms their email address and shipping details, followed by the payment details (card numbers have checksums to guard against typos, negating any need for additional validation). Furthermore, most banks require some form of 2-factor authentication when placing a hold on a card, which would fail if the user has typoed their card number in a way that results in a valid checksum.

If the payment step is turned into the final step, the problem is solved, as the user expects to pay and would not consider the process complete until they have paid. An additional benefit is that the user would not need to be warned (as you have done in your payment details page) about the (nonexistent) risk of being double-charged if the purchase process is interrupted.

Answer 10

I would also suggest you make the box red rather than green. Green gives off the feeling it is completed successfully, IMO red would imply more action is required.

Answer 11

I created a simple mockup that might be able to explain the approach better. I've seen this done in mobile alot where the rest of the screen gets an overlay but the one action that you can take is the only clickable item. There is also a cancel option to go back to the previous view. I like this as it takes the guesswork out of a busy modal and gives you an easy out as well.