Personally I think ebay’s tab order is correct. The “stay logged in” checkbox is a default value set to false (i.e. ebay assumes that you do not want to stay logged in) so you tab over it which prevents you from accidentally keeping yourself logged in on a public computer.
Perhaps Ebay’s problem with this form is not the tab order but the fact that they put the “stay logged in” checkbox between the password field and submit button making you think that it should be in the tab order when it shouldn’t be.
I think that the “forgot my username”, “forgot my password”, and “stay logged in” options should not be on the form at all but should be in some other obvious place on the page.
What do you do when you’re focusing a text field? You type. Pretty understandable by even the most novice web user.
What do you do when you’re focusing a checkbox?
You… press the space bar.
How many users know that the spacebar toggles the value of a radio button or checkbox? (I’m about to hear cries of “the smart ones!” or “the ones worth having!” given this blog’s audience
Also there should be a sensible action when the enter key is pressed. Too many web login screen do nothing - they should submit the damn form! I shouldn’t have to click on the submit button or tab over to it before pressing enter.
I just press tab the required number of times to get focus on whatever field I need to type in. On my bank’s webpage I have to press tab four times to get from the user name to the password field. While it would be ideal to just press tab once, it seriously takes 0.2 seconds longer to press it the extra number of times. Not a big deal.
And realizing what has focus is as easy as breathing, regardless of the browser you’re using. Just pay attention.
The funny thing is that although safari is really good with showing focus, OS X in general is hard to get into a keyboard friendly state. For a while I had repeated issues with dying mouse batteries, and it took me quite a while before I had figured out how to use the accessiblity features to enable keyboard navigation and then even more to get to the point where you could tab through all of the links on a web page. The funny thing is that normally I’d just look up how to do this, but with my mouse battery dead and keyboard support off there was no way I could do it. I couldn’t even launch safari or shut down the computer.
@Maks Verver: Konqueror uses KHTML. Safari uses WebKit. WebKit is based on KHTML. Maybe that has something to do?
@Matt: Well, there are onFocus events you could use… But then you have to add the event to all elements you care about, and keep track of which one is focused with your own code :-\
I wouldn’t blame the browsers, it’s not their place to. Web developers can make their focused text boxes stick out if they want. I think a browser should ONLY render the page correctly as the developer intended. It’s the developers job to make their UI user friendly.
Not sure if this has been mentioned earlier, but I think the ‘enter to move to the next field’ thing comes from the Terminal/Mainframe world, where I’ve seen data entry applications work exactly that way, at hospital check-in stations for instance. Data entry people who have worked on such systems for years, don’t expect a screen to advance until they’ve walked the cursor through every data field, and finally reached the magic one near the bottom that is ‘supposed’ to confirm all that data entry.
Obviously the PC world has developed a different paradigm, but the other one is still in use in plenty of places.
Someone should create a JavaScript plugin that adds a consistent focus behavior to all modern browsers. If someone else doesn’t, I will when I get some time or if I get paid to do it.
Thanks for the article, keyboard navigation is important - especially for form entry.
Fortunately check boxes don’t trigger on the Enter key in web forms. Unfortunately, people forget to grab the Enter key and submit the damned form before you tab over to the Submit button in the first place… Then again, there’s always that person that’s trying to learn to use the keyboard on web forms and is hammering the Enter key trying to figure out why the check box won’t check.
“The second option they have is keeping the ingrained keyboard pattern in place, but move the visual cue (the location of the checkbox) to AFTER the submit button. However, this too is bad form, as it then visually indicates that the checkbox is not being submitted.”
Easy. Put the check box to the immediate right of the submit button.
Yes - but is the order very logical? I agree that it is a nice feature to start in the name field but wouldn’t you expect the search field at the top to be the first tabstop?
My point is that the tab ordering is not always clear even on a rather simple page and I think that a clear and simple tab ordering is as important as having the focus highlighted.
And the fact that the tabs ‘wraps around’ after you past bottom of page and starts with the first picture is … well not what I would expect.
Part of the problem is that you can never satisfy everyone. Going through the comments it appears that there’s a division over whether you should set the tab focus to the ‘Keep me signed in for today’ checkbox or skip it and go to the ‘Submit’ button.
I’ve just completed a project to migrate part of an internal accounting application from a native windows application to a web-based application. The accountant is upset because she can’t use the enter key to move from field to field anymore.
I think anyone who’s designed a UI realises that there will always have to be a compromise at some point. It wouldn’t surprise me to discover that ebay’s marketing department insist on having the ‘Keep me signed in for today’ checkbox where it is, but the security auditors insist that it doesn’t automatically get focus. I’ve been there and done that!
Most annoying bug in an application ever, and it’s still there.
I open IE
I begin typing the address I want to go to.
My homepage loads and fires off a focus that takes my cursor out of the address bar I was just typing in.
This is a generic idiotic windows behavior - not limited to IE.
Start typing and any dialog that comes up grabs the focus.
NO! Wrong! The system should pay attention to what I’m doing. It’s a machine. It works for me. I don’t work for it! Focus should stay with what I, they guy who paid for this pathetic excuse of an OS, not what some dimwitted programmer decided was important that day.
Not that I have a strong opinion about this or anything.
And can we do something about those ^(#)_* alert messages in the bottom right corner too? The ones that say to “Click Here for more information” (e.g. MSConfig) and then don’t actually do anything?
Good article but I take issue with one oversight (as other posters have also said).
If you are having a generic page, say a portal with the front page + a login or google with the search box, do not set a first focus. With the way the focus is handled it’s very frustrating to start typing then have the page grab your focus when it loads. You are much better off just having the relevant field being the first one in the HTML. That way, even without an initial focus, if I want to navigate by keyboard only I can simply hit tab once to focus on the first field in the login list.
