Designing with Paper Prototyping

Paper Prototyping

Paper Prototyping.

Prototyping is key to any successful design. Paper prototyping is usually the first step, but does it fit into a world where mobile devices are king? Yes, but not using the conventional method. Combine the physicality of the device and the power of paper prototyping and you have a solution that’s fit for the new era of computing.

Paper prototyping is a key component of the user-centered design (UCD) process and is a popular method among designers. The characteristics of paper prototyping lends itself to the iterative approach that is so valuable in the UCD process.

The basic premise of this method is that a paper prototype of a feature’s UI is crafted and then given to a user who will attempt to complete a task or a scenario. Evaluators record and analyze the results from these sessions, which are then used to create another prototype.

Designed for a simpler time

The method is great for designing UIs for desktop computers as the user’s fingers mimic the input of a mouse. Therefore, paper prototyping mobile touchscreen UIs would surely be perfect, right? No! It would make sense, but there are many more factors that need to be considered when designing and evaluating mobile touchscreen UIs.

When interacting with desktop computers, users will usually be in a “controlled” environment, in the comfort of their own homes or offices. Mobile devices can be used in the queue at Starbucks or simply when walking in the street, and therefore lack the luxury of that “controlled” world. These devices can be used in any environment and held in several different ways, and these are two key reasons as to why the standard paper prototyping method doesn’t lend itself to mobile devices. The hardware is as important as the software when it comes to mobile devices, and those that understand its strengths and constraints will create better overall solutions. Therefore, incorporating the physical device into the early prototyping stages is vital.

How to paper prototype

In the July/August 2009 edition of Interactions magazine, three academics from the School of Informatics at Indiana University suggested a technique that incorporated paper prototyping and the physical device—in their case, an iPhone.

Their method had several stages:

  1. Create the paper prototype.
  2. Digitize each screen by photographing or scanning.
  3. After importing, resize each image to fit the device’s screen.
  4. Save the resized images in a file format supported by the mobile device.
  5. Organize all the screen images into the correct order for the scenario.
  6. Upload the images to the mobile device.
  7. Explain to the user how to navigate through the scenario. In their case, swiping through the set of images on the iPhone.

The “Paper in Screen” method was a success for the Indiana University academics as it not only raised “issues on interface labels, content organization, and affordance,” but also facilitated “discussion on the overall utility of the application for realistic mobile scenarios of usage.”

During a recent academic assignment, I decided to implement the ‘Paper in Screen’ method, but chose to add an additional step to increase interactivity as well as return different types of issues.

Using iWeb to create the links

Using iWeb to create the links

After importing and resizing the images, I opened up Apple’s iWeb application. I set the webpage size to the iPhone’s resolution and then gave each image a separate page. Following this, I placed links on top of the buttons on my paper prototype which when clicked would send the user to another page. I then uploaded this to the Internet, and downloaded one of the many full-screen browsers for the iPhone. This allowed me to hide all the browser’s chrome and show only the prototype images. During this assignment, I was unable to find a solution that would store the HTML files locally and act correctly as a prototype. Due to this issue, this method requires an Internet connection, preferably Wi-Fi, however a decent 3G connection was more than satisfactory.

Final thoughts

A user working through the scenario

A user working through the scenario using the prototype in a full-screen browser.

This method allowed the user to interact with the prototype like they would with any other iPhone app—minus the animation—and me to test the prototype in real world environments. Conventional paper prototypes restrict users, requiring them to follow the specific order of screens set out by the designer. By making the prototype more interactive, you allow the user to deviate and make mistakes without requiring intervention from the designer. No intervention means the user will feel in control and relaxed, hopefully yielding more realistic results.

Merely adding one additional step to this method can change the types of evaluations and results you receive from paper prototyping yet still retain the inherent advantages found with the technique such as no coding involved, fast and cheap to mockup interfaces, as well as encouraging creativity from other designers and more importantly, the users.

About the Author

Thomas Davies

Thomas Davies is currently undertaking the Human-Centred Systems Masters course at City University London. He discover too many products that are simply too difficult to use and hopes that he can help reduce the complexity in this world. You can follow Thomas on Twitter.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Very nice. A very practical, procedural way of creating something fairly tangible with basic equipment. Thanks for this one.

  2. Hello

    Where can I get the metal piece shown in the first image ?

    Thanks
    greg

  3. @Greg i have bought mine from http://www.uistencils.com +ipad and android version

  4. Really great to read an article focused on mobile.

    We recently wrote an article for .NET Magazine about creating the perfect prototype, (which you might be interested in?). Here’s a link: http://www.netmag.co.uk/zine/develop-tutorials/create-the-perfect-prototype

    Thanks,

    Stu.

  5. Thanks for an inspiring article.

    The key strength of paper prototyping is that each iteration round the change-show-change-show loop is VERY quick and VERY cheap. Everyone can make changes and everyone can see that it’s only a mockuup and not the finished thing.

    You are losing some of the speed/cost advantage – but gaining a lot from making the prototype more realistic to investigate some real-life useage.

    Do any native prototyping tools exist on mobile platforms?

  6. Damien Laughton August 6, 2010

    Since meeting Thomas a few months back I have been inspired to promote paper prototyping with two clients – both with great success. I have acquired the stencils above and I use them to varied degrees of success BUT I tend to start hand-drawn for the first couple of iterations. After three or four iterations you should really be in interface builder. Good article though Thomas, I will certainly be sharing the link!

  7. Curious, I’ve writen about it on my blog, take a look and tell me what you think
    http://muiomuio.com/productivity/website-wireframe-resources

    I’ve found paper wireframing to be the first step into a great design but I simply can’t commit my digital production to a paper sketch.

    I always need a digital base to work on.

    • Thanks for the link!

      I am sure you enjoyed that sketching workshop. I have to agree that Konigi is a great resource too.

  8. Thanks for an inspiring article.

  9. What a brilliant idea! cheap and quick.
    Thanks for sharing

  10. Thanks, interesting read, i’m just about to start a mobile web project…

  11. Nice article about prototyping for mobile devices. For better iPad prototyping check out my iPad Axure Widget http://www.kreativr.de/ipad-axure-widget-library/

  12. Great article, Thomas. I’ve never considered the possibility of using the iPhone for prototyping…or better yet, the iPad.

    We just recently discovered the effectiveness of paper prototyping and wrote a synopsis of it after attending a usability event: http://bit.ly/cnjNoD

  13. Good article. I used a similar technique recently by linking html pages with dreamweaver. Setting a mobile doctype did the job & I used safari for testing purposes. I used meta value for full screen view but browser controls were shown everytime a new page was opened before going full screen. It was very frustrating for user during testing.

    Do you know any way by which we can keep the webpages always in full-screen mode on iPhone safari so that it doesn’t hinder the flow. Or iWeb takes care of that automatically? I doubt that. Thanks in advance.

  14. hello

  15. Well written. It’s always right to promote Paper Prototyping. Why? It has literally no limitations. Making wireframes in, for example, Axure (which I use everyday but as a 2nd step in my designing process) might create tempting feeling “I want to make things nice”. Prototyping is not (at least not mainly) about making nice things, but about things that work well, that are highly usable and that are creating stunning experience.

    Thinking about spreading the paper prototyping idea we’ve created paper prototyping tool – UXpin. It makes prototyping quicker – as you’re just sticking GUI elements to the paper browser, more effective (you can always reorganize elements without need to make new sketch) and works very well during usability studies.

    We’ve just started but I can see that we draw attention of developers and marketers. They enjoy prototyping as well.

    Hope it will be step in the right directions.

    Check it out guys: http://www.uxpin.com

    I would be happy to now your opinion.

  16. Increible!!! plantilla para diseñar interfaces para moviles
    super

    saludos
    DEDUCCION Diseño

Related Posts