Web Forms People Don't Hate
-
Upload
cliener -
Category
Technology
-
view
3.472 -
download
1
description
Transcript of Web Forms People Don't Hate
Web FormsPeople
Don’t Hate
Chris Lienert@cliener
Ooh!Double Negative!
Love
Ooh!Double Negative!EotW
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 Patterns
http://www.lukew.com/resources/web_form_design.asp
Design Patterns
Vertical label/field
Vertical Label/Field
Design Patterns
Vertical label/fieldHorizontal (search)
Horizontal (Search)
Design Patterns
Vertical label/fieldHorizontal (search)Clear path to completion
Clear Path to Completion
Design Patterns
Vertical label/fieldHorizontal (search)Clear path to completionMark optional fields
Mark Optional Fields
Don’t do this
Build
Form
Build
FormFieldset
Build
FormFieldset[no caption]
Build
FormFieldset[no caption]Block element (p, li, th, td)
Build
FormFieldset[no caption]Block element (p, li, th, td)Label (id)
Build
FormFieldset[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="name" id="name"></p></fieldset></form>
HTML5 Forms
http://wufoo.com/html5
HTML5 Attributes
maxlength for TextArea
HTML5 Attributes
maxlength for TextArearequired
HTML5 Attributes
maxlength for TextArearequiredplaceholder
HTML5 Attributes
maxlength for TextArearequiredplaceholderautocorrect="off "
HTML5 Attributes
maxlength for TextArearequiredplaceholderautocorrect="off "autocapitalize="off "
HTML5 Attributes
maxlength for TextArearequiredplaceholderautocorrect="off " autocapitalize="off "autofocus
Autofocus in Practice – Type…
Autofocus in Practice – Type…
Autofocus in Practice – Argh!
Autofocus in Practice – Argh!
FIXED!
HTML5 Attributes
Pattern • default error messages are awful • doesn't scale well • does a fine robot dance
HTML5 Attributes
Pattern • pattern="/d*"
HTML5 Input Types
Email • instant win • iOS keyboard love
HTML5 Input Types
Date, Month, Week, Time • don’t
HTML5 Input Types
HTML5 Input Types
Tel • 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 Often
Allow people to make mistakes
Allow People to Make Mistakes
Allow People to Make Mistakes
“The real danger is not that computers will begin to think like men, but that men will begin to
think like computers.”Sydney J Harris
Allow People to Make Mistakes
Allow People to Make Mistakes
Validate Early, Validate Often
Allow 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" name="birth-‐date" id="birth-‐date" required></p>
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>
Validate Early, Validate Often
Allow people to make mistakesClearly mark invalid fieldsPattern validate on entry
Pattern Validate on Entry
Validate Early, Validate Often
Allow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximum
Enforce Minimum not Maximum
Enforce Minimum not Maximum
Validate Early, Validate Often
Allow people to make mistakesClearly mark invalid fieldsPattern validate on entryEnforce minimum not maximumGet it right
Get it Right
A Bunch of Malarkey
Special Exhibit
Special Exhibit
Special Exhibit
Build
Build
Build
Build
Lots of coding
Build
Quaid JS
Embrace & extend HTML, DOM
Quaid JS
Embrace & extend HTML, DOMPolyfill older browsers
Embrace and Extend
Tel • phone
• mobile<input type="tel" class="mobile">
<input type="tel" class="phone">
Embrace and Extend
Postcode • data-‐state-‐field<input type="text" class="postcode" data-‐state-‐field="state">
<select id="state" name="state">…</ select>
Embrace and Extend
Time
Date
Year
<input type="text" class="time">
<input type="text" class="date">
<input type="text" class="year">
Embrace and Extend
Numeric
Integer
Currency
<input type="text" class="numeric">
<input type="text" class="integer">
<input type="text" class="currency">
Embrace and Extend
Positive Numeric
Positive Integer
Positive Currency
<input type="text" class="positive_numeric">
<input type="text" class="positive_integer">
<input type="text" class="positive_currency">
Embrace and Extend
Credit Card
CSC
<input type="text" class="credit_card">
<input type="text" class="csc">
Data Attributes
Required if<input type="checkbox" name="variable-‐field" id="variable-‐field">…<input type="text" name="target-‐field" id="target-‐field" data-‐required-‐field="variable-‐field">
Data Attributes
Visible if<input type="checkbox" name="variable-‐field" id="variable-‐field">…<p data-‐visible-‐field="variable-‐field">…</p>
Custom Validation
Inline$("#field").addValidation(function (el) { if (!(el.isValid = !el.checked)) { el.errorMessage = "Check the box or else."; }});
Custom Validation
On Submit$("#field").addSubmitValidation(function (el) { if (!(el.isValid = !el.checked)) { el.errorMessage = "Check the box or else. Really."; }});
Custom Validation
Ajax Server Call$("#postcode").addServerValidation({ path: "validation.svc/IsValidPostcode?postcode="})
Custom Validation
Ajax Servicepublic ValidationResponse IsValidPostcode(string postcode, string caller){ using (var p = new PostalAddressClient()) { if (!string.IsNullOrEmpty(postcode) && !p.IsValidPostcode(postcode)) { …}
Custom Validation
Ajax Servicepublic ValidationResponse IsValidPostcode(…){ … return new ValidationResponse(…, caller); } } return new ValidationResponse(string.Empty, caller);}
Custom Validation
Ajax Response> validationResponse { message: "", caller: "postcode"}
Plug-in Internationalisation
Custom 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!" }
Elephant in the Room
Elephant in the Room
6+
6+ 3.6+
And the Rest
When the Lights Go Down
JavaScriptHTML5Server<label class="server-‐error">
Ready for the Taking
https://github.com/cliener/Quaid-JS
On a Web Site Near You
http://physical.jltsport.com.au
Plug
http://www.netmagazine.com/shop/magazines/april-2013-239
Standing on the Shoulders of Giants
WufooThe 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
Standing on the Shoulders of Giants
Steve KrugDon't Make Me Thinkhttp://www.sensible.com/dmmt.html
PunkchipWAI-ARIA to enhance form validationhttp://www.punkchip.com/2010/12/aria-enhance-form-validation/