A Designer's Guide to Prototyping Ajax

By Kevin Hale
2007-11-23


Introduction

Jeffery Zeldman wrote earlier this year in his essay about Web 3.0 that “Wireframing AJAX is a bitch.” And while I can’t deny the statement, I do think there are steps we can take to alleviate the pain. The problem is static XHTML/CSS wireframes are woefully inefficient at the task of communicating and documenting the features available to the new crop of Ajax web sites. Because we’ve been working on a rather intense Ajax project for the last few months, we’ve been developing and refining a number of techniques and guidelines to help our team design for Ajax by moving beyond the traditional forms of functional specs and wireframes to something a bit more appropriate for the dynamic medium—rapid prototyping.

There’s nothing new about them. 37signals’s Getting Real movement is all about sitting down and getting in front of the interface. A prototype is just one of the ways a team can dive right in. For us, prototypes are basically wireframes come to life. A combination of CSS, XHTML and JavaScript, they help me, as an interface designer, communicate effectively the look and feel of a proposed page to a programmer, like Ryan, so he can integrate the interface into a project quickly and efficiently.

“The combination of valid HTML/XHTML markup and external CSS can be used to rapidly create prototypes, speed up the development process, and easily incorporate more user-centered techniques into the design process.”

Jeff Lash

The problem, of course, is figuring out the logistics and mechanics of the process—drawing a line from point wireframe to point prototype. How exactly does one “rapidly create” a prototype from a wireframe? How much JavaScript should one inject at such an early stage in the process? What works? What’s necessary?

Well, our rapid prototypes have no data layer present (no databases, no sql, and no Ajax calls) and all of our interactions are kept strictly boolean (on/off states, no animations or tweening, functions only take place on mouseovers and clicks). The limitations we put on a prototype make them easy to change, easy to debug and easy to make portable. We use prototypes for communication, development, troubleshooting, screenshots, demos and documentation—basically, at every stage of an Ajax project, a prototype can help us do it better.

In fact, the demo that you see on Wufoo was spun off from an advanced prototype. Prototypes have completely changed the speed and efficiency of how we work around here and over the next few weeks, we’re happy to share exactly how we do it.

Now, I want to remind people that I acknowledge that everyone’s workflow is unique. Ajax applications appeared long before this article was written so there’s no doubt in my mind that you can get the same things done with completely different methods and approaches. Over the next three weeks, I will be going over just an example of the guidelines our team uses when tackling an Ajax project. This series was written to help designers that are just beginning to brave the JavaScript frontier. We’ll start off with some skills you’ll want in your arsenal before beginning, move on to some approaches we’ve researched for wireframing Ajax and then finishing off with a few tips we’ve discovered to help make the prototyping step smooth as silk.

Tutorial Pages:
» Introduction
» There are No Heroes in Prototyping
» Relationship Skills
» XHTML Skills
» CSS Skills

Related Tutorials: » Getting Started with AJAX in jQuery » GWT Basics: AJAX Programming with Java » AJAX Accessibility for Websites » AJAX and PHP Form Processing » The obligatory 'My Ajax Tutorial' Post » Ajax Wireframing Approaches