# Mobile-Application Loading-Animation Design and Implementation Optimization
###### Abstract  
Mobile-application performance and ultimately bounce rate are influenced by many factors, with wait-time duration proven to be the most important influencing factor. It is therefore important to optimize loading-time perception and performance to ensure a smooth and enjoyable experience. This research investigates the influences of loading-animation design, motion speed, and semantics, as well as the graphics format used for creation, on time perception. These research aims were (1) to identify the key factors that influence the quality of the user experience in the design of animated loading indicatorsand their perceived dimensions, (2) to find out what impact animation meaning has on perceived time duration, and (3) to identify loading-animation-design decisions' influence on application performance. Research activities from the fields of human-computer interaction, psychology/neuroscience, and networking/ telecommunications have addressed understanding the user's wait-time experience. In this experiment, we confirmed that the perceived wait-time duration of a loading indicator is positively related to nontemporal properties, such as the processing principle, but we also reviewed the influence of the semantic structure of perceptual time representation. The specific meaning of an animation metaphor and its narrative sequence is related to information extraction and processing of novel and repeated stimuli and, consequently, to the experienced delight and duration judgment of an end user.  
loading animation; user experience; wait-time duration; semantic structure; file formats 2023330  
metrics that can influence the user's loading experience, rather than measuring loading with just one metric [3,4].  
Depending on how a loading animation is implemented, it can have an impact on the overall performance of an application. Loading animations are often created using computer-generated or computer-assisted 2D/3D animations in Adobe After Effects and coded in CSS, JavaScript, or Scalable Vector Graphics (SVG). To ensure smooth motion, developers must ensure that each frame renders in less than 16 ms, even if the device's natural frame rate is 60 frames per second (which is faster than the user can perceive). For this reason, rendering in the SVG format may require some extra XML code writing and optimization. Recently, a JSON-based animation file format called Lottie was introduced. One of the major benefits of Lottie, compared to XML formats, is its small file size, which can significantly improve download speed and reduce disk-space usage. In addition, designers who use Adobe After Effects can immediately start creating Lottie content and preview and optimize animations on iOS, Android, and React Native without any coding. In other words, using JSON may simplify and improve the workflow of designers and developers compared to the workflow that is created with Extensible Markup Language family file format [5].  
We can conclude that visual design principles are at the core of good performance in mobile applications [6]. From this viewpoint, speed is becoming a dimension of the design process. Through making a loading screen less generic and more novel, designers can make time seem to pass more quickly and the wait more pleasant [7,8]. On the other hand, as the complexity of a loading animation increases, the file size of the loading format also increases. This makes reducing file size an important consideration for successful mobile-application development, as it can improve download speed and reduce the amount of disk space used without sacrificing aesthetics [9]. Therefore, it is important to optimize loading-animation design and implementation to ensure a smooth and enjoyable user experience.