December 22, 2006
The standard login form is everywhere. It's unavoidable. And it's a giant pain in the butt.
As much as we see login forms every day, you'd think we would have mastered them by now. Unfortunately, we haven't. Here's what I've observed users doing, over and over again:
- Move the mouse to the username field.
- Click the mouse button.
- Type a username.
- Move the mouse to the password field.
- Click the mouse button.
- Type a password.
- Move the mouse to the login button.
- Click the mouse button.
Every time I watch someone do this, a little part of me dies inside. And I see it all the time.
I'm not just talking about casual users like our parents. I'm talking about our fellow software developers, and other users who work with the computer for most of the day. People who really should know better.
What kills me about this is all the needless, painful transitions between the mouse and the keyboard. Your fingers are already on the keyboard while you're typing-- just add a little Tab and Enter to the mix! I'm no keyboard Nazi. All I want is to save users a few precious seconds as they slog through the endless logins during their work day. And it's so darn easy, too:
- Type a username.
- Press the Tab key.
- Type a password.
- Press the Enter key.
See? Wasn't that nice?* Now it's your turn to play Keyboard Appleseed and spread the word so your fellow coworkers can spend less time logging in-- and more time getting actual work done.
* Although this is the accepted standard behavior for login forms, it is possible for incompetent developers to screw this up. But that advice doesn't apply to the developers reading this blog.. right?
Posted by Jeff Atwood
A few more useful capabilities would
* Remember the username and have the password field selected if you typed in the wrong password and hit ENTER
* A checkbox for "Remember your username"
* A checkbox for "Remember your password"
* And perhaps a "Reset"?
The fine folks who wrote the University of Waterloo's "Angel Course Environment" (or NAMBLA) decided to make the page's onload event give focus to the username box (similar to the Google page with the search box). This is awesome, because sometimes I'm already typing my password when the event fires. I can only imagine these developers used the login form in the manner described here.
They've also pioneered the use of SJAX, an amazing new Web 0.1 technology that freezes my whole browser, including my YouTube videos of things being set on fire.
Speaking of which, I got some bi'ness to take care of.
My wife calls me a backseat typer. It drives me insane when I see people doing that.
User/pass forms are bad enough. Try watching your parents filling out an order form on Amazon... I clawed my eyes out.
Hah! Backseat typer. I like that.
Oh man, don't get me started. I am *constantly* looking for ways to squeeze precious seconds out of frequent tasks. alt-tab, alt-f4, F9 to refresh email, F5 to refresh browsers and feed reader. The precious field moving tab as you've pointed out (don't forget the shift-tab to go in reverse. You hit tab for the next field, look up and realize you made a typo, shift tab baby. Home, End. Ctrl-A, Ctrl-C, Ctrl-V. Need to spawn a new tab in IE or firefox? ctrl-n.
Man, I hear yah. One of the big things that was a curve for me on the Mac OS was never being able to keyboard ANYWHERE. Mac OS X has, thankfully, corrected much of that problem (although stupid developers abound who think all I want to do is mouse around).
I'm a power user. To me, power == keyboard. And power != mouse. To me, mouse == how I aim my gun in Day of Defeat (yes, I still play that).
Whenever I program, rare as it is, I will always make sure I can do with a keyboard what I can do with my mouse. A lot of people wonder why I'm so bloody fast at closing out of forms at work? Simple: keyboard shortcuts up the ASS. EVERYTHING has a keyboard shortcut. I work as fast as I do because the only mousing I do is required because some insensitive ass of a programmer hasn't given me the option to keyboard through (although I admit I don't CTRL + TAB as much as I could).
VIVA LA KEYBOARD!
this is another reason why I still love command line programs. I can do everything without having to touch my mouse.
What web sites are you using? I don't think there are any that ignore the TAB key to move from the Username to the PW textbox.
On my site I then just press the Enter key (after filling in the PW) and the 'Log In' button eventhandler does it's thing. However, I do notice that with IE, when I have 1 textbox and 1 button, filling in the textbox and pressing Enter does not trigger the button's eventhandler. Don't know why.
There are some annoying websites which get to my head. Apart from setting focus onload, following are the annoyances in login registration process...
1. Enter key does not submit the form.
2. User is not given choice to select the username. Some randomly generated number which is hard to remember is given as user name.
3. leading and trailing spaces in user name are NOT ignored.
4. Passwords are rejected while creating/changing them and reasons for rejecting them are given one after another. No upfront password rules are given to user.
5. Retype email field like retype password. Passwords need to be retyped since they are masked on screen and user may make mistake during typing them. But why would you ask to retype something thats clearly visible on screen. Most of users do drag-n-drop or ctrl+C , ctrl+v anyways
There are so many more...
I spend a huge portion of my day on the command line in Windows. Why oh why oh *why* can you still not paste with a simple key combination?? (I don't consider Alt-spacebar-E-P to be simple, though I have gotten pretty darn fast at it.) That feature was one of the few things I wanted as a command-line improvement in Vista, but no. Not even PowerShell supports anything better...sigh.
I couldnt imagine doing that.
Ussually what I do is this:
Wait until I see a blinking cursor in the field. If none then press the tab key.
Enter username *tab*
enter password *tab*
*space bar or enter* (If it hits the other one remember that and hit the tab key twice, to avoid the problem)
Even though I am a total idiot people think I am a genuise taking seconds to login into my email. I'm not very smart at all.
Any time I've backseat keyboarded and suggested using tab/enter it's fallen on deaf ears. The right kind of person would be *grateful* for the tip, but I've not encountered any.
The mouse is evil; long live SlickRun...
P.S. I just hit tab in an attempt to focus the "post" button for comments - takes me to the top of the page. ~Sigh~
The problem has nothing to do with keyboard/mouse use and shortcuts. The problem is that you are typing your password to begin with
I totally agree, but that's a subject for a different blog post. In the meantime, we have to deal with what we have, and that's a zillion login screens.
Hi, my name is Brad and I am a backseat, keyboard nazi.
As a senior developer in my shop I am always helping some other developer at thier desk. I drives me crazy when someone types areallylongwordworng, and then has to backspace through the entire word rather then CTRL+SHIFT+[BACKARROW]. Or just CTRL+[BACKARROW] to go back a word.
I always try to reate an application that can be operated without the mouse. labels with shortcuts, and proper tab order, are key and often something overlooked on applications.
IMO, the *real* problem here is lack of consistency. Users don't know just by looking at any given site how they can navigate through it -- even through the login page.
That's one of the things that sucks about the WWW for such systems. Any developer can implement any feature any way they want. Many users will just fall back to what they *know* will work on every site -- the complicated way to log in -- just because on some site they were once at, the focus didn't auto-set to the user name box. So now, every time, they head for the mouse.
I think there's a larger point to be made here about the lameness of the mouse in general for data-entry tasks. It impedes any fast motion whatsoever. When go to the bank to make an inquiry, the teller reaches for the mouse (probably to navigate through a 3270 emulation program!) and I know my trip to the bank is going to be twice as long as it could have been. Ever tried checking into a hotel in Vegas? They go right for the mouse. Wonder why the lines are so damned long to check in, even when most people have online reservations? I blame the mouse.
Thankfully you can use your keyboard on their convoluted login page, but HSBC Direct actually makes you enter your security phrase by using your mouse to press keys on a "virtual keyboard". Very annoying.
Yep, this drives me insane!
One short cut that I love (got it from Screensavers a long time ago I think), for standard .coms... in the address bar just type the name, say "codinghorror" and press CTRL+Enter, this adds the rest of the address around what you typed, and sends you right to the site.
Remember the pre-Windows days, when there were utilities that did something along the lines of MSWord's AutoCorrect--but system-wide? It drives me bonkers that *if* the program I'm using even supports some kind of shortcut entry, I need to configure a unique dictionary to every program. Why doesn't someone write a driver so that "teh" (followed by non-alphanumeric) is converted to "the", whether I'm in notepad, word processor, email client, or a browser?
Sadly, not all developers are consistent, I'm a tab to the next field guy myself, but unfortunately sometimes when you teb, the cursor sometimes goes off to another field other than the password field, i.e Register hyperlink, this confuses users, therefore they tend to put thier faith in moving the mouse to the field they want.
I personally think a better method to save time during the day is get rid of those god damn log in screens altogetjer !!!!
(1) For the longest time in my pet-peeve with Windows XP Pro log on screen (non Active Directory) was that I thought it required me to move the mouse to my "User Icon" and click! Frustrating! Then on writing this post, I figured out pressing Tab twice (moves the keyboard focus and) opens the password field. OMG, I'm not a power keyboard user. Ugh.
(2) Sorry if this seriously off topic...
About that "Alt+SPACE-E-P". That's seriously killer stuff, right up there with Alt+Space-M-AnyArrowKey-MouseMove to move a window without pressing a mouse button (or to move a misbehaving, off-screen window).
I was going to mention PureText by Steve P. Miller, but it too doesn't help with the console pasting. (It does help with pesky Microsoft Word and pasting text.)
What you need for console pasting by keyboard only is something that converts a user-defined keystroke to a mouse key or a multi-key macro. If you don't have an aversion to adding another program to your computer... The only free program that I know that can possibly do that is "Mado tsukai no Yuuutsu" (roughly translated as "Melancholy of Windows Users", available from Sourceforge.net). It is a key dispatcher that can totally remap your whole keyboard by using arcane text config files, FTW.
Example: Copy the default setting file dot.mayu to your %HOME%\.mayu and add this at the very bottom:
window Console /ConsoleWindowClass/
key C-S-V = VK(RButton)
What the above does: In Console windows only, Control+Shift+V will do a clipboard paste by faking a Mouse Right (context-) button push.
Too bad "Mado" is in Japanese only (but works on my US English WinXP Pro). Also too bad this is add on software, which you have to cart to each computer to use. Makes "Alt+SPACE-E-P" that much easier to remember, no?
(3) Actually, Jeff Atwood, I would like to hear how you customize your *mouse* buttons. Future blog topic, please?
Let's not forget having to re-enter regular US phone numbers with formatting because the designer's a moron.
Worst sin ever, though: flushing all my input and showing me a blank form page for stupid errors, such as the phone number issue.
You're right on with this one, this is something that drives me insane. Its right along the lines of slow loading pages that move the focus back to the username box (usually when I'm midway through my password).
Its absurd how many things like this some people don't know. The other day I was moving some files around, I hit F2 to rename a file and a developer watching me asked how I did that so quickly. What?!
Oh how I agree with this post 100%. I am so sick and tired of seeing developers who can barely navigate Windows/Unix/Linux/Mac OS/whatever they are supposed to be working with. And standard forms like this is a great example.
I've often said that during the interviewing process, rather than having the applicant solve pointless brain teasers - where if you know the trick, you solve it in 2 seconds and if not, you sit there with a dumb look on your face for hours - we should sit the applicant down in front of a computer and ask them to perform some fairly simple tasks.
How they use the keyboard and mouse together is a window into how competent they are in my experience. Anyone who mouses over the username, clicks, etc. as you described also causes a part of me to die inside.
I will spread type, *tab*, type, *enter* everywhere I go!
Also, Jeff, thanks for unblocking me. It means a lot to be recognized as a good internet citizen even though my blog host is basically a digital sewer.
Thankfully, when I let people know that a tab can save them time, smiles happen and they are happy they are saving time. When that particular event happens, I let them know about the "Press W twice for WV", etc, on forms.
It'll be another 20 years before nearly all web surfing ages know the shortcuts, and to educate about the time savers on every form seems impossible.
You are WRONG. Pure and simple wrong. The problem has nothing to do with keyboard/mouse use and shortcuts. The problem is that you are typing your password to begin with. Your computer should do this - it is better at remembering things than you are.
I use kwallet for my passwords. When kwallet sees that the webpage is asking for my username and password and helpfully fills them in for me. If kwallet hasn't been authenticated it will ask for my password, but it is one password to remember that accesses all the others I need to know.
I hate webpages that break this ability. Most often by having a slightly different URL each time I login (amazon.com), or splitting the username and password into different pages "for security", so kwallet doesn't know that it should enter aything.
Overall though I rarely have to enter my passwords, everything just works. Which saves my brain from having to remember hundreds of unmemorable strings, or worse using the same password everywhere.
P.S. There are dozens of programs that work like kwallet. Investigate them and find one that works for you (and that you would trust for your passwords). Quit doing yourself something that the computer should do for you.
The first sentance of my last post should have said when I have to wait on them to do it with the mouse.
I can't believe you guys are talking about keyboard shortcuts. That's like elementry school. Or maybe I've just been doing this too long.
I hate passwords. Every website I go to wants me to register, create a user name and a password. So I had an idea.
How about a USB key that keeps track of all your login info, along with a USB socket on the keyboard? Keep the USB key on your keyring. Plug it into the keyboard when you sit down, you are logged in. Pull it out when you leave.
Then I was talking to a friend of mine who uses lots of different computers, and she wanted her whole environment saved on a USB keyfob. And why not? A gigabyte of flash memory is less than $20 now. You could keep you entire desktop, all your preferences, address book, etc, etc. on it.
Lets not even talk about where Windows keep browser cache.
This brings me back to the days of when I was in CS 331 class at good ol' University of Hawaii. It was a computer languages class, the professor was rictoring on her use of emacs.
Emacs is great except for a few reasons:
While she is going through example code, she does some obscene shortcut and leaves the whole class boggled, even cutting and pasting is a pretty good way to loose your students.
You need to learn all of the shortcuts, maybe if we started to learn emacs in our 100 level classes. But humans are stuck on our ways, nowadays kids are using computers at a lot younger of an age, sure it's great but also they can be learning bad[slow] habits...
Your stuck to using this old school text pad. I am sure you can fire up a command promt from any computer and log into the Universities Unix system and get your emacs, but what if you are in some controlled enviornment? You will be using wordpad and throwing around all these stupid worthless shortcuts.
I could go on, but then I would start to be looking like one of my old professors lectures...
I would rather make it like her assignments, short and leaving you thinking.
http://adijas.com technology consulting on the cheap
We should also remember to use proper label / with accesskeys for the form. ALT+U should give focus to the username field. It also helps with accessibility.
My worst web password experience was the site (for health care insurance claims) that happily accepted as a new password a 9 character string, but behind the scenes was truncating it to 8 characters (I guess 8 characters was the non-stated limit).
The auth page however, tried to authenticate using all 9 characters, so I'd get a 'bad username or password' error - no indication that the password should be no more than 8 characters.
However, as far as I recall, the controls were laid out in a keyboard friendly manner...
That was a nice, frustrating waste of half a day.
I'm with Jeff who said RoboForm. Just hit Alt+] and it brings up the login info for the current site. A keypress on the enter key and I'm logged in. Easy enough.
I don't consider Alt-spacebar-E-P to be simple
Alt+SPACE-E-P is awesome. Right click works to paste at the command prompt, but that's not really helpful, either.
(does silly animation, GPF's)
No, it has to bluescreen at that point.
I don't CTRL + TAB as much as I could
The cognitive dissonance between CTRL+TAB and ALT+TAB is a serious problem with tabs in general. Tabs aren't listed on my taskbar, either, so sometimes I'll close entire browser windows before I realize I closed the window that had the info I wanted squirreled away in a tab. :(
P.S. I just hit tab in an attempt to focus the "post" button for comments - takes me to the top of the page. ~Sigh~
My bad. Try now.
This also illustrates the problem for multi-line textboxes: Enter *cannot* submit by definition. Sometimes CTRL+ENTER works, but this is not really a standard, at least not one I'm aware of.
Try standing behind someone and asking them to copy and paste something between programs.
When they use the mouse to manually select text regions, I die a little inside. Especially if its a developer doing it.
When I see somebody use the mouse to move between boxes or even to move around in code, I feel like either cutting the mouse cord or unplugging it in the case of a cordless mouse, it is frustrating seeing people cling to the mouse, "haven't you learned anything from me and my outbursts on the subject of mouse addicted people?", lol
One thing that anoys me is the computers in the lab where consoles are blocked and where you are stuck with a dumb mouse and some stupid so-called user friendly apps that are without shortcuts, but then I either hack them until I have a console or reboot with some linux distro.
the saddest part of this is - we, as programmers, are still coding login forms. You would think this would be the easiest thing to componentize and standardize – like 15 years ago.
Not only have we not done this, but we still can’t even get it right! I bet in another 15 years Jeff will put up the same post… Our software industry is so unindustrialized.
I got side tracked with an older browser where #9496; did not submit the form. So now, I tab until the submit button is highlighted and press space. It's still a keypress, and always works.
I also hate when there are no password rules upfront, and you have to drudge through several submits because all errors with your password weren't displayed to you at the same time.
I grew up with a Mac LC II, and with keyboard shortcuts. When I encounter a new program, and the standard shortcuts don't work, I use the mouse to find out the shortcut, and then cancel and return to the keyboard to perform the desired function. (Not using the mouse since I was right there already)
I also hate it when the tab index is messed up on some sites. You have to tab twice between fields (to skip the novice-user help links). My bank had this, and it drove me nuts. Now they've implimented a 4 tier system for logging on. First page is the username, which they dub "UserKey", and then the second page shows a (previously setup) unique image, and (previously setup) user pass phrase, plus your password.
But I digress...
~David from AdminSeek.net
@Charles: You'll still need a password for the USB key, otherwise if you lose that, your toast.
@Jeff, There's a lot that causes you to die a little inside. How much of you is left that lives?
This behavior isn't unique to login forms. I watch in agony as my parents fill out forms with 10 fields by typing in each field and then clicking on the next. Any developer worth his salt should be designing forms with a tab order.
Hmm, seems like my HTML snippet was stripped out automatically from my post. See if this one works better...
...An easy workaround is to add an hidden textbox to your form, something like this:
input type="text" style="visibility:hidden;width:0px;height:0px;" /
Furthermore: Enter should submit a login form, unless the username and password are both REQUIRED, and they have not yet both been entered. In that case, the Enter key should not submit the form. It should move focus to the missing field (and maybe display a little visual reminder that the field is required).
More people that you would think don't understand the capabilities of the standard text box and keyboard interaction.
Most people I've witnessed:
Aren't aware that the Delete key removes the character to the right
Generally aren't aware that the arrow keys affect the caret (not the cursor! ;) )
Are unaware that performing an action with the keyboard can have the same effect as using the mouse.
And, given the above, have no chance of being aware of the "special" actions of the Tab and Enter keys. (Thoughts are likely that the Tab key will put some space in the box, and that enter will try to add another line)
It's as if they don't understand that 1 key can have multiple effects. I'm not certain that we should decry this fact, however. I have no intentions of teaching my grandmother the myriad ways to navigate around a webpage or other type of form (which is really the only place that this comes up). Most people already feel that they're on the wrong end of some serious voodoo, and if they have a comfortable understanding of how to accoplish something they should probably be left to it.
Unless you're hiring. Then they better damn well know how this fairly basic stuff works.
However, I do notice that with IE, when I have 1 textbox and 1 button, filling in the textbox and pressing Enter does not trigger the button's eventhandler. Don't know why.
This is a bug (or a feature depending on whom you ask) in IE. When the form only has one textbox, the button itself is not included in the postback data so the event handling mechanism doesn't know you pressed it (I'm assuming you're using ASP.NET or similar). An easy workaround is to add an hidden textbox to your form, something like this:
input type="text" style="visibility:hidden;width:0px;height:0px;" /
I haven't tried if IE7 behaves differently, but since MS considers it "by design", I doubt they've changed it.
A cynics view:
Pehaps people know how to do this, but are so bored by whatever activity that they are doing that they deliberately do it the slow way just to make the day a bit shorter...
Heh-heh, Eam wrote, "NAMBLA"
Haacked: When was the last time you lost your car keys?
Regarding teaching people to use keys to navigate forms: I would like to teach the world to sing, but that isn't going very well either. And as been pointed out, some forms are so poorly designed, keyboard navigation is not going to work. Navigating forms with a mouse may be painful and slow, but it is at least reliable, and when you are trying to get something done, that is what you want, which is my biggest complaint about Windows and Windows programs in general. Flakey, flakey, flakey. Windows is a lot like a '59 Cadillac, big and flashy, but unreliable, which is why Honda, the boringest car in the world became such a big seller.
I have been programming for years, and make fair use of keyboard shortcuts, handy time-saving apps, etc. I consider it part of the trade that those who spend so much time working on a computer will naturally choose to do things in the fastest way possible, especially mind-numbing repetitive drone work.
That being said, I am in CONSTANT amazement at the lack of computer skills that I see with fellow devlopers, some of whom have been developers for upwards of 20 years. These are people that can produce good code, and understand heavy OOP design patters. But I watch them stare at their keyboard, hunting and pecking the keys...opening Query Analyzer and manually typing table names that exceed 25 characters... manually minimizing all of their open programs until their desktop is visible, then opening "My Computer", then navigating through 8 mouse clicks to the directory they want. (For the love of God, have you heard of Windows Key + E?!!!@! It's only been there for over 10 years!!!)
What's wrong with these people? Where's their skills?
I just LIKE it that way. Clicking is fun. And you all keyboard Nazis might as well shut up.
Skills? G-a-a-h... The only people who care about such skills are micromanagers. Or Nazis. Or blatant idiots.
FAR manager was able to paste into command prompt since long ago.
Where's Clippy when we need him?
"It looks like you're trying to log in to this site, but you're using the mouse to move around. Did you know you can use the tab key to... oh, you want to turn me off, do you? That was the old Clippy. I'm the new Clippy, sent by MCP to clean things up around here. So, look, just use the Tab key." (does silly animation, GPF's)
Users have different preferences of their interactions with forms and data entry. Some prefer to use the mouse because they are more comfortable with it. Some (such as myself) are "keyboard junkies" and go straight for the hotkeys.
The best coding practices accounts for many ways of getting to the same result. If the user prefers to take those extra steps by using their mouse to navigate between form elements, so be it. They should have that option. If the user wants to have 3 hotkeys and the whole form is filled, submitted, and confirmed, that should be allowable too.
Fortunately we (as geeks) can accommodate for many different types of users. It is just a matter of actually remembering that everyone is different :P
Regarding using the mouse to at least click on the username field it is usually a lot easier on Web forms, which for some reason the developers didn't make the username tab index 2 or 3, but left it as what was auto populated. Once you are on the username field I can see how frustrating it would be to watch people grab the mouse move it just a little down, left click then move back to the keyboard.
Like RedMatrix, I hate it when I have to go through 2+ iterations to create a password. But what I hate EVEN MORE is when I have to put in a highly secure password to just read an article or sign up for some stupid email list. You don't have any personal information about me, but I have to use one of my few really complex A3$df3%2S2jk#H3E_ef#5! passwords that I can remember and would like to use only on my work and finances type sites. Absolutely friggin ridiculous. If all you have about me is an email address (which is probably my username), then the password can be '1' or 'password'. Don't get all security nazi on me. Your site isn't that important.