Purpose and Style Using motion with meaning in interfaces Val Head • @vlh Author of Designing Interface Animation Senior Design Advocate, Adobe

Designing Interface Animation designinginterfaceanimation.com

What makes good UI animation?

Great UI animation has purpose and style

Continuity Reinforce mental models of the interface and show how content is related

Feedback Letting users know that something has happened

Direct Attention Leading the eye and calling attention to changes and important items

Choreography Many moving pieces, and “real” expectations

Accelerate into an action Tip: use “ease-in” easing for exits

Slow down before stopping Tip: use “ease-out” easing for entrances

Overlap groups of actions Tip: overlapping action (offsets) can also be great for performance!

Similar objects should animate similarly

Match velocities, not duration

Thank you! Newsletter: uianimationnewsletter.com Let’s chat on twitter: @vlh