• Web Forms Style Guide
  • 1 Introduction
  • 2 Form Design
    • 2.1 Best Practices
      • 2.1.1 Make forms as short as possible
      • 2.1.2 Multiple screens or a single page?
      • 2.1.3 Keep a single column format
      • 2.1.4 Have a Logical Question Order
      • 2.1.5 Use Minimal Color
      • 2.1.6 Form must be accessible
      • 2.1.7 Pre-fill fields when possible
      • 2.1.8 Use Progressive Disclosure (Conditional logic)
      • 2.1.9 Keep tab order consistent with input order
      • 2.1.10 Distinguish between Optional and Required fields:
      • 2.1.11 Align fields
      • 2.1.12 Let the user know where they are
      • 2.1.13 Use a gateway and confirmation screen
  • 3 Form Components
    • 3.1 Component Types
      • 3.1.1 Input text field
      • 3.1.2 Radio Buttons
      • 3.1.3 Check Boxes
      • 3.1.4 Dropdowns
      • 3.1.5 Links
      • 3.1.6 Buttons
  • 4 Form Validation
    • 4.0.1 When to validate?
  • 5 Form Documentation
  • 6 Form Testing
  • Resources
  • Published with bookdown

Web Forms Style Guide

Resources

Enders, J. (2016). * Designing UX: Forms *

https://identity.stanford.edu/design-elements/iconography/

https://support.microsoft.com/en-us/office/get-your-document-s-readability-and-level-statistics-85b4969e-e80a-4777-8dd3-f7fc3c8b3fd2?ui=en-us&rs=en-us&ad=us

https://centerforplainlanguage.org/learning-training/five-steps-plain-language/

https://identity.stanford.edu/wp-content/uploads/2020/09/Project_Outline_Sheet-v7.pdf

https://adamsilver.io/blog/where-to-put-buttons-on-forms/

https://learnui.design/blog/the-3-laws-of-locality.html

https://medium.com/nextux/design-better-forms-96fadca0f49c https://rosenfeldmedia.com/books/web-form-design/ https://www.goodreads.com/book/show/3296910-web-form-design https://www.w3.org/WAI/tutorials/forms/ https://www.nngroup.com/articles/date-input/