Prototyping


Hint. Keep a printout of this page with your prototyping supplies and refer to it periodically!
 

Why prototype? Are you are a true genius, remarkably talented, highly artistic, creative and incredibly insightful? Can you withstand many failures to the occasional success?  If so, you may (every now and then) have a design vision that you can immediately implement into an effective and appealing system. 

However, if you are like the rest of us you will discover that good design is hard work: full of wrong directions, misconceptions, and pitfalls. Good designs rarely appear immediately, but evolve from careful understanding of what customers really need, from brainstorming many possibilities, from evaluating these possibilities, and from progressively refining them.

Sketching (see Your Sketchbook) of crude screen drawings and sequences are often effective first cut prototypes. Yet pencil sketches are static. You can develop interactive prototypes to serve as an interactive sketch that brings design possibilities to life. These include pictive displays, on-line system mock-ups, and even partial system implementations. Early prototypes help you brainstorm ideas, variations, and evoke critique from peers and customers. Later prototypes help you refine your design ideas, explore them in detail with customers, consider their aesthetics, fine tune interaction details, test them with actual people, and so on.

Prototypes are one of the cornerstones of interaction design. If you don't prototype, you are an interface hack, not a designer.

Why a prototyping kit? A prototyping kit is a set of supplies that will help you rapidly work on your ideas. While the simplest kit contains just paper and pencil to capture design ideas (e.g., your sketchbook), you will need your own specialized tools to help you refine these ideas. Having these tools handy means that you can work on your ideas, rather than spend your time finding a piece of paper and other supplies. Just as a carpenter keeps their toolbox of tools readily available so he/she can get on with the job, so should you.
Materials for paper prototyping Prototyping kits come in many shapes and forms. I keep the following supplies in my kit. All supplies are held in an artist's portfolio case, so I can store my prototypes safely afterwards. Most supplies are available at the bookstore or a stationary store. Wander down the art supply section of the bookstore for other prototyping supply ideas.
  • a portfolio case to hold supplies (and prototypes as well)
  • white paper
  • colored art paper
  • large poster-board for assembling prototypes
  • sticky notes of various sizes
  • transparencies
  • water-soluble pens
  • normal glue stick
  • sticky-note glue stick
  • scissors
  • normal pencils
  • colored pencils a
  • sharpener
  • good quality eraser
  • stapler
Electronic prototypes At some point, you will want to prototype electronically. There are many good (and sophisticated) tools to let you do this.
  • Powerpoint, a slide show presentation tool, lets you simulate a scripted on-line visual storyboard. It has reasonable drawing tools that will let you create static images, and you can have branches in your script. Some limited animation is available.
  • Interface builders are standard in most programming environment. They are excellent at prototyping standard GUI systems. Because it is a real programming language, you can also fake (or implement) functionality. However, doing unconventional things is hard.
  • Macromedia Flash and Director are two excellent prototyping systems (they include a powerful scripting language), and can be used to create quite unconventional systems. Flash and Director's  sophistication comes at a price: they take a while to master. They are also not available on the department's computers.
Prototyping articles