The default bug view has changed. See this FAQ.

PIN screen UX changes

RESOLVED FIXED in 2013-04-11

Status

Marketplace
Payments/Refunds
P2
normal
RESOLVED FIXED
4 years ago
4 years ago

People

(Reporter: krupa, Assigned: scolville)

Tracking

2013-04-11
Points:
---
Dependency tree / graph

Details

(Whiteboard: p=1)

Attachments

(2 attachments)

(Reporter)

Description

4 years ago
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.
Priority: -- → P5
Whiteboard: p= → p=1
Target Milestone: 2013-02-28 → 2013-03-14
Target Milestone: 2013-03-14 → 2013-03-21

Comment 1

4 years ago
We have some new designs for the pin codes Payments for Firefox OS! 

FLOWS
Keynote: https://www.dropbox.com/s/gg0q6cp0833ike6/Marketplace_Payments_Flows_PinCodes_031813.key
PDF: https://www.dropbox.com/s/rjt9bqa4piso6hf/Marketplace_Payments_Flows_PinCodes_031813.pdf

VISUAL DESIGN SPEC (CSS to make your life easier)
Keynote: https://www.dropbox.com/s/nloqpw1t9lffsig/Marketplace_Payments_Flows_Spec_031313.key
PDF: https://www.dropbox.com/s/m38d7bfpnwoirmy/Marketplace_Payments_Flows_Spec_031313.pdf

ASSETS (buttons, spinners and stuff)
https://www.dropbox.com/sh/y5xiyftzti70aru/c6oTmFIiQt
Assignee: nobody → scolville
Priority: P5 → P2
Blocks: 848525
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

Comment 3

4 years ago
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. 

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Confirmation
(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.
> http://cl.ly/image/131n2h2q282s

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.
Status: NEW → ASSIGNED
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

4 years ago
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.
Target Milestone: 2013-03-21 → 2013-04-04

Comment 8

4 years ago
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?
Flags: needinfo?(mhanratty)
Target Milestone: 2013-04-04 → ---

Comment 10

4 years ago
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?
Flags: needinfo?(mhanratty)
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?
Flags: needinfo?
Stuart, this bug 856845 may answer that question for you.
Flags: needinfo?
Depends on: 861131
No longer depends on: 861131
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)
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → 2013-04-11
You need to log in before you can comment on or make changes to this bug.