The Rhythm of Interaction

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

Twitter: pstahl