You are in the: Small Business Computing Channel

» ECommerce-Guide | Small Business Computing | Webopedia | WinPlanet

www.ecommerce-guide.com/solutions/building/article.php/938071

Back to Article

Usability and HTML Forms By December 11, 2001 By Andrew Starling Nobody likes forms. Most people associate them with taxes, immigration, bills, hospitals, and other unpleasant aspects of life. If you can avoid forms altogether on your Web site, so much the better. Unfortunately they're sometimes essential, for example when you need to collect credit card details for an e-commerce transaction. Even though your visitors know this kind of form is essential, they still won't enjoy filling it in. So at least minimize their annoyance by making your form easy to use. Good usability will also help to improve your form completion rates. In this article we'll look at forms for e-commerce, individual form elements such as dropdown boxes and radio buttons, plus validation and error messages. Relationships are Important Form-filling is a chore we suffer for the sake of reward. In the case of a tax form, the reward is not being fined or going to jail. In the case of an e-commerce transaction, the reward is receiving the product we want to buy. On sites that enforce visitor registration at the front page, the reward is getting at the wonderful information inside the site. These three examples demonstrate three different relationships between users and forms. The tax form is obligatory. It's a pain but has to be filled in. An e-commerce form is filled in by choice in a shopping environment where there are alternatives. In most cases the user can abandon the form and try a different company. A registration form at an early stage on a site creates the most fragile relationship. There are lots of alternatives and the reward is unclear - who knows what's inside? When creating your form, it's worth recognizing the relationship you have with your user. In the typical case of an e-commerce site, the relationship isn't strong. If your form gets messy or asks too many personal questions, it can easily be abandoned. Short and Dedicated The less you ask for, the greater the chance of completion. In e- commerce, a big temptation is to ask for customer profiling information at the same time as credit card and identity verification (security) information. This is risky. Your customer may already know of an alternative site that doesn't ask for profile information as part of the transaction. They may give up with you and go back there. Advanced users sometimes create the same transaction in multiple sites, mainly to check on shipping costs. They then carry one transaction through and abandon the rest. In this case, your forms will be compared head-to-head with your competitors. If you're asking for lots of profile information, you're less likely to win the contest. If possible, try to separate profiling forms from transaction forms. Shift the profiling stuff to the end, and again keep it short. You may need to provide an incentive to get your profile form filled in. This is more an issue of marketing than usability. There are sites that ask for profiling information after the transaction has been completed but before an order confirmation number is given. There's a risk here of the user feeling they've parted with their money and now they're being blackmailed. The risk is greatly reduced if it's clear that all the fields in the profiling form are optional. No Duplication Don't ask for the same information twice. If you got the name and address of the customer on page one, automatically fill it in on the shipping details page and the credit card details page, giving the customer the clear option of overwriting it if that's what they want to do. In usability terms, this is slightly superior to saying, "The name and address you entered previously will be used, please fill in the new details below if your shipping/card address details are different". The reason is that users are busy people often entering details in a hurry. It's highly likely they won't read your instructions properly, they'll just fill in all the fields they see. Companies using the "alternative details" approach often find that the new details are exactly the same as the original ones. This clearly wastes everybody's time and isn't good usability. There may be special circumstances when the "alternative details" approach is the right one, for example if the product you are offering is nearly always bought as a gift to be shipped to a third party. You can judge your own usability success by how many forms are badly filled in. If you forever receive alternative address details that are the same as the originals, you've clearly got a usability problem and your form needs to be redesigned. It's common practice to mark required fields with an asterisk, and add a key at the top of the page, "* Required Field." This is good usability. If you have a field that is required, but the reason won't be obvious to the user, then it's worth adding an explanation. For example, many users don't know why they need to give an e-mail address in order to complete a shopping transaction. You could say, "in case we need to contact you about this order," or "required as a credit card security measure." If you have too many fields that are required for unknown reasons, you may lose your customer's trust. Do you really need their fax number? Are you ever going to use it? Don't Collect Useless Information Fax numbers are a prime example. If you're not sure if the information you're collecting is useful, one approach is to run a use-of-information audit perhaps six months after your form goes live on the Web. Find out if anybody in your company has used the information that's been collected. If they haven't, stop collecting it. Excess information has a cost, especially in terms of user perceptions. Splitting Forms Most e-commerce forms run to several pages, each dedicated to a particular task. One for product ordering, one for personal details, one for shipping and one for credit card details. The advantages are: The user isn't presented with a single, intimidatingly long form. The pages can be individually validated, which helps error handling. Details can be automatically pasted from early pages into later ones. The main disadvantage is that the user may forget something they entered in an early page and use the Back button to refer to it, so ruining the sequence and causing all kinds of complications. If there is a chance that the user will need information filled in on a previous page, add it to the current page. We've already mentioned addresses. A user with multiple addresses might easily forget which one they originally used. Shipping charges are another danger area. If you say, "50% reduction for five items or more," and the customer can't remember whether they ordered four items or five, they'll go back and you've instantly got a usability failure. If shipping charges vary according to the products ordered, you need to repeat the order information on the shipping page. Validation This is the automated process of checking that fields have been filled in correctly. For example, if you ask for an e-mail address and the answer doesn't contain the @ symbol, you know it's wrong. Your system can spot this for you when it reads the data returned by the form. Some sites use JavaScript for validation at the client (browser) end. This may be OK for simple stuff but it's generally inferior to checking at the server end, where you can perform more complicated tasks and compare entries with database information. Over-zealous validation is a common problem, especially among companies that try to sell internationally but don't have an international perspective. If you have a field for zip/postcode, and set the validation for a typical US five digit entry, you'll lose any UK or Canadian customer with a seven digit code. They won't be able to enter the code that matches their credit card details. The issue of 'State' can also cause difficulty with non-US addresses. Millions of Internet shoppers in London, UK, have learned to enter City: London State: London in US e-commerce forms, because London doesn't have a state and is effectively its own county. But it's confusing and poor usability. Dropdown boxes can cause even greater problems, which we'll come to in a moment. Phone numbers are another validation area with plenty of pitfalls. They're probably best left unvalidated, unless you're keen to exclude international users who have helpfully used the international format +44 (0) 207- and so fail your numbers- only validation test, or even more helpfully write into the field, "No phone. I'm deaf." Ooops! If your system picks up a problem on validation, you need to send an error message back to the user and give them another chance to fill in the form correctly. Two big no-no's here. Never return the form to the user without a full explanation of what's wrong, and, when it's returned, don't clear form entries that were perfectly valid. If everybody could abide by these two rules, the world would be a happier place. Unfortunately, they're often broken. If you have extensive validation you will need to put a lot of thought into your error messages. You should finish up with dozens of them for different circumstances. If you have only a handful, it's a sign that you're not getting into enough detail. There's a fine opportunity here to score points with your customer by saving them time and explaining exactly why they're an idiot, rather than just telling them they're an idiot and letting them work out the reason themselves. Which brings us to tone. Customers often complain that error messages are too curt, forceful, or downright insulting. The usual reason is that they've been cobbled together by a programmer, while the company's customer relations expert sits four doors away doing something else (maybe struggling with a piece of software). Ideally, the same person who writes the company's grovelling apologies for major foul-ups should be brought in to edit programmers' attempts at error messages, which will rarely hit the right tone. Now let's take a look at usability and individual form elements. Checkboxes Can't go wrong with these, as long as the question you're asking can only have a yes/no answer - which is why you don't see them that often. Few questions are that simple. Radio Buttons A series of checkboxes with alternative answers to one question. Again, this is straightforward as long as all possible answers are covered. If you can't be sure, include an "other" option and look at the stats to see if it gets ticked. Radio buttons are suitable for presenting two or three options. They can stretch to four and possibly five. There's a suitability overlap with dropdown boxes, which are also great for presenting a small numbers of options. Your choice of which to use may depend on context. If you've got a sequence of regular checkboxes, a few radio buttons would fit well with them, but if you have a series of dropdown boxes, you might as well use another dropdown box for a choice between a couple of options rather than changing over to radio buttons for a single field. Consistency helps usability, and it may be worth staying consistent even if that means choosing a form element that isn't the one you'd normally choose for that kind of field. One thing to watch out for is radio buttons in an optional section, shown without pre-selection. The classic trap is that once the user has selected an option they can't reverse out to show no selection. Instead, design the field with "no selection" or "not applicable" as a button and make it the pre-selected option. A small number of options usually presents few problems. Large numbers are more dangerous territory. A common error is excluding an option that users would like to select. For example does your list of countries include the Caribbean island of Aruba, and the principality of Monaco in Europe? Does your list of US state abbreviations include "not US" for international users, and if you do a lot of international business, is it near the top, so they don't have to do a lot of scrolling? Dropdown boxes are an area where usability experts and the Web's most popular sites often part company. Some usability experts (and some users) complain about the clumsiness of long dropdown lists - for countries and even for dates. Yet you'll find them on sites that are well known for good usability. What those top sites have discovered is that users are pretty dumb, or at least not great at filling in country and date text boxes in a way that computers can understand. If they offer text boxes, the error rates go way up, and that's worse than the mere clumsiness of long dropdowns. But do remember that whenever you use a dropdown box you're taking control away from the user, which is generally a bad idea. You are restricting them and refusing to accept responses they might prefer to give. Since most people don't know that keyboard arrow keys work on dropdown boxes, you also have to consider whether your layout forces your user to keep switching from keyboard to mouse. Whenever possible, you should avoid these switches. If your overall layout permits it, try to group mouse operations (checkboxes, radio buttons, dropdowns) together and keyboard operations (text fields) together. Text Fields Users generally prefer these to dropdowns, assuming the computer at the other end can understand the content and won't come up with an error message. The displayed size of a text field is important because it give users a clue what size answer is expected. If they run out of space, they'll wonder if they're doing something wrong. This can be used to advantage. If you're using a text box to accept US State abbreviations, you can set the displayed box size to two characters, while at the same time setting a high maximum field size so the box still works if a full State name is typed in. The issue of dividing up address boxes into separate lines, usually labelled Address Line 1, Address Line 2, and so on, is another tricky one. Some usability experts prefer to see the address lines combined as single text field. The problem here is that you must then disable the Enter key so it can be used as a carriage return without submitting the form, and point out to the user that you've done this, so they have the confidence to press it. Once again, the common practice of splitting address lines, as used on almost all the top sites, creates some apparent clumsiness but is probably the neatest solution when compared to the alternatives. Do make sure your system can accept spaces between numbers. Users will often add spaces when entering telephone and credit card numbers. If these generate an error, they'll think your computers are pretty dumb, or, if they're a bit more knowledgeable, that your programmers are pretty dumb. It's this kind of attention to detail, and programming effort, that separates good forms from bad ones, and leaves your visitor with their final impression of whether your HTML forms were a painful battleground, or simply a mildly tedious experience. That final impression, which is their judgement on your usability, could easily determine whether they come back again Links: WDVL's form links Jakob Nielsen on useless Cancel and Reset buttons. evolt on forms for an international audience. Effective use of forms on Web sites. Disabling the enter key so it doesn't submit the form. Forms that work(this site had been down recently). Reprinted from Web Developer's Virtual Library.