Ajax Forms - Enhancing the user experience

Sholom Sandalow, Friday, June 23, 2006 @ 11:56 am

The web is filling up quickly with examples of Ajax powered sites that allow us to do things we’ve never been able to do before on the web. From note taking apps, to spreadsheets, photo editors, and online games, Ajax apps like these are continually pushing the boundaries of what is possible, and in the process changing the way we work live and play on the internet.

However, we can also use Ajax to build better user experiences for the tasks we’ve already been performing on the web.  One kind of task crying out for Ajax attention is form submittal, in which a user fills in a set of fields and presses the submit button. 

Almost all forms today use the POST action in the SUBMIT button to upload data to the server, where processing gets done, and an entirely new page is sent back to the user.  Depending on the results, this might be a “Thank You” message, or it could specify an error in the form submission (more likely when the form is lengthy).  Either way, the experience is a poor one. 

First, the navigational requirements are increased, as at least two pages are required-one for form and one for result.  The result page usually contains no more that a couple of sentences displaying the results of the form submission, and possibly instructions on what next steps to take.

Second, the user has to wait until the end of the form submittal process to receive any error messaging.  This increases the likelihood that there will be unnecessary typing and mouse movement/clicking, since incorrectly entered information into one input field may require a user to reenter fields down the entire form. 

By using Ajax to asynchronously send the information to a server for processing, form entry and submission can be much more quick and painless. 

Information can be uploaded processed and returned as the user enters data into an input field.  Since not all the input needs to be sent at one time upon submit button on click, the user is told instantly, say, that the username he just entered is already taken.   

Once all the required form data is submitted, the result can be displayed on the same page, allowing the user to move on to other, more enjoyable, tasks more quickly.  If the form is small, and shares screen real estate with other content on one page, the user can continue on that page after the form is successfully submitted.  No need to hit the back button.

Here is an example of what can be done to build a better Newsletter Signup form.

Ajax continually provides us with new and exciting web based products and services.  But is also is a powerful tool for restructuring the way information is presented and manipulated on the web.

agile ajax

Comments: 1 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Thanks for this posting, it is very helpful. We are always looking for ways to make forms easier and more engaging.

   Comment by Jamie Roche, Tuesday, September 26, 2006 @ 6:42 pm

Leave a comment