1014454 - [Keyboard UX update][User Story] Visual update on the number keyboard

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Keyboard, defect, P1)

Description

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

As a user, I want clear visual hints to present when I am using number keyboard for tel input or pin code. 

Acceptance:
(Follow visual spec)
For Pincode input, visual hints, like 'ABC' should appear under number '1' for better readability.
For tel input, visual hints, like 'ABC' should appear under number '1' for better readability.
and several special chars should be available, like '_', ';', etc.
For number input, we should just show the symbol panel of a plain keyboard.

Refer to p.20 of UX spec in bug 983043

Comment 1

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Hi Bruce,

I created this user bug to track the work around p.20 of keyboard ux update.
Please help refine it or create another bug if you think this is not good enough.

Thank you.

Comment 2

[Bruce Huang [:bhuang] (inactive)]

Thanks for picking this up Rudy, I added the information to the user story field above.

Comment 3

[Omega Feng [:Omega] [:馮於懋]]

Please see Bug 983043 for latest UX spec.

Comment 4

[(Inactive after June) George Duan [:gduan] [:喬智]]

Attachment: PR to master

wip

Comment 5

[(Inactive after June) George Duan [:gduan] [:喬智]]

Comment on attachment 8429206 [details] [review]
PR to master

Hi Rudy,
could you help to check this patch?
Thanks.

Comment 6

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8429206 [details] [review]
PR to master

r=me with some nits to be addressed.
George, thanks for your work.

--
Omega, could you please do the ui review?
I personally think that the bottom indicator (ABC for '1') a little bit hard to read on device like Buri, maybe we could adjust the color of it.

Comment 7

[Omega Feng [:Omega] [:馮於懋]]

Comment on attachment 8429206 [details] [review]
PR to master

@Rudy, here are some comments:
For tel, the alternative key should be ",", not "'".
In lock screen, the pin code keyboard should consist with normal pin code keyboard.
For number, it should use Symbol 1 panel (like the bug you filed). 

@Carol, I have the same feeling as Rudy mentioned in comment 6. Could you have a look on this, thanks!

Comment 8

[Carol Huang [:Carol]]

Hi George,
Please revise number keyboard layout:

1. move "1,2,3....9" up a little bit
2. make * in the center of the key
3. make the "+" bigger

Comment 9

[Carol Huang [:Carol]]

Comment on attachment 8429206 [details] [review]
PR to master

Hi George,
Please revise number keyboard layout:

1. move "1,2,3....9" up a little bit
2. make * in the center of the key
3. make the "+" bigger

Comment 10

[(Inactive after June) George Duan [:gduan] [:喬智]]

Attachment: 2014-06-13-07-04-08.png

Hi Carol,
please kindly review it.
Thanks.

Comment 11

[(Inactive after June) George Duan [:gduan] [:喬智]]

Comment on attachment 8429206 [details] [review]
PR to master

Hi Rudy,
I made some ui change for telLayout,
would you mind to take a look again?
Thanks.

Comment 12

[Carol Huang [:Carol]]

Comment on attachment 8443343 [details]
2014-06-13-07-04-08.png

 Very good! Thank you, George!

Comment 13

[Omega Feng [:Omega] [:馮於懋]]

It's a major issue in new feature. Nominating as 2.0 blocking.
The visual hints are really important for a large number of users.

Comment 14

[Jason Smith [:jsmith]]

Bruce - I need a product call here if we need this for 2.0 or not.

Comment 15

[Jason Smith [:jsmith]]

Going to followup offline on this.

Comment 16

[Stephany Wilkes]

I discussed this bug (and others like it) with Jason in IRC today. This looks like a 2.0 feature that was not correctly or fully implemented to spec, and should not ship as-is as a result (per Omega's comment #13). To that end, I am removing the blocking flag but adding the feature-b2g flag for 2.0, which it looks like this bug should have had as it was on the work list for 2.0.

If this is not correct, let me know and we can discuss making it a blocking bug if it was not indeed a feature. Thanks!

Comment 17

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Attachment: pinLayout.png

I guess we need to adjust the digit position of pin layout (used for pin code input) just as TEL layout, right?

As the attachment shows, right now the digit seems too close to the visual hint below in pin layout.

Carol, could you help confirm this?

Comment 18

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8429206 [details] [review]
PR to master

I'll clear the review flag for now since Carol is going to give us some feedback about pin layout.
Please re-flag me so that I'll get notified.
Thanks.

Comment 19

[Carol Huang [:Carol]]

Hi Rudy,
After offline discussion with George, there's some UI revise.
Please see Bug 983043 for Number pad Visual spec (on page 3).
let me know if you have any question. thanks!!

Comment 20

[howie [:howie]]

This is not committed in 2.0, removing featrue-b2g tag.

Comment 21

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Carol, thanks again for the visual update, it is very clear to me.

George, could you follow up on this issue?
Please feel free to let me know if I need to take over from here.
Thanks.

Comment 22

[(Inactive after June) George Duan [:gduan] [:喬智]]

Comment on attachment 8429206 [details] [review]
PR to master

Hi Rudy,
could you review it again?

Comment 23

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8429206 [details] [review]
PR to master

Clear the review since I don't think we should add altNote to pinLayout, as described here,
https://github.com/mozilla-b2g/gaia/pull/19672/files#discussion_r14496786

George, could you please help double confirm?
Thank you.

Comment 24

[(Inactive after June) George Duan [:gduan] [:喬智]]

Comment on attachment 8429206 [details] [review]
PR to master

Yes, you're right.
I misunderstood the spec. Please check my latest patch. Thanks.

Comment 25

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 8429206 [details] [review]
PR to master

r=me with a nit to be considered,
see https://github.com/mozilla-b2g/gaia/pull/19672/files#discussion_r14498167
Thanks for this work.

Carol,

Could you help to do ui review again for us?
Thank you very much.

Comment 26

[Carol Huang [:Carol]]

Comment on attachment 8429206 [details] [review]
PR to master

layout looks good! thank you!!! :-]

Comment 27

[(Inactive after June) George Duan [:gduan] [:喬智]]

Thank you all.
tbpl pass
https://tbpl.mozilla.org/?rev=7169a4e3a20d0c9a423bba46fa7a6e848b65f787&tree=Gaia-Try

merge to master
https://github.com/mozilla-b2g/gaia/commit/b2ee97f3f2bb968b915e5be49f5353dd69e46e73