Intro — Improving user experience in HTML forms

Presentation video

Video recording from the HTML5 Berlin User Group meetup 2013-12-09 at Co-Up in Berlin. The length is 50:14 minutes. Also see the presentation slides.

Video download: high resolution (1.1 GB, MP4 format), medium resolution (469 MB, MP4 format), low resolution (106 MB, WebM format). Also available on youtube.

Demo steps

Starting from a plain HTML5 form, each step adds new features progressive enhancement style. In practice, for demo purposes, I started with all features and removed them one by one — that's one of the little-known properties of progressive enhancement.

Projects

These open source HTML form UX projects are covered in the presentation, roughly in this order, although the last ones are glossed over due to lack of time.

h5Validate
Forked h5validate. A jQuery plugin that understands HTML5 forms and knows how to validate them, even in browsers that don't yet support HTML5.
EmulateTab
A jQuery plugin to emulate tabbing between elements on a page.
SkipOnTab
A jQuery plugin to exempt selected form fields from the forward tab order.
PlusAsTab
A jQuery plugin to use the numpad plus key (configurable) as a tab key equivalent.
Followup
A jQuery plugin to show and hide follow up questions in a form.
AutoCleanCallback
A jQuery plugin to clean input fields with common functionality, like trim, normalize whitespace, digits only. It is also easily extensible.
AutoCleanCallback-Canada
Canadian extensions to AutoCleanCallback (required).
PageHasFormChanges
A jQuery plugin to check if *anything* has changed in *any form* on a page, and warn the user before leaving the page.
EditDidWhat
Compare two strings to see what has changed, and perform some string manipulation.
ChangePolling
A jQuery plugin to check if the value has changed in an input/select/textarea without relying on the jQuery .change() event. This is perfomed using polling at a configurable interval, which will then trigger the .change() event.
jquery-mutation-summary
A jQuery wrapper/plugin for mutation-summary, the DOM mutation-observers wrapper.
FormFieldInfo
A javascript plugin used to collect information about forms in a page. This information is then used to filter out potential form problems, like missing values for radio buttons etcetera.
extract-fields
Scripts to extract HTML form field information from one or several webpages.
ObjectComparator
A javascript plugin to create a comparator for one or more properties of an object. Comparators are useful for sorting arrays of objects, and for general comparisons in, for example, if statements. The comparison is done only if the types of both objects' property matches.

Presentation photos

Photos from the HTML5 Berlin User Group meetup 2013-12-09, by Alexandre Sutra.

Log

Video and photos from the HTML5 Berlin User Group meetup 2013-12-09

Finally added the video and photos from the HTML5 Berlin User Group meetup 2013-12-09 at Co-Up in Berlin, courtesy of Alexandre Sutra of BeMyApp. Alexandre also wrote about the event on their blog.

Presentation slides

Have a look at the presentation slides.

Project links

They're also listed on my github page.

Placeholder

For now.