Rhythm and Flow

Most interactions have an underlying rhythm. For example, an application may ask you to scan a list of items, then click one, leading to another list to scan and click. Scan, click, scan, click. You can get into a groove. Systems increasingly have rhythm too: animated transitions, hover responses, and digital physics. Static is so last year. But sometimes it's wise to break rhythm. And besides, rhythm alone isn't enough. The best experiences induce a state of "flow," during which users get into such a groove that mechanics disappear, time falls away, and the experience itself becomes intrinsically rewarding. (Wouldn't that be awesome?) Designers own rhythm. Yet our work practice lacks appropriate tools and vocabulary. How do you portray a groove in a wireframe or PowerPoint deck? Examples from other fields can help. We'll see how it's done in animation and movies, game systems, music and choreography.

Transcript

1. Rhythm and Flow Peter Stahl IA Summit 23 March 2012 Twitter: pstahl Session tag: #RhythmAndFlow
4. Peter Stahl Josh Damon Williams eBay Hot Studio Checking the Feel of your UI with an Interaction Audit
5. Feel Look & Feel
6. SPOKEN OVER BLANK SLIDE: I believe we are at a crossroads. Our disciplines have evolved tools and processes for static screens: information displays, forms, and so on. All the things that made the Web so great in 1996. This is understandable when you remember that our disciplines have evolved largely out of print media. 2 problems: (1) User experiences don’t stand still anymore (2) It’s no longer good enough simply to provide functionality. We have got to ENGAGE and DELIGHT our users. To do this, our profession needs to adopt vocabulary, artifacts, and methods that recognize experience over time, across screens, from end to end. If we don’t, we risk obsolescence or, worse, irrelevance. Like Motorola Razr phones. Today I hope to kick off the conversation about how to approach this vital issue.
7. Rhythm and Flow •  Interactive rhythm •  Flow •  Artifacts & deliverables •  Motivic rhythm •  Capturing timing
8. Interactive Rhythm
22. What makes rhythm? •  Simplicity •  Repetition •  Steady tempo (relatively) •  Reason to continue (i.e., success)
23. When is rhythm appropriate? •  One overall job •  Repeatable interactions •  Errors are rare •  Nondestructive •  Easy to recover from
24. When should rhythm be interrupted? •  To make users think Browse Add to cart Pay
25. Not all experiences got rhythm
29. Rhythm isn’t enough •  Boring, uninteresting, trivial •  Tedious, painful •  Unsatisfying, pointless •  Annoying, insulting
30. Flow
31. Mihaly Csíkszentmihályi
32. CHICK SENT ME HIGH E Csíkszentmihályi
35. Photo by Tim, available under a Creative Commons Attribution-Noncommercial license.
36. Photo by Bruno Bollaert, available under a Creative Commons Attribution-Noncommercial license.
41. Dimensions of Flow 1.  Clear goals and progress tracking (feedback) 2.  Balance of challenge and skill 3.  Sense of control 4.  Focused concentration 5.  Loss of self-consciousness; becoming one with the activity 6.  Time distortion 7.  Self-rewarding (“autotelic”) experience Source: http://edutechwiki.unige.ch/en/Flow_theory, et al.
42. Csíkszentmihályi’s critique of Web design •  Goals •  Feedback •  Challenge •  Progression Wired Magazine, September 1996
43. How can we induce flow? 1.  Clear goals Lack of distractions 2.  Achievable, progressive challenges Early success, but not for free 3.  Clear progress tracking 4.  Obvious next steps
47. Not all experiences got flow
49. 8,475
52. Artifacts & Deliverables
53. Photo by Jeff Jacobson, available under a Creative Commons Attribution-Noncommercial license.
56. ACTION INTERACTION
58. - HUMAN INTERACTION COMPUTER
61. Photo by adjustafresh / Scott, available under a Creative Commons Attribution-Noncommercial license.
62. Kevin Cheng
63. Photo by Crystal Campbell, available under a Creative Commons Attribution-Noncommercial license.
64. Motivic Rhythm
66. Motion Pictures
67. Storyboard Photo by FngKestrel / Russ, available under a Creative Commons Attribution-Noncommercial license.
68. Photo by Brian Bennett, available under a Creative Commons Attribution-Noncommercial license.
70. Gaming
71. Animatics •  Animated storyboards •  Used by: •  Traditional animation •  Gaming •  Live action, before filming •  Used for: •  Sound synchronization •  Scene timing •  Focus group feedback
73. Dance
74. Benesh Movement Notation
75. Benesh Movement Notation
76. Benesh Movement Notation
77. Labanotation
78. Music
87. http://web.media.mit.edu/~nvawter/projects/ExertionInstruments
89. Hey Jude (Paul McCartney, 1968) Hey Jude, don't make it bad Take a sad song and make it better Remember to let her into your heart Then you can start to make it better Hey Jude, don't be afraid You were made to go out and get her The minute you let her under your skin Then you begin to make it better And any time you feel the pain Hey Jude, refrain Don't carry the world upon your shoulders For well you know that it's a fool Who plays it cool By making his world a little colder Da da da da da, da da da da Hey Jude don't let me down You have found her now go and get her Remember to let her into your heart Then you can start to make it better So let it out and let it in Hey Jude begin You're waiting for someone to perform with And don't you know that it's just you Hey Jude you'll do The movement you need is on your shoulder Da da da da da, da da da da Hey Jude, don't make it bad Take a sad song and make it better Remember to let her under your skin Then you'll begin to make it better Better, better, better, better, better, yeah, yeah, yeah Na na na, na na na na, na na na na Hey Jude
92. Desktop Tools
93. Adobe Director
94. Adobe Flash
95. Adobe Flash Catalyst
96. Microsoft Expression Blend
97. Axure RP
98. Apple Keynote
99. Microsoft PowerPoint
100. Your ideas?
101. Rhythm and Flow •  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
102. Thank you! pete@peterates.com Twitter: pstahl Session tag #RhythmAndFlow