{"id":193,"date":"2009-08-20T22:10:26","date_gmt":"2009-08-20T09:10:26","guid":{"rendered":"http:\/\/www.thunderguy.com\/semicolon\/?p=193"},"modified":"2009-09-09T22:26:46","modified_gmt":"2009-09-09T09:26:46","slug":"web-form-design-recommendations","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2009\/08\/20\/web-form-design-recommendations\/","title":{"rendered":"Web Form Design Recommendations"},"content":{"rendered":"

Here is a checklist of recommendations for form design. I extracted this from Luke Wroblewski<\/a>‘s excellent presentation on Best Practices For Web Form Design<\/a>; I took my favourite points, edited them, and arranged them into categories for easy reference. I use this checklist when designing and reviewing forms. For best results, view the original presentation<\/a> and commit it to memory first.<\/p>\n

Individual fields<\/h2>\n

Form label alignment<\/h3>\n
    \n
  • For reduced completion times & familiar data input: top aligned<\/li>\n
  • When vertical screen space is a constraint: right aligned<\/li>\n
  • For unfamiliar, or advanced data entry: left aligned<\/li>\n<\/ul>\n

    Field lengths<\/h3>\n
      \n
    • When possible, use field length as an affordance<\/li>\n
    • Otherwise consider a consistent length that provides enough room for inputs<\/li>\n<\/ul>\n

      Validation<\/h3>\n
        \n
      • Employ flexible data entry<\/strong><\/li>\n
      • Use inline validation<\/strong> for inputs that have potentially high error rates<\/li>\n
      • Use suggested inputs<\/strong> to disambiguate<\/li>\n
      • Communicate limits<\/li>\n
      • Avoid changing inputs<\/strong> provided by users<\/li>\n<\/ul>\n

        Help & Tips<\/h3>\n
          \n
        • Minimise the amount of help & tips required to fill out a form<\/li>\n
        • Help that is visible and adjacent<\/strong> to a data request is most useful<\/li>\n
        • When lots of unfamiliar data is being requested, consider using a dynamic help system<\/li>\n<\/ul>\n

          Field groups<\/h2>\n

          Layout<\/h3>\n
            \n
          • Use the minimum amount of visual elements<\/strong> necessary to communicate useful relationships<\/li>\n
          • Consider tabbing expectations<\/strong> when laying out forms<\/li>\n<\/ul>\n

            Selection Dependent Inputs<\/h3>\n
              \n
            • Maintain clear relationship<\/strong> between initial selection options<\/li>\n
            • Clearly associate additional inputs with their trigger<\/li>\n<\/ul>\n

              Actions<\/h2>\n
                \n
              • Avoid secondary actions<\/strong> if possible<\/li>\n
              • Otherwise, ensure a clear visual distinction<\/strong> between primary & secondary actions<\/li>\n
              • Align primary actions<\/strong> with input fields for a clear path to completion<\/li>\n<\/ul>\n

                Form<\/h2>\n

                Progress<\/h3>\n
                  \n
                • Illuminate a clear path<\/strong> to completion<\/li>\n
                • Map progressive disclosure<\/strong> to prioritized user needs<\/li>\n
                • Provide indication of tasks in progress<\/li>\n
                • Disable \u201csubmit\u201d button after user clicks it to avoid duplicate submissions<\/li>\n<\/ul>\n

                  Success<\/h3>\n
                    \n
                  • Clearly communicate<\/strong> a data submission has been successful<\/li>\n
                  • Provide feedback of data submitted<\/li>\n<\/ul>\n

                    Errors<\/h3>\n
                      \n
                    • Clearly communicate an error has occurred: top placement<\/strong>, visual contrast<\/strong><\/li>\n
                    • Provide actionable remedies<\/strong> to correct errors<\/li>\n
                    • Associate responsible fields with primary error message<\/li>\n
                    • \u201cDouble\u201d the visual language where errors have occurred<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

                      Here is a checklist of recommendations for form design. I extracted this from Luke Wroblewski‘s excellent presentation on Best Practices For Web Form Design; I took my favourite points, edited them, and arranged them into categories for easy reference. I use this checklist when designing and reviewing forms. For best results, view the original presentation […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24],"tags":[84,18],"class_list":["post-193","post","type-post","status-publish","format-standard","hentry","category-usability","tag-usability","tag-web-development"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":6,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/193\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}