Home > Articles > Open Source

  • Print
  • + Share This
From the author of

Functional Forms with Visual Appeal

The visual layout of your form can make it easier or harder for the user to complete your form. To make it easier, make sure your forms are formatted to be functional and visually appealing.

Form Element Grouping

Displaying form elements in groups (shown in Figure 5) is great for a couple reasons:

  • It helps separate sections so that the user gets a visual break (instead of seeing a bunch of form fields pushed together).

  • It provides order and hierarchy to the page.

Figure 5Figure 5 Grouping form elements is visually appealing and functionally sound.

Placement

The placement of form elements impacts the visual appeal and overall experience. Make sure you use consistent borders on the left, right, top, and bottom. Also use consistent font sizes and types, as well as consistent spacing between form elements.

Tab Order

You can assign a tab index value to each form field so that when a user presses the Tab key after filling out a form, the cursor jumps to the next field.

Progress Indicator

When building multipage forms, such as those used for shopping carts or new member registrations, let the user know where he is in the process, as shown in Figure 6.

Figure 6Figure 6 Let the user know how far along he is in the process.

Progress indicators provide the following benefits:

  • They provide a visual "map" of the steps to completing the form. This helps manage expectations and reduces the possibility that a user will think "When will I be done?" or "Why is this taking so long?"

  • They help "anchor" a person to the current task that needs to be accomplished.

  • + Share This
  • 🔖 Save To Your Account