Forms are used online for
- shopping
- access (i.e. registration)
- data input (same as physical)
And they are how users talk to companies online.
No one likes filling in forms, so let's minimize the pain.
- Smart defaults, in line validation, clear path to completion can all help.
- The context matters, including how frequently the person completes the form and how familiar the data is to the user.
- Consistency can be used with a single voice; errors, help, success.
Ways to analyze performance include:
- Usability testing; track errors
- Customer support
- Site tracking
Layout Best Practices
Top aligned labels (i.e. label is directly above the box that the user fills in)
- good for familiar data
- minimize time needed to complete
- user sees label and form at same time
- allows for flexible designing (space to accommodate different languages, for instance)
- need more vertical space
- contrast is important
Right aligned labels (i.e. label is to the left of the box, aligned to a right margin)
- close association between label and box
- harder to scan, which makes it good for unfamiliar forms
- still faster completion times than top-aligned
- fit more in vertical space
Left aligned (i.e label is to the left of the box, aligned to the left margin; boxes are left-aligned, too)
- best for unfamiliar data (left aligned labels—fields left aligned too)
- easier to scan
- takes longer to fill out
- user has no problem associating labels and fields
- forces user to pause/analyze
Required form fields
- Asterisk if the convention for required fields
- Some forms label required fields even if all are required; this doesn't make sense
- Consider getting rid of optional fields (increases completion rates)
- For forms that are mostly requited, could flag optional instead of required
- Make it easy to see required fields at a glance
- Associate indicators (i.e. required) with labels
Field lengths
- Expresses expectation—make smaller if only a few characters
- Random sizes increases visual noise; keep consistent if no expectation of length
Content Grouping Best Practices
- Important for longer forms (i.e. tax forms)
- User should be able to scan info at a high level
- Boundaries (white borders) introduces new visual elements
- Use minimal amount of visual information
Actions Best Practices
- Avoid secondary actions
- Minimize reset button if not important—visual representation of the actions should match importance
- Consider the use of buttons versus links, and the visual weight of the icon
Help/Tips Best Practices
Used for:
- unfamiliar data
- to justify reason requesting
Can overwhelm a form if overused—dynamic solutions could help
- Inline exposure (pops up info when you click on field) (ex: Intuit snap tax)
- User-activated inline exposure (i.e small ? next to field)—shows up below or nearby
- Help visible and adjacent to data request
Interaction Best Practices
- Make the path to completion clear
- Remove unneeded fields
- Allow for flexible data input (i.e. allow different ways to insert dates)
- Use smart defaults
- Direct line path to completion (literally, can be graphically illustrated)
- Offer chance to save for longer forms
- Use proper html (tabindex attribute) to allow users to tab through a form.
Consider progressive disclosure for complex forms
- Hide advanced options behind a link (display content below the more common needs)
- Gradual engagement by offering subchoices
- Dialog to progress through steps—gradually engage (give them a vested interest)
- Give them a reason to be excited—show why the user should want first, then give the form (or move them through)
- Use metrics for what users include in a form (i.e. less than 20% adoption of field, then it goes to an advanced option panel)
- Progressive disclosure is most effective when user-initiated
- Maintain clear relationship between selection and result
Feedback Best Practices
Inline validation (error messages appear as the user fills out the form instead of after submit)
- Ex: password strength indicator
- Show right away if username is available
Give options as user starts to type
Length limitations (show how many of available characters)
Indicating errors
- Clear indicator
- Gives way to resolve—top level message
- Duplicate language at error spot—secondary indicator
Indicate progress
- Disable submit button (after user clicks) and replace with animation to indicate progress
- "Doing something…" messages
Indicate success
- Top level message—shows in context of form or…
- Popup success message (in context)
- Animation (highlight item) to indicate that it’s done
Don’t change inputs (don’t clear after submit)
Warn of likely unknown/difficult information needs before the user even gets to the form.
Possible Application for L&ET:
- We should review our forms against these recommendations.
Mentions two online form-builders:
No comments:
Post a Comment