Building better HTML forms

10 Tips To A Better Form by Chris Campbell is a good article with many useful tips for increasing the usability of web based forms. I have some reservations about a few of the tips though:

  • 1. Markup: Be very careful when using the accesskey and tabindex attributes. The source order of the form controls should make sense, thus making tabindex irrelevant, and using accesskey is problematic since there is no easy way for the user to know about the shortcut keys and they may interfere with browser or operating system shortcuts.
  • 2. CSS: I’m somewhat skeptical to using CSS and JavaScript trickery to change the look of form controls too much. Besides, doing so does not work very well cross-browser: Styling even more form controls.
  • 3. AutoTab: I recommend thinking hard about when to use an AutoTab feature. In most cases users will not be expecting the cursor to automatically jump to another input field.

Posted on October 26, 2005 in Accessibility, Quicklinks, Usability

Comments

  1. The Natwest Online Banking site uses autotab and it’s a complete pain in the arse if you put in the wrong character and need to go back to have another go - you go back, and it autotabs you forward again before you can change it.

  2. I generally agree with all points.

    1. I don’t see a lot of use for accesskey on form controls, except for “special” fields like a search-field for a site. But on more complex forms it’s easier for users to rely on tabbing through fields. And for sites in general, if they were to use accesskey for “special” fields, we need to find generally accepted standards for such keys before users benefit much of it.

    2. Radically changing the look of the controls themselves is a risky business at the least… I mostly use CSS & JS for visually structuring the form sensibly, providing feedback, and fixing label-click-to-focus (Safari…).

    3. “Helping” the users, yes…

  3. It’s true accesskeys may interfere with browser shortcuts, and that can be annoying, but when I use them I try to avoid common shortcuts so at least it won’t affect many people. For me, the benefit outweighs that risk. And it’s easy enough to add a little bit of text that tells you what the accesskey is for a particular control (e.g. input type=”button” value=”Save (Alt-S)” accesskey=”s”).

    On the web apps I work on, the accesskeys come in so handy. For example, if you have a whole table of data, and you only change a couple of rows at the top, it’s nice to be able to just press Alt-S to save without having to tab through a million inputs or switching to the mouse and scrolling down a couple screenfuls of data to get to the save button.

    I wouldn’t use accesskeys unless you’re going to label them, though, and I wouldn’t use them excessively - just for the main action or actions.

  4. October 26, 2005 by Roger Johansson (Author comment)

    Jennifer: Yes, for web applications, both accesskeys and auto-tab may be useful if implemented wisely.

  5. Another thing to be careful about is auto focus when a page loads.

    Very often I’ll start filling out a form as the page is loading, and be half way through the form when the page finishes loading and the cursor jumps back up to the first form element.

  6. Count me as another one who isn’t a fan of auto focus. If it’s a page that loads fairly quickly, it’s not an issue. But on more complex forms, I run into the same issue Geoff mentioned - I’m partway through the form already when it jumps me back up to the first field and catches me off guard. If I’m not careful, I’ll overwrite several fields with incorrect data.

    Personally, I’m very content to let users move through forms at their own pace, with little or no prodding or control on the site’s part (this is especially true with complex ones). Of course, the forms still need to be laid out cleanly, labelled clearly, etc.

  7. Oh, no. Don’t use ALT+S. Please, pretty please. My Sage is crying out loud that it can’t be opened while on that kind of page (Berea street is unfortunately the same kind using ALT+S for something weird)

    People, let’face it: you DO interfere with users’ customs in this. Either use numbers for shortcuts (ALT+1 and such) or don’t use them at all. I am surprised to see that even such web standards and usability and accessbility focused website as Berea street is, uses letters for shortcuts and thus interferes with lot of shortcuts user is accustomed to.

  8. October 28, 2005 by Roger Johansson (Author comment)

    dusoft: I am aware of that. Accesskey s is, unfortunately, what both UK and Swedish government accessibility guidelines recommend using for “Skip to content”.

    I am more and more leaning towards not using accesskeys at all because of their tendency to interfere with browser shortcuts. Not even numbers work - in Firefox/Mac pressing ctrl + number activates the corresponding tab…

  9. Roger: Does Apple Mac have some kind of ALT key? Or is it just CTRL? I though that meaybe that special “apple” key behaves in a way similar to ALT? But maybe I am wrong.

    Well, if numbers can’t be used, then I am against of using them at all. I haven’t know about that guideline by British and Swedish government, but nevertheless I don’t think using letters is good idea.

  10. October 28, 2005 by Roger Johansson (Author comment)

    dusoft: Yes, the Mac has an Alt key, a Ctrl key, and a Command (Apple) key. The Command key is the basic modifier key for keyboard shortcuts. It is often used in combination with the other modifier keys - the Mac has keyboard shortcuts for just about everything.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.