Improve UX Design with Functional Animation

It isn’t a hidden fact that us humans are beings mainly driven by the things we see. As visually-driven creatures, it is innate for us to be interested in anything aesthetically pleasing. Capturing our attention is one thing, but what is needed to keep our curiosity, exactly? Here comes animation.


When using animation in design to improve user experience and interface, it would work only if it is incorporated correctly – that is, when it encourages interaction. Used correctly at the right place and time, animation can be meaningful and functional.


Functional animation isn’t like regular animation made for movies or games. It works subtly and is embedded in a user interface to contribute to the overall design. It isn’t functional animation if it doesn’t have a clear, logical purpose. Some purposes it could serve include, such as helping reduce mental effort or cognitive load and notifying change in visual stimulus.


Characteristics of Functional Animation

Functional animation should be:

  1. Not out of place.
  2. Orient the user by avoiding any surprising transition.
  3. Emphasize any functional change.
  4. Associate a thumbnail with its detailed view.
  5. Exhibit hidden functionality/action.
  6. Grab the user’s attention.
  7. Simulate topics that are otherwise challenging to convey.
  8. Let the user know the action entered has been acknowledged by the application or program.
  9. Impart a sense of control in a linear process.
  10. Highlight a product’s strength and support brand values.

Roles of Functional Animation

Functional animation, when executed right, can fulfill multiple functions.

  • Responds to Actions Visually – Interaction design lets users know that an action has been acknowledged through visual feedback. Visual feedback, through functional animation, makes the users feel like they’re interacting with what’s on the screen and demonstrates whether or not the interaction worked. The feedback’s main purpose is to acknowledge whether the system has accepted, confirmed, or denied an action.
  • Shows Status Change and Process – According to Jakob Nielsen of Nielsen Norman Group, visibility of system status is one of the ten usability heuristics for user interface design. Functional animation should make users aware of any status change, notifications, and processes. This helps reduce cognitive load. The system status visibility’s main purpose is to provide real-time notification to let users quickly understand what’s going on with an ongoing update. Visibility of system status best applies to data upload and download processes, as well as new updates such as an incoming call.
  • Guides Users through Visual Hints – Functional animation helps first-time users to know what’s going on and how to use the interface in order to interact with the elements on screen.
  • Creates Visual Connections for Navigational Transitions – Functional animation that shows transitions could smoothly transport users between contexts while explaining changes to the content through visual connections found on the screen. The transitions’ main purposes include defining the spatial relationship between elements/screens and avoid surprising transition. Navigational transitions can be hierarchical or sibling. Hierarchical (parent-child) transitions let users explore through levels or screens, while sibling transitions let users explore elements at the same level, typically on the same screen.
  • Promotes Emotional Engagement – Branding animation is responsible for establishing emotional engagement with users while using it as a marketing tool that supports a company’s brand values. This type of functional animation highlights the brand’s strengths and at the same time makes UX smooth and memorable. The main purpose of animation in branding is to bring fun, entertain users, and imbue empathy.

Know how to use animation services in a logical manner. When in need of creative assistance, MicroCreatives’ team of designers, copywriters, and web developers are here to design and develop a user-centric website that excels both in form and function.


Reference: Smashing Magazine