1185777 - Make the edit login show/hide button more localization friendly

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Logins, Passwords and Form Fill, defect)

Description

[Allison Naaktgeboren :ally]

"Talking to rfeeley, he mentioned that the strings for "Show" and "Hide" can be radically different lengths in other languages so it's best to just use one string and toggle the state."

Comment 1

[Robin Andersen [:tecgirl]]

Here are some mocks I worked on to update FxA that feature an icon instead of a verb.
http://invis.io/8C3N93U4H

Comment 2

[:Margaret Leibovic]

It seems like it would be pretty easy to implement something similar to the toggle state "show" button that FxA login screen uses. Ally, can you make this a mentor bug?

Comment 3

[Allison Naaktgeboren :ally]

sure.

Comment 4

[Allison Naaktgeboren :ally]

Could I get an svg of the eye icon in Robin's mocks from someone? It does not appear to be already in our code base.

Comment 5

[Ryan Feeley [:rfeeley]]

I'm interested in running a FxA experiment with the eye instead of SHOW, but wouldn't replace SHOW unless the eye outperforms it.

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

The eye is something we talked about before but even icons have localization issues (with culture). 

Not to say we shouldn't do something but I'm going to hand off to Ryan here since this is in the FxA space. Plus, he's been doing a lot of the work here and mentioned there's room for testing. We should probably keep it consistent.

Comment 7

[:Margaret Leibovic]

I'm a bit confused... how has this bug morhphed into being about FxA? As I understand it, this bug is about the edit logins dialog.

If we're looking to update the FxA UI, we should do that in another bug, and in this bug we could focus on making the edit logins dialog consistent with the FxA UI.

The main problem we're trying to address here is the fact that "Show" and "Hide" can be different lengths in different languages, and we can easily solve that by copying the current FxA UI, which just has a selected state applied to a "Show" button.

Comment 8

[Robin Andersen [:tecgirl]]

Attachment: eye-svg.zip

Comment 9

[Ryan Feeley [:rfeeley]]

Attachment: show-password-default-on.png

Margaret, I mention FxA as an alternative to having a different word for HIDE.

On desktop we currently only show a placeholder in the password field that says SHOW. When the password field has focus, the password is unmasked. This is a minimal approach that may be too jarring for some (usability testing is underway). Some password managers offer no affordance when editing password fields (you just click the bullets and they unmask).

The more common option is to include a "[ ] Show password" checkbox underneath the passsword field. Unlike the previous option, it requires an additional click, and occupies more real estate -- the same real estate where users typically see "[ ] Remember me".

A third option is attached.

While the eye is aesthetically pleasing, IMHO it is the weakest of the affordances in terms of clarity. But I will be testing it on FxA to see if users understand it.

Comment 10

[Allison Naaktgeboren :ally]

(In reply to Anthony Lam (:antlam) from comment #6)
> The eye is something we talked about before but even icons have localization
> issues (with culture). 
> 
> Not to say we shouldn't do something but I'm going to hand off to Ryan here
> since this is in the FxA space. Plus, he's been doing a lot of the work here
> and mentioned there's room for testing. We should probably keep it
> consistent.

I think you might have gotten confused. I don't mind looking at FxA for ideas, or pushing for consistency in the product, I think both are good ideas. That said, from Ryan's comment 9, FxA is not yet settled and is testing out ideas so we shouldn't block on it. 

Let's pick something and go with it?

Most phones capable of running android have enough space for a checkbox row. I'm wary(but not opposed to) of adding more things to the password line, it's the most dense line of the aboutlogins ui and horizontal space on a phone is at a premium most of the time.

 Comment 9's attachment includes a checkbox icon in the button itself which would also work.

Comment 11

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Sorry, this is getting confusing now, let's take a step back.

We have many places in our product and FxA's that use this "hide/show" UI. It also gets used in different products.

Ally, could you post a screenshot of which UI specifically you're referring to in your original comment? We can focus on that part of the Android product and do what's best for us there.

Comment 12

[Allison Naaktgeboren :ally]

Attachment: device-2015-08-28-105941.png

Menu -> Tools -> Logins -> contextmenu "Edit Logins" -> here (screenshoot). This is named the "Edit Login" page

The "Show" text flips to hide when the password is visible.

Comment 13

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Ok this is clearing up for me now. 

Just focusing on that box, I actually think we just need to fix the width of that button. Regardless of the string/copy inside, it should stay the same size and truncate itself (not unlike the current Sync sign up via mobile).

As for dimensions. 80dp (or px) wide, fill with #5F6368. Text will stay centered, white.

Btw, I'm also seeing in your screenshot that the header background behind the "youlookfab.com" title is white? that header should always be #F5F5F5 :) can we fix that?

Let me know how those work for you :D

Comment 14

[Allison Naaktgeboren :ally]

(In reply to Anthony Lam (:antlam) from comment #13)
> Ok this is clearing up for me now. 
> 
> Just focusing on that box, I actually think we just need to fix the width of
> that button. Regardless of the string/copy inside, it should stay the same
> size and truncate itself (not unlike the current Sync sign up via mobile).
> 
> As for dimensions. 80dp (or px) wide, fill with #5F6368. Text will stay
> centered, white.

Do you mean 80px for the button itself? Or the the password part?
 
> 
> Btw, I'm also seeing in your screenshot that the header background behind
> the "youlookfab.com" title is white? that header should always be #F5F5F5 :)
> can we fix that?
> 

As long as it goes in its own bug, yes.  Now bug 1200299. I added you to the cc list

> Let me know how those work for you :D

Comment 15

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Allison Naaktgeboren please NEEDINFO? :ally from comment #14)
> (In reply to Anthony Lam (:antlam) from comment #13)
> > Ok this is clearing up for me now. 
> > 
> > Just focusing on that box, I actually think we just need to fix the width of
> > that button. Regardless of the string/copy inside, it should stay the same
> > size and truncate itself (not unlike the current Sync sign up via mobile).
> > 
> > As for dimensions. 80dp (or px) wide, fill with #5F6368. Text will stay
> > centered, white.
> 
> Do you mean 80px for the button itself? Or the the password part?

The show/hide button.

Comment 16

[Ryan Feeley [:rfeeley]]

Update: We're going with a more conventional "show password" checkbox for the login manager in desktop. https://bugzilla.mozilla.org/show_bug.cgi?id=1217134

The "show" affordance you see in Nightly worked for most users when we tested it, but some users didn't see the "Show" and we need to make it more explicit.

Comment 17

[mgsudhanva]

Is this taken , i would like to work on this !

Comment 18

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.