Paper Prototyping Resources

1. Mike Padgett November 7, 2008

   It is Windows 95, you said it! Kind of homey, though.

   What do you think about using the browser window on paper though, in terms of handling pages longer than your average viewport?

   Having cause frequently to test longer pages, I personally try to avoid it, just using paper sheets taped together. I don’t think this hurts the test too much, though I could see how there might be a problem with all that scroll-off being somewhere within the field of vision.

   However making use of the browser window becomes unavoidable when testing for an “exotic” target device such as a mobile (cell) phone or something that is itself still a prototype. At that point, the browser itself tends to become an important factor in the testing process (and when the form factor is small, so too does the likelihood of longer pages, of course).

   I once spent a lot of time developing a response to this problem using cereal boxes and wishing I’d watched more of those craft-type TV shows when I was a kid. An image of the still-unavailable device prototype mounted on card with another piece of card glued in underneath, creating a sort of window through which you could feed the paper-based page.

   It worked out OK in the end but I did wonder what the poor test participants must have thought - that’s one thing about most test participants though, they’re always deadly serious about the test process!

   So I don’t know about you, Todd, but for testing web apps on paper I try to stay shy of the browser window element, despite the risk of depreciating the quality of the experience. I’d be interested in hearing a few words of opinion from you on that issue.
2. Todd Zaki Warfel November 15, 2008

   Great feedback, Mike. Here’s a great trick I’ve used in the past for making a browser window that scrolls for longer web pages:

   1. Offset your printed wireframes to leave an extra 2″ of blank white paper on the right.
   2. Take two pieces of card stock and tape them together, creating a book jacket cover.
   3. Cut two inches off the right side of the top card stock piece. This will allow you to grab the extra paper edge and use it to push/pull the paper up and down to simulate scrolling.
   4. Cut the browser window viewing area out of the top card stock piece.
   5. Tape the bottom piece of card stock to your table. This will prevent it from moving when the participant tries to “scroll” the paper.

   I’ve used this technique a number of times in paper prototype testing. It helps simulate the viewing window and gauge the fold is going to be an issue.

Post a Comment »