Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I was intrigued by this statement by @DanWilson on Twitter:

All Web Developers: Never Ever Ever put anything after the password box and before submit button on a form. Tab MUST go directly to submit.

When I asked for clarification, he added:

because the UI pattern is Username TAB Password TAB Enter Key.

Can anyone point me to evidence that corroborates or contradicts that claim, even if it's anecdotal?

share|improve this question
4  
I think his pattern and thus his reason is wrong. Why would I want to tab to the submit button? The Submit button should be the default button. So the pattern is Username [Tab] Password [Enter] So whatever you put between the password and the submit button is irrelevant when it comes to input focus. –  Marjan Venema Sep 24 '10 at 10:55
    
CAPTCHA is another reason why I'm not convinced by the TAB TAB argument. When used in combination for logins (and Google's account login does this after a few attempts) it is the field after password. –  Julian RH Sep 24 '10 at 18:05
    
@Marjan, that's the way it SHOULD work, however there are lots of websites out there which have been poorly made using asp.net webforms that don't handle form submissions via the Enter key properly. Because of this, I almost always use the pattern @DanWilson describes. –  jessegavin Nov 8 '10 at 16:57

7 Answers 7

It is irrelevant to respond "I don't use this pattern". Whether or not the pattern is THE dominant one (and your sample-size-one doesn't show this), if it's a significant pattern then it should be respected. Maybe only 10% of users press a tab before enter, but you don't want to piss off 10% of your users for something as simple to fix as this.

share|improve this answer

The best tab situation and common situations is:

  • input: email
  • input: password
  • checkbox: keep me logged in (sometimes this is omitted)
  • button: submit (note how you can use the spacebar, faster than enter in some situations)

Proofs:

  • Google (unified login)
  • Yahoo (unified login, includes Flickr, Delicious)
  • Twitter (note also how the visual flow differs from the tab flow to be consistent!)
  • Facebook (ibidem)
  • Baidu
  • Wikipedia
  • LinkedIn
  • Craiglist
  • MySpace
  • IMDB

Notable breakers:

  • MSN
  • eBay

So, with those sites we are including probably most of the world's web users and they are all aligned in the behaviour I've described.

share|improve this answer
    
Btw, I personally use the pattern: email TAB password TAB space TAB space (my left hand is faster to press "TAB space" than by right hand is to press enter). The structure I've shown before still works on many of the most common patterns, that is, they are common exactly for the widespread usage I've shown. ;) –  Folletto Sep 24 '10 at 11:43
1  
I would add that IF you include a "Remember me" checkbox in between the password and submit button make sure that the tab sequence corresponds to the visual layout. Sometimes I experience login forms that skip the "remember me" field in the tab sequence in this scenario thinking that it will help when it is more harmful. –  jessegavin Nov 8 '10 at 17:00

I agree with John. I think that most people press Enter while in the password field (I do), or will click/tap on the Enter button.

However, for the few Windows users that press Tab and then Enter, Dan is right: there shouldn't be anything between the password's edit field and the Enter button.

I singled out Windows users because on the Mac, the default is that pressing Tab takes you to the next edit field or listbox. It will never take you to a button. My apologies to Linux users; I'm not sure about the details there.

share|improve this answer
    
If that's true, then that's a fine example of Apple breaking standard user conventions that shouldn't be broken. Being able to tab to any control on a page, including buttons, is vital to accessibility. –  Charles Boyung Sep 23 '10 at 20:42
1  
FWIW, this has been the UI behavior since the Lisa, circa 1983, i.e. pre-Windows. Also, this is the default behavior and can be overridden. –  Hisham Sep 23 '10 at 22:36
    
Doesn't matter if it's pre-Windows. Pre-Windows, there weren't accessibility laws and almost no one cared about people with disabilities being able to use computers. –  Charles Boyung Sep 24 '10 at 15:14
1  
True. But the Mac complies with all accessibility laws. They are just not the default. And personally, I like it that way: I've always found it weird that I can tab to a checkbox. –  Hisham Sep 24 '10 at 21:29
1  
Personal preference. When I tab, I find that stops on checkboxes and buttons only delay my arrival to (what is to me) the next logical stop: an edit field or listbox. –  Hisham Sep 26 '10 at 6:34

I don't believe the dominant UX pattern is Username TAB Password TAB Enter. Why the extra TAB+Enter after typing in the password? Save yourself a keystroke and hit Enter after entering the password to submit the form. As Chase mentions, for login forms: Username TAB Password Enter.

I consider forms having false submit buttons by using input type='button' instead of type='submit' a more offensive UX penalty. This reinforces the TAB+Enter habit to submit a form when it should just be Enter.

share|improve this answer
1  
The reason it is the dominant UX pattern is because that's what people actually DO. Just because you think it saves you a keystroke doesn't mean that's what most people do. "What most people do" (or at least expect to do) is what determines the dominant pattern, hence the word "dominant". –  Charles Boyung Sep 23 '10 at 15:36
3  
I actually don't believe most people use the TAB then Enter pattern. Then again there's probably not a source that clearly defines which pattern is "dominant". I gave the keystroke savings as an extra benefit not a justification. In any case, both these patterns, among others, should be considered when designing forms. –  John Hodorowicz Sep 23 '10 at 17:30
2  
I believe people reading UI sites are the wrong subject to test this. Granny doesn't know what TAB is for. I think in the intertubes the mouse is still king. –  Leonardo Herrera Sep 24 '10 at 2:54

For login forms if the design requires something between password and submit, you can still change the tab order so that it skips the bad experience elements when tabbing. See https://www.bankofamerica.com/ which is somewhat similar. Tabbing goes user/area/submit, continue tabbing to get the link for the checkbox and link.

I think the broader issue (for me) is placing an anti-action element where the action should be. cancel/reset buttons where submit buttons normally are, etc. We are rather automated creatures and rarely read/pay attention to slight changes.

share|improve this answer

Egregious breaks in this pattern are when helpful form designers put the Forgot Password link on the tab stop after password and before the submit button. This inevitably results in the page refreshing, a new form loading. Then, when going back, as per good security practices, the password field (which I typed in the first time) is blank.

While I totally respect the aesthetic freedom of designers and developers and I do not want the web to LOOK homogeneous, the behavior of the web should be.

Dan Wilson

share|improve this answer
1  
I approve of the person in the opening question coming in and posting clarification as an answer. +1! :) –  Rahul Sep 27 '10 at 9:14

Just think about your own experiences - when you log in to a site, what do you expect to do? Me, I expect to do exactly what Dan said - Username TAB Password TAB enter. I've even seen placed that have "Remember me" functionality maintain this basic concept - On chase.com, to tab to the "remember my username" checkbox, you actually have to tab PAST the submit button to focus on the checkbox. I don't know that I really like that, but it does make the general login much quicker.

One addition I would have to his statement is that on a login page, the initial focus MUST be on the username field. I can't count the number of websites that I go to where focus is improperly set (or not set at all) when a page is first loaded.

share|improve this answer
1  
I do Username <Tab> Password <Enter>. Why the extra tab? Perhaps you had the misfortune of using sites that don't accept the shorter pattern. –  dbkk Sep 27 '10 at 18:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.