Automatical Button-Less Login

Question

I'm working on a project where we want to setup a button-less login form.

The idea is, if you enter your credentials correctly, you will get logged in automatically (don't have to press ENTER or click a "Login" button). For indication, you have an icon with two states:

1. The icon is a key, indicating you're locked out
2. The icon is a keyboard, indicating you're typing and the system is waiting for you to finalize typing

So the process is the following:

1. You enter your e-mail
2. You switch to the password field (indicator is a key icon)
3. You start typing, indicator switches to the keyboard icon

4. When you stop typing (after a delay of X ms) the system will attempt to login with the provided credentials

   a) If your e-mail/password combination is wrong you will get an error message saying that and indicator goes to key icon back

   b) If your combination was right, you will be logged in

The password complexity is 8 characters minimum, 1 lowercase-, 1 uppercase, and 1 special character. The system will only start attempting to log in if that complexity is given in the password field.

There will also be an icon that will expand a tooltip upon hover explaining how the system works. You can trigger the login at any time by hitting the ENTER key.

The X ms delay will be something like 500ms + the average time the user needed for 1 character (we have that time because we only start checking after the user entered at least 8 characters), so the user has enough time before the system attempts to log him in.

The maximum attempts will be set to something like 30 or 50, for people with very long passwords and an unpredictable write-styles.

Something like fail2ban will prevent brute-force attacks.

It's written in JavaScript and reacts on onKeyUp-events, so every time you press a key and release it, it will fire up an event if password complexity is reached it will trigger the login attempt. That means, if you have auto-completion in your browser enabled, you would have to enter the password field in some way (for example by pressing TAB, because the e-mail field has the focus when you load the page, which will trigger the onKeyUp event because you release it inside the password field - or by clicking inside it (and then pressing any key, of course pressing a character key will invalidate, because pressing e.g. "A" will change the password, but pressing ENTER or UP, DOWN, CTRL, etc. will work).

What do you guys think of that?

I have some code but the actual code isn't really that relevant. In pseudocode:

<Form>
   <Field 
      name="e-mail"
   />
   <Field 
      name="password"
      onKeyUp={ submitForm(); } 
   />
</Form>

attempts = 0;

function submitForm() { 
   /* set indicator icon */
   if (password == complex) {
      this.attempts = attempts;
      await setTimeout(500ms + averageKeyPressTime);
      if (this.attempts == attempts) {
         attemptLogin();
      }
   }
}

Answer 1

What problem are you trying to solve?

While the form you are proposing is certainly technically possible, it is not clear how it improves the overall user experience of logging in.

Login forms do have many faults, but the user's ability to click the button is generally not one of them.

While this design could possibly save someone the cognitive burden of clicking a button, it would likely increase that same burden because it introduces many new design patterns and interactions that the user will not be expecting. Things like the changing icon and its meaning, the lack of a visible way to interact with the form, and the constant error messages are all things a user wouldn't normally expect to deal with when all they want is to log in.

There are also matters of accessibility, autofill, password visibility, hash collisions, technical maintenance, and many more that are more or less solved for traditional login forms that you would have to deal with, to say nothing of the increased server load all those extra calls will impose.

Nevertheless, if speed of authentication is critical to your users, and clicking a traditional login button is too slow, you could go even further outside the box. Ideas like using only a passphrase, using a config file, never signing them out, or biometrics offer other alternatives (with other tradeoffs, of course).

If you already have something coded, it would be worth putting it in front of real users and seeing how they react. Whether they immediately grok what's going on or get stumped, you'll have learned more about your users, and hopefully about the root of the problem you are hoping to solve.