Functional Animation In UX Design

User Experience
Date 15 May 2015


“Functional animation” is subtle animation in a user interface that conveys information. Aarron Walter writes about the hierarchy of user needs in his book Designing for Emotion; similar to Maslow’s hierarchy of needs, Walter’s hierarchy positions the functional need as the base of the pyramid, while the need for pleasure is up on top, appreciated only if the base needs have been fulfilled.

Several types of functional animation are discussed, and illustrated with videos:

  • Orientation: eases users through an interaction. Ex: a panel reveals in a transitional animation when an element is clicked.
  • Same Location, New Action: When an element changes function, a transitional animation draws attention to the change.
  • Zoom In: enlarging anmation that shows details of a small element. Ex: clicking on a thumbnail brings the full image into view.
  • Visual Hint: In designs that contain a unique interaction, an animation is triggered that demonstrates how certain functionality in the design operates. Ex: bouncing an icon to indicate that it is clickable.
  • Highlight: an element is animated to draw attention to an interaction. Ex: Zappos’ Add To Cart cat animation slides from the call to action (CTA) button to the cart.
  • Simulation: a customized functional animation that simulates concepts that are otherwise impossible to convey. Ex: wind map
  • Visual Feedback: subtle animations showing that something has been clicked or otherwise interacted with. Ex: a button appearing to depress when clicked on
  • System Status: animations that show the initiaion, progreess, completion, and termination of an interaction. Ex: progress bars and loading animations

Summarized from: Daliot, Amit; Functional Animation In UX Design. Smashing Magazine, May 14, 2015.

Leave a comment