Text boxes

Text boxes are probably the most commonly used Web widget. They are embedded within a <form></form> tag, as are all of the HTML widgets discussed in this article. Text boxes are generally used when you cannot precisely predict what a user will enter (for example, first name, last name). They can be designed as single-line or multiline fields (see Figures 1 and 2).

Figure 1. Single-line text box

Figure 2. Multiline text box

Usability problems

The following section describes and illustrates common usability problems:

Text box overkill

One common conundrum associated with text boxes is overkill -- that is, they are used for everything -- when another type of Web widget would be more usable and efficient. In the pizza order example below (see Figure 3), the user is faced with lots of keystrokes, worries about context-sensitivity, and spelling bee nightmares, as they enter each desired topping in a separate text field. In the more efficient example (see Figure 4), the user only has to enter a checkmark next to each desired topping. In his book, GUI Bloopers, Jeff Johnson also points out that another drawback of text boxes is that they do not often provide clues about what is acceptable (see Resources). Users may not realize they misspelled "anchovies" until they submit the order and get an error message.

Figure 3. Text box overkill

Figure 4. Alternative to text boxes

Disappearing text

Another usability problem sometimes observed with text boxes is disappearing text. This phenomenon occurs when the user's text entry exceeds the text box size (and not the maximum number of characters). The problem is that these text boxes are not long enough. While text box length must be reasonable, users should rarely experience disappearing text. To remedy this problem, the size of the text field (controlled by the SIZE attribute) should equal the maximum number of characters users will enter (controlled by the MAXLENGTH attribute). In some cases, the exact number of characters can be predicted and the text box sized appropriately. (For example, developers can be certain that a text field for a U.S. social security number must allow for nine characters.) In other cases, the number of characters may be less predictable and you'll need to make a reasonable guess. Use a multiline text box if users will need to enter several lines of text. Although multiline text boxes do not support setting a maximum length, you can use the WRAP attribute to avoid disappearing text. If space is not a constraint, make the multiline text box large enough to prevent users from having to vertically scroll to view what they've entered.

Format frustration

A third usability problem observed with text boxes occurs when a user becomes frustrated when it is not clear how text should be formatted. To avoid this circumstance, one simple solution is to pre-format the text box to minimize the potential for errors. A U.S. social security number, for example, can be split into three text boxes with dashes in between (see Figure 5). This pre-formatted approach eliminates the need for users to guess what format the system will accept. Pre-formatting can be helpful for a variety of text box values including phone numbers, fax numbers, and dollar amounts (see Figure 6).

Figure 5. Pre-formatted social security number text box

Figure 6. Pre-formatted dollar amount text box

Figure 7. Text box with example