Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Forms PeopleDon’t Hate Chris Lienert  @cliener
Ooh!Double Negative!
Love
Ooh!   EotWDouble Negative!
End of the World
I work for Jardine Lloyd Thompson
Who used to smuggle opium
Insurance means forms
And forms
And more forms
Imagine filling that out online
Or on your mobile
Design Patternshttp://www.lukew.com/resources/web_form_design.asp
Design PatternsVertical label/field
Vertical Label/Field
Design PatternsVertical label/fieldHorizontal (search)
Horizontal (Search)
Design PatternsVertical label/fieldHorizontal (search)Clear path to completion
Clear Path to Completion
Design PatternsVertical label/fieldHorizontal (search)Clear path to completionMark optional fields
Mark Optional Fields
Don’t do this
BuildForm
BuildFormFieldset
BuildFormFieldset[no caption]
BuildFormFieldset[no caption]Block element (p, li, th, td)
BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)
BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)Field
Build<form	  method="post"	  action="wds.aspx"><fieldset><p><label	  for="name">Name</label>	  <input	  type="text"	  name...
HTML5 Formshttp://wufoo.com/html5
HTML5 Attributesmaxlength for TextArea
HTML5 Attributesmaxlength for TextArearequired
HTML5 Attributesmaxlength for TextArearequiredplaceholder
HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "
HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "
HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "autofocus
Autofocus in Practice – Type…
Autofocus in Practice – Type…
Autofocus in Practice – Argh!
Autofocus in Practice – Argh! F IX E D !
HTML5 AttributesPattern • default error messages   are awful • doesnt scale well • does a fine robot dance
HTML5 AttributesPattern • pattern="/d*"
HTML5 Input TypesEmail • instant win • iOS keyboard love
HTML5 Input TypesDate, Month, Week, Time • don’t
HTML5 Input Types
HTML5 Input TypesTel • fairly useless • iOS keyboard love
People get things wrong
Validation to the rescue!
You Wouldn’t Like Me When I’m Angry
Validate Early,Validate OftenAllow people to make mistakes
Allow People to Make Mistakes
Allow People to Make Mistakes
Allow People to Make Mistakes  “The real danger is not thatcomputers will begin to think like men, but that men will begin...
Allow People to Make Mistakes
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fields
Clearly Mark Invalid Fields
Clearly Mark Invalid Fields<p><label	  for="birth-­‐date">Birth	  Date</label>	  <input	  type="text"	  class="date"	  nam...
Clearly Mark Invalid Fields<p><label	  for="birth-­‐date">Birth	  Date</label>	  <input	  type="text"	  class="date"	  nam...
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entry
Pattern Validate on Entry
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minim...
Enforce Minimum not Maximum
Enforce Minimum not Maximum
Distractionhttp://bit.ly/Oaqlre
Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minim...
Get it Right
A Bunch of Malarkey
Special Exhibit
Special Exhibit
Special Exhibit
Build
Build
Build
Build        Lots of coding
Build
Quaid JSEmbrace & extend HTML, DOM
Quaid JSEmbrace & extend HTML, DOMPolyfill older browsers
Embrace and ExtendTel • phone  <input	  type="tel"	  class="phone"> • mobile  <input	  type="tel"	  class="mobile">
Embrace and ExtendPostcode • data-­‐state-­‐field<input	  type="text"	  class="postcode"	  data-­‐state-­‐field="state"><s...
Embrace and ExtendTime<input	  type="text"	  class="time">Date<input	  type="text"	  class="date">Year<input	  type="text"...
Embrace and ExtendNumeric<input	  type="text"	  class="numeric">Integer<input	  type="text"	  class="integer">Currency<inp...
Embrace and ExtendPositive Numeric<input	  type="text"	  class="positive_numeric">Positive Integer<input	  type="text"	  c...
Embrace and ExtendCredit Card<input	  type="text"	  class="credit_card">CSC<input	  type="text"	  class="csc">
Data AttributesRequired if<input	  type="checkbox"	  name="variable-­‐field"	  id="variable-­‐field">…<input	  type="text"...
Data AttributesVisible if<input	  type="checkbox"	  name="variable-­‐field"	  id="variable-­‐field">…<p	  data-­‐visible-­...
Custom ValidationInline$("#field").addValidation(function	  (el)	  {	  	  if	  (!(el.isValid	  =	  !el.checked))	  {	  	  ...
Custom ValidationOn Submit$("#field").addSubmitValidation(function	  (el)	  {	  	  if	  (!(el.isValid	  =	  !el.checked))	...
Custom ValidationAjax Server Call$("#postcode").addServerValidation({	  	  path:	  "validation.svc/IsValidPostcode?postcod...
Custom ValidationAjax Servicepublic	  ValidationResponse	  IsValidPostcode(string	  postcode,	  string	  caller){	  	  	  ...
Custom ValidationAjax Servicepublic	  ValidationResponse	  IsValidPostcode(…){	  	  	  	  	  	  	  	  …	  	  	  	  	  	  	...
Custom ValidationAjax Response>	  validationResponse	  {	  	  message:	  "",	  	  caller:	  "postcode"}
Plug-in InternationalisationCustom methods and errorsquaid.forms-au-4.0.jsmessage:	  {	  required:	  	  	  "Value	  not	  ...
Elephant in the Room
Elephant in the Room                   6+
And the Rest6+         3.6+
When the Lights Go DownJavaScriptHTML5Server<label	  class="server-­‐error">
Ready for the Takinghttps://github.com/cliener/Quaid-JS
On a Web Site Near Youhttp://physical.jltsport.com.au
Plughttp://www.netmagazine.com/shop/magazines/april-2013-239
Standing on the Shoulders of GiantsWufooThe Current State of HTML5 Formshttp://wufoo.com/html5/Luke WWeb Form Design: Fill...
Standing on the Shoulders of GiantsSteve KrugDont Make Me Thinkhttp://www.sensible.com/dmmt.htmlPunkchipWAI-ARIA to enhanc...
Web Forms People Don't Hate
Web Forms People Don't Hate
Web Forms People Don't Hate
Upcoming SlideShare
Loading in …5
×

Web Forms People Don't Hate

4,576 views

Published on

Presentation from the Edge of the Web conference on March 15 2013 in Perth, Australia

Published in: Technology

Web Forms People Don't Hate

  1. 1. Web Forms PeopleDon’t Hate Chris Lienert @cliener
  2. 2. Ooh!Double Negative!
  3. 3. Love
  4. 4. Ooh! EotWDouble Negative!
  5. 5. End of the World
  6. 6. I work for Jardine Lloyd Thompson
  7. 7. Who used to smuggle opium
  8. 8. Insurance means forms
  9. 9. And forms
  10. 10. And more forms
  11. 11. Imagine filling that out online
  12. 12. Or on your mobile
  13. 13. Design Patternshttp://www.lukew.com/resources/web_form_design.asp
  14. 14. Design PatternsVertical label/field
  15. 15. Vertical Label/Field
  16. 16. Design PatternsVertical label/fieldHorizontal (search)
  17. 17. Horizontal (Search)
  18. 18. Design PatternsVertical label/fieldHorizontal (search)Clear path to completion
  19. 19. Clear Path to Completion
  20. 20. Design PatternsVertical label/fieldHorizontal (search)Clear path to completionMark optional fields
  21. 21. Mark Optional Fields
  22. 22. Don’t do this
  23. 23. BuildForm
  24. 24. BuildFormFieldset
  25. 25. BuildFormFieldset[no caption]
  26. 26. BuildFormFieldset[no caption]Block element (p, li, th, td)
  27. 27. BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)
  28. 28. BuildFormFieldset[no caption]Block element (p, li, th, td)Label (id)Field
  29. 29. Build<form  method="post"  action="wds.aspx"><fieldset><p><label  for="name">Name</label>  <input  type="text"  name="name"  id="name"></p></fieldset></form>
  30. 30. HTML5 Formshttp://wufoo.com/html5
  31. 31. HTML5 Attributesmaxlength for TextArea
  32. 32. HTML5 Attributesmaxlength for TextArearequired
  33. 33. HTML5 Attributesmaxlength for TextArearequiredplaceholder
  34. 34. HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "
  35. 35. HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "
  36. 36. HTML5 Attributesmaxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "autofocus
  37. 37. Autofocus in Practice – Type…
  38. 38. Autofocus in Practice – Type…
  39. 39. Autofocus in Practice – Argh!
  40. 40. Autofocus in Practice – Argh! F IX E D !
  41. 41. HTML5 AttributesPattern • default error messages are awful • doesnt scale well • does a fine robot dance
  42. 42. HTML5 AttributesPattern • pattern="/d*"
  43. 43. HTML5 Input TypesEmail • instant win • iOS keyboard love
  44. 44. HTML5 Input TypesDate, Month, Week, Time • don’t
  45. 45. HTML5 Input Types
  46. 46. HTML5 Input TypesTel • fairly useless • iOS keyboard love
  47. 47. People get things wrong
  48. 48. Validation to the rescue!
  49. 49. You Wouldn’t Like Me When I’m Angry
  50. 50. Validate Early,Validate OftenAllow people to make mistakes
  51. 51. Allow People to Make Mistakes
  52. 52. Allow People to Make Mistakes
  53. 53. Allow People to Make Mistakes “The real danger is not thatcomputers will begin to think like men, but that men will begin to think like computers.” Sydney J Harris
  54. 54. Allow People to Make Mistakes
  55. 55. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fields
  56. 56. Clearly Mark Invalid Fields
  57. 57. Clearly Mark Invalid Fields<p><label  for="birth-­‐date">Birth  Date</label>  <input  type="text"  class="date"  name="birth-­‐date"  id="birth-­‐date"  required></p>
  58. 58. Clearly Mark Invalid Fields<p><label  for="birth-­‐date">Birth  Date</label>  <input  type="text"  class="date"  name="birth-­‐date"  id="birth-­‐date"  required  aria-­‐invalid="true">  <label  for="birth_date"  class="errata"  role="alert">Please  enter  a  value</label></p>
  59. 59. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entry
  60. 60. Pattern Validate on Entry
  61. 61. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximum
  62. 62. Enforce Minimum not Maximum
  63. 63. Enforce Minimum not Maximum
  64. 64. Distractionhttp://bit.ly/Oaqlre
  65. 65. Validate Early,Validate OftenAllow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximumGet it right
  66. 66. Get it Right
  67. 67. A Bunch of Malarkey
  68. 68. Special Exhibit
  69. 69. Special Exhibit
  70. 70. Special Exhibit
  71. 71. Build
  72. 72. Build
  73. 73. Build
  74. 74. Build Lots of coding
  75. 75. Build
  76. 76. Quaid JSEmbrace & extend HTML, DOM
  77. 77. Quaid JSEmbrace & extend HTML, DOMPolyfill older browsers
  78. 78. Embrace and ExtendTel • phone <input  type="tel"  class="phone"> • mobile <input  type="tel"  class="mobile">
  79. 79. Embrace and ExtendPostcode • data-­‐state-­‐field<input  type="text"  class="postcode"  data-­‐state-­‐field="state"><select  id="state"  name="state">…</  select>
  80. 80. Embrace and ExtendTime<input  type="text"  class="time">Date<input  type="text"  class="date">Year<input  type="text"  class="year">
  81. 81. Embrace and ExtendNumeric<input  type="text"  class="numeric">Integer<input  type="text"  class="integer">Currency<input  type="text"  class="currency">
  82. 82. Embrace and ExtendPositive Numeric<input  type="text"  class="positive_numeric">Positive Integer<input  type="text"  class="positive_integer">Positive Currency<input  type="text"  class="positive_currency">
  83. 83. Embrace and ExtendCredit Card<input  type="text"  class="credit_card">CSC<input  type="text"  class="csc">
  84. 84. Data AttributesRequired if<input  type="checkbox"  name="variable-­‐field"  id="variable-­‐field">…<input  type="text"  name="target-­‐field"  id="target-­‐field"  data-­‐required-­‐field="variable-­‐field">
  85. 85. Data AttributesVisible if<input  type="checkbox"  name="variable-­‐field"  id="variable-­‐field">…<p  data-­‐visible-­‐field="variable-­‐field">…</p>
  86. 86. Custom ValidationInline$("#field").addValidation(function  (el)  {    if  (!(el.isValid  =  !el.checked))  {        el.errorMessage  =  "Check  the  box  or  else.";    }});
  87. 87. Custom ValidationOn Submit$("#field").addSubmitValidation(function  (el)  {    if  (!(el.isValid  =  !el.checked))  {        el.errorMessage  =  "Check  the  box  or  else.  Really.";    }});
  88. 88. Custom ValidationAjax Server Call$("#postcode").addServerValidation({    path:  "validation.svc/IsValidPostcode?postcode="})
  89. 89. Custom ValidationAjax Servicepublic  ValidationResponse  IsValidPostcode(string  postcode,  string  caller){        using  (var  p  =  new  PostalAddressClient())        {                if  (!string.IsNullOrEmpty(postcode)  &&  !p.IsValidPostcode(postcode))                {                      …}
  90. 90. Custom ValidationAjax Servicepublic  ValidationResponse  IsValidPostcode(…){                …                        return  new  ValidationResponse(…,  caller);                }        }        return  new  ValidationResponse(string.Empty,  caller);}
  91. 91. Custom ValidationAjax Response>  validationResponse  {    message:  "",    caller:  "postcode"}
  92. 92. Plug-in InternationalisationCustom methods and errorsquaid.forms-au-4.0.jsmessage:  {  required:      "Value  not  entered"  }quaid.forms-ca-4.0.jsmessage:  {  required:    "Value  not  entered,  eh.  Go  Leafs!"  }
  93. 93. Elephant in the Room
  94. 94. Elephant in the Room 6+
  95. 95. And the Rest6+ 3.6+
  96. 96. When the Lights Go DownJavaScriptHTML5Server<label  class="server-­‐error">
  97. 97. Ready for the Takinghttps://github.com/cliener/Quaid-JS
  98. 98. On a Web Site Near Youhttp://physical.jltsport.com.au
  99. 99. Plughttp://www.netmagazine.com/shop/magazines/april-2013-239
  100. 100. Standing on the Shoulders of GiantsWufooThe Current State of HTML5 Formshttp://wufoo.com/html5/Luke WWeb Form Design: Filling in the Blankshttp://www.lukew.com/resources/web_form_design.aspEvolving E-commerce Checkouthttp://www.lukew.com/ff/entry.asp?1579
  101. 101. Standing on the Shoulders of GiantsSteve KrugDont Make Me Thinkhttp://www.sensible.com/dmmt.htmlPunkchipWAI-ARIA to enhance form validationhttp://www.punkchip.com/2010/12/aria-enhance-form-validation/

×