A Way Back

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

• 
  # R.Bhavesh
  says on September 16

  Bravo. Like you said, no solution is without issues and I am sure critics are coming your way to argue on this.

  But I salute your efforts. You are constantly coming up with new things, ideas and most of all, you keep trying. Kudos and keep it up bro.

• 
  # Ben
  says on September 16

  What happens if you have a space (*) in your password?

  (*) Replace space with any character, since passwords shouldn’t really restrict users to character sets. Thats how we end up with weak password.

• 
  # Amrinder
  says on September 16

  @Bhavesh: Thanks.

  @Ben: After first space character is met it will start encrypting other characters (even space) as password till user is finished.

• 
  # shivekkhurana
  says on September 16

  I like it.

• 
  # James Duncombe
  says on September 21

  I like this idea. I guess the only concern would be the space in the password brought up by Ben.

  Still, I reckon you’ve raised a good point with this!

• 
  # Amrinder
  says on September 21

  @James: I’ve answered Ben’s concern in my last comment. Didn’t I?

• 
  # Raghav
  says on September 21

  Nice…I like the way you think..Good approach.

• 
  # Darla Brown
  says on September 22

  This would definitely be helpful on smartphones – when logging into a web page or app. Every touch/keystroke/tab counts and makes it simpler for the user.

• 
  # Michael Katz
  says on September 22

  Love this concept. It just makes sense…
  @Darla: I have to agree with you here. This login form is exactly what smartphones need. It should be the smartphone login standard!

• 
  # Chris Lorenz
  says on September 22

  I think you are on to something. Recently I have played with a similar form. One input for both username and password, the only difference is you press enter to submit each field seperately.

  Enter username -> hit enter -> field fades in/fades out -> username presented above field via ajax -> enter password -> hit enter -> logged in.

  With correct feedback during the process I think it could be very easy for users to understand. Then again you know what they say about assuming. 🙂

  Thanks for sharing, it’s nice to see people try something new.

• 
  # Baxter
  says on September 22

  One suggestion: make tab AND space advance to password. For some people, tab is just second nature, and I’m not seeing any reason both couldn’t work.

• 
  # Tomáš Bedřich
  says on September 23

  I think it isn’t generally bad idea, but it wants some improvements. The biggest problem is, that browsers are saving usernames with passwords and IMHO users use this function very often. You would have to play with some hidden fields or something similar to keep this functionality working.
  Personally, I love the idea of @Chris but unfortunately I have too conservative customers to try it.

• 
  # Gina
  says on September 23

  Wow. This one looks great. And this is great idea.

• 
  # mick
  says on October 05

  I like it but I’m not sure about the behavior: is the password supposed to be “pushed” to the right while you type the username?

• 
  # mick
  says on October 05

  Also, I know I’m not that good with CSS 🙂 but what trick would you use to have two colors in the same input field?

• 
  # Amrinder
  says on October 05

  I’m glad you guys like the idea.

  @mick: Yes, password will be pushed to right while typing. About colors, this is just an idea.I think someone who’s good with jQuery can handle that.

• 
  # Simon White
  says on October 19

  Good idea, but careful with security.

  Finding a valid username could be made easier if you get a hint when a username is incorrect.

  Letting a user know that the username is valid, but the password is incorrect, means they now have found a valid username.

  Also, if it really is just one field, you can have issues with form submission which expects two fields, one for username one for password.

  From a design point of view it could be replaced with two fields aligned horizontally, tab between them would be more intuitive than two fields one below the other.

• 
  # Laurent
  says on October 19

  Sounds like a really good idea. However, do you have any idea on how to set this up, from a technical poiint of view?

• 
  # Michael
  says on October 20

  The main problem in my opinion is the normal guy. I see many people are stressed up with doing normal stuff on the web, which they are new to.

  So you got a nice idear, but i donw belive it will get further so common.

• 
  # Erhan Karadeniz
  says on October 20

  Wouldn’t it be easier to position a second input in the main input, while the second input is used only for the password?

• 
  # Janis
  says on October 23

  It actually looks and works like there are two inputs without space between them.

• 
  # cooljaz124
  says on October 23

  Yup – its a nice concept for us to dream about.

  Without loosing focus – entering username and password would be nice if thats implemented 🙂

• 
  # myuceel
  says on October 23

  Lets say, when you enter your credentials while your not so close friend is near. He can sure see your password in case of a problem about your space key. I mean, most of people writes while they r looking keyboard. They notice missing character(s) at the end of the writing. Space is most used key and it has big potential to have issue. Hiding all characters? it has also problems.

• 
  # Meera
  says on October 23

  Accessibility implications?

• 
  # Adrian
  says on October 23

  My main suggestion would be to make the password go first. While it doesn’t make follow the convention that we’ve been using, my main concern is forgetting to press space to switch to the password, thus revealing some/all of your password (depending on when you realize you didn’t hit space).

  Interesting concept though.

• 
  # kilinkis
  says on October 23

  i like it too
  dunno if ill use it
  but i like it 🙂

• 
  # Gerry
  says on October 23

  Might have promise on mobile devices as there’s obviously less space available as Darla pointed out. But I’ve doubts about its usability and how it would be best implemented code-wise as other posts have mentioned. Still, a very innovative idea…would be great to see you move forward with this…keep us posted! 🙂

• 
  # kaeff
  says on October 24

  Interesting idea. I think it needs a real-world example to prove the benefits. As the two boxes-solution is spreat throughoutly, I assume most users are already used to it. So re-education may be needed, which may not be a good idea. In your example, you show this by adding an explanation, so you may be already assuming that it’s not intuitive for some.

  As for security concerns, I’d just implement it using two input fields, so there’s nothing new on this side. It would also be compatible to the browser’s password storages.

• 
  # James
  says on October 24

  I like this as a bit of abstract thinking to get round a problem.

  Unfortunately, looking at the potential drawbacks, I’m not 100% convinced having a name and password field separately is actually a problem that needs solving.

  Interesting concept though, I’d love to see a working demo in action!

• 
  # insane.dreamer
  says on October 24

  Nice out-of-the-box thinking! However, I think it’s potentially problematic for the user without much perceived benefit. Mostly though, I think sites should avoid requiring users to have a username/password unique to that site and instead support openID, Twitter, FB Connect, Google, etc. It’s frustrating for a user to have a name/password for every site (and yes, I know there are management tools like 1Password). Then, the site can have a single login input box because all they need is the username, not the password.

• 
  # Thiago
  says on October 24

  Isn’t a good idea. This solutions makes users previous experiences with login forms useless in exchange of some space economy. Errors will increase for no clear reasons to the user.

  Informing which field is wrong can be a good design idea, but offers a silly security flaw exposure.

  I can’t see clear advantages in this approach.

• 
  # David
  says on October 24

  If it breaks Mac OS X Keychain, I’m out.

• 
  # Henrique
  says on October 24

  This is a case where, by trying to simplify something that is already simple, you end with a more complex solution.

  Notice how you need to put a help text explaining that the user has to type with a space in between. If you had two separate fields, the recognition would be automatic. Any benefit you claim to exist by not interrupting typing will be diminished by the frustration of not understanding what’s needed, then stopping to read the help text, and then trying again.

  Not mention that you need to hack this interface as it doesn’t map cleanly to the data layer and backend.

  Why complicate what’s already simple?

• 
  # illogical42
  says on October 24

  I love it when someone challenges the “obvious”, so kudos for taking up this effort. And I can see this a viable solution for mobile devices.

  But in every such challenge there has to be a devil’s advocate, and you’ve invited us to be just that 🙂

  So, without much ado: “Can you please clarify what interaction advantage you want to achieve? Do you want a change the visual part (with less inputfields thus more screen estate), the functional part (space replaces tab) or both?”

  For the visual part, a login screen is already limited to 2, maybe 3 fields. 2-3 fields are not very distracting or difficult for users. Mixing fields up might even add cognitive arousal to users who expect the 2 original fields! Thus any functional advantage you try to achieve (faster entry) might be hampered.

  Functionally, there are a number of things you might want to consider:
  1) How about user names with spaces, eventually combined with pass sentences instead of passwords. Where do you split between the login name and password? I see a regular expression challenge coming on.
  2) Security – this one has already been mentioned by Simon White. But that is “easily” solvable with a more generic error message and an all * inputfield like current password fields.
  3) Practical 1: what if my spacebar isn’t working properly, and it either places 2 or 3 spaces if I hit it hard – there’s no mousemove to support me here. I think regular expressions can help you here.
  4) Practical 2: you have to explain there’s no mousemove possible here. My mum & others still use the mouse for everything, and are unaware of shortcut keys. How are they educated? That requires an explanation, ergo text that needs to be read. That in turns costs time, plus there’s a lot of people that don’t speak the language you just happened to choose. Do you want to exclude potential customers? I guess not.

  Now I’m curious what further posts suggest/advice 🙂

• 
  # Colin
  says on October 24

  I personally don’t see many benefits. The single box in your example isn’t much smaller than two separate username/password input boxes. Once you add the text explaining how people should use the login box, you’re actually behind on space.

  Also, needing text to explain how to do something is not ideal. Think of doors that say push on one side (with a flat plate) and pull on the other (with a handle). If you put a handle on the ‘push’ side, people will try and pull on it. After a confused moment, they see the push sign and push the door open.

  As for use with mobile devices, mobile safari has buttons to move between inputs. I’m not sure about other mobile browsers (never used an Android or Blackberry device for very long). It may be a time saver on some devices, but the same time could be saved by focusing the password field when the spacebar is pressed.

  Then we come to the fact that it requires Javascript. This isn’t a major point, but if the primary motivation is space saving, won’t this mean the design is further out of whack for those browsing with JS disabled or using NoScript or similar.

  Lastly, on one of the sites I work on in my spare time, spaces are allowed in login names. As such, this will never be the standard across all sites. I say avoid confusing the web some more.

  Whew, that all came out quite negative. Basically, interesting idea, but no.

• 
  # Raymond Crandall
  says on October 24

  This is really cool. I might try to implement my own version just to see if I can notice anything useful to share. If I do I will give credit where due and also notify you in case you want to compare ideas.

• 
  # Ninad Raval
  says on October 24

  I think signup forms must die too. I take a lot of effort when designing form to make sure I reduce the number of field that a user must get past. I appreciate the thought here..

  However, I see a few concerns here and cant see any possible solutions in the limited time i have thought about this.

  * No way to save usernames, if we try and so that in this model, it get more confusion, user has to start by typing a space. Not conventional.

  * Usually websites store usernames (amazon etc) and expect users only to enter a password.

  * As already pointed out, I think communicating where the error is cn get tricky and if one part of the information is correct, entering the rest can get painful as user is expected to place the cursor accurately and start typing.

  I think there are other opportunities to reduce the form size which I suggest like having a single name field (given context) and single password field. I think login is more of a passive effort which people dont see as too much effort, as compared to say a signup form.

• 
  # Brandon S. Adkins
  says on October 24

  While I believe it is a good exercise to think outside of the box, I agree with the other comments here in regards to usability, expectations, accessibility, and the ability to implement something. I appreciate the amount of thinking and time you’ve put into this though. I don’t want to discredit the act of thinking and brainstorming.

  A two-input login form is simple enough. Minimalism is a trend, and one I often enjoy. However, things can be reduced past the point of simplicity, in turn, making them more complex.

  It is nearly a standard for login forms to have two input fields. Because of this, it is a wide expectation of users. Implementing this would cause more confusion and user error, without any true benefit (negligible screen real estate). A big part of usability is reducing confusion and the potential for user error. When we start simplifying for aesthetic’s sake, we encroach on the usability of the thing we’re attempting to simplify.

  I’m not deeply versed on web accessibility, but I know enough to realize that this could cause some problems, because it’s so unconventional. Browsers would actually have to change the way they think about inputs, and it’s possible that the HTML spec would have to change to adapt – none of which I see happening. Lastly, that relates to the implementation, which without heavy javascript or “faking it” with two actual fields side by side, is nearly impossible. The fact that one part of the field is obscured while the other isn’t seems to be prone to confusion. It’s also very possible that we’d be sacrificing too much security trying to implement a model such as this.

  Nevertheless, the fact that we’re thinking about this and that a discussion has started, is a good thing. Thanks for the article.

• 
  # Scott
  says on October 24

  Certainly an interesting idea but I don’t think it’s usable, nor is there is no real benefit.

  The space issue is bogus, because if you have enough space for one input with two placeholders (plus the button), you have the space for two fields. Or if you’re really short of space then JavaScript modal windows (a la Digg) are the way to go.

  The speed increase is a very minor. One-click sign in like OpenID (see stackoverflow.com’s implementation) is by far the easiest and best way forward.

• 
  # another Scott
  says on October 24

  I completely agree with Scott.

  Aside from the points he raised, there’s also the very real fact that while this may seem easy to understand to us, to a large majority of web users this would completely ‘break’ common ui for a login area.

  People are used to tabbing between fields. Making the space bar into the key that switches between user name and password just seems like a strange thing to do, when you could very easily style a div to look like an input area, and then place two input areas inside of it.

• 
  # Peter van Westen
  says on October 24

  I agree with Scott.

  I don’t see any advantage in this. The space issue is indeed a non-issue.

  And using a space instead of a tab… well, thats a non-issue too. It would be easier to just make a space in the username field act as a tab.

  And if it is just for the way it looks, you can make it visually look like one field pretty easily with a little css.

  So is their any gain in his one field approach? I don’t see any.

• 
  # Brandon S. Adkins
  says on October 24

  I do like the ideas of one-click sign-in processes like OpenID, mentioned by Scott above. Also, the modal windows he mentioned are another good idea.

  Both of these give you the one benefit of this proposed input form (saved space), while providing additional benefits.

• 
  # Noor
  says on October 24

  Why even keep the sign in button?! just show a “hit enter” tooltip after filling up the username and password…

• 
  # Anders Haig
  says on October 24

  Even better than enter, if you’re already mixing it up switching a [space] for a [tab], make [space][space] at the end be a submit form shortcut.

  Rationale: It’s such a big target and I’ve always got thumbs/fingers over it so it’ll be quick to hit.

• 
  # Rulian
  says on October 24

  I actually did that for a small project of mine called lettisoft, you can see it here http://www.rockstarcode.com/letti/
  didnt work with a space it worked by typing in your user and then password: password which gets encoded.

• 
  # Doc
  says on October 24

  I was going to say the exact same thing that Peter van Westen says above and so I too agree with Scott.

  I just see it as a couple float:left;’s a border: 1px solid;border-right:0px; followed by a border: 1px solid;border-left:0px; followed by a submit button.

  No need to change the [tab] function it works and its what people expect plus old people like me can still figure it all out and have our passwords saved by the browser o.O

• 
  # theillien
  says on October 24

  Not a designer or developer but this is an interesting idea.

• 
  # ⬡
  says on October 24

  Advantage: Using password managers, you need only copy a single string. Copy, paste, enter as opposed to copy, paste, tab, copy, paste, enter.

  Disadvantage: Will it be possible to log in without Javascript? While this wouldn’t be difficult to do, few seem to get this right these days. At least, the password wouldn’t be obscured (or the username would be).

• 
  # exinco
  says on October 24

  this is brilliant idea. no more pressing tab on keyboard or second mouse click.

  another issue, is this supported by remember username and password?

• 
  # John W.
  says on October 24

  @exinco you still need to press space instead of tab.

  It’s an interesting thought, but in the end it’s just that. It presents no advantages to the user, only confusion and insecurity, besides not making it any quicker. Ask yourself why login and password fields have never been visually unified like this, it’s totally counter-intuitive.

  Keep the good work, but there are better things to think about.

• 
  # Alex
  says on October 24

  People have a lot of valid negatives. Here’s one way to salvage the idea in a way that won’t confuse people and won’t interrupt already existing norms:

  Two fields, visually distinct, exactly as normal (except of course horizontally adjacent, which exists but is not the most common format). For users without javascript, or people using screen readers or what have you, this is all that people need. For people who have javascript, just make it so that once you type in the username field, the password field flattens and condenses on the right. Then when the user tabs / clicks over to the password field, the username field visually disables itself, flattens and condenses to the left, and the password field expands. This saves real estate in exactly the same way as you describe, but loses the drawbacks of mixed field input confusion.

• 
  # Vikas Vadlapatla
  says on October 24

  So as the previous users, I give you credit for the idea. It is always good to think about an idea and get feedback from people around you. You can always improve on your idea.

  I only wanted to make a few points.Please take any criticism constructively

  1. It is always hard to tell if an idea would be successful or not without testing it out with users for usability. Let the users perform two or three login tasks and see how they prefer to log in. Test the current method(2-field login) to your design and also get subjective feedback. A few measures you could use are: number of keystrokes used, time taken to complete a task.
  Subjective satisfaction is also very important especially if you are trying to get a new idea into the market.

  2. This is so similar to the classic problem of whether to have 2 entry fields for the first name and last name or just have one name entry field. I’m sure there is enough previous research done on this problem. Some of that might be applicable for your design.

  3. Instead of having the username and the password in the same field, can we have the system identify the space keystroke and automatically tab to the next field. That way, you can have two text fields and still have the same advantages you were talking about in your article.

  4. Accessibility could be an issue when you want the screen reader to identify two separate fields in one text field. Also I’ve seen blind users fill text forms and they use the Tab key extensively.

  I like the idea in general and I definitely think you should apply for a patent right away!

  P.S If Google can sell Google Instant with one reduced keystroke, you’ll be surprised what people might like in the future

• 
  # Peter van Westen
  says on October 24

  @Ales:
  “For people who have javascript, just make it so that once you type in the username field, the password field flattens and condenses on the right. Then when the user tabs / clicks over to the password field, the username field visually disables itself, flattens and condenses to the left, and the password field expands.”

  Nice idea!
  Not that I need the saved space on my site, but thought I’d just try it our.
  See it in action on: http://www.nonumber.nl

  One more thing to through into the discussion:
  Some sites accept usernames with spaces in them.

• 
  # Oliver Beattie
  says on October 24

  To me it feels a little like you’re trying to solve a problem that doesn’t exist. Just about everyone is familiar with the username/password paradigm, and honestly I’ve never seen anyone have a problem with it.

  Usernames (or email addresses, as is common) and passwords *are* two distinct pieces of data, they are not one, so why should they be presented as one? Basically, the only advantage here is that you can hit space instead of tab as far as I can see it… and the time needed to read the helper text above the input field far outweighs the time novice users who click in each field will take to do so. This seems to me like a net loss, and source of “WTFery” for everyone. Separating username and password is not some senseless convention or relic from the past, it’s the logical visual result of this authentication model.

  (I disagree with those saying that OpenID is a great login experience; for me, it’s by far the worst login experience I’ve seen. The example given [StackOverflow] caters to a very technical audience anyway, so it’s a non-issue there, but for Joe Public it’s just a constant source of confusion. This has been debated to death elsewhere, though.)

• 
  # Iain Dooley
  says on October 24

  I think that the space separated idea is probably a bit of a hindrance to usability.

  However I like some of the comments here around smartphones and 2 login fields. I know on my nokia it’s a pain to have to navigate to and then click on the password field after entering my username.

  Something that would help in that case I think would be (psuedo javascript below so as not to weird out a non-programmer audience):

  username.onblur = setFocus

  function setFocus
  —-if user is not empty and password is empty
  ——–password.focus()

  So basically as soon as soon as the username field loses focus, if a password has not been entered yet but a username has, give focus to the password field.

• 
  # Stuart
  says on October 24

  Nice idea – I think ultimately if it suits the user and will improve usability it will be taken up very quickly and become a success. Most user-centric ideas designed to improve usability are a good thing – so nice one…

• 
  # Vijay Dev
  says on October 24

  What about space in usernames?

• 
  # Massimo Nastasi
  says on October 24

  yes, nice idea.

• 
  # Ben Jacob
  says on October 24

  Cool and unique idea..!
  and very impressive since it do not say… “The Password or Username do not match” even if there is only one visible form…

• 
  # Patrick
  says on October 24

  https://loom.cc/ uses only a passphrase, with no user name. That’s because users are not identifying themselves, they are identifying a wallet. The passphrase simply leads the user to a wallet.

• 
  # Tomo
  says on October 24

  A very iluminating idea.
  But we can only rant of its actual usefulness until we see A/B tests.. 🙂

• 
  # Archit
  says on October 24

  This might be a “revolution”!

• 
  # Anthony
  says on October 24

  I really like the possibilities this opens up. Maybe username/password isn’t the ideal use case, but it could be helpful for address entry. Personally, I hate scrolling down a looooooooong dropdown to select “United States”. Also, to speak to Luke’s point regarding what time is saved switching from Tab to Spacebar, my experience in our focus group testing is that 64% of “average” users still point and click to enter each field instead of Tabbing between fields. Food for thought.

• 
  # Masey
  says on October 24

  Love the concept, but as you know, UI designers are always having to design for the lowest common denominator when it comes to intelligence, and I think this would be too much for some. Thoughts?

• 
  # Doug Whitney
  says on October 24

  As others mentioned, stuffing two pieces of input into one field doesn’t seem like the most accessible approach. The fact that there are two separate error messages on different parts of the data suggest that it really should be two fields.

  There’s also a security benefit to treating the fields separately. If this were widely adopted users would come to see their login as a single piece information, increasing the likelihood they would reuse the same login string on other sites. Granted a lot of people already do this but design patterns shouldn’t encourage it.

• 
  # Ronald
  says on October 24

  actually, the different message for “your username is not corrected” / “password is not correct” should be avoided
  (security issue),, better to go with “that combination of username/password was not correct” (will not give away info if the username exists or not)

  one headache less 🙂

  i like the idea, my only concern is “does the everyday non-technical user get it?”…

• 
  # Nick
  says on October 24

  Just as a point, there are no tabs on mobile device virtual keyboards for the most part. But there are spaces…. Saves me a finger click

• 
  # Joberror
  says on October 24

  Nice IDEA!
  I thought the best option for this solution might be using two different input fields(text & hidden) and placing it side by side using CSS. For general Functionality, SPACE key will be best for moving to the password field. jQuery events will be more useful here.

  And

  Ronald make some sense about the Hint on Username and Password Field.

• 
  # Arturo
  says on October 25

  I think it’s very clever! though some people will find it confusing at first glance, because they are used to the other web forms!

• 
  # Moe
  says on October 25

  It’s a security issue to tell people that they’ve entered an invalid username. Then they can enumerate the valid usernames.

• 
  # diegomonzon
  says on October 25

  Very nice idea. The only problem I see is that people are not familiar with that. Every body should use it

• 
  # Matthew L.
  says on October 25

  Brilliant. Would love to see this on popular blogs and forums, as it’s far more untuitive.

• 
  # Michael
  says on October 25

  My suggestion would be to keep two fields, but the moment you type a valid / recognized user name, the form automatically pushes the focus to the password field. This way, the user needn’t hit tab or click their mouse in the new field. This would shave time without forcing users to understand a new form paradigm.

• 
  # Oliver Gassner
  says on October 25

  Just yesterday i Bad a user With a space in the username, WordPress allows this. They failed the login cause they repeatedly omitted the space.

• 
  # Lilucc
  says on October 25

  I really like it!! It’s all about efficiency!!!
  I think this would really work and is not like it’s gonna cause a big traumatizing impact on users, Changes are good, and in this case, great!!! good idea!!! Hope we could all use it soon!!

• 
  # Haruspex
  says on October 25

  This doesn’t save time or effort. Pressing the TAB key takes just as much time as pressing the SPACEBAR, and yet you still get the nicely separated username and password boxes with proper password masking built-in to the browser.

  This is not a good solution for simplifying the standard login system.

• 
  # Sint Smeding
  says on October 25

  You want to use one single input box to save space, but need more room to explain users how they should use this. It’s good to be critical towards standards, but this makes no sense.

• 
  # Vladimir Tsvetkov
  says on October 25

  Patric’s comment https://www.awayback.com/single-input-login-form-2/#comment-2498 is pretty close to Jef Raskin’s view on how to simplify a sign-on.

  “Users are doing more work than necessary when signing on to most systems. You first state who you are – your “handle”, “online name” or “system name” – and then you provide a password. The name presumably tells the system who you are, and the password prevents unauthorized persons from using your account.
  In fact, you’re telling the system who you are twice. All that is logically required is that you type in a password. There is no loss of system security:…”

  The Humane Interface by Jef Raskin (6-4-3 Simplified Sign-Ons)

  Overall, it looks neat, but it seems like a workaround rather than a solution.

• 
  # Adam Cogan
  says on October 25

  Nice exploration and good presentation of an idea, especially good mock-ups.

  Not enough benefits. Unfortunately it is a solution looking for a problem. If you need instructions to use, then it is not intuitive. My mum would not be able to use it.

  Adam Cogan
  rules.ssw.com.au

• 
  # xethorn
  says on October 25

  Your solution is visually appealing and easy-to-use for geeks. I’m not convinced it will make sense to the common user (in general, clickaholic). Where is he going to click to enter his password? Thus merging the fields is probably not a solution.

  The solution you’re suggesting is a visual treatment. So Vladimir’s comment is right on many points: what a user don’t like to identify himself twice. Your suggestion doesn’t solve this issue. It just brings a more complex layout, visually and in terms of interaction.

  However, I would be curious to see how a normal user can handle this treatment.

  @xethorn

• 
  # Henrik Kjelsberg
  says on October 25

  Have to agree with the neigh sayers. The fact that you have to add an explanation tells me that it’s poor usability.
  I like forms where your e-mail is your username & the button changes from send password to login, upon keypress in the password field.

• 
  # bohwaz
  says on October 25

  This is one stupid idea.

  It’s more complex, it won’t work with any password manager and it is not accessible.

  Never use this idea, please.

• 
  # Ron Kurti
  says on October 25

  A good sign that you are onto something new/creative/challenging is the discussion that it spawns. Regardless of whether this idea would work or not, you’ve managed to make a lot of people think a little bit harder about this.

  My 2 cents:

  1) This absolutely MUST be implemented with two separate input fields.

  Unless this is used for a very specific web-savvy design-slutty niche (think dribbble) it will likely fail with widespread use. You have to support auto-complete forms and people’s muscle memory to [tab] between fields. I agree with the advice to style this as one field visually but have it be actually two fields behind the scenes that are toggled with [space] or [tab].

  2) The most revolutionary idea I’ve read in this thread is to eliminate the username altogether.

  Websites should ask users for unique passcodes rather than unique username/password combinations. I am not a security expert or a mathematician so I can’t judge whether this is an equally fraud-proof system – but in theory it sounds fast and easy.

  Nice discussion.

• 
  # Jamg
  says on October 26

  It is never good to tell the user that the username or the password is wrong.

• 
  # vjk2005
  says on October 26

  Last year, I was working on this idea while creating my own a twitter client » http://j.mp/bjoRtl I used the comma as the delimiter in this format: uname,password. Dropped it halfway through implementation when Twitter announced that they are dropping support for traditional logins and going for OAuth sign-ins.

• 
  # maddy
  says on October 26

  Nice concept 🙂 love to know code behind it 😛

• 
  # Ries
  says on October 26

  that’s very cool idea

• 
  # Amrinder Sandhu
  says on October 26

  Thanks everyone for joining the conversation.

  I’m glad that people hate/like the idea and have some solid logic behind it. Being a UI designer this was just an idea that I wanted to try, and since I’m not an expert in back-end or security so not aware of side-effects.

  But I’m sure that someday someone might give it a try 🙂

  About using Password only field: What if two people have same passwords?

  About Non-Tech users: Everything that came out new took time to figure out, and if it was good user embraced it.

  ALTERNATIVE: Can we use INPUT TYPE=PASSWORD to encrypt both Username and Password and then extract Username from it at the backend?

  Thanks again.

• 
  # Aarron Walter
  says on October 26

  A single field reads as an email subscribe form. If this sort of form were placed on a page by itself users may not misinterpret, but if the goal is to slim the form so it fits in a home page, I suspect you’ll get a lot of mistaken inputs.

  It’s an innovative approach, but it’s tough to reconstruct such a familiar design pattern and corresponding mental model.

• 
  # Amrinder Sandhu
  says on October 26

  @Aarron: Honored to see you here. This is just an idea, maybe someone like you can create something more logical and practical based on this.

• 
  # Bas
  says on October 26

  Why not simply using two inputs, remove the side borders and place them pixel-perfect adjacent using CSS? You can make the second input focus when entering a space (or tab, logically) and it works when javascript is disabled.

• 
  # Bas
  says on October 26

  I forgot to mention that I really like the idea!

• 
  # sebastien brault
  says on October 27

  why is the username required to login anyway? Why isn’t one password enough? Here’s a question for you, if you’re really willing to simplify things.
  That’s my solution for all the secure systems I have built. As long as i can enforce a highly secure password, there is no need for a username.

• 
  # igazine
  says on October 27

  I’ve been experimenting with:

  – login with sounds, where the user is needed to define a sound (usually a spoken word or something) which the servers store and use her/his voice to enter later on. This method requires technologies (ie. flash) that are not widely available for example on mobile devices

  – login with images, where the user needs to drag and drop an image file from his/her computer to a “password” field. A thumbnail (to save some space and let the users use any size of image without limitation) is being generated and stored on the server at registration, later this image can be used to log in. On mobile devices or on a public computer this can be problematic of course.

  – the latter method can work with text files and other documents, however image files are more common and recognizable to the users on their computer

  – the system can also provide the user with predefined images as “passwords”

  These are just ideas of course, it seems that humanity is stuck with usernames and “123456” passwords

• 
  # Bryan Paterson
  says on October 28

  @sebastien While that’s an interesting Idea, what happens when someone tries to signup with the same password as someone who has already registered? When you display an error saying that password is already in use, now that person can login to the existing account. Sure it’s unlikely scenario but still possible.

• 
  # Myche
  says on October 28

  Interesting concept, something that could be accomplished with a little javascript and css wizardry. I like the space delineation and the tab would be easy enough to accomadate.
  I did not see the ‘password in use’ item but if it is included I do echo that concern.
  As far as browser cacheing the credentials, I have been implementing dynamic field names via code which cuts that to near zero cacheing

• 
  # Bas
  says on October 29

  @Bryan Paterson
  That’s definately not an unlikely scenario. Sebastiens method only works safely for auto-generated emails and everybody hates those.

• 
  # Jaap Vermaire
  says on October 29

  I made a prototype of the single input login form. It can be found here: http://vermaire.com/sil/

  It is using two input fields. The rest is some JS and CSS.

  Let me know what you think!

• 
  # Max
  says on October 30

  I’d rather use 2 fields visually presented as a single field. It’s easy to jump from the first field to the second by pressing TAB as well as focusing on the desired field with a mouse. This method doesn’t require re-inventing the wheel with password masking and other things, plus it would still support user names with spaces in them. I guess if you wanted to be able to jump between the fields by pressing space, you could add that via javascript.

  Good idea overall to visually simplify the process.

• 
  # Dustin Hoffman
  says on October 30

  http://recurseapp.com/single-login

• 
  # 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!