Blooper 29: Looks Editable but Isn t

---

Blooper 29: Looks Editable but Isn't

A blooper that seems to be growing more common in Web-based forms is standard interactive controls that present data users cannot change. This does not refer to controls that are sometimes active and sometimes inactive (grayed out); it refers to controls that are never editable.

At the website of the University of Houston's Clear Lake campus, we see an example of this blooper (Figure 4.55). The scrolling text box looks editable, but it isn't. It displays a brief explanation of the item selected in the "Quick Menu" above it.

Figure 4.55: www.cl.uh.edu (May 2002)-Text area is not editable; it explains the category selected in the menu.

More examples of the blooper come from uBid.com. The site's "Email Us" form commits the blooper twice (Figure 4.56). First, it uses checkboxes to mark "Required" fields.

Users might think they can change the checkboxes, but they can't. Further down the form, there is a scrolling text box displaying "Special Instructions." These are instructions for filling out the form and are not editable. The box containing the instructions looks no different from the editable box below it. Highly misleading!

Part of the problem is that some user -interface toolkits allow controls to be set to "noneditable." This encourages Web developers to misuse editable-looking controls to display noneditable data.

Figure 4.56: www.uBid.com (Sept. 2002)-Checkboxes misused to indicate required fields. "Special Instructions" text field displays noneditable instructions. Item 3, "Enter Your Message," is editable.

Avoiding the Blooper

Noneditable data displayed by a site strictly for users' information should never be displayed in a control that looks operable.

Checkboxes, radiobuttons , menus , sliders, and other controls should never be used for noneditable data. Such controls look operable. Even if they are grayed out (inactive), they look as if they can somehow be made operable.

Noneditable text fields should be avoided, because people don't distinguish them from temporarily inactive text fields: They assume the field can be made editable somehow. When a text data value is display only-never editable by the user-it should be displayed using a text (label) component, not a noneditable text field (Figure 4.57).

Figure 4.57: Correction of bloopers at www.cl.uh.edu and uBid.com- A- Corrected University of Houston form has text in gray box. B- Corrected uBid form has noneditable text checkmarks and text directly on the background.

---