Part of Capstone.
By Allison Parrish
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:
- Conceptualize: Develop an idea for an interactive experience.
- Prototype: Realize some aspect of the experience in a way that can
be interacted with.
- Playtest (or user test): Have people interact with the prototype and
see what happens.
- 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?”
- 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.
Recommended reading