Your Prototyping Supplies

back to CPSC 581
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 prototypes to serve as an interactive sketch that brings design possibilities to life. These include pictive displays, on-line system mock-ups, flip books, and even partial system implementations. Early prototypes are sketches that 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. But if you want to prototype, some basic supplies would be helpful.

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. The materials below are just a beginning.
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. Digital video is an excellent means for creating a video prototype that serves as a vision of your system. Techniques like stop motion animation work well here. What is usually needed is a digital video camera, a tripod, and a digital video editor. Most people have these already. A standard home video camera works well, and some video editors are freely available (e.g., Windows Movie Maker) - but you get what you pay for!
Prototyping articles	Chapter 4.8 Prototyping.(Extract) Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press. Prototyping for tiny fingers. Rettig, M. (1994) Communications of the ACM, 37(4), ACM Press. Pictive: An exploration in participatory design. Muller, M.J. (1991) In Proceedings of the ACM Conference on Human Factors in Computing Systems, p225-231, ACM Press. Low vs. high fidelity prototyping debate. Rudd, J., Stern, K. and Isensee, S. (1996) Interactions 3(1), p76-85, ACM Press. Sketching User Experiences. Bill Buxton (2007). Morgan Kaufmann. Our textbook. Has great examples of various interactive sketching/prototyping methods.