UX input for "Waiting for payment to complete.." screen

VERIFIED FIXED in 2013-06-06

Status

VERIFIED FIXED
6 years ago
5 years ago

People

(Reporter: krupa.mozbugs, Assigned: mhanratty)

Tracking

2013-06-06
Points:
---

Details

Attachments

(5 attachments)

(Reporter)

Description

6 years ago
Created attachment 741393 [details]
screenshot

steps to reproduce:
1. Click the purchase button for a paid app


observed behavior:
TrustedUI loads with the screen "Waiting for payments to complete.." screen which is currently the loading screen. See screenshot.

This page needs some UX love.
in theory no one will ever see this screen. It usually means there is an error. We should also add some troubleshooting tips on this screen. We should at least add a button like "retry payment"
(Assignee)

Comment 2

6 years ago
Any loading or progress page should follow the visual spec found in this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=856827#c0

Just to clarify, is this when the user clicks the "Buy" button on a confirm payment screen or when the user clicks the "$.99" button on a Marketplace screen?
(Assignee)

Comment 3

6 years ago
Created attachment 741864 [details]
Payment failure error screen

Kumar, this is the error screen I came up with if a payment fails. I'm interested in your idea of adding tips/allow the user to retry the payment. Does any data get passed to us regarding what the possible issue is? For example, do we know if the user is no longer on wifi/data, if there is a server error, etc.? It would be good if we could have specific error messages for specific conditions and whether the user should retry immediately, wait awhile, or take some other action.
It's not a failure screen, it's more of a loading screen. It means that the mozilla server has not yet made a connection to the Bango API so it is waiting to proceed to Bango. It would happen right after the user enters a PIN and right before she sees the Buy button on Bango.

We may have some clues on the Mozilla server/db about what is causing the wait but I can't think of any concrete troubleshooting tips to tell the user right now.

As for retrying the purchase, this is simple to do. In some cases it might solve the problem (for example, if Mozilla's servers are overloaded). We should definitely provide a retry button. The page should also timeout after waiting too long.
(Assignee)

Comment 5

6 years ago
Created attachment 741901 [details]
Proposed progress screen

Here's my proposal for a loading screen when user is moving from pin to confirm payment screen
(Assignee)

Comment 6

6 years ago
Created attachment 741902 [details]
Proposed error message when system times out

Kumar, how do you like this for an error message when the system times out? If they click "Retry" we will show the progress screen again. If they click "Cancel" we can either 1) take them back to the screen the user was last on (in this case the pin screen) 2) close Trusted UI. 

What do you think?
I like the error message and retry screen. I like the loading screen but the message "Connecting to payments" seems too technical for the user. Could we say something like "Preparing your device to make a payment" ?
(Reporter)

Comment 8

6 years ago
(In reply to Maureen Hanratty from comment #6)
> Created attachment 741902 [details]
> Proposed error message when system times out
> 
> Kumar, how do you like this for an error message when the system times out?
> If they click "Retry" we will show the progress screen again. If they click
> "Cancel" we can either 1) take them back to the screen the user was last on
> (in this case the pin screen) 2) close Trusted UI. 
> 
> What do you think?

Can we change the copy to something like "App purchase is taking longer than expected. Try again?"
(Assignee)

Comment 9

6 years ago
(In reply to Kumar McMillan [:kumar] from comment #7)
> I like the error message and retry screen. I like the loading screen but the
> message "Connecting to payments" seems too technical for the user. Could we
> say something like "Preparing your device to make a payment" ?

I want to stick with "Connecting to Payments" if that is ok. I think the messaging let's the user know in a transparent way what is happening and why things are taking so long. Plus it is terse which is nice for translation. For what it is worth, I checked with my husband (who is a writer and not a super technical guy) and he thought it didn't sound too technical to him.
(Assignee)

Comment 10

6 years ago
(In reply to krupa raj 82[:krupa] from comment #8)
> (In reply to Maureen Hanratty from comment #6)
> > Created attachment 741902 [details]
> > Proposed error message when system times out
> > 
> > Kumar, how do you like this for an error message when the system times out?
> > If they click "Retry" we will show the progress screen again. If they click
> > "Cancel" we can either 1) take them back to the screen the user was last on
> > (in this case the pin screen) 2) close Trusted UI. 
> > 
> > What do you think?
> 
> Can we change the copy to something like "App purchase is taking longer than
> expected. Try again?"

I like "App purchase is taking longer.." as an error message for an issue after the user clicks "Buy" on the confirmation payment screen. I think to put this before the confirmation payment screen is confusing--it makes it sound like payment is processing which is not yet the case. So I will add it to the documentation for when a payment times out.
(Assignee)

Comment 11

6 years ago
Created attachment 742398 [details]
Re-write error message when system times out

Changed "Would you like to retry" to "Try again."
Thanks Maureen. Since we have the UX input I'm closing this bug. We'll implement the new screens and messages in bug 876811 and bug 876808.
Assignee: nobody → mhanratty
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → 2013-06-06
(Reporter)

Comment 13

5 years ago
we have mocks now.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.