- Plan First, Design Second
- Explain and Reassure
- Collect Data Efficiently
- Functional Forms with Visual Appeal
- Validating Data Nicely
- After the Form Is Complete
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 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 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.