Single input login form

> Mobile phones are distinctly lacking "tab" and changing input forms is usually a pain.

iPhone ALWAYS provides "next" and "previous" (input) buttons when filling web forms. On my old phone, the arrow keys did this. What phones are you imagining?

Also keep in mind the hacks needed for this as mocked up are going to be even less reliable and less testable on mobile

An alternative is to use OpenID which requires a single input login form by design.

> Also, having separate warnings for your username and password matches is a bad security practice. Best to just say "username/password combination not found" instead of letting a potential hacker know he's stumbled upon a valid username.

I don't see why that's generally going to be a security flaw; most services already indicate if a username is taken when signing up so a hacker can poll for random names there instead.

Does everyone agree about that last point? That having a single error message that says "username/password combo not found" is more secure? I have always thought that the username was not secret and to treat it as part of the secret is almost like saying there is no username just a big password that you enter in two distinct boxes. I understand that hackers do like ways to validate that they have an actual username and aren't just guessing ... it is like having the first half of the 'big secret password' cracked.

I am throwing this out there because I think it is important to know which pieces of your security model are 'load bearing' so to speak. I'm not really comfortable with this quasi secret status that the username enjoys. I think it is either a secret or it is public info.

It might be the whiskey talking but I think this is a great idea! It would really clean up those embedded login forms placed in the header & body of web pages. Think about how clunky text site searches would look and feel if the majority of them included 2 - 4 form fields.

That being said, the biggest problem I see is that there is no visual separation of the two fields, and the fact that the user has to read a sentence to figure out how to log in. A nice soft divider like a pipe bar or forward slash between the text "username" and "password" would help with this visual problem. More white space would help a lot too. I think you could make up for the remaining confusion with the following:

(I am assuming there are two form fields that are only visually changed to look like one form field)

1) When the user first sets focus to the username field, do not remove the "Username" text, but simply highlight it, which will give the field visual boundaries. Once the user begins typing replace "Username" with the input text. (Repeat for password field)

2) Key capture "tab" and either " | " or " / " (whichever you are using as the field separator). When they fire this key press, set focus to the "Password" field.

3) If the user hits the "Sign In" button with empty string in either the Username field or the Password field, set focus to the empty field and show tool tip.

4) If both fields lose focus while one has empty string as a value, show tool tip.

Using bold to convey focus is a nice touch by the way.

The sad thing is there will be a lot of users that do not like this, a lot. If they frequent the site enough, it will not be that big of a deal, they will learn quick enough. But like some previous posters said, if there is a large user base logging in through this form, you will get quite a bit of backlash. I created a js driven date form field that works just like the calendar field you see in both Mac OSX and Windows Vista. Even though every user has seen it, I got a lot of complaints the first week that it was included in our application. It was worth though, it rocks!

I really do like this single field login form, I'll be using it in my pet project.