the rhythm of interaction
DESCRIPTION
From Interaction 11 (IxD11), Feb. 10, 2011, Boulder CO. Speaker: Peter StahlMost 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.TRANSCRIPT
![Page 1: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/1.jpg)
The Rhythm of InteractionPeter Stahl
Interaction 11Boulder, Colorado10 February 2011
![Page 2: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/2.jpg)
The Rhythm of Interaction
• Interactive rhythm• Flow• Artifacts & deliverables• Motivic rhythm• Capturing timing
![Page 3: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/3.jpg)
Interactive Rhythm
![Page 4: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/4.jpg)
![Page 5: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/5.jpg)
![Page 6: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/6.jpg)
![Page 7: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/7.jpg)
![Page 8: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/8.jpg)
![Page 9: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/9.jpg)
![Page 10: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/10.jpg)
![Page 11: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/11.jpg)
![Page 12: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/12.jpg)
![Page 13: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/13.jpg)
![Page 14: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/14.jpg)
![Page 15: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/15.jpg)
![Page 16: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/16.jpg)
![Page 17: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/17.jpg)
What makes rhythm?
• Simplicity• Repetition• Steady tempo (relatively)• Reason to continue (i.e., success)
![Page 18: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/18.jpg)
When is rhythm appropriate?
• One overall job• Repeatable interactions• Low likelihood of errors• Errors are non-destructive & easy to
correct
![Page 19: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/19.jpg)
When should rhythm be interrupted?
• To make users think
Browse Add to cart
Pay
INTERRUPT
![Page 20: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/20.jpg)
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
![Page 21: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/21.jpg)
Rhythm isn’t enough
• Boring, uninteresting, trivial• Tedious, painful• Unsatisfying, pointless• Annoying, insulting
![Page 22: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/22.jpg)
Flow
![Page 23: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/23.jpg)
Mihaly Csíkszentmihályi
![Page 24: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/24.jpg)
CHICK SENT ME HIGH E
Csíkszentmihályi
![Page 25: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/25.jpg)
![Page 26: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/26.jpg)
![Page 27: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/27.jpg)
“[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
![Page 28: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/28.jpg)
“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
![Page 29: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/29.jpg)
![Page 30: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/30.jpg)
![Page 31: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/31.jpg)
![Page 32: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/32.jpg)
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.
![Page 33: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/33.jpg)
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
![Page 34: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/34.jpg)
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
![Page 35: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/35.jpg)
![Page 36: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/36.jpg)
![Page 37: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/37.jpg)
Not all experiences should have flow
• One-shot• Registration
• No progression of challenge• Tic-tac-toe
• Too many possible goals• Yahoo! home page
![Page 38: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/38.jpg)
Artifacts & Deliverables
![Page 39: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/39.jpg)
Photo by Jeff Jacobson, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
![Page 40: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/40.jpg)
![Page 41: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/41.jpg)
![Page 42: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/42.jpg)
ACTIONINTERACTION
![Page 43: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/43.jpg)
![Page 44: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/44.jpg)
-HUMAN
INTERACTION
COMPUTER
![Page 45: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/45.jpg)
![Page 46: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/46.jpg)
![Page 47: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/47.jpg)
Motion Pictures
![Page 48: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/48.jpg)
Storyboard
Photo by FngKestrel / Russ, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
![Page 49: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/49.jpg)
Photo by Brian Bennett, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
![Page 50: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/50.jpg)
![Page 51: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/51.jpg)
Photo by adjustafresh / Scott, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
![Page 52: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/52.jpg)
Kevin Cheng
![Page 53: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/53.jpg)
Photo by Crystal Campbell, available under a Creative Com
mons Attribution-Noncom
mercial license.
![Page 54: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/54.jpg)
Motivic Rhythm
![Page 55: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/55.jpg)
![Page 56: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/56.jpg)
Gaming
![Page 57: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/57.jpg)
Animatics
• Animated storyboards• Used by:
• Traditional animation• Gaming• Live action, before filming
• Used for:• Sound synchronization• Scene timing• Focus group feedback
![Page 58: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/58.jpg)
“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
![Page 59: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/59.jpg)
![Page 60: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/60.jpg)
Dance
![Page 61: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/61.jpg)
Benesh Movement Notation
![Page 62: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/62.jpg)
Benesh Movement Notation
![Page 63: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/63.jpg)
Benesh Movement Notation
![Page 64: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/64.jpg)
Labanotation
![Page 65: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/65.jpg)
Music
![Page 66: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/66.jpg)
![Page 67: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/67.jpg)
![Page 68: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/68.jpg)
![Page 69: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/69.jpg)
![Page 70: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/70.jpg)
![Page 71: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/71.jpg)
![Page 72: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/72.jpg)
![Page 73: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/73.jpg)
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
![Page 74: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/74.jpg)
http://loveallthis.tumblr.com
![Page 75: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/75.jpg)
![Page 76: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/76.jpg)
Desktop Tools
![Page 77: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/77.jpg)
Adobe Director
![Page 78: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/78.jpg)
Adobe Flash
![Page 79: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/79.jpg)
Adobe Flash Catalyst
![Page 80: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/80.jpg)
Apple Keynote
![Page 81: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/81.jpg)
Microsoft PowerPoint
![Page 82: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/82.jpg)
Your ideas?
![Page 83: The Rhythm of Interaction](https://reader036.vdocuments.net/reader036/viewer/2022062319/5556217fd8b42ae0238b5468/html5/thumbnails/83.jpg)
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