IxD 2013: Rhythm, Flow, and Style

This article was originally published at tech.blinemedical.com

Today Carlo and I listened to a 45 minute presentation by Peter Stahl called “Rhythm, Flow and Style” which discussed designing flow and rhythm into applications. Peter started with the observation that the world is full of rhythms, but not just what people think of (namely music). Rhythms exist in every part of life, chopping vegetables, walking outside, involving in conversations, filling out forms, navigating a website, etc. All of them involve actions, pauses, and repetitions. According to Stahl there are two types of rhythm: iterative rhythm, which is rhythm of the user (engaging with the application) and there is also motivic rhythm, which is rhythm within the application. But to get rhythm you need flow.

Flow, according to Stahl’s presentation has several dimensions:

  • Known goals, with known progress
  • Perceived balance of challenge and skill
  • Sense of control
  • Focused concentration
  • Loss of self conciouslyness: becoming one with the activity
  • Time distortion
  • Self rewarding experience

and it’s possible to induce it by offering clear goals, achievements, progressive challenges, progress tracking, and obvious next steps. The ultimate intent is to keep the user engaged and challenged, where they can easily lose themselves in the application. You can see these kinds of theories being applied to sites like StackOverflow, LinkedIn, or OKCupid. They have percentages indicating progress, helpful hints on how to get to the next step, progressively more advanced information, etc. Flow engages the user and lets the application open up, giving it a sense of movement over time.

Flow, however, isn’t always just about content and progress. It’s also a matter of visual effects and transitions. Transition effects can influence the perception of an application: fast and jarring can give a sense of precision and automation, whereas slow, more gentle fades, induces a sense of calmness.

On top of rhythm and flow is style, which is used to direct the flow and rhythm. Stahl called it rhythmic style and it is affected by visual frequency, speed, size and distance, and special effects. There are lots of different kinds of rhythmic style choices:

  • Dazzling or engaging?
  • Zippy or comfortable?
  • Dramatic or responsive?
  • Single-use or long-term?

But the choice of style within visual components depends on content branding and audience.

Stahl compared Samsung vs Vizio (though both have changed their sites since the slides shown in presentation). Samsung, at the time, used gentle fade transitions, whereas Vizio used a paper swipe effect. He argued that Samsung’s felt more human but Vizio’s was reminiscent of a copy machine: inhuman but precise. Both have advantages and with small motivic rhythm choices you can induce different emotions in the user.

Of course though, flow rests with the user, so Stahl stressed to make sure to include the user in user interaction testing. Stahl showed a four way split image showing two images of the user using the application, as well as the screen being viewed (the last screen I think was a description of the test):

stahlPresentation

Finally, Stahl ended with a resonating quote that I think captures the design goals of any application:

It’s all about the choregraphy of people’s attention. Attention is like water. It flows. It’s liquid. You create channels to divert it, and you hope that it flows the right way”.

I really enjoyed his presentation. Here are Stahls slides https://www.box.com/s/ms8ssh4nc3zl6mx0n38w.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>