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.

The Psychology of User Interface Part II

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?
Drawing Dynamic Visualizations

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.
Animated Transitions

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.
When the UI is too Fast

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.
Building Facebook Home with Quartz Composer

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.
Bonus: Where to get inspiration for Animations & Transitions

The best way to come up with fresh animation ideas is to know the landscape really well. So browse through all the different pieces of inspiration here and soak in the animation magic.