Editor's note: This article is a chapter from Todd's book Prototyping: A Practitioner's Guide.

In 2008, I ran the first survey on prototyping for this book. My goal was to understand what tools UX people are using for prototyping, why theyíre using those tools, and what they want from those tools. I also wanted to see how my experiences and choices compared to the rest of the UX community.

Roughly 200 people responded from a variety of UX backgrounds, including researchers, designers, developers, product managers, and business analysts. This chapter discusses the results of that survey and offers some guidance for selecting the right prototyping tool for your environment.

Influencers

When I started this book, most of my prototyping was done using HTML and CSS. Honestly, I had to fake the majority of my AJAX interactions and transitions. My JavaScript skills were pretty mediocre.

One day, I decided to bite the bullet and get familiar with the Prototype and script.aculo. us JavaScript library. It took a few days of trial and error before I finally got a handle on things. I havenít looked back since.

At the time of writing this chapter, most of my prototyping is still done using HTML, CSS, and Prototype and script.aculo.us. My JavaScript skills have evolved, and I no longer have to fake AJAX.

The available prototyping options continue to grow. By the time I finish this book, my tools of choice could very well change or evolve again. Iíve been playing with the jQuery JavaScript library. Adobe just released a new version of Fireworks and Flash. Who knows what will be available?

So why choose HTML, Flash, Fireworks, Axure, or something else? According to the survey, these are the top influencers that drive tool choice, in order of importance:

  1. Familiarity and availability
  2. Time and effort to produce a working prototype
  3. Creating usable prototype for testing
  4. Price
  5. Learning curve
  6. Ability to create own GUI widgets
  7. Available on my platform
  8. Collaborative/remote design capabilities
  9. Built-in solutions/patterns for AJAX transitions
  10. Built-in GUI widgets
  11. Creating usable source code

I can definitely find my own influencers in that list with one exceptionóknowing the audience and intent. This is my number one concern. But my other concerns, like familiarity, availability, comfort, availability of GUI widgets and AJAX, or ability to create my own are definitely in that list. They just might be in a slightly different order.

Youíll see this list again later in the book. Iím going to use it to evaluate a number of different prototyping tools.

You may notice the presence of creating usable source code. You may also notice that itís at the bottom of the list. This oneís a bit tricky.

Creating prototypes that are reusable for production isnít something thatís commonly done or recommended. There are several reasons for this. Prototyping is a rapid, iterative process. Itís a process for exploring ideas, failing often, and learning quickly. If youíre focused on creating production-level code, you start to lose some of the value of rapid iteration.

On the other hand, if you can produce reusable source code with very little or no additional effort, then your prototyping tool has the added value of development time.

At the time of this bookís publication, there isnít a dedicated prototyping tool for non-coders that can create rapid prototypes with little effort and produce reusable source code. If you want a prototyping tool that produces reusable source code, youíll have to learn to code HTML or use a development framework like Ruby on Rails.

What Tools Are People Using?

As I expected, the usual suspects like paper, PowerPoint, Flash, and HTML showed up on the most common tools list. Also, not surprising is that participants used more than one tool. For instance, they might use a combination of paper for sketching and then go into Photoshop and finally HTML.

In the past couple of years, a couple of newcomers have hit the scene and continue to gain traction, namely Axure RP and Fireworks. While Fireworks has been around for some time, only recently has it gained built-in prototyping capabilities. Hereís a breakdown of the most common tools being used for prototyping in the UX field as of 2008.

Table 5.1 survey results

Iím sure you can see a number of familiar tools in that list. Did you notice any surprises?

Probably the biggest surprise to me was the number of people who use Visio for prototyping. I expected to see Visio, but didnít expect nearly 60 percent. Another surprise was the presence of Excel and FileMaker for prototyping. While this made up less than one percent of respondents, I was surprised to see it at all. Finally, the sheer number of prototyping tools being used for prototyping was a bit surprisingóover 26 total if you include the items listed under Other.

What Kinds of Prototypes Are They Making?

Paper continues to be at the top of the list. The continued growth of AJAX libraries like Prototype and jQuery, combined with the increasing number of auto-generating tools like Axure, iRise, and Fireworks, has made creating interactive prototypes easier than ever.

Ruby on Rails (RoR) is another one that has seen an increase in use for prototyping. Rails is a rapid application development framework, which makes it an ideal tool for both prototyping and production. Rails maintains all the advantages of HTML with the added capability to use dynamic data. Hereís a breakdown in Table 5.2 of the most common types of prototypes that people in the UX community are building.

Table 5.2 survey results common types of prototypes

Most of my prototypes are created using HTML and AJAX. I use an HTML/ CSS framework we developed in-house at Messagefirst combined with either the Prototype or jQuery JavaScript library. While my prototypes are all hand-coded, leveraging an existing, well-tested framework and JavaScript library means I can maintain a rapid, iterative approach.

In some cases, I need to use something other than HTML, for example, for mobile or TV. If I need to prototype for mobile, I typically use paper or Flash. If I need to prototype, say, for instance, a DVR interface, I use Flash or Keynote.

Want to Learn More on Prototyping?

On March 31, Todd Zaki Warfel will share his Eight Guiding Principles for prototyping. These principles are the foundation for more effective prototyping, and will improve your design process whether you're a seasoned prototyper or just getting your feet wet. And if you register before March 24, you'll get a free PDF of his book Prototyping: A Practioner's Guide.

Read more about Todd's virtual seminar, A Practitioner's Guide to Prototyping.

Share Your Thoughts With Us

Have you explored tagging within your organization? What have you found that works? What should others avoid? We'd love to hear your experiences at the UIE Brain Sparks blog.

 Share this article with a friend/colleague.

Join over 25,000 subscribers to UIEtips, our free email newsletter


  • Original articles by Jared Spool delivered to your inbox
  • Podcasts that help to improve your UX skills
  • UX Insights from the brightest minds around
  • Awareness of all things UIE