{"id":218,"date":"2009-11-04T22:31:55","date_gmt":"2009-11-04T09:31:55","guid":{"rendered":"http:\/\/www.thunderguy.com\/semicolon\/?p=218"},"modified":"2009-12-08T15:55:45","modified_gmt":"2009-12-08T02:55:45","slug":"forms-that-work-jarrett-gaffney","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2009\/11\/04\/forms-that-work-jarrett-gaffney\/","title":{"rendered":"Forms that Work &#8212; Jarrett &#038; Gaffney"},"content":{"rendered":"<p><a href=\"http:\/\/www.amazon.com\/gp\/product\/1558607102?ie=UTF8&#038;tag=thunderguycom-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=1558607102\" title=\"Buy &quot;Forms that Work&quot; at amazon.com\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.thunderguy.com\/semicolon\/wp\/wp-content\/uploads\/2009\/10\/forms-that-work.jpg\" alt=\"Forms that Work\" width=\"130\" height=\"160\" class=\"alignleft size-full wp-image-220\" \/><\/a><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.assoc-amazon.com\/e\/ir?t=thunderguycom-20&#038;l=as2&#038;o=1&#038;a=1558607102\" width=\"1\" height=\"1\" border=\"0\" alt=\"\" style=\"border:none !important; margin:0px !important;\" \/><em>Forms That Work<\/em> is a practical book dedicated to making web forms usable and useful. It gathers a heap of information together, with helpful summaries and guidelines to make it easy to create web forms that people will actually use.<\/p>\n<p>Here is a summary of some points that I found particularly helpful. This gives the flavour of the book and serves as a reminder for me at least. For all the background information, you&#8217;ll need to read the book itself.<br \/>\n<!--more--><\/p>\n<h3 style=\"clear:left\">Question types<\/h3>\n<p>Question in forms may require four types of answer:<\/p>\n<ul>\n<li>Slot-in &#8211; no-brainers like name or phone number<\/li>\n<li>Gathered &#8211; things the user will be have to look up, such as credit card number<\/li>\n<li>Third party &#8211; things the user has to go to a third party for, such as the address of somebody you&#8217;re sending a delivery to<\/li>\n<li>Created &#8211; things the user has to think up on the spot, such as a username or a free-text field<\/li>\n<\/ul>\n<p>Questions may also have the following qualities:<\/p>\n<ul>\n<li>Anticipated &#8211; questions that the user expects, such as credit card number when buying online<\/li>\n<li>Intrusive &#8211; questions that users may not want to answer, such as phone number<\/li>\n<\/ul>\n<h3>Form design guidelines<\/h3>\n<p><strong>Ask the &#8220;easy&#8221; questions first<\/strong> to lead users gently into a form. Easy questions are those that require minimal consideration &#8212; they are slot-in, anticipated and non-intrusive.<\/p>\n<p><strong>Make form field labels clear and descriptive<\/strong>. People read labels on forms, but they tend to ignore headings and other text.<\/p>\n<p><strong>Put labels to the left of input fields<\/strong>. If all questions are &#8220;easy&#8221; then you can right-align form labels. Otherwise left-align. Don&#8217;t put labels above fields &#8211; this makes it hard to scan labels and fields, and easy to accidentally skip fields.<\/p>\n<p><strong>Keep labels close to fields<\/strong>. Sometimes forms have the labels on the left and the input fields way over on the right. Don&#8217;t let your layouts be too liquid.<\/p>\n<p><strong>Lay out form elements with a grid<\/strong>. The grid lines are not visible, but they help to align form elements consistently. It&#8217;s disconcerting to see page elements almost lining up. They should either line up perfectly or not at all.<\/p>\n<p><strong>Don&#8217;t make your forms too dynamic<\/strong>. It&#8217;s disconcerting to have forms field appearing and disappearing all over the place.<\/p>\n<p><strong>Validate user input gently<\/strong>. Say &#8220;Please enter the date&#8221; rather than &#8220;Error: invalid date format&#8221;. Display a list of errors at the top of the page, each linked to the actual field (this makes it easy for screen reader users etc.)<\/p>\n<p>When the user has completed the form, <strong>display an acknowledgement or thank you message<\/strong> to end on a high note.<\/p>\n<p><em>Forms that Work<\/em> is a companion volume to Ginny Redish&#8217;s <a href=\"http:\/\/www.thunderguy.com\/semicolon\/2009\/10\/01\/letting-go-of-the-words-ginny-redish\/\">Letting Go of the Words<\/a>. Read them both, put their ideas into practice, and your users will thank you for it. (Actually they probably won&#8217;t. But perhaps they should.)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Forms That Work is a practical book dedicated to making web forms usable and useful. It gathers a heap of information together, with helpful summaries and guidelines to make it easy to create web forms that people will actually use. Here is a summary of some points that I found particularly helpful. This gives the [&hellip;]<\/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":[30,84,18],"class_list":["post-218","post","type-post","status-publish","format-standard","hentry","category-usability","tag-books","tag-usability","tag-web-development"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/218","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=218"}],"version-history":[{"count":11,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/218\/revisions"}],"predecessor-version":[{"id":253,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/218\/revisions\/253"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=218"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}