In a the online Human-Computer Interaction course that I did recently, I learned quite a bit about “rapid prototyping”. As the name suggests rapid prototyping is all about mocking up ideas quickly, to get user feedback fast.

In the lecture on this topic, Scott Klemmer – an Associate Professor of Cognitive Science and Computer Science & Engineering at UC San Diego – started off by explaining that degree of prototype fidelity is likely to evolve over time (see Fig. 1 below). One might start with a simple drawing on a piece of paper and eventually create a full-fledged clickable prototype. The goal, however, remains the same: to get quick feedback on an idea or concept. Prototyping is a great way to create and to compare alternatives. The idea is not to create pixel perfect designs but instead to rapidly create a number of designs that one can quickly evaluate and compare.

In the lecture, Scott outlined the following prototyping techniques to get quick feedback:

1. Storyboarding – The main purpose of storyboarding, as Scott pointed out, is to focus on the task that the user interface (‘UI’) is going to support. The temptation is often to jump into sketching a user interface straight away, but there’s a lot of value in taking a step a back to concentrate first on what the UI will help the user to accomplish. Ultimately, one can look at storyboards as a communication tool that will help to convey flow and ideas. Scott provided a good outline of both the objectives and benefits of storyboarding, which I’ve copied in Fig. 2 below.
2. Paper prototyping – Paper prototyping is a quick and easy way to figure out the UI at an early stage. One can use paper prototypes to quickly test multiple prototypes simultaneously, even getting the users involved in modifying these prototypes. Scott also provided some practical tips and tricks with regard to doing paper prototypes (see Fig. 3 below).
3. Digital mockups – Naturally, with digital mockups the fidelity is likely to be a lot higher compared to storyboards or paper prototypes. However, this also means that creating digital mockups can be much more time consuming. I’ve got good experiences with observing users play with clickable prototypes or letting them complete specific tasks through the mockup, but this approach often requires a lot more planning and resource compared to other rapid prototyping techniques mentioned above.

Main learning point: I guess the main thing I learned from people like Scott Klemmer and Bill Buxton (see Fig. 4 below) is that with rapid prototyping the level of fidelity hardly matters. If anything, prototypes can serve as great communication and learning tools. Whether the goal is to quickly compare a number of alternatives or to get feedback on a particular idea, prototypes can really help in fleshing something out and getting rapid (user) feedback.

Fig. 1 – The level of prototype fidelity is likely to evolve over time (taken from http://tisquirrel.wordpress.com/2013/05/17/prototyping-storyboarding-paper-prototyping/)

Fig. 2 – Objectives and benefits of storyboarding (by Scott Klemmer)

Things that storyboards can help to convey:

Setting

• Who are the people involved?
• What is the user environment?
• What is the task(s) being accomplished?

Sequence

• What steps are involved?
• What leads to someone using the app?
• What task is being illustrated?

Satisfaction

• What motivates people to use this system?
• What does it enable people to accomplish?
• What need does the system fill?

Benefits of storyboarding:

• Holistic focus, concentrating on user tasks
• Avoids commitment to a particular user interface (no buttons yet)
• Helps to get all the stakeholders on the same page in terms of the goal

Fig. 3 – Some tips and tricks in relation to paper prototyping (by Scott Klemmer)

• Keep all your materials in one place
• Work quickly and make reusable components (e.g. buttons)
• If something is too difficult to simulate, just describe the interaction verbally
• Backgrounds can provide valuable context to the user
• Don’t be afraid to mix and match software and hardware

Fig. 4 Bill Buxton on sketching experiences (at the Institute of Design Strategy Conference, May 2008)

Related links for further learning:

1. https://ccrma.stanford.edu/courses/250a/lectures/IDSketchbok.pdf
2. http://www.designinginteractions.com/interviews/BillVerplank
3. http://www.uxbooth.com/articles/paper-prototyping/
4. http://www.paperprototyping.com/
5. http://en.wikipedia.org/wiki/Paper_prototyping
6. http://www.slideshare.net/toddwarfel
7. http://hci.stanford.edu/courses/cs247/2012/readings/WhatDoPrototypesPrototype.pdf
8. http://hci.stanford.edu/publications/bds/10-Schrage.pdf
9. http://prototyping-research.tumblr.com/post/35663689596/technique-video-prototypes
10. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.35.2279&rep=rep1&type=pdf