Description

Style Standards for Forms

• Layout
  • Vertical Layout
  • Inline Layout
• Labels
• Fields
• Buttons
• Errors / Success 

• Other Considerations

Layout

Vertical Layout

Inline Layout

 Labels

• Use uppercase bold fonts for input field labels (uppercase for Colibri)
• Use <label> tags to associate labels with inputs
• Do not put labels/hints inside fields on web forms, put it outside 
• Consistent use of colons at the ends of labels (no colons)
• Consistent use of sentence ("Sentence case") or title case ("Title Case") (uppercase for Colibri)
• Required field indicator: Use the alt-text ?required?;
  • Always indicate required + miss for optional
  • If all fields are required don't mark them
• Use the tabindex attribute to provide a ?tabbing? path
• Provide hints with a secondary/non intrusive style 

 Fields 

• Use fixed lengths for predefined fields or use 100% within the container (the container can have a fixed width)
  • Field lengths can provide valuable affordances (ex. credit card, telephone, etc.)
  • Random field lengths may add visual noise to a form
  • Make the default value for a drop-down list box the label
  • Use dl/dt/dd for forms structure

Buttons

• Label the button with what it does
• Primary / Secondary Actions
  • Primary actions: the most important action on the form (completion) (?Submit?, ?Save?, or ?Continue?)
  • Secondary actions: are less utilized and most often allow people to retract the data they?ve entered (?Cancel?, ?Reset?, or ?Go Back?)
• Make sure that the SUBMIT button cannot be confused with destructive buttons
• Input (submitinput) vs. Link (ahref):
  • Raluca: "Using buttons is mandatory for the cases where JavaScript is disabled. That's because by default a form can be submitted only through an input of type 'submit'. Links are usually used for redirecting to another page, not for submitting the form."
  • Sergiu: "Some buttons are done with links, since their action is not a submit action. I'm talking about most Cancel buttons, which shouldn't send the form content back to the server. Implementing them as submitinput will send the form content to the server. Sending the form content to the server means more transfer time (sending bytes through the network), more memory and processing time (allocating memory for holding the request data, allocating time for processing the request)."

 Errors / Success 

• Clearly communicate the error that occurred
• Top placement, visual contrast
• After successful form completion confirm success

 Other Considerations 

Terminology

• Label: the text that stands for a question ("Phone")
• Hint/Description: an extra piece of text that helps to explain the label ("(XXX) XXXX - XXXX")
• Default: a value that is already entered for the user ("(990) 8972 - 1234")

Conclusions

• Users often abandon forms or lie on them because of:
  • Questions that they don?t understand
  • Questions that they have no answer for
  • Intrusive questions that are inappropriate to the task
  • Validations that refuse their preferred or correct answer

Resources

• [xwiki-devs] [PROPOSAL] Default look of dialog boxes in the WYSIWYG editor
• WYSIWYG Appendix

• Label placement in forms, by Caroline JARRETT, 2010, http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf
• Best Practices for form design, by Luke WROBLEWSKI, 2008, http://www.lukew.com/resources/articles/WebForms_LukeW.pdf