UX Pattern: reveal the password for greater accuracy

Allow a password field to be un-cloaked to make it easier for the user to enter the password accurately. According to the experts, this is in no way any less secure than a password field.

http://scripty.walterdavisstudio.com/mask.html

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I don’t think I’ve ever seen that option before.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just saw it mentioned on A List Apart, and made this quickie example to show how to do it. Apparently Yahoo use it in some parts of their media empire, and they quote some impressive improvements in success rates with those forms. iOS already shows you the last letter you typed for some number of seconds, which can be useful, but this gives you the option to “uncloak” the entire field.

The way it works is with JavaScript, simply changing the field from a type=“password” to a type=“text” and back again on command. I used the Bootstrap framework for this layout (hand-coded) so the look and feel was fully developed there.

You could very easily do this in Freeway with a similar blodge of JavaScript in the Protaculous 2 Action. Freeway won’t build button tags, so you would do something a little different in the body of the function – the .innerHTML would change to .value everywhere you see it.

I leave this last part as an exercise for DeltaDave…

Walter

On Apr 8, 2013, at 3:31 PM, Robert B wrote:

I don’t think I’ve ever seen that option before.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Did FF developer tools not used to offer the un-cloaking option?

It may have been an Add-on.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I leave this last part as an exercise for DeltaDave…

The FW version http://www.deltadesign.co/fw_examples/walts_scripts/password-uncloaker.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nicely done! You could simplify the construction a little more by using elm.next(‘input’) rather than adding a button classname to the uncloak button, but that’s an implementation detail. This works great and looks good.

Walter

On Apr 8, 2013, at 7:12 PM, DeltaDave wrote:

I leave this last part as an exercise for DeltaDave…

The FW version http://www.deltadesign.co/fw_examples/walts_scripts/password-uncloaker.html

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nicely done!

Praise indeed from the Master!

Most of what I know I picked up from you Walter - thanks.

Note to self ‘must finish reading The Art and Science of Javascript’

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options