The Rhythm of InteractionPeter Stahl
Interaction 11Boulder, Colorado10 February 2011
The Rhythm of Interaction
• Interactive rhythm• Flow• Artifacts & deliverables• Motivic rhythm• Capturing timing
Interactive Rhythm
What makes rhythm?
• Simplicity• Repetition• Steady tempo (relatively)• Reason to continue (i.e., success)
When is rhythm appropriate?
• One overall job• Repeatable interactions• Low likelihood of errors• Errors are non-destructive & easy to
correct
When should rhythm be interrupted?
• To make users think
Browse Add to cart
Pay
INTERRUPT
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
Rhythm isn’t enough
• Boring, uninteresting, trivial• Tedious, painful• Unsatisfying, pointless• Annoying, insulting
Flow
Mihaly Csíkszentmihályi
CHICK SENT ME HIGH E
Csíkszentmihályi
“[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
“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
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.
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
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
Not all experiences should have flow
• One-shot• Registration
• No progression of challenge• Tic-tac-toe
• Too many possible goals• Yahoo! home page
Artifacts & Deliverables
Photo by Jeff Jacobson, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
ACTIONINTERACTION
-HUMAN
INTERACTION
COMPUTER
Motion Pictures
Storyboard
Photo by FngKestrel / Russ, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
Photo by Brian Bennett, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
Photo by adjustafresh / Scott, available under a Creative Comm
ons Attribution-Noncomm
ercial license.
Kevin Cheng
Photo by Crystal Campbell, available under a Creative Com
mons Attribution-Noncom
mercial license.
Motivic Rhythm
Gaming
Animatics
• Animated storyboards• Used by:
• Traditional animation• Gaming• Live action, before filming
• Used for:• Sound synchronization• Scene timing• Focus group feedback
“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
Dance
Benesh Movement Notation
Benesh Movement Notation
Benesh Movement Notation
Labanotation
Music
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
http://loveallthis.tumblr.com
Desktop Tools
Adobe Director
Adobe Flash
Adobe Flash Catalyst
Apple Keynote
Microsoft PowerPoint
Your ideas?
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
Thank [email protected]
Twitter: pstahl