A Book Review of Designing Interface Animation

A Book Review of Designing Interface Animation

The Case for animation


Why you cannot ignore animation

  • Animation has some positive effects on the brain such as reducing cognitive load when done right
  • Animation helps to communicate on a different level than things like type and color
  • Animation can be a design constant in user experiences that span across devices, screen sizes, and platforms
  • Animation can be used to focus user attention and help reinforce content hierarchy
  • Animation can reinforce a personal/company brand personality and values

You Already know more about animation than you think

Val Head goes over the 12 classic principles of animation and which ones pertain to animation

12 Classic Principles of animation:
  1. Timing
  2. Follow-through and overlapping action
  3. Anticipation
  4. Secondary action
  5. Arcs
  6. Squash and stretch
  7. Slow In and Slow Out
  8. Exaggeration
  9. Straight Ahead and Pose to Pose
  10. Solid Drawing
  11. Appeal
  12. Staging

Out of the 12 classic principles though there are 5 that are most important for animation:

  • Timing and spacing
  • Follow-through and overlapping action
  • Anticipation
  • Secondary action
  • Arcs

Modern Principles of Interactive Animation

Tricks to design animations that are useful:

  • Have a known purpose for every animation in your user interface
  • Don’t create obstacles with animation
    • Meaning don’t block users from your using the UI because of your animation
  • Make sure to keep animations flexible and nonblocking
  • Make sure to focus on readability above duration
    • Give easing enough time for users to understand what is happening during the animation
  • Make sure to animate the most performant CSS properties so that you have good performance from the start
    • If you animate non performant CSS, you can decrease UI performance

Using Animation to Solve Design Problems


Using Animation to Orient and Give Context

Animation can help orient your users to the spatial relationships in your UI:

  • Animation helps users create a mental model of the interface and even parts of the UI that aren’t visible
  • Animation helps move between layers in a layered interface
  • Animation helps guide users through steps to complete a task in a UI
    • For example to help onboard new users to your site by animating different features
    • This can help users from future issues by better understanding your product features
  • Animation helps connect application content with context changes in the UI

Using Animation to Direct Focus and Attention

Utilize Animation’s ability to grab attention by:

  • Animating the most important content for your users
  • Use animation to direct eye flow and guide users gaze through the content hierachy with motion
  • Use animation to help visual continuity to help show when an object has not changed
  • Use a defined easing palette and create contrast of motion or easing

Using Animation to Show Cause and Effect

Use animation to show users what effect their actions have triggered in the UI while they complete a task:

  • Make sure to hint at affordances with animation
    • Affordance being the concept of using an object’s characteristics to inform you how to use it
    • For instance in iPhone the swipe gesture is when you tap in the lower right and and it gives cue to swipe up
  • Make sure to cue the next step in a series of tasks with animation
  • Animation can also help preview the effect of a task before it is done
  • Animation can confirm an action’s effect once it is done

Using Animation for Feedback

Animation can help make feedback better by:

  • Animating more effectively any attention-grabbing error messages
  • Animation can visually confirm behind-the-scenes-task when in context
  • Animation can also provide meaningful loading indicators
    • When used appropriately loading indicators can help users understand that something is occurring in the background
  • Animation such as a skeleton background can give visual cues to users and help make perceived wait times in a UI to feel shorter

Using Animation to Demonstrate

Animation Focus:

An animation should have a clear focus of either a single feature or a single aspect of a story to tell

Animation Length:

Make sure to keep animation succint and show a single taks or action at a time

  • Don’t block access to user content or navigation when using an animation

Using Animation to Express Your Brand

  • Animation design guidelines or values can help keep your personal/company brand efforts consistent and cohesive
    • The big takeaway is that teams need to communicate how animations work throughout the UI to avoid confusing users with different types of animations where there should be consistency
  • Make sure to collect and evaluate existing animation as a group with a motion audi
    • This can give you valuable insight into how your company is using animation
  • Animation can also be used to describe your brand much like Words are used
  • Make sure to look for real-world objects or even animals to emulate to define what your brand looks like in motion

Animation in Your Work and Process

Part III

Where Animation Fits in your Design Process

Tips to make sure animation is part of your design process:

  • Start animation discussions early
  • Use storyboards to brainstorm animation ideas quickly early on
  • Make sure to use prototypes and motion mock-ups to test how your animation ideas hold up with user interaction
    • Also prototypes help discuss ideas with fellow team members
  • Document animation design decisions in your animation style guide
  • Try to keep communication open and try to discuss animation ideas and opportunities through a project life-cycle

Prototyping Your Animation Ideas

4 Points are made to keep prototyping focused:

  • Quick sketches help build great low-fidelity prototypes to help shape direction that animation should take
    • Low-fidelity prototypes being a quick sketch on paper or on a whiteboard
  • Motion comps can be helpful in evaluating the behavior of an animation; like how an animation responds to input and whether an animation gives timely feedback to users
  • Interactive prototypes can be quick and simple to make and they don’t have to have production quality code
  • Some specific tools are mentioned like Framer.js or making HTML, CSS prototypes in code

Animating Responsibly

Points to keep in mind to animate responsibly:

  • Animations can be both beneficial and harmful for accessibility.
    • Always aim to minimize harmful animation effects and maximimize potential benefits
  • Design animations with users with vestibular disorders (disorders related to balance and dizziness) in mind.
    • Make your animations purposeful and give accurate context cues and provide a means to reduce an animation motion
  • Make sure to treat animations as a layer of enhancement to make your work more universal and less fragile

Purchase Designing Interface Animation

You can purchase interface animation at Designing Interface Animation

Great job Val Head

comments powered by Disqus