ibm.comdeveloperWorks : Web architecture : The user experience, Part 3IBM Home Products Consulting Industries News About IBM SearchIBM : developerWorks : Web architecture library The user experience, Part 3Using controls in formsDick BerryUser Experience Design, IBM Ease of Use teamDecember 2000Contents: Forms and controls Guidelines Summary Non-text-entrycontrols Text-entry controls Resources About the authorIn effective application design, forms facilitate entry of information through effectivecontrols, easily identifiable structure, and efficient navigation. In this installment, DickBerry offers a range of useful guidelines for choosing and designing the most appropriatecontrols for each element on a form.Forms are effective for allowing users to enter information, such as that used in e-commercetransactions, because they provide experiences that are similar to real-world processes in manyways.Forms facilitate entry of information in three ways:Through controls appropriate to the types of information to be entered.● By providing structure, which allows the user to easily identify what information is needed.● By supporting navigation, which allows users to move through and between forms easily and efficiently -- andultimately to submit the form.● Forms are extremely important for e-business and e-commerce. They allow customers to place orders, buy products,register their purchases, receive support, and give feedback.Creating effective and efficient forms is nevertheless challenging. Why? Because form entry requires time that userswould typically rather spend doing something else. In many cases, the users have already decided what they want andthey view the form simply as another obstacle. Forms entry also exposes users to the potential for errors and dreadedcryptic error messages.Meeting this challenge is crucial, because the easier forms are to complete, the more satisfied customers will be. Thisarticle offers some guidelines to help you meet the challenge of picking the most appropriate control for each element ona form. Future articles will provide similar guidelines for forms layout and navigation.Forms and controlsA form is an arrangement of controls that enables users to enter information. A control, such as a traditional text field orlist box, is simply a representation of some information element, like a person’s name, with which the user can interact.The control provides both visualization for the information and some interaction mechanisms through which the userinteracts with the information. Those familiar with the model-view paradigm will recognize controls as simply views ofthe information elements they represent. Keep in mind that the term view doesn’t necessarily imply visual. Views canpresent information in any way that can be perceived by users. Speech, sounds, and music can also be used in views. Sowhy are controls special? They are special only in the sense that they are pre-defined views of well-known andfrequently-used information types. They are typically provided as components in development toolkits to helpstandardize the user interface of a platform and to facilitate development.The controls described below are a collection of those typically available in traditional GUI toolkits, HTML forms, andJava Swing. Even though the names may vary, their functions are similar, so a general set of guidelines can be used forall.As a quick reference, some of the guidelines have been incorporated into tables at the end of this article. The tables andthese guidelines should be used in conjunction with the UI design guidelines for the platforms for which you are developerWorks : Web architecture : The user experience, Part 3http://www-106.ibm.com/developerworks/library/w-berry3/?dwzone=web (1 of 10) [12/12/2000 11:45:23 AM]developing. The intent of this article is to provide you with an appreciation of the user’s view and how it can be affectedby the decisions you make in using controls.GuidelinesUse controls consistentlyThroughout a Web site or an application, use the same type of control for specific kinds of information. Providing thisconsistency allows users to transfer their knowledge from one form to another and minimizes errors. Users willrecognize information being requested more quickly, and they will already know how to interact with the control toprovide the information. For example, when a spin button control is used to enter the state in an address, users in Texasmight quickly learn that typing “t” twice selects “Texas” (the first “t” skips to “Tennessee,” the second to “Texas”). Ifthe spin button is used consistently for state fields throughout a site, then this user shortcut will work every time.In general, you should:Use the same type of control for common types of input.● Ensure that each type of control looks and behaves the same everywhere it is used.● Provide the same messages and error recovery techniques for incorrect/incomplete data.● For example, always use two radio buttons for "Male/Female," as opposed to using radio buttons in some forms and atwo-value spin button in others. When space and layout considerations override the use of the optimum control,substitute a similar control that uses less space. For example, substitute a drop-down list for a list box. Most of theinteractions, such as cursoring and selecting, are identical, so users should have little difficulty with either form of list.Provide a prompt for each control or group of related controlsClearly identify each control so users know exactly what it represents and what they can enter or select. Use a prompt (orlabel), typically in the form of text, located near each control. If the control is part of a group, such as a group of radiobuttons, provide a label for the group as well.A prompt near each control is preferred over a prompt within the control for several reasons. When a prompt is used within a control, you can't supply a default value. Default values help users avoid unnecessaryinput and potential errors. Placing prompts within controls also complicates visual scanning for fields that need input. Ifmost, but not all, fields have prompts near the controls, then users might miss those controls that have prompts containedwithin them, causing errors. Even though it is not always possible to assign a default value for a field, it's not a good ideato have some prompts outside and others inside. A useful prompt tells users