1. ADDITIONAL GUIDELINES

2. Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf Provide Clear path to completion

3. Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf Provide Clear path to completion

4. Label Alignment  Top aligned  For reduced completion times & familiar data input  Right aligned  When vertical screen space is limited  Left aligned  For unfamiliar, or advanced data entry

5. Required | Option fields  Try to avoid optional fields  If most fields are required: indicate optional fields  If most fields are optional: indicate required fields  Text is best, but * often works for required fields

6. Field length  Field lengths can provide valuable affordances  Field lengths provide enough space for inputs  Random field lengths may add visual noise to a form Serial, ID ??? I’ll match the number configuration to these fields

7. Field length  First name: 30 chars  Last name: 30 chars  Email: 50 chars  Address: 200 chars

8. Grouping content  Content relationships provide way to organize form  Groupings provide a way to scan information  A sense of how information is structured  Use the minimum amount of visual elements to communicate useful relationships  Remember : Structure forms as a conversation, with natural breaks between topics.

9. Form actions  Save, Continue, & Submit are primary actions:  directly responsible for form completion  Reset, Cancel, & Go Back are secondary actions:  rarely needed  The visual presentation of actions should match their importance

10. Form actions  Avoid secondary actions if possible  If needed, ensure a clear visual distinction between primary & secondary actions

11. Source: http://www.lukew.com/resources/articles/WebForms_LukeW.pdf Form actions

12. Tabbing  Many users interact by “tabbing” between fields  Must account for tabbing behavior  Use the tabindex attribute to control tabbing order  Consider tabbing expectations when laying out forms

13. Accessibility & Mark-up  tags - associate labels with inputs  Read by screen readers  tags clickable = larger actions  Tabindex attribute to provide a “tabbing”order  Forms to be navigated by keyboard  Accesskey attribute for additional keyboard support  to group related form fields Source: http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

14. Sites  http://www.lukew.com/presos/ http://www.lukew.com/presos/  http://www.15seconds.com/Issue/000706.htm http://www.15seconds.com/Issue/000706.htm  http://www.lukew.com/ff/entry.asp?968 http://www.lukew.com/ff/entry.asp?968  http://www.lukew.com/resources/articles.asp http://www.lukew.com/resources/articles.asp  http://uipatternfactory.com/p=tag/form/ http://uipatternfactory.com/p=tag/form/