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.
- Previous post: Job opportunities in Stockholm, Sweden
- Next post: The ultimate multi-column CSS layout
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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.
I generally agree with all points.
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.
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...).
"Helping" the users, yes...
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.
Jennifer: Yes, for web applications, both accesskeys and auto-tab may be useful if implemented wisely.
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.
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.
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.
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...
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.
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.
Sorry, comments are closed for this post.