Practical Ecommerce

Programmers: Web 2.0 Forms

Online forms have become much more elegant and usable in the last couple of years as developers take advantage of “Web 2.0” technologies like visual effects and “behind-the-scenes” calls to the server. In fact, I have seen forms that are just downright fun to fill out, which is something that I never thought I would admit. However, developers need to understand the cost of using these technologies, and some basic best practices with regard to implementing them.

Alternative to JavaScript

First, most of the “Web 2.0” features that we speak about are created using JavaScript, which is interpreted and run by a web browser, such as Internet Explorer. There are many cases where someone may not have JavaScript available, or it has been turned off in his browser. This is an important consideration because if an online form interface is not “degradable,” users that do not have JavaScript will not be able to interact with it. For example, if you have a contact form that requires Ajax calls to send the data to the server, a user without JavaScript will not be able to contact you. Obviously this is not a good idea, but there is a solution that is as obvious as it is overlooked: Make the form work without JavaScript first, then go back through and add the JavaScript goodies. In the example of a contact form, if the user did not have JavaScript, the form would instead submit in the normal manner and reload the entire page. For the most part, this is the accepted best practice when it comes to “Web 2.0” features, regardless of what they may be.

Inform users

Secondly, users have a certain expectation when they are browsing the Internet, and oftentimes “Web 2.0” features fly in the face of those expectations. A good example is that most users expect a page will load in the browser when they click a link. Sending an Ajax call in the background to update information does not cause a page load, and without additional interaction a user would have no idea that anything happened at all. It’s important that developers be sure to communicate to the user when things are happening, and what the result was. The ubiquitous “highlight” visual effect, where a page element turns yellow and then slowly fades back to white, and rotating “loading” icons are great examples of effective ways of communicating. Without some careful consideration by developers, features that should make a form easier to use can quickly make it awkward and difficult.

Brian Getting

Brian Getting

Bio   •   RSS Feed


Sign up for our email newsletter

Get the Practical Ecommerce RSS feed

Comments ( 4 )

  1. Legacy User June 3, 2008 Reply

    Thanks Brian. If would have been great if provided some samples of these forms.

    — *Naz Creative*

  2. Legacy User June 3, 2008 Reply

    At Early Impact we use the SPRY framework quite a bit for the interface layer in our ProductCart software.

    We need to focus on e-commerce, so it makes sense to let a "tools" developer like Adobe worry about cross-browser support and accessibility issues.

    SPRY comes with a lot of examples that make it fairly easy to use for non-developers that are familiar with HTML and CSS. That is: a designer can do some developer stuff :-)

    Some of the functionality is now integrated into Dreamweaver.

    Anyway, we've found it to be a useful set of tools.


    Early Impact, Inc.

    — *Massimo Arrigoni*

  3. Legacy User June 3, 2008 Reply

    In a practical sense, using "Web 2.0" forms will help convert shoppers into buyers because it will enhance their experience. For instance, if you can smoothly zoom in/out or rotate a product on a site using Javascript/AJAX controls, then it can help to convert that customer. It's tough to convert customers to begin with, but it'll definitely add to the overall shopping experience.


    — *Richly Chheuy*

  4. Brian Getting July 20, 2008 Reply

    A good example of a web 2.0 (Ajax) form is our contact form on this site…