The Rhythm of Interaction

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

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
INTERRUPT
Pay

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

MihalyCsí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
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.

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?
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

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

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 Commons Attribution-Noncommercial license.

ACTION
INTERACTION

COMPUTER
-HUMANINTERACTION

Motion Pictures

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

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

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

Kevin Cheng

Photo by Crystal Campbell, available under a Creative Commons Attribution-Noncommercial 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

Benesh Movement Notation

Labanotation

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

http://loveallthis.tumblr.com

Desktop Tools

Desktop animation tools
Director
Flash, Flash Catalyst
Keynote
PowerPoint

Adobe Director

Adobe Flash

Adobe Flash Catalyst

Apple Keynote

Microsoft PowerPoint

Your ideas?

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 you!
pete@peterates.com
Twitter: pstahl

http://www.frankwatching.com	372
http://blog.fabrique.nl	66
http://stojakovic.posterous.com	48
http://www.mytweetmag.com	42
http://paper.li	27
http://localhost	10
http://www.fabrique.nl	10
http://blackboard.du.edu	7
https://twiki.wolfram.com	6
http://ogilvyux.posterous.com	5
url_unknown	2
http://twitter.com	2
http://static.slidesharecdn.com	1
http://ropparochjäger.se	1
http://xn--ropparochjger-kfb.se	1
http://haig.soup.io	1

The Rhythm of Interaction

by Peter Stahl on Feb 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

16 Embeds 601

Statistics

The Rhythm of Interaction — Presentation Transcript