The Rhythm of Interaction
Upcoming SlideShare
Loading in...5
×
 

The Rhythm of Interaction

on

  • 12,026 views

From Interaction 11 (IxD11), Feb. 10, 2011, Boulder CO. Speaker: Peter Stahl...

From Interaction 11 (IxD11), Feb. 10, 2011, Boulder CO. Speaker: Peter Stahl

Most 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.

Statistics

Views

Total Views
12,026
Views on SlideShare
11,168
Embed Views
858

Actions

Likes
39
Downloads
226
Comments
1

18 Embeds 858

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

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Rhythm of Interaction The Rhythm of Interaction Presentation Transcript

  • The Rhythm of Interaction
    Peter Stahl
    Interaction 11
    Boulder, Colorado
    10 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
    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
  • Flow
  • 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
  • Dance
  • Benesh Movement Notation
  • Benesh Movement Notation
  • Benesh Movement Notation
  • Labanotation
  • Music
  • 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?
  • 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