Notes on prototypes

Allison Parrish

Capstone home.

Rough notes on prototyping interactive digital stuff.

Iterative design process

Macklin and Sharp’s four-step iterative design process (originally for games, but applicable to interactive projects as well).

  • The steps:
    1. Conceptualize: Develop an idea for an interactive experience.
    2. Prototype: Realize some aspect of the experience in a way that can be interacted with.
    3. Playtest (or user test): Have people interact with the prototype and see what happens.
    4. Evaluate: Review results and adjust concepts accordingly. Then return to step 1.
  • Macklin and Sharp point out that “there is a difference between a game’s concept and a game’s design…. Turning an idea into a design requires that the designer structure the idea so that it can be used to produce prototypes, which are then playtested, the results of which are then evaluated to see what they say about the original idea” (chapter 5).
  • Macklin and Sharp on prototypes (rephrasing to generalize about more than games): “The best way to figure out” how an interactive experience “will look, feel, and act is to dive in and start making it. The faster the [it] moves from the pure ether of ideas and into a prototype, the closer the [it] will get to showing the kind of play experiences it can generate. The key to prototyping is to turn the most promising ‘what if…’ question from the brainstorm, or a combination of ‘what ifs,’ into something tangible. That could be paper, quick and dirty code, even the designer’s own body…” (chapter 5)
  • Playtesting/user testing: This will vary greatly depending on your project and on the prototype in question. The purpose is to see whether or not the approach in the prototype worked. Macklin and Sharp: “Playtesting is often the hardest and most revealing part of the iterative game design process. Often, what seems like a great idea that makes sense in a prototype falls apart when players get ahold of it. This might feel like a bad thing, but it’s really a blessing in disguise.”
  • Note: You might be your own playtester/user tester! Your project may not have “users” (or “players”), or you may at times need to short-circuit proper testing and just imagine yourself in the role of your audience. If it’s an art project, your “user test” might just be making a determination for yourself about whether or not the prototype approach produces the experience you’re after.
  • Evaluation is (again quoting Macklin and Sharp) “taking what playtesters did and said and determining if and how the feedback necessitates changes to the game’s design. […] It takes practice, kind of like a doctor hearing a patient talk about their symptoms and then from that, building up enough evidence to make a diagnosis. It involves not only listening to what the patient says, but observing them and including all of that into the evaluation.”

Prototyping techniques

“How do I know what I think till I see what I [make]?”—E.M. Forster, paraphrased

  • A prototype is “any representation of a design idea” that provide “the means for examing design problems and evaluating solutions” (Houde and Hill 369, 368). Prototypes are “playable questions” (Macklin and Sharp chapter 10).
  • Prototypes are disposable. They don’t have to look “finished” (unless the “finish” is what you’re prototyping). In fact, “finish” can sometimes communicate the wrong thing: “Finished-looking (or -behaving) prototypes are often thought to indicate that the design they represent is near completion” (Houde and Hill 368).
  • The prototyping process is partial, concurrent and iterative. “No single prototype [can] represent the design of the future artifact” at early stages of development (Houde and Hill 371). You’ll likely want to prototype different aspects of the project in different ways. Once you evaluate a prototype, you’ll probably want to make a new prototype, keeping in mind what you learned from evaluating the previous one.
  • Prototypes can be made from any material! They don’t need to use the same materials or techniques that you envision for the final project. “What is significant is not what media or tools were used to create [prototypes], but how they are used by a designer to explore or demonstrate some aspect of the future artifact” (Houde and Hill 368).
  • Paper prototypes have a ton of advantages and are a good first step even (especially?) for digital systems. Paper prototypes are low cost and low effort; they can be modified easily; they’re disposable; they afford visual and spatial thinking (you can spread them out on the table); they afford collaboration (you don’t have to write network code to make a prototype that multiple people can interact with simultaneously).
  • Houde and Hill’s “dimensions” of prototypes (368, 369, 377). These dimensions aren’t exclusive or categorical!
    • Role: “the function that an artifact serves in a user’s life”; questions about what that role should be and “what features are needed to support it.” Examples: Storyboards, journey maps, visual mockups (screen-based or physical)
    • Look and feel: “the concrete sensory experience of using the artifact” when the goal is to “present its functionality in a novel way”. Examples: anything that “works”: UX wireframes, implementations of interface elements, etc.
    • Implementation: “techniques and components through which an artifact performs its function.” For our purposes, this includes writing code to determine if a particular computational technique is viable or testing out a physical computing component to see if it has the desired properties, etc.
    • Integration: “represent the complete user experience of an artifact”; Such prototypes “verify that the design is complete and coherent.”
  • Macklin and Sharp’s finer-grained prototype categories (chapter 10):
    • Paper: Early stage for “making ideas concrete”
    • Physical: “enacting aspects of the play experience in real life to help think through the play experience,” including role-playing
    • Playable: “rough” prototypes, “often not including graphics, sound, or even goals” that investigate the “core actions,” implemented in such a way that the context of interaction is similar to that in the final project
    • Art and sound: “exploring the visual and aural style, and sometimes, the production processes for creating these”
    • Interface: “screen-based information and… feedback systems, but also the actual mechanism” that is used to interact with the project
    • Code/tech: “technical aspects… like whether or not it will play smoothly on certain kinds of devices or computers”
    • Core game: Like Houde and Hill’s “integration” prototype, these prototypes “move beyond the rougher playable prototype by including the full set of actions available” and perhaps “include basic art and sound” to evaluate their impact on the experience.
  • Fake it till you make it. You don’t have to write the code behind some behavior in your project to see if the idea works. Play act and role play with non-code tools. Ray’s motorcycle trick.
  • Document your prototypes! Or else you won’t learn from them. Keep a “lab notebook” (this can be written, video, photos; use a spreadsheet maybe?). “You want to make sure to document the questions your prototype is exploring. You also want to record what you are doing to answer those questions…. And you need to make sure you capture how you did it, so you can re-create the prototype if you need to” (Macklin and Sharp chapter 10).
  • Allison’s additional reasons to prototype:
    • Sometimes just sitting down with the intention to make a prototype is enough to solve a problem. As you’re thinking through the steps needed to physicalize the problem, you’ll often make a mental discovery that will obviate the prototype altogether.
    • Another main reason to prototype, especially for artists and capstone students: to figure out if you like the process of making the thing that you’re setting out to make. Prototypes also answer the questions: “Does this feel good? Do I want to keep working with these tools? Do I like investigating these ideas?”

Prototyping tools and resources

  • Wireframes and UX tools: too many to even list. Pencil Project is open source and does clickable prototypes.
  • Twine is a very simple and flexible tool for prototyping interactive experiences (especially language-based things and branching narratives, but it can be adapted for all kinds of prototyping).
  • p5.js for sketching code ideas in JavaScript, especially generative art, interactivity, animation.
  • In industrial design, “prototyping” has a more specific meaning: making initial versions of physical forms (so you can get it right before manufacturing). Doing this with small-scale, off-the-shelf techniques is called “rapid prototyping.” Guide to rapid prototyping, Cardboard prototyping

Works cited

  • Houde, Stephanie, and Charles Hill. “Chapter 16 - What Do Prototypes Prototype?” Handbook of Human-Computer Interaction (Second Edition), edited by Marting G. Helander et al., North-Holland, 1997, pp. 367–81. ScienceDirect, doi:10.1016/B978-044481862-1.50082-0.
  • Macklin, Colleen, and John Sharp. Games, Design and Play: A Detailed Approach to Iterative Game Design. First edition, Addison-Wesley, 2016.