From Interaction 11 (IxD11), Feb. 10, 2011, Boulder CO. Speaker: Peter Stahl Most interactions have an underlying rhythm. For example, an application may ask a user to scan a list of items, then click to select one, leading to another list to scan and click. Scan, click, scan, click. The best such experiences induce a state of flow, in Csikszentmihalyi's sense, during which users get into such a groove that the mechanics of operating the program disappear, allowing users to focus entirely on meaning. Flow is associated with increased learning and positive feelings. Great flows can even cause users to regard the interaction itself as intrinsically rewarding. (Wouldn't that be awesome?) As guardians of dynamic behavior, interaction designers own rhythm. Yet our work practice lacks appropriate tools and vocabulary. How do you portray a groove in a wireframe, flow chart, or PowerPoint deck? This is becoming critically important as things like animation, hover responses and video make their way into more and more interactive experiences. This is in your future. This session will dive into how we can design pacing, tempo and rhythm into our interfaces, with examples from the presenter and (even better!) the audience. This could include adapting techniques from animation and movies, game systems, audio interfaces, music and choreography.

1. The Rhythm of Interaction Peter Stahl Interaction 11 Boulder, Colorado 10 February 2011

2. The Rhythm of Interaction Interactive rhythm Flow Artifacts & deliverables Motivic rhythm Capturing timing

3. Interactive Rhythm

17. What makes rhythm? Simplicity Repetition Steady tempo (relatively) Reason to continue (i.e., success)

18. When is rhythm appropriate? One overall job Repeatable interactions Low likelihood of errors Errors are non-destructive & easy to correct

19. When should rhythm be interrupted? To make users think Browse Add to cart INTERRUPT Pay

20. Not all experiences got rhythm Too complex Photoshop Not repetitive Control panels / system preferences Tempo varies too much TurboTax Success too sporadic Any game that’s too hard

21. Rhythm isn’t enough Boring, uninteresting, trivial Tedious, painful Unsatisfying, pointless Annoying, insulting

22. Flow

23. MihalyCsíkszentmihályi

24. CHICK SENT ME HIGH E Csíkszentmihályi

27. “[Flow is] the state in which people are so involved in an activity that nothing else seems to matter; the experience itself is so enjoyable that people will do it even at great cost, for the sheer sake of doing it.” Flow: The Psychology of Optimal Experience, 1990

28. “Being completely involved in an activity for its own sake. The ego falls away. Time flies. Every action, movement, and thought follows inevitably from the previous one, like playing jazz. Your whole being is involved, and you're using your skills to the utmost.” Wired Magazine, September 1996

32. Dimensions of Flow Clear goals and progress tracking (feedback) Balance of challenge and skill Sense of control Focused concentration Loss of self-consciousness; becoming one with the activity Time distortion Self-rewarding (“autotelic”) experience Source: http://edutechwiki.unige.ch/en/Flow_theory, et al.

33. Csíkszentmihályi’s critique of Web design Goals. “Site designers assume that the visitor already knows what to choose. That’s not true. People enter hoping to be led somewhere, hoping for a payoff.” Feedback. “Most Web sites don’t very much care what you do. It would be much better if they said, ‘You’ve made some interesting choices.’” Challenge. “A flow experience has got to be challenging. Anything that is not up to par is going to be irritating or ignored.” Progression. “You need clear goals that fit into a hierarchy, with little goals that build toward more meaningful, higher-level goals.” Wired Magazine, September 1996

34. How can we induce flow? Clear goals Clear progress tracking Early success, but not for free Achievable, progressive challenges Obvious next steps Content that is Interesting Compelling Worthwhile Rewarding Absorbing Challenging Lack of distractions

35. How can we induce flow? Clear goals Lack of distractions Achievable, progressive challenges Early success, but not for free Clear progress tracking Obvious next steps

38. Not all experiences should have flow One-shot Registration No progression of challenge Tic-tac-toe Too many possible goals Yahoo! home page

39. Artifacts & Deliverables

40. Photo by Jeff Jacobson, available under a Creative Commons Attribution-Noncommercial license.

43. ACTION INTERACTION

45. COMPUTER -HUMANINTERACTION

48. Motion Pictures

49. Storyboard Photo by FngKestrel / Russ, available under a Creative Commons Attribution-Noncommercial license.

50. Photo by Brian Bennett, available under a Creative Commons Attribution-Noncommercial license.

52. Photo by adjustafresh / Scott, available under a Creative Commons Attribution-Noncommercial license.

53. Kevin Cheng

54. Photo by Crystal Campbell, available under a Creative Commons Attribution-Noncommercial license.

55. Motivic Rhythm

57. Gaming

58. Animatics Animated storyboards Used by: Traditional animation Gaming Live action, before filming Used for: Sound synchronization Scene timing Focus group feedback

59. “During production we use animatics with time codes to figure out and tune our timing and shot composition. It’s much faster to see and feel the timing of a scene, and more cost efficient. This way a Creative Director can sign off on the direction or make changes rapidly before art gets made.” Rich Larm, Electronic Arts

61. Dance

62. Benesh Movement Notation

63. Benesh Movement Notation

64. Benesh Movement Notation

65. Labanotation

66. Music

74. Hey Jude (Paul McCartney, 1968) Hey Jude, don't make it badTake a sad song and make it betterRemember to let her into your heartThen you can start to make it betterHey Jude don't be afraidYou were made to go out and get herThe minute you let her under your skinThen you begin to make it betterAnd any time you feel the pain, Hey Jude, refrainDon't carry the world upon your shouldersFor well you know that it's a fool Who plays it coolBy making his world a little colderDa da da da da, da da da da Hey Jude don't let me downYou have found her now go and get herRemember to let her into your heartThen you can start to make it better So let it out and let it inHey Jude beginYou're waiting for someone to perform withAnd don't you know that it's just youHey Jude you'll doThe movement you need is on your shoulderDa da da da da, da da da daHey Jude don't make it badTake a sad song and make it betterRemember to let her under your skinThen you'll begin to make it better Better, better, better, better, better, Yeah,Yeah,Yeah Na nana, nananana, nananana Hey Jude

75. http://loveallthis.tumblr.com

77. Desktop Tools

78. Desktop animation tools Director Flash, Flash Catalyst Keynote PowerPoint

79. Adobe Director

80. Adobe Flash

81. Adobe Flash Catalyst

82. Apple Keynote

83. Microsoft PowerPoint

84. Your ideas?

85. The Rhythm of Interaction Interactions can have rhythm But not all interactions have it, and it isn’t enough by itself Inducing Flow is a great thing Provide goals, stepped challenges, progress tracking Flow happens in people, not computers So include people in your artifacts! Motivic rhythm is on the rise Examples from other disciplines can help Existing animation tools may suffice

86. Thank you! pete@peterates.com Twitter: pstahl