Leaving the area of static or dynamic-by-hand sketching, we come to the area of simple animation. Animations in the narrower sense are techniques to compose single images in a way that a person perceives the illusion of movement.

As Animation primarily happens in a digital way, this time the material needed is mostly software:

• Tools to create Graphics Interchange Formats (GIFs)
• Presentation tools like Microsoft PowerPoint or Apple Keynote
• Software for Stopmotion, e.g. Windows Movie Maker or iStopmotion

Everybody knows flipbooks from his childhood. Fascinated once from the fact that quickly moving stapled pictures generate motion, we now can use this technique to bring motion to our sketches.

• Chose a set of pictures in which at least one object is moving step-by-step.
• These pictures are played back in a consecutive manner:
  • Either in an analog way using simple paper or sticky notes,
  • Or digitally through animated GIFs.

• Sketching with analog as well as digital flipbooks includes a wide range of possible materials that can be used, like photographs, paper cut-outs or combinations of these.
• Regarding digital flipbooks, GIFs are treated like ordinary images that means there is no need for an extra media player to demonstrate these sketches.

(1) Analog Flipbook
To present your ideas with an analog flipbook, you need to print or sketch your ideas on a few pieces of paper of equal size. As you want to illustrate motion, it is necessary that your objects move step-by-step on every paper. To better be able to hold the paper to browse it with your hand, leave a border of your pieces blank. Then staple the paper on the side of the blank border and browse it manually. You will see: your objects are moving!

(2) Digital Flipbook

To generate a digital flipbook, the Graphics Interchange Format is the right choice. This graphic format is able to save many frames in just one file and is therefore interpreted by many programs (e.g. browsers) as an animating picture. There are several tools to create GIFs, like Microsoft Digital Image Suite 2006 or Alchemy Software's GIF Construction Set. To just quickly sketch your idea, there are even web applications, allowing you to upload your pictures and regulate several parameters, like size and animation speed, with a control panel (e.g. gifmaker.me).

• As you can see in the example above, the playback dynamics are only rough.
• Humans perceive motion from 3 frames per second, but to imitate fluent motion, at least 20 frames per second are needed.
• Due to the single frame solution of flipbooks, they only serve for short sequences.

The basic principle of the stopmotion technique matches with the technique of producing flipbooks: you take a set of pictures and combine them to imitate motion. But the term stopmotion goes a little bit further: it also describes the technique how you produce the pictures you are animating later.

• Take pictures of a scenario with real objects and move them with every picture step-by-step.
• To ensure the position of your camera, use a tripod if available.
• Load the pictures in a software program for stopmotion to generate the video.

• This technique allows you to bring the illusion to your users that everyday objects are alive.

(1) Stopmotion Video of a Remote Control
The following example was produces in a seminar of the HCI-group at the university of Constance in summer term 2012. The students sketched the idea and functionality of a remote control for a garage with this stopmotion video. They prepared their video with overlaying forms to imitate the remote signal.

• Again, to perceive fluent motion, a lot of images are needed.
• Beside enhancing features, the stopmotion technique rises the time and efforts of sketching.
• Therefore, it is not a useful technique regarding longer sequences or scenarios.

Also for the sketching seminar this term, we finished the project with a stop motion video, demonstrating the scenario how a normal library visitor uses the innovative devices to finally end up at the book he was looking for.

Normally, we use presentation tools to do what the name is suggesting: presentations. But is not a sketch also a kind of presentation of an idea to the users or colleagues? There exist several techniques to use slideshows to sketch with animation.

• There are three different methods to use presentation tools to animate your sketch:
  • Simple animation: Your defined slides change automatically after a predefined time.
  • Object-driven-animation: Define some objects in your slides that are moving due to an imaginary user interaction. This can be realised through motionpaths.
  • Links: Use different elements of your interface as hyperlinks to other slides of your presentation.

• This technique becomes helpful for longer sequences, when frame-by-frame approaches are getting to expensive in terms of time and effort.
• Additionally the learning effort is much smaller than with advanced tools, like flash.
• Presentation tools are ubiquitous and widespread tools.

(1) Simple Animation
To use this technique, you first have to define your interface on the slides. Than open the menu of the animations tab, choose the option „automaticly after“ and change the time after which the slide should change to „00:01“. If you are doing this to every slide of your presentation, the slides will automatically change in order after one second in the presentation mode. Here you can find an example.

(2) Motionpaths
To overcome the jumping cursor in the simple animation example, we can define motionpaths for objects. Chose „Custom Animation“ in the tab of animations. Then chose „motionpaths“ in the menue for adding a new animation. Afterwards you draw a line by hand on which your object (here: the black arrow) should move.
Hint: copy the object from the following slide to your actual slide to get the exact location to avoid small jumps, when the slides are changing. But do not forget to delete it afterwards!
After having defined the path, set its attributes, like e.g. the speed of the motion. Have in mind that the duration of all motions in one slide is set to the same interval after which the slide is automatically changing (see Example 1). An example for animating sketches via motionpaths can be found here.

(3) Links
The advanced method to use PowerPoint for animating your sketch to gather user experience is with links. Here you link particular objects (e.g. Buttons) via the hyperlink functionality in the context menu to other slides of your presentation.

With this method you are overcoming the linear structure of a presentation and allow the discovering of your sketch in a flexible manner. Like this the users or colleagues are able to explore your sketch on their own.

• You have to deal with the Registration Problem:
  • If your screens jump while the slides are changing automatically, the imagination of an animation is broken.
  • To solve this problem, register your interface layout as master frame template and only sketch the changing elements directly on your presentation slides.
• Already for little examples a lot of slides and links are needed to cover all possible branches.
  • The solution is to just implement the important functionality, that is relevant for your sketch.

All in all, the method of using PowerPoint to demonstrate your sketch brings benefits as well as several risks.

• Using slideshows allows a designer to demonstrate his sketch without a facilitator.
• Due to the animation the user gets a better feeling for the functionality.
• One can explore and illustrate the dynamics of the system better than with non-animated techniques.

• As sketches can look very sophisticated now, one could lose the feeling that it is still just a sketch.
  • Users and colleagues could consider your sketch as an advanced prototype.
• Using presentation tools enhances the needed time to sketch your idea in a significant way.
• It is dangerous to lose oneself in too much detail.

• Bill Buxton. Sketching User Experiences getting the design right and the right design. 2007.
• Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton. Sketching User Experiences - The Workbook. Academic Press, 2012.
• Fernando Uceta, Max Dixon, and Marc Resnick. Adding interactivity to paper prototypes. In Proceedings of the Human Factors and Ergnomics Society Annual Meeting, volume 42, pages 506-510, 1998.
• Creating Interactive Prototypes With PowerPoint

• 10 Minute Mock Prototyping - Tips for PowerPoint
• Interacting with Paper
• Three Dimensional Sketches