Thursday, June 9, 2011

Paper Prototyping 101

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.

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!


Snyder (2003) Paper Prototyping: Making a Paper Prototype


  1. I had the same thought when I read about the post-it notes. Now I think index cards might be better to replace post-it; and post-it notes and hand written comments may be used occasionally to indicate explanation for particular designed functions, team members' comments, or reminders for further work.

  2. Mikah--I'm also jazzed about doing a paper prototype now that I feel I know how. Snyder really did give us the nitty-gritty and I also look forward to the chance to put these clever, and obviously well-tested, approaches into practice.

    I also think her (it's Carolyn Snyder, by the way) descriptions appeal to me because it feels like a good solid craft project. I've always been a hands-on designer/builder. Now that I'm creating projects with digital bits and bites I miss the good old modeling materials to build a mockup.

  3. That's funny! Looks like a lot of us were confused by the sticky notes (myself included), but Snyder did provide good justification for excluding them. I found her procedure for paper prototyping extremely confusing. I just couldn't visualize everything, so I can't say that I'm looking forward to this assignment. Is this something we have to do for our individual projects? However, I thought her "Incredibly Intelligent Help" idea was extremely clever. This seems like a great way to assist subjects during the pilot session while also collecting content for the Help menu.

  4. Thorough and useful post, Mikah! I ended up re-reading Snyder's article to jog my memory, but your summary actually provides all the key information I'd want to 'take away' from the original. Thanks for that.

    Your point about the 'help' function has me thinking. I hadn't considered it either, but I think it'll be beneficial to brainstorm all and any needs there might be for this kind of resource as learners proceed through the instruction. I think the usability testing will flesh a lot of that out.

    Regarding our own independent project, yes, a paper prototype is required (according to our syllabus we are to: Design and develop a rapid paper prototype of instructional activities to facilitate student achievement of the learning objectives. This prototype should utilize First Principles of Instruction. Discuss the paper prototype with your instructors.)

    Check out Snyder's sites too - she has her own consulting business ( and includes lots of additional advice and materials there and at the site provided in the reading (

    Happy prototyping - I'll be interested to hear about your experiences!