Cartoons vs. User Interfaces

1. Animation: From Cartoons to the User InterfaceBay-Wei Chang & David Ungarpresented by Nesra Yannier

2. Cartoons vs. User Interfaces • User interfaces are static with little transition • visual changes -> sudden & surprising • hard to make causal connection between states • Pop up menus, the sudden change in the screen requires a moment of assessment

3. Cartoons vs. User Interfaces • Cartoons provide information for the audience to follow the action without being confused • Objects do not disappear & appear - continuous • Do not flash into different sizes/shapes • Grow and deform smoothly • Animations provide visual cues

4. Self • Experimental user interface for the programming language Self • uses techniques from cartoon animation to provide smooth transitions in interfaces • Offloading the cognitive burden of interpreting change

5. Cognitive and affective benefits • Offloading interpretation of changes to perceptual system • Animation -> user can focus on the task domain rather than shift contexts in the interface domain.

6. Principles of animation • Solidity • Exaggeration • Reinforcement

7. Solidity • Cartoons: characters and objects usually solid obeying physics principles - weight and balance. • Self user interface: objects drawn as 3-D boxes- move solidly as the user drags them with mouse. • movement should also be at a high enough rate with cursor, to maintain illusion.

8. Solidity: Motion blur • Sudden movement -> jump from one side of the screen to another in single frame. Cartoon animations: fills the gaps between old new positions - continuous motion. Self Interface: connect gaps between fast moving objects - seem faster and smoother.

9. Solidity: Arrivals and Departures • Objects appear and disappear -> sudden and confusing • Self objects maintain illusion of reality by smoothly easing on and off the screen. • Arrows grow smoothly from tail to destination. • Pop up menus grow smoothly and shrink back to a button

10. Exaggeration • Cartoon animations: use exaggeration to convey message rather than mimicking reality • Dwarves -> drawn with exaggerated proportions • Snow White -> drawn with realistic proportions • Interfaces: make particular features more salient

11. Exaggeration • When an object is about to move, movement starts with small and contrary movement preparing user for motion

12. Reinforcement: Slow in and out • Characters move out of a pose slowly, which is similar in interfaces where the objects ease out of their beginning poses and ease into their final poses.

13. Reinforcement: Moving in arcs • Objects usually move along gentle curves instead of straight lines

14. Reinforcement: Follow through • Objects do not come to sudden stops– motion continues after the main motion is completed (wiggling at the end of the motion in interfaces)

15. Why cartoon-style animation? • Theatrical basis: going beyond real world to convey message • Engagement: absorbing the user into its world so that the attention is devoted only to the task • Nature of artistic medium: similar to the graphics of the computer.

16. Differences • User interfaces are not cartoons! • User interface is a tool for doing a task • Animation should be as fast as it can unlike cartoons where the main purpose is enjoyment

17. Discussion • Do you think today's interfaces obey the principles brought up in this paper for adapting cartoons to interfaces? What are some examples of interfaces that have adapted these principles? • Why do you think some types of animations succeed while some others fail? (animations in websites vs. animations in tablet interfaces vs. animations in 3D virtual environments such as Second Life) • Are there any ways that today's interfaces can be improved using the principles brought up in this paper?