Clicks & Notes

LukeW - Web Application Form Design

• different schemas can be applied to the layout of form elements on a web page; these schemas lend themselves to supporting different user behaviours/scenarios:
  • vertical alignment of labels and input fields works best in situations where forms should be completed quickly and users are familiar with the content/data to be input into the form
  • horizontal alignment with left-justified input field labels allows users to scan a form quickly to see what information is required; however, this can create gaps between labels and their corresponding form fields, which slows the user down while they ensure that the right information goes in the right field
  • horizontal alignment with right-justified input field labels makes it easy for users to match the form label with the correct form field, but scannability of the labels suffers
• visual elements such as background colours or rules can be used to group related content in a form, but should be used sparingly
• elements that represent a primary action associated with a form, such as “Save” or “Submit” button, should have more visual weight that other form elements
• if a form also has multiple or secondary actions associated with it, these elements should differentiated as well

(via GUUUI)