Designing for time

XVI.4 July + August 2009
Page: 29
Digital Citation

FEATURE"Paper in screen” prototyping

Davide Bolchini, Diego Pulido, Anthony Faiola

back to top 

Prototyping is widely recognized as an effective method for quickly generating cost-effective designs and efficiently gaining user feedback early in the product life cycle [1, 2]. Over the past decade, the method has also been adapted and extensively used for mobile interfaces and devices [3]. Because the design of handheld devices (e.g., PDAs and cell phones) involves complex software functionality as well as a need to be integrated with the customized controls and interaction of the physical device, it requires hardware and software prototyping that is challenging. Celine Pering argues that one of the greatest issues of prototyping is to be efficient with the full range of tools, such as paper or high-fidelity prototypes [4]. For interaction designers to overcome a range of prototyping challenges, they first must recognize that each new and greater level of functionality in prototype development means more implementation time. This article introduces a hybrid method of prototyping that utilizes paper and mobile device technology that is both quick to create and agile to use in the early stages of design without the need to implement a fully operational high-fidelity prototype.

A disadvantage of paper prototypes is that they usually require a facilitator, i.e., someone who has a comprehensive understanding of the application and can adequately demonstrate it to the test participant [5]. In other words, a full interaction experience is limited because the participant relies on the facilitator to provide feedback (e.g., changing paper screens) during the command simulation sequence (e.g., clicking buttons or icons), and to constantly remind the user about how the various elements of the design would eventually fit together in the envisioned product. Without human intervention, the participant is unclear about how the system should respond. On the other hand, paper prototypes do provide a quick means for testing basic interactivity that may be essential for specific design decisions [5]. Tools for agile prototyping and electronic sketching are also increasingly available to support quick design iteration [6, 7].

Conversely, fully interactive high-fidelity prototypes (created with Visual Basic, Flash, HTML, among others) are neither easily nor quickly produced.

Paper prototyping relies on the exclusive use of paper-based artifacts, which are physically detached from the use of any real device or digital interface. High-fidelity prototypes, although difficult to quickly develop, allow test participants to easily enter data and execute commands, while being much less dependent on the facilitator.

back to top  Emotion, Design, and Prototyping

When it comes to prototyping and evaluating a mobile touchscreen interface, understanding the emotional response of the user is imperative to better evaluate the quality of design. In particular, not only the appearance of the interface (which can be well anticipated by current prototyping tools and practices), but also the physical holding, feeling, manipulating, and touching of the device are important factors in determining the quality of the user experience [8]. For this reason, standard paper prototypes, though useful and quick to generate, are very limited in delivering the depth of user experience necessary to adequately inform design iteration.

In discussing the relationship of user experience and design, Don Norman states that the "visceral" (or physical) level is the simplest and most primitive cognitive process [8]. With regard to handheld devices, visceral is all about look, feel, and sound, i.e., how a device, including the interface, looks and feels in the hand of the user. The iPhone is one of the greatest examples of the visceral experience. It was designed, in great part, for the visceral level of cognition—Apple designed for visual and physical impact. Evaluating the mobile user experience without considering visceral factors is like evaluating the quality of a meal by looking at the menu. A lot can be said about the dishes, but the experience is not there. It is a challenge, of course, to anticipate this experience in early prototyping.

Beyond the visceral experience, the "behavioral" level of cognition is about designing device interaction or behavior to reflect human behavior [8]. In other words, device design becomes intuitive in the way it complements one's implicit assumptions about how it might work. Last, to design for the "reflective" level of cognition is to appeal to one's aesthetic sensibilities, uniqueness, and cultural preferences [8]. From such a design perspective, people relate to and acquire a personal adherence to a device as part of their identity and self-expression.

Understanding these three levels of cognition is extremely relevant, because emotional engagement at every level strongly influences human-interface interaction from a physical, aesthetic, and usability perspective. Moreover, if we need to take into account these emotion-centric factors early on in the life-cycle of device design, it is clear that paper prototyping cannot deliver the necessary insight into a full visceral and behavioral experience of the interface in the context of handling the physical device. In other words, if we only use paper separate from its actual relationship to the physical device, we may bypass important elements of the user's emotional experience. As a consequence, inadequacies of this kind may lead to highly artificial (and ultimately irrelevant) evaluation results. To date, producing high-fidelity electronic prototypes or beta-version releases appear to be the only viable way to have users test or try out mobile applications on their devices. We, however, recommend another intermediate solution.

If we could anticipate the mobile user experience (testing the interface with a device), yet spend minimal effort in implementing high-fidelity prototypes, we would have found a far more efficient way to prototype mobile applications with a much higher ROI in time, energy, and valuable user feedback.

So, how can we arrive at a prototyping technique that can deliver development speed, with both visceral and behavioral user experiences that far exceed the use of paper, but without the need to develop high-fidelity prototypes?

back to top  Anticipating the Mobile Experience

We propose a simple and straightforward technique: placing the paper prototype inside the device. It is possible to quickly generate a paper prototype (using traditional guidelines and best practices) and efficiently digitalize it in a form suitable for integration and interaction within a mobile device (see page 29). Designers can then ask users to use an actual mobile device (e.g., an iPhone) to try out the prototype, by looking at and flipping through the digitalized papers, thus envisioning a richer mobile experience.

The "paper in screen" approach has important benefits. Users can hold the actual mobile device while interacting with the digitalized paper prototype. And users can interact with the digital prototype in a way that is intimately integrated with the physical experience, thus capturing a fully emotional and true-to-life usage.

The only drawback (to meet the requirements of an "agile" prototype generation) is that the digitalized paper is not fully interactive. The only supported interaction is moving from one screen to another. This sequential navigation can be easily controlled through the most elementary interaction command available on a mobile device (tapping, sliding, flipping, or using a single button). In other words, the papers are not made interactive, but they become interactive on a more generic and basic level through the use of a standard device command. With minimal initial explanation, users point their finger on the actual interface link they need to activate and slide/ flip the screen to move to the next page. The digital paper prototype is still provisional, malleable, thought provoking, and expressive, but at the same it enables the user to experience it within the real mobile device, with all its affordances for an interaction experience that is both tactile and visceral. And all this can be done at a very limited cost.

back to top  From Interface to Experience Prototyping

The cost and feasibility of the paper-in-screen approach should be considered in the context of the design life cycle. In a simplified picture of the established practice of interactive application development, iterations often occur between the experience design and interface evaluation (see Figure 2). Paper prototypes typically serve well in this phase; they can cheaply externalize the reification of the design vision into an interface, more or less refined. Paper-based interface prototyping easily lends itself to a subsequent usability evaluation that can be done through various techniques (usability tests, inspections, or walkthrough). Besides the important details of the interface elements, the conceptual flow of the overall navigation and task support can be evaluated. Still, everything is focused solely on the interface as an artificially separate artifact from the overall user experience. After a reasonable number of insightful iterations, low-fidelity paper prototypes are typically improved, refined, and eventually solidified into more interactive, electronic, partially implemented applications that can be integrated as they are into a mobile device for more lively validation and demonstration. This is the stage in which users can actually try out a mobile application using a real device, and designers are able to finally evaluate their user experience. Besides full usability inspection and lab testing, on-the-field observations can be performed, as all the enabling elements of the user experience are there. Using "paper in screen" provides a straight shortcut to make this process much more efficient (see Figure 1).

In just a few minutes a digital version of the paper prototypes can be made available on a mobile device, to be experienced and tested by users and designers. This inexpensive yet rich anticipation of the interface integrated in the device is a form of "experience prototyping" [9], as the malleability and provisional character of the anticipated situation still embeds some core ingredients of the final, natural experience—users interacting with the mobile interface while holding the device. A paper-in-screen prototype lends itself to "experience evaluation," that can be carried out—as with fully higher-fidelity interfaces integrated in the device—also through field observation.

In essence, using paper-in-screen enables designers to reconstruct very early in the life cycle the synthetic aspect of the user experience, which is typically lost in the separation—due to pragmatic purposes and established practice—between interface design and device integration. Although this separation of concerns (interface and device) is practical and reasonable, the envisioning of the user experience traditionally suffers from the fact that this chasm is not reconciled until an implemented prototype is ready.

back to top  Enabling Feedback from Users and Designers

The nature of user feedback enabled by paper-in-screen prototyping needs proper consideration. As we have emphasized its potential of anticipating visceral elements of the mobile user experience, we also acknowledge its limited interactivity, due to the trade-off between cost (time and effort) and prototype refinement. Still, the direct transposition of paper prototypes into digitalized form integrated in a mobile device generates an interesting outcome. In our experience, users interacting with paper-in-screen are surprisingly able to abstract from the limited interactivity of the prototype (as they consider it part of the work in progress) and raise issues on interface labels, content organization, and affordance, using context to provide suggestions for improvement. Interestingly, the elementary, though viscerally engaging, interactivity with the sequence of screens, provides the real-life experiential context not only to focus on the interface usability, but also to facilitate the discussion on the overall utility of the application for realistic mobile scenarios of usage. The provisional and paper-like characteristics of the interface stimulate feedback on information architecture, navigation affordance, underlying business model, content, and requirements (behavioral level). It is clear that only higher-fidelity prototypes with more refined design will elicit other issues concerning, for example graphics, layout, colors, and elements visibility (reflective level).

From this perspective, paper-in-screen can serve well not only traditional user-based evaluation settings, but also expert reviews (heuristics inspection or walkthroughs), and participatory design activities. Experiencing the partial use of the application within the mobile device is helpful to stimulate discussion in the design team, to support individual inspections, or to enable bodystorming (enacting real-life situations of use).

With the increasing demand for mobile applications and their decreasing time to market, we believe that strategies are needed to anticipate the mobile experience in as many aspects as possible and yet meet the time and budget constraints for agile prototype development. The paper-in-screen technique is an innovative proposal to meet this design challenge.

back to top  References

1. Arnowitz, J. Effective Prototyping for Software Makers. San Francisco: Morgan Kaufmann Publishers, 2006.

2. Snyder, C. Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces. San Francisco: Morgan Kaufmann Publishers, 2003.

3. Schultz, D. "Usability Trips & Tricks for Testing Mobile Applications." interactions 13, no. 6 (2006):14–15.

4. Pering, C. "Interaction Design Prototyping to Communicator Devices: Towards Meeting the Hardware-Software Challenge." interactions 9, no. 6 (2002): 36–46.

5. Rudd, J., K. Stern, and S. Isensee. "Low vs. High Fidelity Prototyping Debate." interactions, 3 no. 1 (2000): 76–85.

6. DENIM: An Informal Tool For Early Stage Web Site and UI Design, <>.

7. Balsamiq Mockups, <>.

8. Norman, N. Emotional Design: Why We Love (or Hate) Everyday Things. New York: Basic Books, 2003.

9. Buchenau, M., and F.J. Suri. "Experience Prototyping." In Proceedings on Designing Interactive Systems: Processes, Practices, Methods, and Techniques. August 17-19, 2000. New York: ACM Press, 424–433.

back to top  Authors

Davide Bolchini is an assistant professor in human-computer interaction at Indiana University, School of Informatics, Indianapolis. Prior to joining IUPUI, he held positions at the University College London, Politecnico di Milano (Italy), and University of Lugano (Switzerland). His research focuses on conceptual design languages for the user experience, usability inspection methods, and user-requirements modeling for Web applications. He is vice president of the Swiss chapter of the Usability Professionals' Association and teaches graduate courses in usability evaluation and HCI at IUPUI.

Diego Pulido is an interaction designer at Pearson Education in Indianapolis and master's student in the human-computer interaction program at Indiana University, School of Informatics, Indianapolis (IUPUI).

Anthony Faiola is the executive associate dean of the School of Informatics, Indiana University, Indianapolis (IUPUI). He is also an associate professor and director of the human-computer interaction program. Faiola's HCI research interests are twofold: First, in the area of crosscultural computer-mediated communication, specifically related to cultural cognitive design and its impact on interaction and information design, as well as the social and cultural influence of "flow experience" on gaming and virtual worlds. Second, related to biomedical informatics, with a focus on health information technology (HIT) design and usability, which aims to contribute to improving its usability and provide the intelligibility of HIT concepts to users through human-centered research.

back to top  Footnotes


back to top  Figures

F1Figure 1. "Paper in Screen" enables anticipating the evaluation of the mobile user experience. This can happen long before a high-fidelity prototype has been integrated into a mobile device.

back to top  Sidebar: Applying "Paper in Screen" Prototyping

With respect to traditional paper prototyping, where—according to the user's selection—a different paper screen is shown (within a limited range of possibilities), the screen sequence is predefined and fixed. This requires the facilitator to verbally indicate to the user the nature of the next step in the scenario sequence ("now you can go to the green chart"), but without specifying the label or button to click on. These conditions enable the evaluation of the overall scenarios in terms of utility of content and functionality, fitness with the requirements and user's needs, navigation flow, and interface understandability.

The cost, in terms of time spent, of transforming a traditional paper prototype into a "paper in screen" prototype is of course proportional to the number of pictures that need to be edited and organized. But about one hour of work is needed for every seven or eight screens.

We have tested the creation and use of "paper in screen" on the iPhone. However, the technique can be applied to any mobile devices enabling interacting (through touch or hardware commands) with a sequential full-screen set of digital pictures.

Based on our experience, here is a summary of the key steps in creating a fully working "paper in screen" prototype:

  1. Begin by designing the paper prototype itself. This can be done by following existing guidelines and practices on the subject. The paper prototype should result in a number of representative screens designed around key task scenarios.
  2. To digitalize each paper screen, a good-quality digital photograph (at least 5 megapixels) may be enough. In this case, the shot should zoom in close enough for digital editing later. As an alternative to a digital picture, the paper can be easily scanned and imported for image editing.
  3. Modify each picture to fit the screen of the mobile device to be used during testing. Any photoediting software can do the job. For example, a picture needs to be resized to 320×480 pixels to fit the screen size of an Apple iPhone.
  4. Export your resized image as a picture file supported by your mobile device (PNG, JPEG, GIF). Ideally, the image's borders should merge with those of the device screen.
  5. Organize the screen images into photo albums or sets, where one album or set corresponds to a specific scenario to be tested, i.e., a salient sequence of screens corresponding to a task or storyboard sequence.
  6. Upload your photo albums to the mobile device, and the "paper in screen" is ready.
  7. Explain to the user how to navigate through the images, whether by pressing a "next" button or flicking the photos with a finger sweep. While carrying out each scenario, users can think aloud and articulate comments about the interface and the sequence of screens.

UF1-1Figure. Step 1. Draw the paper prototype.

UF1-2Figure. Step 2. Take high-quality digital pictures of the prototype screen shots.

UF1-3Figure. Step 3. Edit the digital screen shot.

UF1-4Figure. Step 4. Organize the digital screen shots into sets corresponding to task scenarios

back to top 

©2009 ACM  1072-5220/09/0700  $10.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2009 ACM, Inc.

Post Comment

No Comments Found