The User Advocate: Interactive Prototyping
Part 2: Building a PDF Prototype

By Dave Rogers

Let's put the digital pencil to the virtual paper and build a prototype. Before we begin, a few conditional caveats:

• I built the prototype (PDF, 1.3MB) for this tutorial using Microsoft Visio 2003 and Adobe Acrobat 6.0 Professional.
• Linking is much easier with a tool like ARTS PDF Linker , a $300 Acrobat plug-in. Acrobat itself will not copy and paste more than one link at a time—a definite deficiency. ARTS PDF Linker's suite of tools overcomes this lack and adds a number of other helpful tools. Yes, the price of entry is steep, but it pays for itself in labor savings if you routinely create PDF prototypes.
• The tutorial shows a very high-fidelity prototype—based upon the current gotomedia site—that might be created very late in the design process.
• If you'd like to work along with the tutorial, use this plain-Jane PDF(115 KB) of the wireframes that lacks links and forms.

Getting Ready

Create your wireframes as usual. At this stage, don't be concerned about links or other prototype issues. Focus strictly on building the best wireframes possible.

That said, two Visio tricks make wireframing and prototyping much easier:

• Place persistent page elements and administrative information on background pages. I typically prepare nested background pages—the first showing only administrative details (filename, version, page titles and so on), and adding global navigation, utilities and local navigation on successive backgrounds. This provides flexibility during wireframing and ensures that persistent elements are in the same location on every page (very important for the prototype).
• Place callouts and notes on separate layers to ease their removal before building the prototype. Assign the master callout shapes in your Visio stencils to a "Callouts" layer to make it automatic.

With the Visio wireframes completed, design the tasks for the test—"scrupulously," according to Michael Schrage. Because prototypes stimulate collaboration and innovation, aim tasks at the issues that will produce the greatest value. Create tasks where questions exist, where decisions are needed, where the team has different opinions. Use Carolyn Snyder's superb task templates to get all of your ducks in a row before building the prototype.

Now prepare your wireframes for conversion to PDF. Save the file under a new name to preserve the original. Strip out the callouts and notes. Remove administrative details from your background pages so only the page schematics remain.

Add Back and Forward buttons at the upper left corner of your primary background page (Figure 1) to replicate the functions of a browser's similar buttons within the Acrobat prototype. (More about this later.)

Similarly, if you use multiple wireframe pages to show pages that extend below the fold, add Scroll Down and Scroll Up buttons (Figure 2 and Figure 3) at the top and/or bottom of applicable pages.

If you wish, create an "Under Construction" wireframe to display when test participants click an inactive link.

You're ready to convert your wireframe to PDF. If you use Visio, Adobe's PDFMaker toolbar makes this a snap. The default settings (Adobe PDF/Change Conversion Settings...) are fine.

Unless you have a small site (under 50 pages), create PDFs specifically for each task. In general, a prototype of an entire site is overkill and too much work for a minimal return. Instead, determine which pages are needed for task completion and convert only the Visio files that include them. You can then use Acrobat to piece your prototype together page by page (Document/Pages/Insert, Delete, Replace or Extract) to build just what you need. (Our plain-Jane PDF is a simple example where one PDF can serve multiple tasks.)

Open the file in Acrobat. Click the Pages tab at the left to facilitate quick navigation through the document. You're ready to bring your PDF to life.

Adding Links

Begin by using Acrobat's Link Tool to create links for the persistent Back and Forward buttons. These are more complex than other links, but stay with us—it gets easier! We'll start with the Back button:

1. Click the Link Tool icon (it's on the Advanced Editing toolbar) and draw a square over the button (Figure 6). In the resulting Create Link dialog, (Figure 7); in this case select "Custom" and click OK.
2. In the Link Properties dialog, set the Appearance options as shown in Figure 8; these are the defaults for all links in the prototype.
3. Click the Actions tab (Figure 9). Select "Execute a menu item" in the Add an Action dropdown and click the Add... button. Then use the Menu Item Selection dialog to select Previous View as shown.
4. Repeat the steps for the Forward button, setting it to Next View.
5. Click Acrobat's Hand Tool icon and test the links to be sure they work as expected.

In ARTS PDF Linker, select both the Back and Forward buttons and use standard clipboard commands to copy and paste the links wherever the arrows appear in the prototype. (If the buttons appear on every page, you can use the Paste Multiple option—Figure 10.) PDF Linker pastes links in the exact positions as the original, saving time and effort.

Next, create links for any Scroll Down and Scroll Up buttons. Follow the procedure described above for Scroll down, setting the action to Next Page (Figure 11). Repeat for the Scroll Up button, setting its action to Previous Page. Test the links—and copy and paste them wherever they are needed.

Still with us? Adding links to persistent elements such as global navigation and utilities is much easier. Build the links on the home page, directing them to the appropriate pages in the document (as shown in Figure 12). Test the links—then use PDF Linker to copy them all across the document in one action. Employ a similar process for any other links that appear on multiple pages.

Finally, add links to each individual page—text links, buttons, whatever. Some tips:

• Since test participants may click anywhere on a page, add links to all link-like elements, even if they're inactive. Inactive links can play a sound (Figure 13) or link to an "Under Construction" page.
• Be creative. Acrobat lets you add a variety of actions to links—everything from linking to live Web pages to running a JavaScript (something I have yet to explore).
• Rather than using Acrobat's button form tool, I prefer to overlay buttons with links to keep things simple.
• Test every link—and test them again.

Adding Forms

Now things get fun. With Acrobat, you can add text fields, list boxes, combo boxes, checkboxes and radio buttons that simulate working forms. (If you have some programming skill, you can do much more; consult Acrobat's online help.) All are available on Acrobat's Advanced Editing toolbar (Figure 14).

A reality check: Don't expect fields to operate exactly as they would in a real application or Web site. All a prototype needs is the appearance of working forms.

Creating pseudo-forms is similar to adding links. Select the form type from the toolbar, draw it on the page and set the properties. The properties vary based upon the type.

Our first example is a text field for newsletter subscriptions.

1. Select the Text Field Tool from the Advanced Editing toolbar.
2. Draw the field over the one in the wireframe; make it slightly smaller so that it fits within the wireframed borders.
3. In the Text Field Properties General Tab (Figure 15), assign an easily-remembered name to the field. Add a Tooltip if you wish. Be certain to set the form field as Visible; otherwise, test participants will not be able to see or use it.
4. On the Appearance tab, set the Fill Color to White (Figure 16). Leave the field borderless. Set the text and font settings to your preference.
5. On the Options tab, enter any default text (Figure 17).
6. Click Close, select Acrobat's Hand Tool icon and test the form.

If you'd like to have users type their name or other information into a field and display it elsewhere, just use an identical name for both fields. It's a great way to simulate site registration.

To build a combo box form:

1. Select the Combo Box Tool from the Advanced Editing toolbar.
2. Draw the field over the one in the wireframe; make it slightly smaller so that it fits within the wireframed borders.
3. In the Combo Box Properties General tab, assign a name. Set the field as Visible.
4. In the Appearance tab, set the Fill Color to white. Set the text settings to your preferences.
5. In the Options tab, type the first option in the Item field; click Add to include it in the Item List (figure 18). Repeat for all option. Highlight the option you'd like as the default.
6. Click Close, select Acrobat's Hand Tool icon and test the form.

For combo boxes that link to a page when an option is selected, I cheat and use a link instead of the combo box tool. (There may be a way to link when an option is selected, but I haven't discovered it yet.)

With a little trick, you can add realistic radio buttons that ensure only one selection. We'll demonstrate with Subscribe and Unsubscribe buttons, beginning with the Subscribe button.

1. Select the Radio Button Tool from the Advanced Editing toolbar.
2. Draw the radio button over the one in the wireframe, this time making it slightly larger than the original.
3. On the Radio Buttons General tab, name the button "Subscribe." Be certain to set the button as Visible.
4. On the Appearance Tab, set the Borders and Colors as shown on Figure 19.
5. On the Options tab, verify that the Button Style is a circle. Since this is the Subscribe button, set the Export Value as "Yes" and fill the "Button is checked by default" checkbox (Figure 20). Click Close.
6. Draw the Unsubscribe radio button as described in steps 1 through 4. Be certain to name it "Subscribe." This is the secret to mutually exclusive radio buttons.
7. On the Options tab, set the Export Value as "No" and be sure the default checkbox is cleared (Figure 21).
8. Click Close, select Acrobat's Hand Tool icon and test the buttons.

Some final notes about forms:

• Acrobat does permit you to copy and paste multiple instances of individual form types. No plug-in is required.
• When you save a PDF, all entered form data is saved along with the document. That means it's best to avoid saving the file during or after each user test. Otherwise, you'll have to reset all forms to their default settings. (If you'd like to save each participant's prototype, give it a different filename.)

Finishing Up

After thoroughly testing all forms and links, you're ready to prepare the prototype for display in a browser. That's right—run Acrobat prototypes within a Web browser to remove the possibility of inadvertent or unexpected events due to Acrobat's interface.

On a system with the same screen resolution as your test platform, open your nearly-completed prototype. Using Acrobat's Zoom toolbar, experiment with magnifications; the ideal is to show the complete page—left to right, top to bottom. Fit Width is usually the best option.

Open File/Document Properties and select Initial View. Set the options as shown in Figure 23. Be sure to check "Open in Full Screen mode" to hide Acrobat's distracting tools from your test participants. Unfortunately, this removes the scroll bar, but the Page Up/Down buttons and mouse scroll wheels are good substitutes.

Now give the prototype a good shakedown. Run through your test tasks several times to surface any glitches or errors. Watch for linking errors, forms and links with odd appearances and similar problems. After corrections are complete, you're ready for testing.

Using the Prototype in Usability Testing

Running a usability test with an Acrobat prototype requires only a few adjustments. Before participants arrive, open the prototype within the browser so it's on the screen. During orientation, set the participants' expectations by talking about the prototype. Here's how I explain it:

We'll be working with a prototype of a new Web site. It definitely has some rough edges—there are no graphics, the text may be gibberish and things may not work the way you expect. But that's OK—because we need the opinions of people like you to help us finish it in the best possible way.

Next, explain the use of the Back, Forward, Scroll Down and Scroll Up buttons:

Because this is a prototype, there are some differences in how you'll navigate. Instead of using the browser's Back and Forward button, we've made some special ones for you to use. And to see longer pages you'll use buttons instead of the scroll bar.

Test participants are usually nonplussed. They understand that prototypes are limited and are usually delighted to be a part of the process, even if it's not perfect.

You'll find that using an Acrobat prototype differs very little from paper or other prototype testing—except that you created it yourself!

About the Sample Prototype

We've created a sample PDF prototype as a proof of concept. It's a high-fidelity recreation of the gotomedia site, built for two test tasks:

• Read the User Advocate article in the most recent issue of the gotoreport.
• Subscribe to the gotoreport.

Try the prototype. You'll see that some links connect to the real gotomedia site—not necessarily a good practice unless it's needed because it requires the use of the browser's Back button to return to the prototype.

As you've seen, Acrobat can transform your static wireframes into reasonable simulations of an actual site. While it takes a little bit of work and some kludging, it's no more effort than building a paper prototype--and definitely a step closer toward reality. Give it a try and tell us about your experiences!