Last Comment Bug 842861 - PIN screen UX changes
: PIN screen UX changes
Product: Marketplace
Classification: Server Software
Component: Payments/Refunds (show other bugs)
: 1.2
: All All
P2 normal (vote)
: 2013-04-11
Assigned To: Stuart Colville [:scolville] [:muffinresearch]
Depends on:
Blocks: marketplace-payments 848525
  Show dependency treegraph
Reported: 2013-02-19 16:58 PST by krupa raj[:krupa]
Modified: 2013-04-12 10:43 PDT (History)
7 users (show)
See Also:
QA Whiteboard:
Iteration: ---
Points: ---

Failure message - full screen (464.04 KB, image/png)
2013-03-25 17:25 PDT, Maureen Hanratty
no flags Details
Disable "Continue" button when form is empty (410.24 KB, image/png)
2013-04-01 13:56 PDT, Maureen Hanratty
no flags Details

Description User image krupa raj[:krupa] 2013-02-19 16:58:55 PST
Maureen had some input regarding the styling for PIN page during payments

- Remove period from the error message "Incorrect PIN"

I'll let her add the other comments herself.
Comment 2 User image Kumar McMillan [:kumar] (needinfo all the things) 2013-03-22 14:31:25 PDT
At first I thought the full screen banner won't work but, hmm, let's just try it. It might take some CSS tricks. Stuart, can you do a quick experiment to see if the full screen banner is possible from WebPay? e.g.
Comment 3 User image Maureen Hanratty 2013-03-25 17:25:40 PDT
Created attachment 729315 [details]
Failure message - full screen

If the pin reset fails we will show a full screen (Trusted UI) error message based on Gaia's confirmation message. Keynote and pdf documents have been updated with the change.
Comment 4 User image Stuart Colville [:scolville] [:muffinresearch] 2013-03-27 10:23:39 PDT
(In reply to Kumar McMillan [:kumar] from comment #2)
> At first I thought the full screen banner won't work but, hmm, let's just
> try it. It might take some CSS tricks. Stuart, can you do a quick experiment
> to see if the full screen banner is possible from WebPay? e.g.

I've had a look at this. Doesn't look to me like it's possible just with CSS. Anything positioned outside the viewport is hidden afaict.
Comment 5 User image Kumar McMillan [:kumar] (needinfo all the things) 2013-03-27 11:03:37 PDT
ok, thanks for checking. Let's go with Maureen's alternate proposal in comment #3. Maureen, what should we do about notices that are not errors, such as "PIN reset"? Your mock-up seems to only be for errors.
Comment 6 User image Maureen Hanratty 2013-03-27 11:09:46 PDT
We still want to do confirms like "Pin reset" as a banner not as a full screen takeover (since that is super annoying). Can we just show the banner in the trusted UI? It will unfortunately hide the buttons but should only show for x seconds. We should check to see the number of seconds Gaia is currently showing their banners.
Comment 7 User image Kumar McMillan [:kumar] (needinfo all the things) 2013-03-28 08:47:41 PDT
Sure, we could show the banner at the bottom of the Trusted UI just not outside of the Trusted UI edges.
Comment 8 User image Maureen Hanratty 2013-04-01 13:56:36 PDT
Created attachment 732039 [details]
Disable "Continue" button when form is empty

Just FYI I updated the flows to show the "Continue" button disabled when the pin field is 1. empty 2. filled but with the wrong pin. This is a screenshot of what it will look like. Use the visual style used for Gaia disabled buttons:
Comment 9 User image Stuart Colville [:scolville] [:muffinresearch] 2013-04-08 10:49:37 PDT
Could you provide the spec for the disabled button?

The spec has the throbber (progress indicator) shown at ~50px where the image is 90px could you clarify the actual size it should be displayed?

There's a background image for noise - where is that used - I don't see it mentioned in the spec aside from the banner overlays - is that the only place correct?

On the second slide the "Button Area Background" has alpha, is that actually needed or could this be a solid color instead? 

This is lower priority but would it be possible to have 2x image assets for retina?
Comment 10 User image Maureen Hanratty 2013-04-08 20:51:36 PDT
The button is a standard gaia button. You can find the visual design details here:

Michael--can you help with the other questions?
Comment 11 User image Stuart Colville [:scolville] [:muffinresearch] 2013-04-10 12:37:13 PDT
Here's the current implementation

One further question, the locked pin flow (slide 38) on the payment flows shows a continue button alongside the reset button. In the branch I've implemented this by pointing continue to the reset cancellation link. 

The problem is that this doesn't mention the pin is locked for 5 mins and so you'll just see the same locked pin screen if you try before then - should the copy mention the 5min delay or should the continue button be removed?
Comment 12 User image Wraithan (Chris McDonald) [:wraithan] 2013-04-10 18:51:51 PDT
Stuart, this bug 856845 may answer that question for you.
Comment 13 User image Stuart Colville [:scolville] [:muffinresearch] 2013-04-12 04:45:58 PDT
Here's the first cut of this:

Known bits that are missing which are filed as separate bugs (please add more bugs if you spot other bits that are missing)

* Dealing with the locked pin flow as per spec (bug 856150)
* Progress overlays are still needing to be implemented (bug 861133)
* Workaround for the re-paint issue when entering pin or backspacing pin entry (bug 840117, bug 831106)
* Banner messages following actions e.g. reset (bug 861131)

A consideration is that the forgot-password link is a little difficult to click due to the limited vertical space, but let's test that out and we can always iterate.
Comment 14 User image Stuart Colville [:scolville] [:muffinresearch] 2013-04-12 04:52:00 PDT
Another bug split out from this:

Implement full screen error UX (bug 861134)

Note You need to log in before you can comment on or make changes to this bug.