Blog SegmentDesign SegmentUncategorizedUX/UI DesignXD Best Practices


Since humans are visually driven creatures, the impact of imagery only increases with the help of animation. Our eyes innately pay attention to moving objects, and animation is like eye-candy — catchy and bright elements that call attention to and help differentiate an app from its competitors. As of late, more designers are incorporating animation as a functional element that enhances the user experience. Animation is no longer just for delight, it is one of the most important tools for successful interaction.

However, animation in design can only enhance user experience if it’s incorporated at the right time and place. Good UI animations have purpose, they are meaningful and functional. In this article we’ll talk about the role of functional animation in UX design and see when to incorporate motion into a design.

What is Functional Animation?

Functional animation is a subtle animation embedded in the UI design as a part of the functionality of that design. It reinforces the design and has  very clear and logical purposes including:

  • Reduce cognitive load
  • Prevent change blindness
  • Establish better recall in spatial relationships

Animation brings user interfaces to life. In a human-centered design approach, where the user is the prime focus, a user interface needs to be intuitive, responsive, and human. Functional animation helps you achieve these goals.

The Role of Functional Animations in User Interface Design

Well thought-out and tested functional animation has the potential to fulfill multiple functions.

Visual Feedback on User Actions

Good interaction design provides feedback. Feedback makes you feel like you’re interacting with real elements on the screen and demonstrate the result of this interaction (whether it was successful or not).

User interface elements such as buttons and controls should appear tangible, even though they are behind a layer of glass. Visual and motion cues can bridge this gap by acknowledging input immediately and animating in ways that look and feel like direct manipulation.


Buttons and other active controls should respond to user actions with visual feedback. Image credit: Behance

Image credit: Behance

Image credit: Ramotion on Behance

Visual feedback is also helpful when you need to inform users about results of an operation. For cases when operations aren’t done successfully, functional animation provides an information about the problem in a fast and easy way. For example, a shake animation can be used when a wrong password is entered. It’s easy to see why the shake is a fairly universal gesture to communicate the word “no,” since a simple head shake is how people give feedback to each other.


Users notice this animation and immediately understand the problem. Image credit: thekineticui


  • Acknowledge that the system has received a user’s action.
  • Confirm (or deny) a user’s action.

Visibility of System Status

As one of the original 10 Jakob Nielsen’s heuristics for usability, visibility of system status remains among the most important principles in user-interface design. Users want to know their current context in a system at any given time and apps  shouldn’t keep them guessing — they should tell the user what’s happening via appropriate visual feedback.

Data uploading and downloading processes are great opportunities for a functional animation. For example, animated loading bars shows how fast a process goes and sets an expectation for how fast the action is being processed.

Fun animation also distracts users from what’s happening behind the scenes and helps makes them wait longer. Image credit: tympanus

Fun animation also distracts users from what’s happening behind the scenes and helps makes them wait longer. Image credit: tympanus

This type of functional animation can be also used to attract a user’s attention to  important status changes in an app (or even in a system), such as an incoming call…

Image credit: Material Design

Image credit: Material Design

or a new email in the inbox.

Image credit: Behance

Image credit: Behance

Purpose: Provide real-time notification of a system status, enable the user to quickly understand what is going on.

Visual Hints

First-time users often need help to understand how to use an app interface. This is especially true for interfaces which contain unfamiliar or unique interactions (such as gesture-driven interfaces). Without help users might get confused on how to interact with an app.

When it comes to teaching users to use your UI, you should provide a set of visual hints which convey  what interactions are possible. This kind of functional animation drives a user’s attention to the possible interactions.

Visual hints can give the user insights into what is about to happen next. For example, functional animation which prepares the user for the action of taking a photograph can be found in the iOS camera app (before iOS 7).

Shutter animation in Apple iOS 6 camera app

Shutter animation in Apple iOS 6 camera app

Or they can engage users to take further steps (which aren’t so obvious at  first glance) by demonstrating how certain functionality in the design operates:

Pudding Monsters for iOS. Image credit: Pudding monsters

Pudding Monsters for iOS. Image credit: Pudding monsters

Visual hints can increase the level of usability and therefore the desirability of the product.


  • Create necessary expectations by giving the user a clue of what is about to happen
  • Help users orient themselves to the interface
  • Tell users how they can and should interact with elements on the screen

Navigational Transitions

Navigational transitions are movements between states in an app, such as from a high-level view to a detailed view. State changes often involve hard cuts by default which can make them difficult to follow. Functional animation ease users through these moments of change — it smoothly transports users between navigational contexts and explains changes on a screen by creating visual connections between transition states.

Navigational transitions can be hierarchical (parent to child) or sibling transitions. Hierarchical transitions are used when users explore deeper levels or screens of an app, which are children to the current (parent screen). Motion highlights movement away from the parent towards a destination (a child element).


Animated zoom-in transition guides a user’s attention from parent-to-child (detailed view). Image credit: Material Design

Animated zoom-in transition guides a user’s attention from parent-to-child (detailed view). Image credit: Material Design


Animated parent-to-child transition clarifies the relationship between parent and child. Image credit: Behance

Sibling transitions occur between elements at the same level of hierarchy. For example, this animation is used when a user navigates through tabs.

The content and surface of each tab stays at the same level and the animation simply guides focus between views. Image credit: Behance

The content and surface of each tab stays at the same level and the animation simply guides focus between views. Image credit: Behance

In both cases functional animation helps the eye see where a new object comes from upon its reveal and where a hidden object goes (and can be found again). It provides visual cues, making the interaction easier to follow and reinforcing what has occurred.


  • Define the spatial relationship between screens and elements.
  • Avoid a surprising transition by helping users comprehend the change that has just happened in the page’s layout.


Identifying the places where animation has utility is only half the story. If you’re going to use animations in your designs, you should make them well and this only happens when animation is natural part of the design process. Thus, when adding UI animations to your own work, iterative prototyping and testing with actual users are the right things to do.

Nick Babich

Nick Babich

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.


Source link

Leave a Reply