IconInformation

 Discussed: [UX][Standards] Vertical Forms + (Primary / Secondary) Buttons http://xwiki.markmail.org/thread/4teq6ufymfhwan57 

Style Standards for Forms

Layout

1. Vertical Layout

verticalForms.png

2. Inline Layout

  • For small inline forms
    InlineCreatePost.png

 Other Recommendations 

Labels

spaceExample.png

  • 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

panelsExample.png

  • 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

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

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