If you look ten years back, the use of animation and motion in user interfaces was considered a crime rather than a best practice. It was associated with flashy websites, jumping popups and blinking buttons. But this has changed tremendously over the last few year. Since the introduction of the iPhone and mobile apps, many designers gained some experience with the possibilities of dynamic animation. Animation is fast becoming an essential part of interface design. It gives designers a whole new dimension to play with — time.

Modern interface isn’t a series of static screens anymore. Using animation help bridge the gap between software and human nature by adding the dimension of time to the product.

The most intuitive and delightful experiences are always the ones that put detail into motion design. In my previous article 3 Key Uses for Animation in Mobile UI Design, I’ve talked about essential uses cases for animation. In this article I’ll provide a few examples that illustrate where you can add beauty to you app to make the user experience more alive and delightful:

Make the loading experience visually enjoyable

When apps create visually stimulating opening animations it brings an level of excitement to the user, every time they open it. But some animations go beyond that — animation in example below isn’t purely delightful, it also influences a user’s eyes and control where users should focus.

#Onboard users with visually engaging content When user interact with your app for the first time, they have to learn and understand what you made. There’s always a period of onboarding and this period *demands a flawless UX*. Smooth transitions and good animations in the onboarding flow has a tremendous impact on how first-time users will engage with the app.

User onboarding experience in example below is full of creativity and personality. It really shines in visual design and microcopy, and giving new users a taste of the app’s experience.

##Incorporate interactive tips Animation is able to create interactive short stories for each of the features within your app. This provides users a clear understanding what to do next.  #Provide visual orientation The most fitting places to add animation in design are at moments of change. When state change happens, users need to understand how the new sceen is related to the previous one.  >Static design doesn’t provide context between states. 

Establishing connections and content relationships is when animation is particularly helpful, both functionally and stylistically. Animated transitions can work as intermediaries between different UI states and can help orientate users.

##Explain relationships between elements A well-designed animated transition directs the user’s eye to exactly where it needs to be as they interact with the experience. Animation puts emphasis on the right elements depending on what the objective is.  ##Spatial Awareness Animation really help users build mental maps of spatial interfaces. It explains where things come from and where they go.  #Provide clear feedback Animation can be used to reinforce the actions the user is performing. Animated feedback helps demonstrate the result of a user’s interaction, whether or not it was successful, and why. ##Indicate problem When you think of designing for error states, it’s important to work on making them obvious to users. Password shake is a great example of clear feedback: simple head shake, directly relates to how people give feedback to each other.  ##Reassure user Animation can be used to help people visualize the results of their actions. By following the principle “show, don’t tell”, you can use animated feedback to show what’s been accomplished.

In Stripe’s example below, when the user clicks “Pay”, a spinner briefly appears before the app shows the success state. Checkmark animation makes user feel like they easily did the payment and users do appreciate such important details.

#A note about logic One key component to all animation is logic. You need to make sure you give logic to your environment. It’s especially important to think this through on smaller screens where you’re forced to think about how to properly use the little screen real estate you have and how you can reduce complexity. 

Always make your animation logical and purposeful: unpredictable interactions together with too much animation can kill the UX of a product. Some animation, such as the one mentioned below, while technically well executed, makes interfaces more confusing instead of less. It’s hard to predict that swiping over the photo would result in transition to the separate view which contains details about the person.

#Conclusion Animation may be used in a wide range of scales and contexts to unite beauty and function. But you should animate deliberately and think through each animation before you create it, because

Animation is not about making your app cool. It’s about providing your users with the experience they expect.

Thank you!