Building Paper Mockups (was: Advice On User Manuals)

Subject: Building Paper Mockups (was: Advice On User Manuals)
From: "Jared M. Spool" <jspool -at- UIE -dot- COM>
Date: Mon, 4 Dec 1995 23:47:29 -0500

On 4 Dec 95 at a very reasonable hour, Joanna Sheldon wrote:

> What do you mean by a "fully interactive representation of the
> design?" Representation is a very vague word. Could you describe
> your "mockup" in more detail?

Imagine the product you are designing is a Mail program for Windows.
You would first create the "Main Screen." This would be a piece of
paper or cardboard that has the title bar, the menu, a toolbar and
the "canvas" (the place where the contents of the mail or the headers
are going to show up). The menu would probably just consist of the
words File, Edit, Window, Help and any other menu options you might

Now, the user would use their finger as the mouse. When the "click"
on the File menu, you would have another piece of paper with all the
menu options: New, Open, Save, Save As, Print, Printer Setup, Exit,

When the user clicked on Open, you'd have another piece of paper with
the contents of the Open File Common Dialog or your variant of such.

You would fill the canvas area with the header information of all the
user's mail. When the user clicked on a specific mail message, you
would put up another piece of paper with the contents of that mail

Paper mockups are different from storyboards. A storyboard is a
series of screen shots, much like a comic book, that leads the user
through the interface in a predetermined path. A mockup is all the
individual pieces -- the user leads the developers (who play the
computer) through the path THEY WANT TO TAKE. This is the

As a result, you end up with a fully interactive model of the
application. Given a good specification, you can build these mockups
very quickly. (We average 1-2 hours for a well spec'd application.)
Given a poor specification, it takes about 6 times longer. (We
usually allocate 12 hours to the process of building these mockups.)

If you have a working application, you can use screen shots instead
of hand drawing the elements, but we've found hand drawing to usually
be faster. Hand drawing is certainly faster than drawing with a
drawing program.

Hope this answers your question. If not, you know how to reach me.

Jared M. Spool User Interface Engineering
jspool -at- uie -dot- com 800 Turnpike Street, Suite 101
(508) 975-4343 North Andover, MA 01845
fax: (508) 975-5353 USA

If you send me your postal address, you'll get
the next issue of our newsletter, Eye For Design.

Previous by Author: Re: Advice On User Manuals
Next by Author: Re: TECHWR-L Digest - 18 Nov 1995 to 19 Nov 1995
Previous by Thread: Re: Teaching/Learning Writing/Grammar
Next by Thread: teaching writing

What this post helpful? Share it with friends and colleagues:

Sponsored Ads