Bad Web Form Design
I’m seeing this pattern appear more and more on consumer web sites that I have to interact with (e.g. my cellular company and the bank) and it’s driving me insane.
I talking about input boxes that automatically move focus to the next box when you have entered enough letters and/or digits into them.
The most common use of this pattern is when entering phone numbers.
Assume (for the audience in the US) that there are three boxes - the first two accept three digits and the final box accepts four. Focus initially starts in the first box and then once you have entered three digits (e.g. 425) the focus automatically moves to the next box.
The problem occurs if you enter something incorrectly.
Say I incorrectly entered 426. Focus is now in the second box, and being a keyboard kinda guy I hit Shift-Tab to move to the previous box.
Ping pong!
As there where enough digits in the first box, focus moves forward again to the second box without giving me a chance to correct my mistake. On some sites, if I use the mouse and click back in the first box, the same ping pong problem occurs.
The only way out of the problem seems to be to double-click or drag-select to select all the text in the first box, and then the focus stays there allowing me to reenter everything.
I understand that the point of this pattern is to allow the user to type ‘4254669305’ without having to click in each box, but it seems to me that the website designer just wanted a pretty page. Why not just have a single input box?
Does anyone else have this issue? Or am I just being pendantic :-)
Btw, Here’s a website that shows you how to implement this bad pattern and exhibits the shift-tab problem that I describe above, though not the click problem.
1 TrackBacks
Listed below are links to blogs that reference this entry: Bad Web Form Design.
TrackBack URL for this entry: http://www.steve-lacey.com/cgi-bin/mt/mt-bar.cgi/784
Not all forms are created equal! And this is certainly the case when you consider working with numbers from the mobile space.... Read More
Oh yeah this one drives me crazy too... My other favourite is whenthey have a single box but they insist youse space or - to break up the numbers.
It must be that web developers these days are too lazy to parse phone numbers. Apparantly counting the number of digits entered and splitting the string are tough computer science problems.
See also http://www.codinghorror.com/blog/archives/000532.html
Blech, that's awful. I hate auto tabbing because I never know if they are going to do it or not, so I'm stuck tabbing too far, or trying to type additional characters into the first input.
you are a freak Steve. A complete freak!
I've never really experienced the problems that you're describing, but I can see how it would be a problem. On most of the forms that I've done I do just use one input field. I've never had any problems doing it that way. The only way I would really justify using three fields is that if the number had to be stored in a specific format for automatted dialing purposes, otherwise why use three fields.
Blah Blah Blah....everyone's an expert. And then, of course, the other expert was "more" correct.
Given the amount of UI design research, usability studies, focus groups, etc. that go into these large consumer sites, it often boils down to this: What do the majority of the customers prefer. It is always the case that you can not and will not please everyone. As a consumer UI, focused on the widest reachable user base, you must in the end focus your strategy on appeasing that majority. You can not alienate a vast majority of your site users by appeasing to a smaller class of users. With out hard-n-fast rules, to be successful we must do what the research studies show as the "lesser of 2 evils".
As well, we see this "predicament" or "choice" made in development constantly.
Case in point: developing for Mozilla or IE. Simply put, IE is shit, but you are a damn fool if you only develop for Firefox and risk alienating 80% of your user base. It would be nice if they both would play nice together, but of course that has never been MS's MO. It certainly would have been nice had IE followed the w3c "rules" when assessing css. I digress....another topic for another day.
Anyway, in an extremely competitive online marketplace, it is pertinent that you appease the vast majority of visitor's to your site. How you do that ought to be backed by years of continued research and usability testing. When you have done so, you have done all you can at that moment in time.
However, tomorrow is a different story...as users progress and we continue our movement towards a more computer literate community, we will see that as users grow and adapt their "habits", so will our sites.
BTW: As you know, I am "THAT" developer. And yes, it annoys me as well, BUT research(and the boss) tell me to do it anyway.
As you were
His cellular company's Developer
Actually, I didn't realise that was your code :-) I wasn't trying to point fingers. Hehe.
Anyhow, I wonder - with the usability testing on that component, did they actually test one single input box versus three? Did they test what happens when a customer makes an error?
And yup, I understand usability testing very well. You wouldn't believe the amount of it that goes on at Microsoft.
Web forms are usually one of the biggest culprits of bad web usability.