The following content is translated and compiled by the Mockplus team for learning purposes only, and Mockplus is a faster and simpler prototyping tool.

In terms of user experience design, the design and addition of App animation not only bring designers unlimited creative space, but also become one of the most controversial topics among designers. In view of this topic, this paper will analyze how to provide better user experience and smooth and stable interaction through mobile App animation design. Hope to inspire you:

When all kinds of App widgets come together on the same interface, animations need to be more purposefully and functionally added, rather than just aesthetically pleasing. Furthermore, the dynamic effects of UI design should be taken into account from the very beginning of user flow planning and design to avoid a less mature design that can cause the overall design of the page to be too abrupt or incoherent. Of course, the addition of animation also requires a detailed analysis of its possible impact, especially on the usability and requirements of the App. If any positive effects cannot be foreseen from the start, then the designer needs to reconsider whether it is necessary to add animations to improve the user experience. However, the benefits and utility of animation design are so obvious that it can easily mask the possible adverse consequences. However, successful and effective UI animation design should add to your App, not add to it.

Here’s a look at some of the most popular types of animation design that have dramatically improved the user experience, along with some tips:

Feedback animation

Feedback animations are a clear and intuitive way to tell the user that certain actions have succeeded or failed. The goal: To keep the user in touch with the App, even for the most basic of actions. So, to some extent, this kind of animation is a way to mimic the interaction between humans and objects in the real world. For example, in the real world, when people press a button, they generally feel the force of the press and the reaction of the button. With a mobile app, this interaction is not possible: when the user taps the screen, there is no similar physical feedback. This is why designers are trying to add a variety of sensory screen interaction designs, using vibrations and visual design to elicit responses from apps. Also, this is why UI animation design often includes mini-games. Through dynamic buttons, page toggle, switch, “check” or “cross” logo, quickly notify the user that the operation is completed.

For example, the following animation design about the ticket purchase process of the Cinema App, from the projection screen to the selection of seats, is demonstrated by movie poster style animation: After the user chooses the seat he likes, the color of the seat changes accordingly, indicating that the system has selected the seat for him. Later, a tick marks the completion of the ticket purchase process.



Another example is the interactive design of the following watering tracking application: after watering is completed, the user clicks to view the relevant details, and the blue water drop button on the right side of the interface will correspondingly turn into a tick mark, informing the user that watering is completed.



Moreover, even in the most common basic navigation designs, the addition of motion provides feedback and fun. For example, consider the following conceptual animation design for button unfurling: Through a series of dynamic designs, it mimics the interaction between objects to create an unfurling effect like a frozen Q.



Process of animation

If the UI interaction inevitably takes a long time and users have to wait, they are more willing or willing to know what the software is doing and how the interaction is progressing while they are waiting. The biggest advantage of process animation is that it gives users the assurance that the App is actively solving their problems while they are using the App, so they can have confidence in the App and avoid exiting directly. Gaining a confident user often means the software needs to provide a better user experience and lay the foundation for higher retention. The addition of dynamic progress bars, timelines, and other dynamic components makes it easy to achieve similar results at one stroke:

  • Inform the user of the interaction process
  • Improve the interface fun, weaken the negative impact brought by waiting
  • To strengthen the originality of App design, become a feature, encourage users to actively share, and attract more users to participate in it, to achieve a certain commercial value

As shown in the figure below, this Timeline App shows the process status and other dynamic effects by adding scene changes from day to night and dynamic changes of numbers during the waiting period of users, so as to alleviate the negative emotions of users when waiting.



Loading animation

Loading animations are one of the most common types of mobile animation used by designers. It is also often thought of as a small branch of process animation. The main purpose is to inform the user that the loading process is active and ongoing. Also, in the actual design, there are many variations on loading animations. For example: loader, start animation and pull down refresh animation and so on.

For example, in the Slumber app below, the user can scroll down to refresh a series and see a loading wheel animation that shows the series library is running and loading the series. The corresponding dynamic illustration design also effectively alleviates the user’s feeling of boredom during the waiting period.



Suction eye animation

Such animations play an important role in enhancing the usability of the interface when users interact with the App. Create a visual hierarchy by creating cool animations that grab the eye and guide the user to more details about the product. So, in order to shorten the user browsing the interface time, make its navigation more clear and intuitive.

The Tasty Burger App’s interactive design, shown below, features dynamic price changes. It’s more natural because it’s more realistic. Moreover, its dynamic effect design, beautiful and eye-catching, can let the user can not help but focus on the core information of the interface, give the user with invisible hints, is worth learning and emulation.



Animated transitions

Transition animation adds a certain style and aesthetic feeling to the conversion between pages, which is also very important in App dynamic design.

Take the page conversion design for the Perfect Recipes App, which helps users customize their own Recipes according to their goals and dietary restrictions. The dynamic transformation between target pages provides a very good user experience.



Moreover, the design and addition of transition animation can not only add to the aesthetic feeling of the whole App design, but also improve its visual sense of space, making the interface layout more spacious and bright. As shown in the figure:



As shown in the following figure, when users need to display relevant data through charts such as pie charts or list views, animation design can effectively realize the visual display of their data and deepen the impression of users.



Marketing of animation

Ingeniously integrating the brand into THE UI design can effectively enhance the brand image and awareness. In specific design examples, designers often add brand logo, mascot and other related animation design in the welcome page, to achieve. While marketing animation usually focuses on guiding people’s attention to the visual logo of the brand and deepening its brand awareness. Whizzly’s dynamic Logo design is engaging, memorable, and easy to connect with. It’s a great marketing animation.



Notify the animation

Notifications are an important way to guide users to understand and use software updates. By adding a degree of kinetic design to make notifications relatively visible and compelling, users are less likely to miss important software information. As shown in the picture, in the interface design of Home Budget App, the software notifications attract users’ attention through the selection of bright colors and the addition of bouncing effect.



Scrolling animation

Scrolling interaction is one of the most typical interaction designs in Web and mobile application design. The dynamic effect design can greatly enhance the beauty of the rolling design, making it more fashionable, elegant and harmonious. In this regard, it is important to keep in mind that the scrolling design can be applied in all directions, not just vertical. In the Photo App shown below, you can also add a horizontal scrolling design:



Story-based or gamified design

Another important reason to add animation to mobile App design is that it makes your App more interesting and engaging through storytelling or gamification. Dynamic emojis, badges, rewards, and mascots make the interface more interesting. For example, the following emoticons for Mood Messenger can be applied to the interface design to enhance the emotional experience of users, attract and retain users, and reduce bounce rate.



Pros and cons of UI animation design

Adding an animation requires the designer to analyze its potential positive and negative effects in advance to weigh its necessity. Here is a simple comparison of the pros and cons of UI animation design to help you make the right choice:

Mobile App dynamic effect design advantages:

  • Save interface space
  • Improve software availability
  • Enhance the originality of interface design
  • Provide simpler and more convenient interaction design
  • Improve versatility
  • Speed up the interaction
  • Provide clear and intuitive user feedback
  • Create the necessary expectations

On the other hand, designers need to consider the possible negative effects:

  • Animation load time
  • Increase interface interference factors
  • Time-consuming and laborious technical implementation

In short, it is hoped that designers can be more comprehensive and detailed to consider the relevant advantages and possible problems and traps, to create a more high-quality and eye-catching mobile terminal animation App.

Related reading:

15 of the latest home in animation design to make waiting a treat

Tips for micro-interaction design in UI animation

Improve user experience: Smart use of transitions

Why is dynamic design so important

6 principles, easy to solve mobile App dynamic design

By Marina Yalanska

Link: tubikstudio.com/ux-design-h…

Learning tools, but not limited to a particular tool. Make prototypes with Mockplus, faster and easier. Download Mockplus now and enjoy the free prototyping tour.