Animation, Direct Manipulation & Feedback

Ben Taylor

Lesson 38

When we talk about Animation and Direct Manipulation in interfaces they can often seem like completely disconnected concepts. You might explain direct manipulation as a user sliding a slider; or animation by showing a list updating by shifting around. However both of these concepts are examples of good feedback, one happens as the user moves their mouse the other as a result of a change in the system. It's important that user interfaces give prompt and understandable feedback to the user based on their actions and the actions of the system.

Read this introduction to Direct Manipulation and think about the various interfaces you have used and designed. Even the ones in front of you. Which parts of the interface have unfortunate "Action-at-a-distance" results and which show good feedback based on direct manipulation?

Watch the first few minutes of this video (or the whole thing, it's really great!) where Bret Victor demonstrates an interface which uses direct manipulation to draw dynamic visualizations. Studying Bret's interfaces is a fantastic way to see the true power of direct manipulation in new and exciting settings.

Read this excerpt from "Designing Interfaces" on transitioning between large state changes. Then think about how this works on mobile devices (e.g. iPhone side-scrolling navigation) and in desktop environments (e.g. minimizing windows). Now imagine the same interfaces without those transitions. Hopefully you can see how the transition between states is important for conceptualizing the change and for understanding how to undo it.

Read this article and think about how these problems could be solved through animation. Transitions between states are much more obvious to users than an immediate change. Think about how many times you yourself have selected the wrong item in a list that keeps on changing.

Quartz Composer is an incredibly powerful tool for professionally designing complex animated interaction designs. This fantastic video tutorial shows how you can recreate the Facebook Home interface using Quartz Composer. Watch through the various tutorial parts and make your own version of Facebook Home.