IA Summit 2012 Notes: Rhythm and Flow

This is part of a series of notes from the Information Architecture Summit from 2012. All posts will be tagged ias12. This talk was presented by Peter Stahl (@pstahl on Twitter). A reduced version of the slides is available on Speaker Deck.

  • Tools and processes for static screens came out of print media and architecture, but user experiences do not sit still anymore. We need to adopt vocabulary and methods that support desiging experiences over time.
  • Interactive rhythm--interactions with the object form a particular repetitive pattern, e.g. drums, channel surfing, driving especially with a manual transmission (accellerate and stop), forms (enter a field, fill it in, repeat), youtube (get to end of a video, watch a new one), etc.
    • what makes rhythm
      • simple enough to repeat
      • repeatable
      • steady tempo (relatively)
      • reason to continue
    • when is rhythm appropriate
      • one job with repetition, no errors & exceptions (or quickly and easily recoverable)
      • interrupt to make users think--can be hard to get out of rhythm
    • some tasks don't have rhythm
      • photoshop can have rhythm, but mostly doesn't--not repeating tasks
      • turbotax--it could have the form rhythm, but it is missing steadiness: some items can be recalled quickly, others take a lot of time to collect
  • Flow: state in which people are so involved in a task that nothing else matters, people continue for the sake of the activity itself, and every action follows naturally from the previous action
    • dimensions of flow
      • goals and progress tracking (feedback)
      • balance of challenge and skill
      • sense of control
      • focused concentration
      • loss of selfconsciousness, becoming wone with activity
      • time distortion
      • self-rewarding experience
    • web design is frequently missing flow
      • Assumes visitor knows goals, but people hope to be led somewhere. You need to remove distractions.
      • Missing feedback, the site doesn't tell you (or care) if you're progressing toward a goal (exceptions: LinkedIn profile progress, Mint progress, well designed wizards)
      • Missing the balance of challenge and skill
      • Lacks hierarchical goals that build on each other
  • Motivic rhythm: animations in response to a user action, e.g. timing of a popup to open after hover, speed of an animation of a page change or window opening
  • Artifacts and deliverables
    • Wireframe inherit from architectural diagrams. You must know the language of wireframes to understand what they represent and what it will be like to move through them. They do not (readily) convey action.
    • Wireframes show the computer part of computer-human interaction, but flow happens in the human part. How can we induce flow in people if we leave them out of our designs?
      • Can show pictures or comics (or storyboards) of person using site, e.g. ux testing videos often include video of user using site (eg. silverback vids)--include sketch of users using site with wireframe, can help interpret whether actual user reaction are on target with intended reaction
    • Movies use storyboards with the timing indicated
    • Games use animatics: rough cuts or sketches that have been animated at 2-3 a second, used to get timing right for interaction or to hand to composer for background score
    • Dance uses movement notation, for instance lines on a musical staff representing body parts and direction
    • "Protocasting": comic book of scenario with video walkthrough
    • Choose different artifacts for different parts of the design process, e.g. video to convey the overall experience vs something more detailed like a table of animation timings to hand to the engineers
  • tools
    • adobe director
    • flash (easier to get started)
    • expression blend
    • axure RP
    • keynote/powerpoint

Key take-home points for me:

User interactions with a site and site animations have rhythm, but that can't be conveyed with wireframes. I should consider some other method of conveying animation or timing (for instance animatics or storyboards) and the user's emotional response to those actions in my next design.

pardeep

thanks for the write up and i agree, wireframes don’t yet allow a way of developing that emotional interaction which underlines rhythm and flow.