The Rhythm of Interaction


Published on

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.

Published in: Design, Technology, Business
1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The Rhythm of Interaction

  1. 1. The Rhythm of Interaction<br />Peter Stahl<br />Interaction 11<br />Boulder, Colorado<br />10 February 2011<br />
  2. 2. The Rhythm of Interaction<br />Interactive rhythm<br />Flow<br />Artifacts & deliverables<br />Motivic rhythm<br />Capturing timing<br />
  3. 3. Interactive Rhythm<br />
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17. What makes rhythm?<br />Simplicity<br />Repetition<br />Steady tempo (relatively)<br />Reason to continue (i.e., success)<br />
  18. 18. When is rhythm appropriate?<br />One overall job<br />Repeatable interactions<br />Low likelihood of errors<br />Errors are non-destructive & easy to correct<br />
  19. 19. When should rhythm be interrupted?<br />To make users think<br />Browse<br />Add to cart<br />INTERRUPT<br />Pay<br />
  20. 20. Not all experiences got rhythm<br />Too complex<br />Photoshop<br />Not repetitive<br />Control panels / system preferences<br />Tempo varies too much<br />TurboTax<br />Success too sporadic<br />Any game that’s too hard<br />
  21. 21. Rhythm isn’t enough<br />Boring, uninteresting, trivial<br />Tedious, painful<br />Unsatisfying, pointless<br />Annoying, insulting<br />
  22. 22. Flow<br />
  23. 23. MihalyCsíkszentmihályi<br />
  24. 24. CHICK<br />SENT ME<br />HIGH E<br />Csíkszentmihályi<br />
  25. 25.
  26. 26.
  27. 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.”<br />Flow: The Psychology of Optimal Experience, 1990 <br />
  28. 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.”<br />Wired Magazine, September 1996<br />
  29. 29.
  30. 30.
  31. 31.
  32. 32. Dimensions of Flow<br />Clear goals and progress tracking (feedback)<br />Balance of challenge and skill<br />Sense of control<br />Focused concentration<br />Loss of self-consciousness; becoming one with the activity<br />Time distortion<br />Self-rewarding (“autotelic”) experience<br />Source:, et al.<br />
  33. 33. Csíkszentmihályi’s critique of Web design<br />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.”<br />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.’”<br />Challenge. “A flow experience has got to be challenging. Anything that is not up to par is going to be irritating or ignored.”<br />Progression. “You need clear goals that fit into a hierarchy, with little goals that build toward more meaningful, higher-level goals.”<br />Wired Magazine, September 1996<br />
  34. 34. How can we induce flow?<br />Clear goals<br />Clear progress tracking<br />Early success, but not for free<br />Achievable, progressive challenges<br />Obvious next steps<br />Content that is<br />Interesting<br />Compelling<br />Worthwhile<br />Rewarding<br />Absorbing<br />Challenging<br />Lack of distractions<br />
  35. 35. How can we induce flow?<br />Clear goals<br />Lack of distractions<br />Achievable, progressive challenges<br />Early success, but not for free<br />Clear progress tracking<br />Obvious next steps<br />
  36. 36.
  37. 37.
  38. 38. Not all experiences should have flow<br />One-shot<br />Registration<br />No progression of challenge<br />Tic-tac-toe<br />Too many possible goals<br />Yahoo! home page<br />
  39. 39. Artifacts & Deliverables<br />
  40. 40. Photo by Jeff Jacobson, available under a Creative Commons Attribution-Noncommercial license.<br />
  41. 41.
  42. 42.
  43. 43. ACTION<br />INTERACTION<br />
  44. 44.
  46. 46.
  47. 47.
  48. 48. Motion Pictures<br />
  49. 49. Storyboard<br />Photo by FngKestrel / Russ, available under a Creative Commons Attribution-Noncommercial license.<br />
  50. 50. Photo by Brian Bennett, available under a Creative Commons Attribution-Noncommercial license.<br />
  51. 51.
  52. 52. Photo by adjustafresh / Scott, available under a Creative Commons Attribution-Noncommercial license.<br />
  53. 53. Kevin Cheng<br />
  54. 54. Photo by Crystal Campbell, available under a Creative Commons Attribution-Noncommercial license.<br />
  55. 55. Motivic Rhythm<br />
  56. 56.
  57. 57. Gaming<br />
  58. 58. Animatics<br />Animated storyboards<br />Used by:<br />Traditional animation<br />Gaming<br />Live action, before filming<br />Used for:<br />Sound synchronization<br />Scene timing<br />Focus group feedback<br />
  59. 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.”<br />Rich Larm, Electronic Arts<br />
  60. 60.
  61. 61. Dance<br />
  62. 62. Benesh Movement Notation<br />
  63. 63. Benesh Movement Notation<br />
  64. 64. Benesh Movement Notation<br />
  65. 65. Labanotation<br />
  66. 66. Music<br />
  67. 67.
  68. 68.
  69. 69.
  70. 70.
  71. 71.
  72. 72.
  73. 73.
  74. 74. Hey Jude (Paul McCartney, 1968)<br />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, <br />Hey Jude, refrainDon't carry the world upon your shouldersFor well you know that it's a fool <br />Who plays it coolBy making his world a little colderDa da da da da, da da da da<br />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<br />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<br />Na nana, nananana, nananana<br />Hey Jude<br />
  75. 75.<br />
  76. 76.
  77. 77. Desktop Tools<br />
  78. 78. Desktop animation tools<br />Director<br />Flash, Flash Catalyst<br />Keynote<br />PowerPoint<br />
  79. 79. Adobe Director<br />
  80. 80. Adobe Flash<br />
  81. 81. Adobe Flash Catalyst<br />
  82. 82. Apple Keynote<br />
  83. 83. Microsoft PowerPoint<br />
  84. 84. Your ideas?<br />
  85. 85. The Rhythm of Interaction<br />Interactions can have rhythm<br />But not all interactions have it, and it isn’t enough by itself<br />Inducing Flow is a great thing<br />Provide goals, stepped challenges, progress tracking<br />Flow happens in people, not computers<br />So include people in your artifacts!<br />Motivic rhythm is on the rise<br />Examples from other disciplines can help<br />Existing animation tools may suffice<br />
  86. 86. Thank you!<br /><br />Twitter: pstahl<br />