796726 - Implement revised SIM PIN visual design

Status: RESOLVED INVALID

(Firefox OS Graveyard :: Gaia::System, defect, P4)

Description

[GH to BZ]

[GitHub issue by fabi1cazenave on 2012-09-25T05:47:33Z, https://github.com/mozilla-b2g/gaia/issues/5122]
The SIM PIN unlock window is now a Settings webActivity and it looks like an application panel.

I believe it should be a System-like dialog, like the time picker, i.e. on a dark background and with large OK/Cancel buttons.

/cc @evelynhung

Comment 1

[GH to BZ]

[GitHub comment by jcarpenter on 2012-09-25T07:31:42Z]
@lco and @rafaelrebolleda Can you comment here? @evelynhung and @krupa have questions about current SIM specs.

Comment 2

[GH to BZ]

[GitHub comment by rafaelrebolleda on 2012-09-25T16:27:20Z]
Can we reuse the lock screen PIN interface in some fashion?

Comment 3

[GH to BZ]

[GitHub comment by fabi1cazenave on 2012-09-25T19:10:26Z]
I guess so. @evelynhung, would that be okay with you?

Comment 4

[GH to BZ]

[GitHub comment by evelynhung on 2012-09-26T13:08:10Z]
The main difference of lock screen PIN and SIM PIN is digit length, SIM PIN is 4 to 8 digits. and if the user fail to enter a correct SIM PIN, a PUK unlock screen is displayed with 3 input fields. (puk, new PIN, confirm new PIN)

Comment 5

[GH to BZ]

[GitHub comment by caseyyee on 2012-09-26T19:55:19Z]
Reusing the lock-screen pin entry interface makes the most sense to me.   The only thing that we'll have to adjust is the title text and visual design to fit the variability in digit length.   So rather than the 4 boxes for each digit of the pin, we could probably just use a standard input field.

@patrykdesign, thoughts?

Comment 6

[GH to BZ]

[GitHub comment by autonome on 2012-09-28T16:25:18Z]
Is there any functional piece that does not work, or is this purely about look-and-feel?

Comment 7

[GH to BZ]

[GitHub comment by autonome on 2012-09-28T16:25:41Z]
Please re-nominate if there is a bug.

Comment 8

[GH to BZ]

[GitHub comment by patrykdesign on 2012-09-28T18:59:34Z]
@caseyyee I'd opt for reusing the UI but modifying any text if needed. Unlock UI makes sense to me.

Comment 9

[Robert Kaiser]

(In reply to GH to BZ from comment #4)
> [GitHub comment by evelynhung on 2012-09-26T13:08:10Z]
> The main difference of lock screen PIN and SIM PIN is digit length, SIM PIN
> is 4 to 8 digits.

That makes me grin, as I'm used to having 5-digit lock codes (Nokia always had that requirement on their old entry-level phones and I stuck to it), I was confused when ours only allowed 4 digits. ;-)

That said, as soon as I saw the unlock screen design I immediately jumped and was "I want this for the PIN entry screen as well"!

I hope we can find some way to use the same style of design. On the Nokia N9, they did an interesting tweak with coloring the entry fields differently so that you can immediately spot which code is required if you have both activated. If you like to see that as a reference, I can make images of that and attach them here.

Comment 10

[Patryk Adamczyk [:patryk] UX]

Functions fine, needs some visual polish.

Comment 11

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Please make sure to follow the bug this one depends on if someone works on polish.

Comment 12

[Josh Carpenter [:jcarpenter]]

cc'ing Vicky for revised visual design. Current is very rough.

Comment 14

[Victoria Gerchinhoren [:vicky]]

Attachment: Visuals for the passcode screens in settings

Comment 15

[Victoria Gerchinhoren [:vicky]]

Please find attached the revised visuals for the SIM PIN entry and creation and also PassCode creation and modification.

Note that the SIM PIN unlocking is not the same as Unlocking the phone with pass code. SIM PIN happens after unlocking and can have from 4 to 8 digits, while the lock security code is used to unlock screen and has only 4.

Comment 16

[Victoria Gerchinhoren [:vicky]]

Attachment: Visuals for settings sim PIN in settings and unlocking phone

Comment 17

[Victoria Gerchinhoren [:vicky]]

Please note that SIM PIN and Passcode keyboards are like the unlocking passcode screen in the lockscreen and not the one implemented right now.

Comment 18

[Schalk Neethling [:espressive]]

Hey there Arthur, are you actively working on the implementation of this already or can I steal it? Thanks!

Comment 19

[Arthur Chen [:arthurcc][inactive after 6/30]]

Hi Schalk,
I'm working on it. It takes a little bit more time than I expect because there are some behavioral changes here. I think I can handle that, thanks!

Comment 20

[Arthur Chen [:arthurcc][inactive after 6/30]]

Hi Victoria, two things that need your confirmation:
1. I noticed that the visual feedback of entering a correct passcode has been removed from the lock screen. When setting a passcode, once the user inputs a correct passcode in the "confirm passcode" step, are we going to show any visual feedback? 
2. Since users can only input numbers, do we still need alphabet displayed on the keyboard (both in the lock screen and settings app)?

Thanks!

Comment 21

[Victoria Gerchinhoren [:vicky]]

(In reply to Arthur Chen [:arthurcc] from comment #20)
> Hi Victoria, two things that need your confirmation:
> 1. I noticed that the visual feedback of entering a correct passcode has
> been removed from the lock screen. When setting a passcode, once the user
> inputs a correct passcode in the "confirm passcode" step, are we going to
> show any visual feedback? 
> 2. Since users can only input numbers, do we still need alphabet displayed
> on the keyboard (both in the lock screen and settings app)?
> 
> Thanks!

1. when setting a passcode we better have the "create" button in the header disabeled until the user types twice the same code and that hsould be feedback enough.
2. You can remove letters from that keyboard.

Thanks!

Comment 22

[Arthur Chen [:arthurcc][inactive after 6/30]]

Victoria, 
About changing SIM PIN, we have no API of checking the current PIN, which means users have to provide current PIN, new PIN and the confirming PIN at once instead of step by step. I have two options as the following:

1. Request adding a new API of checking the current PIN from the platform side. 
2. Do the checking after users provide all information (current PIN, new PIN, and confirming PIN).

Any suggestions?

Comment 24

[Eric Pang [:epang] UX]

Arthur, what's the status of this bug? Have you received info from Victoria?

Comment 25

[Arthur Chen [:arthurcc][inactive after 6/30]]

Eric, not yet. I guess I should get the info from UX designers?

Comment 26

[Victoria Gerchinhoren [:vicky]]

Hi Arthur,
I believe having 3 imput fields and the keypad in the same screen would be really confusing, and there's no way to show errors without hiding a portion of the information if the 3 fields are sitting there. 

So, to avoid this confusion and have a clean process I recommend having the API to verify the PIN.

Comment 27

[Eric Pang [:epang] UX]

looks like the visuals have been updated for sim pin.  Closing bug..