Single input login form

While designing login page for Intel, I had an opportunity to think about reducing login inputs with intentions of making things simple. Though the login form is already simple with just few inputs, I was thinking if they can be further reduced. I believe, yes.

One input box for both username and password?

I believe a single input accepting both username and password can work. Following are the minor advantages:

  • It saves space of an extra input field
  • It might save little bit of time (may not be so in the beginning :) )

At first it might be confusing for users to enter both username and password in one input box separated just by a space (character). But I think this happens with most of the things seen for the first time. So there is no harm in trying. Is there?

Discussion with Web Form Design Master

I even dared to ask Web form design Master – Luke Wroblewski – about my idea:

Me(@awayback): Single input Login form: Enter your username and password (separated by a space) and press enter/return to Sign In. @lukew Thoughts please. [-link-]

Luke Wroblewski (@lukew): @awayback potential advantage is… Replacing one character (tab) for another (space)? [-link-]

Me: @lukew but space is commonly used in typing plus there is no shift of focus but constant typing… [-link-]

Luke Wroblewski: @awayback login forms should trigger on return in the last field (if coded right). Maybe there’s some advantage to your method… not sure [-link-]

Me: @lukew Will write more about its advantages and different cases at http://awayback.com and let you know more about what I think. Thanks. [-link-]

Let’s do it

After last tweet with Luke, I thought of thinking more about it and post about my idea as promised. Following are the rough designs of what I think:

First impression

Username entered

  • Sign In button is disabled when user focus on Input box.
  • While Username is being entered Password label (in faded state) is still there to remind user about entering password in same field separated by space.

Username along with Password

  • Once user has entered space (character) which marks the beginning of password the characters will get converted to dots (input type for password) automatically and the Sign In button is enabled.

Wrong Password

  • An error message showing incorrect password is displayed and “Forgot your…” text gets highlighted and reduces to just “Forgot your password?”
  • The Sign In button goes in disabled state.

Wrong Username

  • Wrong Username follows the same pattern as that of Wrong Password above but with “Forgot your username?” text.

No solution is without issues of its own but things can be refined. Similarly, I believe if this single-input-login-form has some potential, fellow designers out there will give it a thought and comment if they find it somewhat interesting. Let’s see how far it goes.

114 Comments

Add your comment


  • # Paul de Vries
    says on November 01

    Lovely out of the box thinking, but I agree that you are trying to make something simpler but in fact you’re making it more complex.

    Also most of the examples are Obstructive javascript and will not work until javascript is enabled. Forms should always be unobstructed.

    One example even showed the password unencrypted. A big NO-NO, Jaap Vermaire.


  • # srcnix
    says on November 03

    I think this is a great idea and may have to write about the concept.

    The issue here is nobody likes change but from a stylish, functionality point of view I personally prefer this concept over entering your username, tabbing over to the password field and entering your password.

    Shaving of seconds is always appreciated by avid web users.


  • # Amrinder
    says on November 03

    @Dustin Hoffman: Great Job and execution. I really like it.

    @srcnix: It’s all about thinking about new and different stuff and hope that it will lead to something more interesting and feasible. There might be hundreds of issues that may stop this idea to work but there might also be some other way that makes it work. :)


  • # petero
    says on November 10

    How about this:

    [Username]
    when they type their user name you append |
    eg
    tomdickens@gmael.com| [password]

    In this way if using cookies the user gets presented with

    tomdickens@gmal.com| [password]
    i.e… all they need do is tyoe their password.
    the site cleanly shows that they are remembered
    BUT there is still the requirememnt to match proper PSW.


  • # Pritam Pebam
    says on November 13

    Nice Idea, I also have implemented the same concept, but with an ‘@’ instead of an space. So the input string will be like ‘username@password’.

    Check out this link http://stackoverflow.com/questions/3861118/formating-textfield-input

    When I posted this Q, my intention was this only. If you check the comments at my Question there, you’ll find a “Zabba” pointing out “What if a user pastes the string from a clipboard?”

    And yes, he is correct. Right now I trying to figure out how to mask the password part from the string!!


  • # Dr. Azrael Tod
    says on November 16

    uhm… what?

    needs JS (no, not everyone has this enabled)
    can’t use browser-password-field (yeah.. standards are useless anyway)
    security is b0rken
    breaks how mobile browsers normaly would handle this
    breaks password-saving-features in browsers

    i hate it if someone has to change things just for the sake of changing things. You didn’t make a single step better, you just create a new version that the user would have to lern too.


  • # Henk
    says on November 17

    Keep in mind that having separate “wrong username” and “wrong password” messages is a security risk, though: getting a “wrong password” message means that the user you just entered does, indeed, exist – valuable information to a hacker!


  • # Maria Manoela Porto
    says on November 18

    I like it but right now I don’t think most clients will want that on their pages. I don’t think the final user is ready to that sort of modification when most of them are still working on memorizing all usernames and passwords…. I see the final user – not the designer, the web developer – but “my uncle Joe”, “my grandma”, having trouble to get basic steps. Yes, it is nice but to pratical. Final user knows he has to put his username and his password in its fields and that’s it. It is already too much for them.


  • # Alex
    says on November 18

    is this like a proposition for new type of input field or?

    if you need Javascript forget it
    if you are proposing new HTML5 input field standarad forget it

    just being real, even thou I like direction of your proposition, maybe not the use


  • # Tony Aslett
    says on November 18

    If you only want one login field, why not enforce unique passwords and just have a password field.
    You could then look up the user name.


  • # Johan
    says on November 21

    I really liked the visual part of having just one input field. But actually doing this using one input fields would cause to much problems. So instead doing it using two input fields faking the “one input field” fielding seems like the best solution.

    I wrote a small jQuery plugin doing this, http://stenehall.github.com/jQuery.magiclogin/. It will still allow users to TAB to the password but SPACE will also work. At the same time this will work without javascript enabled.

    Removing the username completely allowing users to sign in using just a password sounds like a very bad idea. It would be extremely insecure to let the users chose/change their passwords since they might stumble upon a different users password. So the passwords would need to be generated. This means that they’ll be harder to memorize and more likely to be forgotten. They would also need to be very different to eliminate the situation where a user types his/her password wrong and accidentally gets a different users account.


  • # ondrej
    says on April 05

    copy & paste of both username and password is next to impossible due to the need of inserting space character. around me lot of users copy & paste their usernames and passwords from some password managers or just text files.


  • # James Sanson
    says on May 03

    I am laughing so hard right, but you are so right. Why do we need two fields. One will do it. We do not need two section in one field. It does not need to hide the password, but it can. You register and you create a username and a password. Then the system allows them to work together in one field XYZ123, and if you want to change your password you do it and the system will know, so then it would be XYZ324. One must be a constant and one can be a variable. My thought is why do we need a username at all? When I was a kid we had the kewlest locks anybody could hack them, but still it only had set of numbers, which either you create or it came with it when you bought the lock. The point is once you sign up with XYZ site and you create your unique password – aka combo then nobody else can have it. It might have to be 9 characters long or something, but it would be yours. Anyhow, you are clearly on to something.


  • # Charles Richey
    says on August 22

    I think it may be too simple. People absolutley love having their tech, but not everyone knows how to use it. I can see people getting confused, looking for the password box even though it states where to put in the password!