Rhythm, Flow and Style

Presentation with Peter Stahl

Interaction designers own timing, pacing and 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 transitions, animation, hover responses and video make their way into more and more interactive experiences. This is in your future. This session builds on “The Rhythm of Interaction,” a popular and inspirational talk from Interaction 11 in Colorado. First we’ll introduce the concepts of Interactive and Motivic Rhythm, touch on how they relate to Flow, and then dive into techniques for designing pacing, tempo and rhythm into our interfaces. We will also examine what makes these elements fail or succeed, and explore how you can know when your design is doing it right. Of course that means seeing how your users respond. But it also has implications for the mental model you seek to induce in your users. Rhythmic experiences can share characteristics with machinery, music, drama, or organisms. Your choice of rhythmic style, and how it’s expressed, can set up predictable behavior patterns and foster intuitions and extrapolations that will result in an engaging, rewarding experience.


How do we show ID if we take people out of their articfacts?

When wireframing, we should be adding people and their emotions when using our products/artifacts

Using artifacts as IXd

See Kevin Chang – Illustrator who draws emotions in Information Architecture


Rhythmic style

– SONY WEBSITE – check out responsive

Big scroll – “Designing Web interfaces” book – Read chapter on Why add transitions

– To attract user – directs user attention

– Show relationships

– Imply what is not visible

– Distract during long operations

– Support Brand’s personality

Esample: Game – faster, child – gentle transitions

VISIO – 5 second slide – mechanical like office copier, precision, not humanity

Samsung – Same as VISIO but softer transitions due to face, relaxing, reassurance, inviting, rhythmic style

NBC UNIVERSAL –  Velocity changes as it slides around “Amusement park ride feel”

MCAFFEE –  Strange menu pop on and off, incongruent for security site

GOOGLE MAPS: Drop and retract in stages, tooltips- cool and friendly

RALLY software-  Megamenues, dizzying

What affects Rhythmic Style
-Frequency and what triggers it
Size and distance
Special Effects (accelerate descelerate)
Dazzling or engaging

NO one size fits all

Decisions when designing

  • – Zippy or confortable
  • – Dramatic or Responsove
  • – Single or Long term

Apollo Robins – Magician – Profile Nyorker Magazine

– This man’s tool is attention

– It’s all about the choreography of people’s attention

– Attention is like water

WE are street performers

Rhythim Flow and style

– Interactions can have rhytm – but not all interactions have it, and it sin’t enoubh by itself

– Introducing flow is great: Provide goals, stepped challenges, progress tracking

– Flow happens in pople not computer: So include people in your artifacts

– Rhythm style belong sto IXD: The best style depends on your goals

BE a sheet magician

– To get people on board apply some rules

– make people remember authothellic experiences and offer to bring them back

– How to prevent looking at results after product is done
The best thing is to prototype it – a matter of feel – whether it feels right

Storyboards with timing – crude animatics as lowtech as ppt.

Interaction Design for learning

Presentation with Michael Wolf

Throughout the history of education, technology tools and related interaction principles have continuously evolved the ways we learn and teach. Learning technology has been around since the Antique and earlier when tangible, kinetic demonstration tools were used to explain complex scientific findings and theories to students. An example of such a learning tool is the Armillary Sphere, an astronomical tool made from a set of concentric wood or brass rings, which had been used for demonstration and observation alike.

In the age of ICT and photo-realistic computer simulation, learning tools have become more sophisticated; however, it seems that the interaction principles crucial to the effectiveness of learning technology have not changed significantly. Interaction Designers have ample scope to improve this situation with interaction concepts that make full use of 21st century technology in order to:

• Enhance collaboration (co-located and networked);

• Manage learning content;

• Create guided content access (smart interfaces);

• Create access to peer & expert networks;

• Provide non-exclusive interfaces;

• Facilitate planning, design, and publishing for learners;

• Tracking of learning path;

Michael Wolf and his company Formula D interactive have worked on several exciting interaction design projects in South Africa in order to create inclusive learning tools for learners and teachers who have no or only little experience with computers. The talk will introduce the audience to the background and theory of interactive learning environments, whilst presenting exciting examples of interaction design projects in the field.


Print snap top track – using interactive print analytics to empower your design

Smithsonian print ———- AR

Image Recognition ——–> QR code

The Most flexible – Teen Vogue Insider —- > IOS app

RFID and antennae ——-> NFC Expensive – when iphone adds this, good


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s