Michel Beaudouin
Universite Paris-Sud
Wendy Mackay
Institut National de Recherche en Informatique et en Automatique (INRIA)
Introduction
What Is a Prototype?1009
Prototypes As Design Artifacts
Representation
Precision
What Is a Prototype?1009
Interactivity
Evolution
Prototypes and the Design Process
User-Centered Design
Participatory Design
Exploring the Design Space
Expanding the Design Space: Generating Ideas
Contracting the Design Space: Selecting Alternatives
Prototyping Strategies
Rapid Prototypes
Offline Rapid Prototyping Techniques
Online Rapid Prototyping Techniques
Iterative Prototypes
Software Tools
Software Environments
Evolutionary Prototypes
Software Architectures
Design Patterns
Summary
References
Figure 52.1:Evolutionary prototypes of the Apple Lisa: July 1979 (left), October 1980 (right). Note. From “Inventing the Lisa User Inter- face ”by R. Perkins, D. S. Keller, and F.Ludolph,1997,ACM Interactions, 4,pp.43,47.Copyright 1997 by the Association for Computing Machinery. Reprinted with permission. Online version not available
Figure 53.2:Video brainstorming: One person moves the transparency, projected onto the wall, in response to the actions of the user, who explores how he might interact with an online animated character. Each interaction idea is recorded and videotaped.
Figure 52.3:Hand-drawn transparencies can be projected onto a wall, creating an interface a user can respond to.
Figure 52.4:Several people work together to simulate interacting with this paper prototype. One person moves a transparency with a mouse pointer, while another moves the diagram accordingly.
Figure 52.5:Mock-up of a handheld display with carrying handle.
Figure 52.6:Scaled mock-up of an air traffic control table, connected to a wall display.
Figure 52.7:This storyboard is based on observations of real Coloured Petri Net (CPN) users in a small company and illustrates how the CPN developer modifies a particular element of a net, the “Simple Protocol.”
Figure 52.8:Video prototyping: The Coloured Petri Net (CPN) design team reviews their observations of CPN developers and then discuss several design alternatives. They workout a scenario and storyboard it, then shoot a video prototype that reflcts their design.
Figure 52.9:Complex Wizard-of-Oz simulation, with projected image from a live video camera and transparencies projected from an overhead projector.
Figure 52.10: A noninteractive simulation of a desktop interface created with Macromedia Flash. The time line (top) displays the active sprites and the main window (bottom) shows the animation. Reprinted with permission from O. Beaudoux. Online version not available
Figure 52.11: Frames from an animated simulation created with Macromind Director. Reprinted with permission from D. Curbow. Online version not available
Figure 52.12: A Hypercard card (right) is the combination of a back- ground (left) and the card ’s content (middle). Reprinted with permission from Apple Computer. Online version not available
Figure 52.13: The hierarchy of objects in Hypercard determines the order (from left to right) in which a handler is looked up for an event. Copyright Apple Computer, Inc. Used with permission. Online version not available
Figure 52.14: Using the Tk text and canvas widgets to prototype a novel search and replace interaction technique. Note. From “Instrumental interaction: An interaction model for designing post-WIMP user interfaces” by M. Beaudouin-Lafon, 2000,Proceedings of the Association for Computing Machinery Factors in Computing Systems CHI ’2000, CHI Letters 2 (1),452.Copyright 2000 by the Association of Computing Machinery. Reprinted with permission. Online version not available
Figure 52.15: Using the Tk canvas widget to prototype a novel window manager. Note. From “Novel interaction techniques for overlapping windows ”by M.Beaudouin-Lafon,2001,Proceedings of the Association for Computing Machinery Symposium on User Interface Software and Technology UIST 2001.CHI Letters,3 (2),154.Copyright 2001 by the Association for Computing Machinery. Reprinted with permission. Online version not available
Figure 52.16: Cam ´el ´eon ’s augmented stripboard (left) is a working hardware prototype that identifies and captures hand writing from paper flight strips. Members of the design team test the system (right), which combines both hardware and software prototypes into a single interactive simulation.
Figure 52.17:Callback functions.
Figure 52.18:Active variables.
Figure 52.19:Listener objects.
Figure 52.20:Iterative user interface builder.
Figure 52.21:Interactive user interface builder.
Figure 52.22:Generation of the final application.
Figure 52.23:The Garnet toolkit and tools (Myers et al., 1990).
Figure 52.24: A sketch created with Silk (top left) and its automatic transformation into a Motif user interface (top right). A storyboard (bottom) used to test sequences of interactions, here a button that rotates an object. Reprinted with permission from J. Landay. Online version not available
Figure 52.25:Seeheim model (Pfaff &ten Hagen,1985).
Figure 52.26:The Arch Model (The UIMS Workshop Developers Tool, 1992).