Well-designed animations make the experience feel crafted. In a human-centered design approach, where the user is the prime focus, animation actually creates a feeling of well-being once it’s discovered by users.

As a designer, recognizing the invisibility of animations is just as important as designing them. Because you have to create something that feels human and accomplishes a task.

Benefits of Animation

Animation in mobile apps has a clear, logical purpose. It reduces cognitive load, prevents change blindness and establish a better recall in spatial relationships. But there is one more thing. Animation brings user interface to life.

Ideally, in-app animation should:

Provide clear feedback in response to user’s actions.
Provide system status to the user.
Guide and teach the user how to interact with the interface.

Visual Feedback

Visual feedback is extremely important in user interface design. In real life, buttons and controls respond to our interaction, this is how we expect things to work. And responsive interaction encourages deeper exploration of an app by creating logical reactions to user input. Upon an input event, the system should provide instant visual confirmation.

Buttons and Controls

User interface elements like buttons and controls should appear tangible, even though they are behind a layer of glass. To bridge that gap, visual and motion cues acknowledge input immediately and animate in ways that look and feel like direct manipulation.

From the point of input, make the visual reaction radial. Image credit: Google material design

##Takeaways * Visual feedback works because it appeal to the user’s natural desire for acknowledgement. It feels great to click through the app and always feel like you know what’s happening. * Add clarity to user input through visual reactions to user input. Make the visual reaction on the user’s input radial.

System Status

The user wants to be in control, and trust that the app behaves as expected. It could be even said that users don’t like surprises. Animation provides real-time notification of app’s process status, enabling the user to quickly understand what is going on.

A well-known animation for this group is “pull down to refresh,” which initiates a process of content updates on mobile devices.

Also animation is very helpful during onboarding. User onboarding demands a flawless UX, and smooth transitions and good animations in the onboarding flow has a tremendous impact on how first-time users will engage with the app.

Takeaway

Provide real-time monitoring of system status. Make it possible for user to quickly understand the current app’s status.

Meaningful Transitions

You should use animation to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy. Motion design can effectively guide the user’s attention in ways that both inform and delight.

User selects an item in a list item or card element and zoom into its detailed view. Image Source: Material Design.

##Connect Transitions Visually You should create visual connections between transition states through color and persistent elements. Transitioning between two visual states should be clear, smooth, and effortless. ![](/content/images/2016/03/0-CNz1Jy8346o9bQvn.gif)

Moving a certain element adds clarity to a transition. Source: Dribbble.

##Hierarchical Timing Animation supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow.

Avoid disjointed transactions like in the example below.

All elements occur at the same moment provides no indication of what is important. Image Source: Material Design

The timing of transition elements should flow smoothly like in example below. ![](/content/images/2016/03/32.gif) ##Consistent Animation Transitioning objects should behave in a coordinated manner.

Avoid haphazard motion like in the example below, because it’s very distracting.

Inconsistent and disorderly motion. Image source: Material Design.

##Takeaways * Use visual connections. Make the direction elements travel cohesively across the transition. Consider how moving a certain element adds clarity and to the transition. * Direct user attention. All moving elements should create a clear picture of where to look for the user. Direct user attention with coordinated, orderly motion.

Delightful Details

The most basic use of animation is in transitions, but an app can truly delight a user when animation is used in ways beyond the standard scope of actions. It can exist within all components of an app and at all scales, from detailed icons to key transitions and actions.

Icons change from one image to another to serve dual functions at different times. Source; Material Design.

##Fun Animations have the power to encourage users to actually interact. They can bring empathy in user experience and full of emotions. ![](/content/images/2016/03/1-2oLpjGdsEICeuCp20DBcMg.gif)

Walking brokkoli. Really nice animation by Jason Booth

##Animation for Animation’s Sake Animation for animation’s sake is (almost always) poor design. When an animation doesn’t fit a functional purpose, it usually also feels awkward or annoying. Also keep longevity in mind — will the animation get annoying on the 100th use, or is it universally clear and unobtrusive? ![](/content/images/2016/03/1-roi8V_Xv3TNdWtD7cHeUAg.jpeg)

Image credits: Rachel Nabors

##Takeaway Animating with purpose. Rather than animating solely for the sake of delight, we should focus on practical things the animation does for the user. #Conclusion *Design with care.* Attention to each and every detail is key to your success making human-computer interaction easy to use. And thoughtful motion design can help us communicate much more effectively. But always remember that animations must be functional first.