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.