Niels Notes

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== Forms ======

  * Labels are clear and concise
  * Proper spacing and alignment between and around every form element
  * Forms show consisten field widths
  * Fors are not wider than 80em (80 chars)
  * Textareas are expandable (show 2 rows max initially)
  * Required fields are ordered first
  * Fields with strong cohesion are displayed close together (for instance start date, end date) 
  * Use logical sequence of fields. 
  * show wide fields unders small fields (Avoid expanding text area's to hide fields below) 

When a user is picking from a series of options in a form, it's important to use the correct control element. Use the following logic to choose the correct control element:
    * For general yes/no choices on a form (booleans) with a save/submit button visible on the screen, use a checkbox,
    * For yes/no choices (booleans) that do not require a save/submit button to activate, use a toggle.
    * For a range of numbers, use a slider or a five-star control.
    * For 2-7 options displayed horizontally, use a radio segment. Be careful to check for wrapping!
    * For 2-7 options displayed vertically, use a radio group.
    * For more than seven options, use an autocomplete.

Niels Notes

User Tools

Site Tools

Page Tools