Rhythm and Flow Peter Stahl IA Summit 23 March 2012 Twitter: pstahl Session tag: #RhythmAndFlow 

2 

3 

Peter Stahl Josh Damon Williams eBay Hot Studio Checking the Feel of your UI with an Interaction Audit 

Feel Look & Feel 

SPOKEN OVER BLANK SLIDE: I believe we are at a crossroads. Our disciplines have evolved tools and processes for static screens: information displays, forms, and so on. All the things that made the Web so great in 1996. This is understandable when you remember that our disciplines have evolved largely out of print media. 2 problems: (1) User experiences don’t stand still anymore (2) It’s no longer good enough simply to provide functionality. We have got to ENGAGE and DELIGHT our users. To do this, our profession needs to adopt vocabulary, artifacts, and methods that recognize experience over time, across screens, from end to end. If we don’t, we risk obsolescence or, worse, irrelevance. Like Motorola Razr phones. Today I hope to kick off the conversation about how to approach this vital issue. 

Rhythm and Flow •  Interactive rhythm •  Flow •  Artifacts & deliverables •  Motivic rhythm •  Capturing timing 

Interactive Rhythm 

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

What makes rhythm? •  Simplicity •  Repetition •  Steady tempo (relatively) •  Reason to continue (i.e., success) 

When is rhythm appropriate? •  One overall job •  Repeatable interactions •  Errors are rare •  Nondestructive •  Easy to recover from 

When should rhythm be interrupted? •  To make users think Browse Add to cart Pay 

Not all experiences got rhythm 

No content

No content

No content

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 

No content

No content

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

Photo by Bruno Bollaert, available under a Creative Commons Attribution-Noncommercial license. 

No content

No content

No content

No content

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 •  Feedback •  Challenge •  Progression 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 

No content

No content

No content

Not all experiences got flow 

No content

8,475 

No content

No content

Artifacts & Deliverables 

Photo by Jeff Jacobson, available under a Creative Commons Attribution-Noncommercial license. 

No content

No content

ACTION INTERACTION 

No content

- HUMAN INTERACTION COMPUTER 

No content

No content

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 

No content

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. 

No content

Gaming 

Animatics •  Animated storyboards •  Used by: •  Traditional animation •  Gaming •  Live action, before filming •  Used for: •  Sound synchronization •  Scene timing •  Focus group feedback 

No content

Dance 

Benesh Movement Notation 

Benesh Movement Notation 

Benesh Movement Notation 

Labanotation 

Music 

No content

No content

No content

No content

No content

No content

No content

No content

http://web.media.mit.edu/~nvawter/projects/ExertionInstruments 

No content

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 

No content

No content

Desktop Tools 

Adobe Director 

Adobe Flash 

Adobe Flash Catalyst 

Microsoft Expression Blend 

Axure RP 

Apple Keynote 

Microsoft PowerPoint 

Your ideas? 

Rhythm and Flow •  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! [email protected] Twitter: pstahl Session tag #RhythmAndFlow