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.
We have some new designs for the pin codes Payments for Firefox OS!
VISUAL DESIGN SPEC (CSS to make your life easier)
ASSETS (buttons, spinners and stuff)
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. http://cl.ly/image/131n2h2q282s
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.
(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.
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.
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.
Sure, we could show the banner at the bottom of the Trusted UI just not outside of the Trusted UI edges.
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: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button
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?
The button is a standard gaia button. You can find the visual design details here: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks#Button
Michael--can you help with the other questions?
Here's the current implementation https://github.com/muffinresearch/webpay/commit/e0dae7eac31e0460d121716eb91c73bc755b1643
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?
Stuart, this bug 856845 may answer that question for you.
Here's the first cut of this: https://github.com/mozilla/webpay/commit/c7c005291dfd29e255ad5835e03a828906d197c9
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.
Another bug split out from this:
Implement full screen error UX (bug 861134)