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-]
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:
- 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.
- 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 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.