Building High-Fidelity Interactive Prototypes with jQuery


This talk was given by David Park, Senior UI Designer at at the jQuery conference in Mountain View, California

Why are high-fidelity prototypes important?

At salesforce we test our features against Utility (or usefulness) and Usability. This gives executives a high level view of how a feature is doing and whether it's ready to be relased. The more high quality the prototypes are, the more accurate the user tests are. If you're testing utility, mockups and image maps are fine. Once you start going into more complex territory, we recommend using jQuery in the prototypes. I'm trying to advocate increased use of jQuery in our team.

From personal experience, it's much more likely that developers will implement what the designer intended if you provide an interactive prototype rather than a static spec. I try to complete a draft of a feature, and we'll give it to the developers, and as they're developing it I'll spec out any things I missed in the prototype. It was mentioned in a previous talk that it's impossible for designers to catch everything in the first go-round.

Prototypes generate a lot of excitement and momentum in the organization; when an executive sees something that's prototyped it looks "almost-finished" and increases momentum to code it and roll it out. A high fidelity goes a long way in this project completion perception.

Visual Process Manager

Salesforce acquired a company that lets you build drag-and-drop processes inside an app. We asked some flex developers to come up with a proof of concept demo in two weeks, but unfortunately they couldn't.

I had to come up with a prototype that looked and felt like our existing features. I came up with a simple prototype within a week; I wouldn't have been able to do it without using jQuery. It was about a month before it was featured on TechCrunch.

[At this point, David gave a demo walkthrough of the app in Salesforce. The app looks similar to their Flex apps, but it's all written in jQuery.]

Code Walkthrough

  • Take an existing app and use jQuery to change links and manipulate the DOM to make it seem like your app is fully integrated.
  • Use classes to store click states of DOM elements
  • Drag and drop and Accordion are very simple and easy to use. Making images draggable is a single line of code. I used a variable to track how many times the items were dropped, so that different actions happen the first and subsequent times.

[The full text of David's code is available in his slides here]


We've found that empowering designers with jQuery allows them to create much more interactive and powerful prototypes without knowing a lot about programming.

Thanks to David for the talk. You can find more information about David at his website.

Did you enjoy this post? Please spread the word.