Thinking About Prototyping - Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces - page 39

Chapter 3: Thinking About Prototyping

This chapter explores two main topics—how a prototyping method supports (or interferes with) the
process of creating an interface and the effects of paper prototyping on the people involved in
producing, testing, and refining a design. You'll see the pros and cons of paper prototyping and learn
how to compare it to whatever other method of prototyping you may be considering for your product.
Other than paper, I don't cover specific prototyping methods here (in Chapter 12 I mention a few)
because I think it's important to first think in terms of the concepts and benefits pertaining to
prototyping. If a new prototyping tool comes along 2 years after this topic, you should still be able to
use the material in this chapter to evaluate it.

Creating an Interface-Look and Feel

Broadly speaking, you can think of an interface in terms of look and feel. The look comprises the screen
layout, graphics, wording, and so on, and the feel is the behavior and processing. Look is pixels; feel is
code. Both look and feel require work to produce, and the amount of effort varies depending on the
method of prototyping. Let's examine look and feel in the context of designing a screen; for the sake of
simplicity I'll choose an online order form.

The effort needed to create the form's look can be further divided into design time and rendering time.
First you have to understand the purpose of the form, determine what fields it must contain, think about
what order they should appear in, decide how they should be labeled, and so on. That's design time,
and it's a process that happens inside your head, often with the aid of specs or other input. An order
form is a relatively simple example; other screens are much more difficult to design. To get the order
form out of your head and into a place where others can see it, you have to render it, either by hand or
on a computer. In reality, design and rendering aren't discrete steps as I've described them here—they
happen repeatedly and often simultaneously. But thinking of them separately will help clarify how a
prototyping method supports the work.

The feel of an interface is, in essence, its programming—all the code that must be written to display the
form, accept the user's inputs, process them, and produce some type of output. (Once you start
thinking about how that output will appear to the user, then you're back to the look.) Depending on the
development environment, some things are more arduous to code than others. Strictly speaking,
programming also has design time and rendering time, although that distinction isn't as helpful for feel
as it is for look, so I'm going to ignore it.

So we have three main activities to consider in prototyping—the time you spend
Designing—in other words thinking about what the user will experience 1.

2. Rendering what the user will see

3. Coding the behavior

Now let's examine how paper and computer-based prototyping tools support each of these activities.
You'll notice that each section has some questions to ask yourself while considering which prototyping
method is best for you.