0

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();
      }
   }
}
  • 1
    I like to check my password with the little eye icon (e.g. gmail) to make sure I won't have to type it again. Would that be possible in your design? – Aline Jul 23 at 15:55
  • The idea would be that as you type, it already tells you if it is correct or not, so you as long as it's wrong you can change or view it. – CoderPi Jul 23 at 18:27
  • This just seems like a bad idea, design for design's sake. Too many issues to fix to do something that will be more confusing than helpful. Plus it will be super CPU heavy to check the password 20 times for each attempt. – jitendragarg Aug 21 at 10:43
4

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.

  • 1
    Excellent answer. Additionally, the fact that it's tied to a key event with no submit button means my browser will automatically populate the field and leave me searching for the button to click for probably longer than it would have taken me to just complete a standard login form. – maxathousand Jul 23 at 17:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.