
Tell HN: Use Pop-Up Log-In Forms and People Can't Use LastPass to Log in - kmfrk
I don't know which direction log-in UX is heading, but I need to make it clear to everyone designing a log-in page that if you are designing a log-in page, do <i>not</i> create one that pops up. Visitors who use LastPass might hate you for it.<p>For people who don't know, LastPass is, at its core, a service to store all your passwords that can be generated at random by LastPass, when people sign up. This creates a large, protected vault of log-in information. When a LastPass user encounters a log-in page, LastPass can automatically fill in the forms. The alternative would be to memorize your passwords, which, for the paranoid lot of us, are probably base-64, 32-character-long ones.<p>Let me give you an example of what happens when you use different forms. Etsy does both things which serves as a great example.<p>If I use their pop-up log-in button on the front page, this is what happens: http://i.imgur.com/x0rZZ.png. Note how none of the forms are filled out by LastPass.<p>If I use the "regular" HTML form on https://www.etsy.com/signin, this happens: http://i.imgur.com/9rtCp.png.<p>If the latter log-in is not available, I will have to click my LastPass icon, go to my vault, search for my Etsy credentials, copy them to my clipboard, and paste them into the pop-up form in order to log in.<p>But the worst is when the sign-up forms are pop-ups; now my credentials aren't saved, and you had better have a safe system for forgotten passwords, because you are bound to receive them. This is because the credentials aren't saved to LastPass, when they are in pop-up JavaScript. A royal pain in the ass.<p>I can only speak from personal experience, but for the love of everything UX, please, please, please use regular forms without any fancy JavaScript dingus, even though you just discovered jQuery for the first time.<p>With the increasing privacy concerns, LastPass users are going to grow in numbers - not dwindle - so you are going to annoy and possibly deter a lot of users inadvertently, if you don't get your log-in prompts right.
======
pixeloution
It seems like this is something you should say to last pass, rather then site
owners. Expect every site in the world to conform to a piece of software ...
or expect a piece of software to adapt to its expected use. Which one makes
more sense to you?

It would be nice if it worked, but I'm not blaming Etsy Etc.

------
premchai21
What would you recommend more specifically? In particular, whatever LastPass
is doing seems likely to be fragile unless there's consensus about how to
identify a form as one that accepts tokens (usually a username/password
combination) to authenticate an existing user, or similarly set parameters for
a new user, or change authentication tokens, or…

In the Unix world, there are various extant mechanisms for this around: PAM,
LDAP, &c. However, I haven't detected any published rough consensus for the
Web; searching for terms like “design login form common field names username
password” doesn't turn up anything obvious.

The only strong heuristic that I can think of is detecting form fields of
password type, and then distinguishing the use cases temporally based on
whether you already have tokens cached.

------
tomjen3
Honestly? File a bug at lastpass, since this is their problem.

I doubt more than a few percent of users use it which properly means that the
amount of users turned away from the wasted screenspace is much higher than
the number of people who use lastpass and site owners aren't interested.

------
1tw
1Password handles this type of login form without flinching, which suggests
LastPass could too.

As others have said, filing a bug with LastPass would seem a better option
than trying to persuade the entire web to ditch a popular sign-in method.

~~~
tzs
Most of these types, anyway. 1Password doesn't work with CNET's pop-up login
form.

------
dazzawazza
I suspect this is something to do with LastPass. 1Password has not problems
with popups as long as the form is on the page (but hidden) it's fine. It
works on twitter, not sure about etsy, I don't go there.

~~~
stevelosh
1Password works perfectly on Etsy too.

------
ashearer
This is a peeve of mine too, but as long as attention is paid to this problem,
jQuery-laden popup login forms can be built that work automatically with
password managers.

There a trick to it, though, which is to put the form in a nominally 'visible'
state at page load time, even if it happens to be visually obscured by other
elements. Autofill will happen at page load, but will only become apparent
when you make the popup div visible by bringing it to the front.

Caveat: I need to re-test this with the latest version of LastPass. However,
when I built a site using this method a few years ago, it did work across
various password managers and different browsers, which didn't happen using
the more common method of toggling the display property.

The scope of this problem is more than just LastPass. Etsy's popup fails
equally well with Safari's password manager. IIRC, Safari was the pickiest of
the browsers about how the login box was hidden, but password autofill did
work with it in the end.

------
ukdm
I have experienced this and you don't need to load your vault. I just right
click on the field, go to the lastpass entry on the menu and do copy username,
paste then the same for password.

It takes a few seconds longer, but still works. Also, saving the details of a
site is done automatically. All you lose here is a bit of ease of use. A visit
to your vault and a few clicks makes the site a new permanent entry.

------
ajennings
Your two image URLs should be swapped in your post. The first one points to
the non-popup login screenshot and the second one points to the popup login
screenshot.

Couldn't LastPass just fix this bug by giving you an option somewhere to re-
parse the page and do its auto-fill? That would seem to be much more
attainable than convincing every website to use a non-popup login system.

------
kmfrk
Clickable:

<http://etsy.com> <http://i.imgur.com/x0rZZ.png>

<https://www.etsy.com/signin> <http://i.imgur.com/9rtCp.png>

~~~
xnerdr
Are the imgur links the wrong way round?

~~~
kmfrk
They are, sorry. I ran into some formatting problems with HN, so they must
have become switched in the confusion.

------
jcnnghm
I really don't like it when I can't automatically login with LastPass. Please
name your input fields sensibly, and don't interfere too much with them.

