Animation and motion design have been part of digital product design for a long time. For example, the OS X dock animations , when it was first introduced, was welcomed with excitements. Animation and motion if used correctly can greatly enhance the user experience. However, so far many of them have looked like isolated clever tricks to make things more fancy; and they soon became annoying.
Windows Phone 7 is the first system, in my opinions, uses motion design in a coherent and systematic way to greatly enhance the experience. “Windows Phone Design Days – Animation” by Jaime Rodriguez is a great presentation from which you can learn about WP motion design in particularly and motion design in general.
Here’s my notes from the presentation:
Why use motion?
- Delight the user. Using interesting visual effect can make things more fun, make people tight to the device. I think you need to be careful not to overuse. I am working on a news app for iPhone, and I might introduce some weather effects into the app, one problem of introducing these kind of visual effects is the cost. It might cost too much to have one or two fun effects, not worth the investment.
- Hint towards interaction. Let people being aware of possibilities. The most obvious example is the hopping home screen of WP to let people know how to unlock. In a perfect world, you should not have to do that, the design should be self-evident. In this sense, the iPhone unlock button is a better design. However, in case you need to guide users, motion design can be very handy.
- Perceived performance. Mask slow performance -> make the experience more consistent. Let people know something happening. Using motion design to mask slow performance is new (to me); we have applied this trick to our recent iPhone product and got good results.
- Help the user find their way (keep them grounded)
Things to keep in mind. Front load animation early in design process. Animation should be part of the design, not something you add to product later.
Definition: There are two main kind of motion in WP:
- Transition: visual feedback given to the user as they move from one scene to another within the UI.
- Animation: visual feedback confined to a local element within a scene which has motion, but not always tied to a user action.
The motion serves a purpose
- Lets the user know the device is “alive”: sound likes part of the reason why WP has more motion is because the “flat” style of graphic design.
- Teaches the user how to interact with the device
This aligns with my design philosophy that for product design, all design elements must serve a purpose, not just ornament. They decided to go for 2.5 D because they don’t want to overwhelm the user with too much design, and focus on the CONTENT.
No transition is an island. This point is really important, we have to keep things consistent.
- all transitions are part of a system.
- Each animation serves a specific purpose.
Techniques: the talk went to more specific techniques and examples.
Randomization. Using randomization on motion to avoid boring replication and to make motions feel more natural.
Continuum: there continuing elements which are common between screens, they create nice flows and make the user does not lose track. I have seen this technique being used more often now; for example, the latest Facebook iPhone app using the same idea when you tap in a photo to go to fullscreen mode. Flipboard employs this technique at few places too.
Easing: make things feel much quicker.
- Keep easing consistent. Consistency in design is everything 🙂
- Can help the UI feel more real
- Can help make long waits feel shorter
- Makes the UI feel snappier
Time. Look like 250ms to 350ms is the good range for animation duration. I am not sure where they get these numbers, but these numbers work.
In conclusion, this is a very good talk about motion design, many techniques are general and you can apply to your products.