Daniel Fallman, Camille Moussette
Unlike product designers and architects, many current interaction designers have not had design training in its traditional sense, i.e., studio work, model building, and design critique sessions. Rather, they typically come from computer science, informatics, engineering, psychology, behavioral sciences, or anthropology. Others have joined from media studies, Web design, or advertising. Some are autodidacts. Needless to say, this diversity has brought with it the skills, practices, and perspectives that together shape what we today call interaction design. Yet the diversity has one distinct disadvantage. Unlike designers from the traditional disciplines where it is considered a core skill, many of these interaction designers have not been introduced to the prominence of sketching as a way of thinking and progressing in design work or received proper training in it. Quite to the contrary, sketching is still often considered ad hoc, unsystematic, or simply unscientificnot least in academic circlesand as such unacceptable as a basis for making design decisions and evolving serious work.
As the field of interaction design is growing steadily in scope, importance, and recognition within academia as well as industry, there is a need to further develop and professionalize what it means to be an interaction designer . We argue that one of the most important skills of such a designer is the ability to use and feel confident in sketching as a tool for thinking .
In traditional design fields, sketching has long been recognized as a core professional skill . Sketching is even considered, by some, to be the very essence of what design work is about ; some would say from the earliest stages of design work, the designer’s thinking is “mediated by the sketches or visible notes that they make to familiarize themselves with the material they are manipulating” .
A rather insistent view is to think of sketching as a way to externalize “images” already present in the mind of the designer, that the form, appearance, and character of artifacts yet intangible are transferred from the designer’s mind through the hand holding of the pen onto paper. Recent design theory, however, points to the role of sketching as a tool for thinkingthe designer, when sketching, is reading and interpreting the sketch, explaining it, reinterpreting it, and eventually rephrasing it. Goldschmidt notes the interplay between different modes of seeing that is needed on the part of the designer in this process, between seeing-as and seeing-that , a process Stolterman characterizes as “externalizing ideas and interpreting external representations as ideas” . The sketch itself, i.e., the artifact, still reflects the designer’s vision, but it is not a replica of that vision. In fact, the distance between the vision and the sketch provides a useful space for thinking; it provides a window of opportunity for experimentation, play, and lingering with details, wholes, and the relationship between them.
Substantial effort is currently being invested in human-computer interaction (HCI) and interaction design in developing and proposing new theoretical approaches, methods, and tools that are intended to support designers in their practice . Likewise, prototyping has a long-standing history in HCI, and an interest in the role and meaning of the research prototype itself has recently surfaced .
The role of sketchingthe tools and techniques for practicing and improving it, and differences and similarities between sketching and prototypingis still not a major topic. This seems rather surprising on many levels, mostly because digital artifacts generally have qualities and characteristics that are hard to capture with traditional means of sketching. Pen and paper are excellent for thinking through and catching the spirit of a new car, a table, or a building, but they cannot as effectively capture the flow of a computer interface, the seamless experience of a ubiquitous environment, or the pliable quality of a multitouch system.
To find ways of dealing with some of these qualities, we have explored the potential of stop motion animation as a sketching technique.
Stop Motion Animation
Stop motion animation, sometimes called stop-frame animation, is a basic form of animation typically applied to make everyday physical objects appear to be alive. It builds on moving objects in small increments between individually photographed frames; when the series of slightly different pictures is combined and played back in continuous sequence, magic happens. The illusion of movement is created.
For example, to bring an ordinary object, such as an office chair, to life, stop motion animators would set up a digital camera, typically on a tripod, and prepare the scene, i.e., what the camera sees from its position. The office chair is then moved around in front of the camera in small increments, with the animators capturing a new photo in between each manipulation. Using the same step-by-step technique, the chair is not only able to move but also to jump, turn, twist, fly, stand on two legs, and so on, using relatively simple means to defy gravity: fishing lines, sticky tape, and wiring. Substitution materials such as foam, cellophane, and chicken wire can also be applied creatively to make the chair disappear in a puff of smoke, turn into fluid, or morph into another object.
Stop motion animation has a long history in filmmaking, beginning in 1898 with “The Humpty Dumpty Circus” . Other milestones include “The Automatic Moving Company” (1912), “King Kong” (1933), and some famous scenes from the original “Star Wars” trilogy (19771983). But when stop motion animation is mentioned these days, people tend to think of clay-animated movies like “Chicken Run” (2000) and “Wallace and Gromit: Curse of the Were-Rabbit” (2005). These successes show that despite the advancements of computer animation and the recent 3-D trend, there is something about stop motion animation that captures the audience, whether it is the tremendous skill of the clay animators or the authentic ambience often achieved.
For such a basic animation technique, stop motion animation is conspicuously absent from the HCI and interaction design literature. In Sketching User Experiences, Buxton briefly discusses a few related techniques, such as flipbook animations and animated gif pictures . Buxton also points to Baecker’s early work on picture-driven animation . Recently, Bonanni and Ishii have suggested stop motion animation as a low-fidelity prototyping tool for concept development in tangible user interfaces . They make several interesting remarks about the technique’s potential, for instance in exploring and revealing various consequences of technologies that do not yet exist. While they argue the technique might be best suited as an easy way to draft interaction with people and objects before investing the time and effort to build working systems, they discuss the technique primarily as a presentation aid with which designers can show their results. Indeed, stop motion animation can be quite successfully used as a low-fidelity tool for presenting concepts and ideas generated elsewhere. Our view, however, is that stop motion animation also implies a way of working that has some interesting characteristics, which we have sought to capitalize on to explore its potential as a sketching tool, i.e., as a technique through which concepts and ideas are not just presented, but generated.
During the past two years, we have been introducing stop motion animation to our master students in interaction design at Umeå Institute of Design, Umeå University, Sweden. The aim has been to explore how stop motion animation can generate, develop, and communicate interaction-design ideas and concepts. The courses were relatively short, one week, but in a very intense format in which most students ended up working 10 to 14 hours a day. Lectures and presentations were given each day for about one hour in the morning, after which the students went on to work on their exercises in teams of two to four students.
The students initially learned about the basics of animation, lighting, and photography but were quickly tasked with various exercises to explore (and fake) some general interaction-design notions such as movement, gravity, transitions, and state changes. The first tasks (ease-in/out, bouncing, and disappearing) were executed with everyday objects. Despite the apparent simplicity, students learned producing convincing animation requires its share of work. About halfway through the course, the exercises became a bit more elaborate and demanding. We explored pixilation (animating humans), animated objects, reverse timing, and other related techniques that require a bit more organization and preparation. Some students recorded an audio track with comments for timing purposes; others produced full storyboards in advance, detailing all scenes. The level of planning was highly varied and constantly adjusted as the students refined their ideas and started shooting. As the first few frames are captured, one quickly notices if things are too challenging or do not make sense or match. Due to the nature of the stop motion animation process, it is possible to make changes, rectifications, and adjustments, and these were often made in real time as the shooting continued.
A strong time restriction was enforced for all stop motion animation exercises. Students had a maximum of 24 hours to plan, prepare, shoot, and compile their animations. The time constraint was meant to force the students to be realistic about their ideas in relation to achievable results.
During the courses, some students chose to work with their own digital cameras and improvised lighting equipment. Other teams used our design school’s semi-professional photography equipment and studio lighting. Generally, students with access to the better equipment did not generate better animationsin fact, students with the simplest gear often ended up producing the most interesting results. What proved to be most essential, however, was the overall stability of the setup and the ability to preview and review work directly on the computer while shooting. This is partly because beginners at stop motion animation tend to move, morph, and blend objects too fast, using too few frames. Here, a camera setup with a direct, live connection to video-editing software is very useful, as you are able to review and play through the animation as it is being created. Some means of live preview thus helps to prevent huge mistakes, which, due to the nature of the process, are difficult to correct afterward; live preview also aids in projecting future frames.
Although stop motion sequences can look simple or trivial, either way they require a substantial investment of time, involvement, and engagement. What you dedicate in time is balanced, however, by the unrestricted creativity of the medium. The work the students produced was extremely varied and presented ideas that would have taken weeks or months of hard work to animate using 3-D animation software, code in Flash, or to achieve via certain special effects applications.
The course received very positive feedback from the students, for both years. That they had to rely on an almost fully analog tool set (if we omit the digital camera and the live capture software) was seen as unusual but fun. The students also appreciated the use of low-tech approaches and not having to work directly on-screen, as well as how the course helped refine their photography skills and team-working abilities.
From our students, we have learned some valuable lessons for how to keep focused on the content of the process rather than on the process itself. For us, this is an essential, basic requirement for any technique aspiring to become a tool for sketching. First, it is a good idea to keep a stack of objects and props that do not decay or degrade quickly. Having duplicates of objects allows for even more creative choices. The more objects you have in your stack, the less time you will have to spend making unanticipated objects between frames. Second, it really helps to find ways of immobilizing objects properly (use blue-tack, magnets, double-sided tape, etc.). Spending time recreating lost or partly damaged scenes takes a lot of time and focus away from the content. This is also true when it comes to camera stability, so make sure to fix, secure, and tie down your tripod and other gear. If you are leaving the setup overnight, make sure other people know to keep their hands off.
A key characteristic of stop motion animation is that the setup, equipment, and computer applications that are needed are very basic and cheap and most often already available. The work is also best performed in pairs or groups, one operating the camera and the others moving objects in between frames. This brings groups together and encourages teamwork. That the process itself is usually quite fun helps too.
The technique requires a lot less setup, planning, and equipment than regular moving-image filmmaking. In stop motion animation, the sequences are built frame by frame, which allows animators to avoid many technical and physical constraints, making it relatively easy to bypass materials and physical properties and realities. This has proven to be very valuable for rapidly realizing very futuristic concepts and far-out ideas. We purposely avoided clay as an animation material throughout these courses, as we feared it would put too much focus on the craft of making and manipulating the clay figures, which is an art form in its own right.
Depending on what content you work with, a quick stop motion animation can be easier and less time consuming to produce than work made with Adobe Flash or a similar application. In addition, conceptual work in Flash tends to result in on-screen action only, whereas stop motion animations often mix users, artifacts, and contexts. Using stop motion animation, you thus tend to sketch a larger, real-world-use situation.
Stop motion animations have a natural funky and sketchy feel to them, and they are generally far from perfect. This is partly due to the analog, irregular qualities that result from human manipulation of objects and cameras and from noise and subtle environmental variations, but it’s also due to limitations of available resources, such as time, equipment, and materials. These limitations are inevitable and sometimes an annoyance. Yet they together constitute an interesting and valuable constraint that makes it easier for designers as well as others who are in contact with the animations to focus on the concepts and ideas rather than on pixel-level details, graphics, effects, etc. The very nature of stop motion animations makes it apparent that what you work with is not the final design, that your work is not the final product or what you will see on the screen in the end. Here, we find it interesting that the technique itselfperhaps especially when applied in the area of interaction designdoes not either implicitly or explicitly promote pixel perfectionism. Such a condition is not unfamiliar to many interaction designers. We see this characteristic as a key element for its use as a sketching technique rather than as a prototyping tool.
Stop motion animation also spans a lot of potential sketching needs in interaction design. You are free to sketch anything from simple on-screen interfaces, tangible interaction and advanced integration between physical and virtual objects, to human consequences of being in physically responsive environments. All this comes without a steep complexity curve or an incremental time scale. In fact, the time expectancy for any stop motion animation is quite linearit takes about as much time and effort to animate a progress bar using pen and paper as it does to make a sheep fly from the Earth to the moon. As we see it, this quality of the process encourages wild ideas and creative thinking.
To summarize, when working with and reflecting on the process, we have come to regard stop motion animation as useful process for thinking through and revealing what may in fact be quite complex ideassituations and consequences involving technology, environments, and peoplein a straightforward fashion that requires very little in terms of infrastructur e and equipment. At the same time it allows complexity, it also provides support for quite detailed explorations of movement, flows, transition, and timing, all crucial elements of user-experience-centered interaction design. Going forward, is stop motion animation the pen and paper of interaction design?
8. Lim, Y., Stolterman, E., and Tenenberg, J. The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas. ACM Trans. on Computer-Human Interaction 15, 2 (2008), 727.
12. Bonanni, L. and Ishii, H. Stop-motion prototyping for tangible interfaces. Proc. of the Third International Conference on Tangible and Embedded linteraction. (Cambridge, UK, Feb. 1618). ACM, New York, 2009, 315316.
Daniel Fallman is an associate professor of informatics at Umeå University, Sweden, and studio director for Interactive Institute Umeå where he leads a creative team specializing in experimental, future-oriented interaction design.
Camille Moussette’s work experience includes microelectronics R&D (IBM and NRC Canada), Web consulting, building architectural snow structures in Scandinavia and Italy, and developing new mobile systems in collaboration with Nokia.
Figure. The last exercise of the week was a collaborative work in which each interaction design student had to animate a red dot from the left to the right of the canvas. The sequences in between the two known states were totally open for the students to explore. This particular scene uses everyday objects (in this case mustard, candy, and cardboard). The designer carrying out this animation has an initial vision but also improvises and changes course during the shoot, keeping his animation materials in close reach at all times. The camera (not seen in the picture) is mounted over the table and connects to the computer with live preview software installed, which allows the animator to constantly monitor the next frame against the previous ones. See the video at: http://vimeo.com/17263496/
©2011 ACM 1072-5220/11/0300 $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 © 2011 ACM, Inc.