Design and development guidelines for usability Web Forms

Design and Development Guide for usability Web Forms. The discussion of forms in web design has been going on for 10 years, and there are a number of principles listed in this article, including layout, validation, code readability, and using jquery to improve the form.

Two-column vs. one

This decision would generally depend on the content of the form, but it's often preferable to avoid a two-column layout if The form is fairly simple.

Below is a good example of the a simple form that places each label above its related form element.

What are the benefits to this type of form layout, as opposed to a two-column form? The form labels have plenty of spaces to allow for future changes to the text inside. A two-column form could is limited in this regard, and might require the entire form to be restructured if changes are mad E. Another benefit is this form is not as cluttered looking, has plenty of whitespace in the label areas, So it's easy to read and easy to associate the labels with the fields. Additionally, the background color given to all Label/field pairing makes the form more visually.

By contrast, look at the Two-column form below:

Especially because of the left-aligned text and lack of color, this form doesn ' t have the same clean, visual effect as the previous example. In fact, the vertical spaces between the labels and the fields is somewhat distracting, giving the sense of multiple ES, when in fact a simple form like this should visually is presented as one grouped entity.

It ' s not impossible, however to achieve a clean, organized look with a two-column layout, as shown by the example below FR Om chapters IndigoBooks:

So, although there are no definite rules for the general layout of your form, effective guidelines include avoiding a two- Column layout for simple forms, and aligning the text labels right if a two-column layout is used.

Use Inline Form Validation

Recently Luke Wroblewski wrote about the effectiveness of inline form validation on A List Apart. To quote directly from that article:

Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline V Alidation.

jQuery Inline Form Validation, because Validation is a Mess is a step-by-step tutorial ry to add inline validation to a lengthy form.

Really easy Field Validation

Dexagogo provides a simple script, that can is used to add inline validation to your forms. The demo example is isn't the prettiest, but of course it can be customized to suit your. The script uses scriptaculous for the fade-in effect.

Group Related Fields

With a lengthy form, you'll be limited as to what you can does to improve its usability, but grouping related fields, togethe R to divide the form into manageable visual components'll make the form a little lessintimidating. Thus, the form would be perceived to is easier to fill out, even though it'll probably take about the same amount of time As a form that has no grouping of fields.

To group related fields, use and <fieldset> the optional <legend> element, as shown in the code below:

<form id= "form" action= "register.php" method= "POST" > <fieldset> <legend>basic info</legend> <div> <label for= "name" >Name:</label> <input type= "text" name= "name" id= "name"/> &LT;/DIV&G
		T <label for= "password" >Password:</label> <input type= "text" name= "password" id= "password"/> <div > <label for= "password-confirm" >confirm password:</label> <input "text" type= " Password-confirm "id=" password-confirm "/> </div> </fieldset> <fieldset> <legend>address </legend> <label for= ' address ' >Address:</label> <input type= ' text ' name= ' address ' id= ' address ' > <label for= "address2" >address (cont "D":</label> <input "text" type= "name=" Address2 "id=" /> <label for= "zip" >Zip/Postal:</label> <input type= "text" name= "Zip" id= "zip"/> <label F Or= "City" >City:</label>; input type= "text" name= "City" id= "City"/> <label for= "Country" >Country:</label> <input type= "text
 "Name=" Country "id=" country "/> </fieldset> </form>

<fieldset>the element by default has a border, which can are changed, and is often removed in a CSS reset. Below is an example to a single form this is divided into two sections using <fieldset> and <legend> elements:

Cosmicsoda Registration Form

Unfortunately, the display of the border on the "not" <fieldset> the same across all browsers, and so it's usually best to disabl E The border in your stylesheet and create a custom border by some other means. This would also affect <legend> the "look" of the element, so it's rare to the "use of" of these two elements nowadays. But <fieldset> The can still be used to group elements, and custom borders and headings can is included to provide the same BAS IC effect. The <fieldset> and <legend> elements also have the added benefit of contributing to a form ' s accessibility.

Clearly indicate Required Fields

It ' s common to indicate required fields by means of the asterisk symbol (*) in a different color than the rest of the text , so the required indicator stands out. Although most sites nowadays include this indicator, some still to use it fail.

The explanatory text that describes the purpose of the asterisk should are placed immediately the form that Filled out, so the users to the it before they begin filling itout. Some sites have used the asterisk character, like a somewhat footnote, indicator the placing of the description to be Low the form. The example below from the elderluxe contacts page demonstrates this poor placement of the the ' text that explains The meaning of the asterisk:

Elderluxe Contact Form

The example above has two problems:the asterisks are the same color as the rest of the text, and the explanation of the A The Sterisk is near the bottom of the form. In many instances, asterisks alone would was enough, without any explanation, but if your target audience are not as com Puter-savvy, you'll likely want to include in the top of the form a brief description of what the asterisk.

The example below from Office Depot ' s registration page demonstrates a properly-placed asterisk description:

Office Depot Registration Form

Although the example form above does have problems (left aligned text, small type, little use of whitespace), it clearly I Ndicates Required fields and explains the meaning of the asterisk before the user begins filling it out. This is especially important into this example, since the ' the ' three fields not are, required the user can thus skip them.

Fancier checkboxes, Radio Buttons, and Select Elements

Forms can look awfully dull, especially since the styling of <select> elements, checkboxes, and radio buttons are limited in M OST browsers, and it is impossible to-use CSS alone to-style those elements to look at exactly the same in every browser. Fortunately, there are a number of JavaScript Library plugins and code that allow developers to include fancier, Cross-browser form elements that degrade gracefully.

jQuery Checkbox allows to insert custom checkboxes and radio buttons into your forms. I don ' t particularly care for the "look of the" the radio buttons in this case (they look no like radio buttons), but it ' s One option to consider.

jQuery Image Combobox is a fully skinnable image-based replacement for the browser ' s usually-ugly <select> element.

giva Labs mcdropdown jQuery Plug-in is a intuitive, keyboard-accessible, easy-to-implement replacement for a Typ ical <select> element that is allows for nested data.

Display a Hint when a Field Gets focus

Complex forms with many different fields can are easier for the "user to" fill out if some help text is given. Course, you don ' t want to overwhelm the user with one or more paragraphs of text above the form explaining what the fie lds are for.

As a simple alternative, your can write some JavaScript (or use a customizable plugin) that'll display a custom tooltip-s Tyle message to explain form elements that might is confusing, or that require a certain type of input (for Examp Le, a username that is allows letters or numbers and must have at least 6 characters).

jQuery Input Floating Hint Box is a simple plugin this displays a fully-customizable floating Hint when a field g ETS Focus.

DHTML Goodies form Field Tooltip is another variation to the Form field helper text that displays the helper text Based on what are entered in the form field ' title attribute.

Be generous with whitespace

As mentioned earlier, forms can look ugly and cluttered if the "elements in" form are not displayed in a clean, usable m Anner. We are generally to the use of the "whitespace in our overall" site design, but the same principle can is applied within a for M, even down to the smallest details.

can improve a form ' s design by adding appropriate amounts of spaces around field elements, giving the elements Themselv Es a larger and more usable size, and also allowing plenty of spaces inside text fields by using padding in your CSS. For example, try typing some text into the two fields below.

With just a small difference in size and padding, the second input field has a is more usable feel. When multiple text fields appear in the same form, this can make quite a difference to how the overall experience be Perce Ived, even though technically it might do a whole lot of difference as far as how long it takes the user to fill it Out.

It also helps to allow text fields to have plenty of visible. A Name field especially should have plenty of spaces to allow for longer names. Overflow of characters'll start pushing the text out of view, so it's best to have enough spaces to accommodate longer NA Mes so this user can more easily spot mistakes. The example field below demonstrates how a longer name wouldis cut off.

A text field, is similar in size to the ones in the previous example would as more appropriate and would for allow Ger input to is entered without the risk of cutting off. The same principle would apply to a search box so may potentially receive long queries as input.

Make Your Forms Accessible

The topic of accessible forms could easily encompass a entire article and much more, but here are just a few tips to Ensu Re your forms are more accessible and usable to a diverse audience.

• Use title the attribute for inputs, to assist those using screen readers
• If a label doesn ' t wrap around the field it is associated with, use a for attribute of that matches the accompanying field ' S id
• Set a tab order using the tabindex attribute on each element
• For the tab order, increment the tab numbers by large amounts (e.g. "instead of" 1, 2, 3 ...), to allow for LAT Er additions that don ' t require rewriting all tab indexes
• For radio buttons and checkboxes, put the label on the associated element so screens readers read the item the Word "checkbox" or "radio button" second
• Use the <optgroup> tagged to group <select> items
• Use accesskey the attribute in form elements, to allow keyboard access