Ajax Makeover, Part 4: Transforming existing sites with jquery and Ajax forms

Ajax technology changes the appearance of large commercial Web applications, but many smaller web sites do not have the resources to rebuild the entire user interface (UI). Some of the new features of Ajax can solve real-world interface problems and improve the user experience. With this series of articles, you can learn how to use the Open source client library to make your user interface more stylish. This article will show you how to use Ajax technology to transform a multi-step checkout process from a series of forms into a single screen interface. We will adopt a step-by-step enhancement approach to ensure that all user agents still have access to your site.

About this article

This article will step you through using Ajax technology to improve a WEB 1.0 shopping site. You can download the sample application source code before and after the improvements, or you can view the two versions of the run effect on the author's Web server. In addition to Ajax technology and best practices, you'll learn how Ajax can improve the user experience through incremental enhancement.

This article assumes you have a solid grasp of HTML and CSS, and a basic understanding of JavaScript and Ajax programming techniques. The sample application is built using client code only; The techniques demonstrated in this article apply to any server-side application framework. For all Ajax applications, you must run the sample code from a WEB server rather than from a file on your desktop. In addition, you can only follow the source code on my Web server to see how the sample site works.

Recalling Parts 1th and 2nd

Parts 1th and 2nd of this series describe the sample application Customize Me now and start transforming it from the Web 1.0 version to the Ajax-supported version of Web 2.0. With the JQuery JavaScript framework and other open source libraries, you streamline the user flow Customize Me now by replacing pop-up messages, outbound links, and navigation sidebar with the modal dialog box (modal dialog), ToolTips, and Lightbox respectively. In part 3rd, you made further improvements, placing chunks of content on the Ajax/dhtml tab and replacing the click-Wait Picture page with a quick image carousel.

Objective of Part 4th

In this article, you'll learn how to streamline a complex process by turning a multi-page form into an Ajax tab. The use case used is the checkout process for the sample shopping site. Without Ajax, multi-page forms are tedious and frustrating to potential customers. After the Ajax makeover, even a complex checkout process can become friendly and easy to operate-as long as you are careful about how you construct the user interface. E-commerce sites are not the only beneficiaries of these technologies. The same principle can be applied in order to complete a multi-step process where the user must fill out a series of related forms.

To understand these concepts in this article, refer to Customize Me now 1.2 (see download, which is a slightly modified version of the original sample site without Ajax modification.) If you make a change to version 1.2, you get Customize Me now 2.2, which combines all the changes made throughout the series. ）

E-commerce Checkout process: WEB 1.0 version

Even customers who like to shop online often hate the checkout process. There are too many issues involved:

How many steps are involved in the checkout process is usually not very clear.

It's not clear how much time each step takes.

Depending on how the user answers specific questions, they may be diverted to irrelevant parts of the application, and then come back and take unnecessary detours. Choosing a shopping option, applying a discount number, or even a login will make the seemingly intuitive process take longer than expected.

Unless the site developer is very careful about the security of the process, a baffling security warning will annoy the user.

Ambiguous error messages and inconsistent error flags will make it unclear when an error occurred.

A poorly coded verification routine can also cause endless problems. There are many examples of this, such as the server response, the credit card number will not expire must be entered again, such as the check box is not selected as requested.

E-commerce Checkout process: WEB 2.0 version

Improving the user experience should be one of your primary goals when you start investing time and development when you are ready to use Ajax to transform an existing Web site. While Ajax does not address the full crux of the user's aversion to the checkout process, it can provide some help in at least three areas:

Make clear the number of steps required to complete the checkout process

Faster conversion between steps

The return process is simple and uniform when the user must log in, enter a discount number, or deviate from the normal checkout process for other reasons