The art of prototyping

XIII.1 January + February 2006
Page: 28
Digital Citation

Interface in form

Bruce Hanington

back to top 

Sketching and modeling are integral features of the design process, critical for both the generation of ideas, and the communication of concepts to others for discussion and evaluation, particularly in the context of human-centered design. While these methods are a natural component of the designer's education and professional tool kit, there is immense value in exposing other professions involved in the development of products and interfaces to at least a limited set of these same basic tools.

Intense workshops and short courses are an excellent method for non-designers such as computer scientists, programmers, and information system specialists to acquire basic conceptual and constructive design skills for the tangible expression of ideas integrating digital and physical product elements. Workshops to this end have been successfully conducted with non-designers, emphasizing rapid ideation methods and exposing participants to various design media and construction techniques. Exercises include sketching, sketch modeling and lo-fidelity prototyping for iterative design development and refinement, the presentation and communication of ideas, and basic product testing of form and interface concepts, merging paper and physical prototypes.

back to top  Paper and Product

While many students and professionals from digital interface development are familiar with the methods of paper prototyping to establish and test screen layout, information architecture, and navigation structures, far fewer are comfortable with simple form development that may be an essential aspect of an interface, including the housing of technology. Exposure to this integrated layer of the product during interface development may be beneficial in several ways.

First, there is often a critical interplay between physical elements and screen-based interaction. For example, the desired product scale may inform available screen real estate. Similarly, the manipulation of a digital interface is typically linked to physical elements such as keypads, push buttons, or scrolling input mechanisms. Even with touch-screen technology, factors such as the scale and weight of a physical device and the design of integrated elements such as stylus inputs, are critical features to address. Whether the digital interface is destined for something new, or it is an upgrade for an existing device, intimate knowledge of the complete product may serve to develop a successfully integrated whole. In fact, the opportunity to develop the digital interface in concert with the physical form may inspire inventive and creative products.

Certainly for purposes of concept feedback and product testing in human-centered design, the development of complete prototypes that merge physical and digital interface components is a useful exercise. Putting a mockup in the hands of a user can give a concrete indication of scale, while also communicating tactile aspects of weight, form, texture variation, keypads, and other input interactions. If merged creatively with paper prototypes, a compelling understanding of proposed products can be made available to clients and users, for excellent feedback that does not rely on the ability to extract information from abstract drawings or computer models, or to make connections between components presented separately.

back to top  Feedback and Fun

In spring 2004, the School of Design at Carnegie Mellon offered a short course entitled "Sketching and Modeling." The course was originally designed to meet the needs of graduate students in the interaction design program, particularly for those who entered the program without design education or experience. While several interaction design students enrolled, there was even larger demand from graduate students in the Human Computer Interaction Institute on campus. This is perhaps because there are other design opportunities in the program for interaction design students. In any case, the response from HCI indicated a strong demand for prototyping experience among technology students.

The course provided a gradual introduction to rough sketching and sketch modeling, primarily through exercises aimed at rapid ideation of abstract concepts, rather than emphasizing refined prototyping. Furthermore, the experience was intentionally limited to desktop modeling, as opposed to prototyping that could involve power tools or shop materials and processes. This approach has value both as it inspires good hand skills in the simple generation of concept ideas, and provides a basis of skills that may be employed almost anywhere for future reference, without relying on sophisticated or expensive facilities. Additionally, a key value of producing lo-fidelity prototypes lies in providing to clients or users just enough information to communicate an idea in a conceptual state, critical for feedback that can still be incorporated into further iterations.

Prototypes were built from a combination of materials, including foam and foam-core, corrugated cardboard, light card stock, paper, transparencies and colored acetate, small craft forms, and found materials. For testing purposes, paper prototypes in some cases remained separate, but in many cases were sketched on paper or card stock that could actually be inserted and removed from the three-dimensional prototype (Figure 1). For button array configurations, students were encouraged to use a flexible modeling technique, in which participants can place physical components in different ways to express their preferences. This was achieved with simple button forms or stickers, easily placed and removed from the physical form or interface screen (Figure 2). This technique is also possible within paper prototyping, whereby research participants, to indicate screen component choices and layout preferences, configure a set number of elements.

In fall 2004, the short course was converted to a two-day workshop conducted for computer science and information systems majors at the University of Nebraska Omaha. On day one, students experienced a series of rapid sketch ideation exercises, particularly targeted at the communication of abstract concepts through simple gesture line drawings and three-dimensional sketch models (Figure 3). This established a baseline of comfort for conceptual expression and facility with desktop modeling using a variety of materials. On day two, students developed concepts for small devices, coordinating aspects of both physical and digital form and interface. Similar to the short course at Carnegie Mellon, prototypes were built from a variety of desktop materials, integrating paper prototypes of screen interfaces wherever possible and allowing for flexible positioning of some elements, including buttons or other input features. Prototypes had enough fidelity to gauge feedback from other workshop participants in mock concept-testing sessions (Figure 4).

back to top  Integrated Interactions

Assessment of this short course and workshop indicated a positive experience for many students, not only in the skill-building developed through exercises, but also in a new confidence for sketching and modeling ideas. Many expressed surprise at how much they accomplished in a short time, and were immediately less intimidated by drawing and modeling, enough to employ some of the basic prototyping skills in other courses and project work. Furthermore, the hands-on experience was fun for them, a factor not to be overlooked when inspiring creative development of products and interfaces!

In emerging definitions of interaction design, the physical form and interface of devices should blend seamlessly to support a positive engagement for user and task. If this is established as a responsible direction for product design outcomes, then it makes sense to introduce an integrated approach to the development of prototype forms and interfaces as well. Just as product designers will find value in an increased understanding of digital technology, students and professionals involved in programming and digital interface development will find benefit, and enjoyment, in contextualizing their work in physical form. Ultimately, merging physical and digital information for concept development, feedback, and testing, will serve to enhance product outcomes, and the interactions that follow.

back to top  References

1. Rettig, Marc (1994) "Prototyping for Tiny Fingers." Communications of the ACM, vol. 37, No.4, pp 21-27.

2. Hackos, J & Redish, J (1998) User and Task Analysis for Interface Design (NY: Wiley).

back to top  Author

Bruce M. Hanington
Carnegie Mellon University School of Design

About the Author:

Bruce Hanington is an associate professor and program chair of industrial design in the School of Design at Carnegie Mellon University, where he teaches human factors, research methods for human-centered design, and design studios. His research encompasses personal, social, and cultural factors in human-centered design. He has presented and published his work in conference forums, design journals, and as an invited speaker in the United States, Canada, Italy, Singapore, South Korea, England, Turkey and Finland. Bruce holds a BA in Psychology, and a Master of Environmental Design in Industrial Design, from the University of Calgary, Canada.

back to top  Figures

F1Figure 1. Integrated paper and product prototyping

F2Figure 2. Flexible feature configurations

F3Figure 3. Sketch modeling for rapid ideation

F4Figure 4. Mock concept testing using lo-fidelity prototypes

back to top 

©2006 ACM  1072-5220/06/0100  $5.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 © 2006 ACM, Inc.

Post Comment

No Comments Found