User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
The best tab situation and common situations is:
Proofs:
Notable breakers:
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.
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
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.
Username <Tab> Password <Enter>. Why the extra tab? Perhaps you had the misfortune of using sites that don't accept the shorter pattern.
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.
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.
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.
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.
