Paper Prototyping 101

Summary
The summary of this reading is going to be a little different from my previous summaries because the information is more quick facts than explanations.

Prototyping Toolkit

• White poster board 11x14
• Blank paper
• Unlined index cards
• Markers/pens
• Highlighter
• Scissors
• Transparency
• Tape
• Restickable glue
• Removable tape
• White-out

Don't Use

• Sticky notes
• Flip chart paper
• Ruler
• Fine-tip pencils/pens
• Laminator

Elements of the Prototype in action!

• Background - represents the computer screen (draw controls that would appear on every screen)
• software application backgrounds
• browser backgrounds
• include common buttons: Back, Forward, Home, Print, & Search
• omit: Stop & Reload
• small-screen interfaces
• size may or may not be important depending on what you plan to learn from the prototyping session
• Widgets - the screens placed on top of the background
• Buttons & checkboxes - Removable tape placed on the item represents that the user has "clicked" it
• Tabbed dialog boxes - Use a stack of notecards with tabs! Shuffle the cards depending on which tab is "clicked"
• Text fields - Users can write on removable tape
• Drop-down lists - Write the drop-down selections on a separate piece of paper and display it at the appropriate time
• Selection bar/highlight - Use a piece of transparency paper over the "highlighted" selection
• Expandable dialog boxes - Cover expandable options with a piece of paper and remove when it is selected
• Expandable lists - Cut the lists into pieces and shuffle them around, adding the expanded options, when selected
• Disabled controls - highlight with a gray transparency
• Cursors - The user's finger will be the cursor. If the cursor changes based on the action, include a picture of the cursor as a cue for that action.

The user's choices can be represented by highlighting them with transparency along the way. This creates a sequential visual representation tha tall can follow. Hand drawing is preferred, but screen shots may be used when necessary. The chapter goes on to explain simulating interactions such as tooltips/mouseovers, rollover/pop-up menus, beeps, drag & drop, right mouse menus, sliders, animation, links, and scrolling. Overall, the use of common sense and simplicity wins out. Highlighting sections, having the "computer" mimic any sounds, and verbal explanations are typically sufficient in most scenarios. Hardware proprs such as tape backup system, portable MP3, and touch screen control panels are discussed as well. Keyboards are typically not used for paper prototyping. The user will write or draw items on transparencies or paper for keyboard interactions.

"Incredibly Intelligent Help" is when an individual is designated the task of being the "help" section. Any questions the user may have will be directed to this person. The "Incredibly Intelligent Help" will answers questions tersely and must be prompted for more information.

Wizard of Oz Testing is using an actual computer during the paper prototyping when needed, either for graphics or tables, ect.

Thoughts
Where Frick & Boling (2011) focused on the need and process of using a paper prototype, Snyder focused on the down-and-dirty creation of a paper prototype. I appreciated his list of materials to use and not to use, along with the explanation of each. I feel this list may have saved me time when I begin creating my own, because he has already provided the footwork of testing the supplies. I would have initially thought that post-it notes would work very well. However, I can understand that they begin to pop-up, rather than lay flat, after moving them too many times. I also would not have known about restickable glue!

While I feel I would have figured out how to mimick all of the computer interactions with a little thought, the lists of common items and how he represents them was also very helpful. I may do a few things differently in my own presentation, but it is always good to have a starting point. The concept of "Incredibly Intellligent Help" never would have occured to me. In fact, I had not even considered the need for any Help sections. This approach would allow me to analyze if a Help section should be included or not. If the user has questions they can be directed to the "help" and documented. This would allow me to include only relevant information in a Help section.

I must admit that I am beginning to get excited about creating a paper prototype. I am interested to see how mine will turn out and if the techniques I am learning will play out smoothly in action!

~Mikah

Reference
Snyder (2003) Paper Prototyping: Making a Paper Prototype