Improving the User Experience with Accessible, Device-independent e-Forms (original) (raw)

Abstract

HTML Forms, introduced in 1993, were the basis of the e-commerce revolution and have become the mainstay for interaction and data submission on the web. After 10 years experience however it has become clear how to improve on them, for the end user, the author, and the owners of the services that the forms are addressing. XForms is the new technology replacing HTML Forms.

The advantages of XForms include:

• It improves the user experience: XForms has been designed to allow much to be checked by the browser, such as types of fields being filled in, or that one date is later than another. This reduces the need for round trips to the server or for extensive script-based solutions, and improves the user experience by giving immediate feedback to what is being filled in.
• It is XML, and it can submit XML.
• It combines existing XML technologies: Rather than reinventing the wheel, XForms uses a number of existing XML technologies, such as XPath for addressing and calculating values, and XML Schemas for defining data types. This has a dual benefit: ease of learning for people who already know these technologies, and implementors can use off-the-shelf components to build their systems.
• It is internationalized.
• It is accessible: XForms has been designed so that it will work equally well with accessible technologies (for instance for blind users) and with traditional visual browsers
• It is device independent: The same form can be delivered without change to a traditional browser, a PDA, a mobile phone, a voice browser, and even some more exotic emerging clients such as instant messengers. This greatly eases providing forms to a wide audience, since forms only need to be authored once.
• It is easier to author complicated forms.

The approach taken is to separate data, functionality, controls and presentation. The data collected is essentially an XML document, which can be anything from a single data value, right up to a complete document, even XHTML. The data can be internal to the form, or in an external document loaded separately. Functionality includes assigning types and other properties to values, and describing declarative relationships between them. Data can be submitted in traditional 'legacy' form, or posted as XML; communication with web services is therefore simple. The form controls are_intent-based_, describing their purpose rather than how they look or how they should be implemented. This aids device independence since rather than saying you want radio buttons, you say that one value should be chosen from a list of values. The device can then choose a suitable representation. The controls additionally support use cases like data with repeating elements, and wizard-style approaches. Finally style sheets are used to describe representations for particular devices or modalities.

This talk will discuss the design aims of XForms and the approach taken for usability, accessibility and device independence, and demonstrate some new use cases.

About me

Researcher at the Dutch national research centre CWI

Organised 2 workshops at the first Web conference in 1994

Co-author of CSS, HTML4, XHTML, XML Events, XForms, etc

Chair of HTML and Forms working groups

Until recently, editor-in-Chief of ACM/interactions.

About W3C

W3C and its standards you know.

Recently W3C launched the Mobile Web Initiative (MWI) to make Web access from a mobile device as simple, easy, and convenient as Web access from a desktop device.

HTML Forms: a great success!

• Forms have been the basis of the e-commerce revolution
• You find them everywhere on the web

Searching

Buying

Logging in

Configuring hardware

Reading mail

Composing email

Etc etc

• Tracking packages
• calculating currencies
• submitting taxes
• banking
• expenses
• calendars
• blogging
• wiki
• ...

Problems with HTML Forms

• Presentation oriented, mixing data and presentation
• No types, thus ping-ponging to the server
• Reliance on scripting
• Problems with non-Western characters
• Accessibility problems
• Hard to make cross-device for single authoring
• Impoverished data-model, no integration with existing streams
• Hard to manage, hard to see what is returned
• No support for wizards and shopping carts etc.

Soundbite: "Javascript accounts for 90% of our headaches in complex forms, and is extremely brittle and unmaintainable."

XForms

• XForms has been designed based on an analysis of HTML Forms, what they can do, and what they can't.

The Approach: Data

The essence is to separate what is being returned from how the values are filled in.

• The model specifies the values being collected (the instance), and their related logic:
  • Types, restrictions
  • Initial values, Relations between values
• The body of the document then binds forms controls to values in the instance

The data may be pre-populated from local or external sources, and repopulated at any time in the form-filling process.

The Approach: Controls

An essential difference with HTML is that XForms controls areintent-based rather than presentation oriented.

Rather than specifying that a control consists of radio buttons, or a menu, XForms specifies what the control does, for instance that it selects one item from a list of items. CSS or similar can be used to provide the necessary presentation.

This approach allows the same XForm to be used across different devices_without change_.

The labels may be populated from local or external sources (good for localisation and multi-lingual environments)

Improving the user experience

XForms has been designed to allow much to be checked by the browser, such as

• types of fields being filled in
• that a particular field is required
• or that one date is later than another.

It also allows you to calculate values, such as the sum of a group of figures.

This reduces the need for round trips to the server or for extensive script-based solutions, and improves the user experience by giving immediate feedback on what is being filled in.

Authoring and maintaining complicated forms

Because XForms uses declarative markup to declare properties of values, and to build relationships between values, it is much easier for the author to create complicated, adaptive forms, and doesn't rely on scripting.

An HTML Form converted to XForms looks pretty much the same, but when you start to build forms that HTML wasn't designed for, XForms becomes much simpler.

XML

XForms is properly integrated into XML: it is in XML, the data it collects in the form is XML, it can load external XML documents as initial data, and can submit the results as XML.

By including the user in the XML pipeline, it at last means you can have end-to-end XML, right up to the user's desktop.

It can talk to web services, using SOAP or XML-RPC; however, it still supports 'legacy' servers.

XForms is also a part of XHTML2.

Use of XML technologies

Rather than reinventing the wheel, XForms uses a number of existing XML technologies, such as

• XPath for addressing and calculating values
• XML Schema for defining data types.

This has a number of benefits:

• ease of learning for people who already know these technologies
• possibility of reusing the knowledge for people who didn't already know them
• the ability for implementors to use off-the-shelf components to build their systems.

Integration with existing data streams

Data can be pre-loaded into a form from external sources.

Existing Schemas can be used.

It integrates with SOAP and XML RPC.

Doesn't require new server infrastructure.

Device independence

Thanks to the intent-based controls, the same form can be delivered_without change_ to a traditional browser, a PDA, a mobile phone, a voice browser, and even some more exotic emerging clients such as an Instant Messenger.

This greatly eases providing forms to a wide audience, since forms only need to be authored once.

The first XForms-enabled mobile phone was announced by KDDI last year.

Internationalisation

Thanks to using XML, there are no problems with loading and submitting non-Western data.

Accessiblity

XForms has been designed so that it will work equally well with accessible technologies (for instance for blind users) and with traditional visual browsers; this means that XForms are accessible out of the box.

New use cases

Apart from regular HTML forms uses, XForms supports:

• Wizards
• Shopping-basket-style forms
• Editing XML
• Spreadsheets
• Applications
• Output transformation

Implementation cost

XForms is rather easy to implement

XMLDOMCSSJavascriptXHTMLXPathXForms

=Regular XHTML Browser

Time to build all of above: 3 programmers, 4 months

Total footprint (on IPAQ implementation): 400K (above Java VM)

It is royalty-free and unencumbered

• It is an open standard
• It has wide industry support
• It is widely implemented

So there can be no vendor lock-in! (If you think this is a good idea, join W3C!)

Implementations

• At release XForms had more implementations announced than any other W3C spec had ever had at that stage
• Different types of implementation:
  • plugin, such as FormsPlayer, or Novell
  • native, such as picoForms, X-Smiles, or Mozilla/Firefox
  • 'zero install' implementations in Flash and Javascript, such as FormFaces, and DENG/ugo
  • proxy: converting at the server to whatever the device supports, such as Chiba and Orbeon
  • editors, such as XFormation
  • office suites, such as OpenOffice
• Many big players doing implementations, e.g.
  • Novell
  • Oracle
  • IBM
  • Sun (onOpenoffice/Staroffice)
  • Mozilla
  • (More that are still secret)

Users

As you would expect with a new technology, first adopters are within companies and vertical industries that have control over the software environment used. As more industries adopt XForms, the expectation is that it will then spread out into horizontal use. Examples:

• the entire British Insurance industry (via Origo and Polaris),
• the US Navy (in submarines),
• NASA (Jet Propulsion Laboratories)
• UK Government (Planning Inspectorate),
• Verifone - a payment company, for configuring petrol pumps,
• NACS - the National Association of Consumer Stores for configuring and accessing data from a range of devices
• Vancity - A Canadian Credit Union, with public XForms-driven pages
• German Shipbuilders,
• Bristol-Myers-Squibb (pharmaceutical),
• Tyco Healthcare ; collegeNET ; Hewlett-Packard,
• Remia - a major Dutch food manufacturer,
• Fraunhofer (known for MP3),
• Daiwa - a Japanese Bank,
• embedded in a Japanese mobile phone by KDDI.

Conclusion

Adoption and implementation of XForms was unexpectedly fast and is growing.

XForms addresses problems identified with Forms in HTML. The essential benefits are:

• Better user experience through client-side processing
• More use cases
• Control of complexity through declarative markup
• Device independence through intent-based controls
• Accessibility out of the box
• Integration into existing architecture
• Open standard