1 Introduction

With the development of the mobile Internet, the number of intelligent terminals is rapidly increasing, and the user’s experience requirements for mobile terminals are also higher [1]. Interactive animation plays an important role in the interactive experience of mobile phones. In 1993, Chang and Ungar [2] as well as Hudson and Stasko [3] proposed applying cartoon animation to interfaces. Later, many scholars have proved through research and practice that interactive animation can improve the interface aesthetics, assist user decision-making and improve the interface user experience [4, 5]. Gonzalez [6] conducted an experiment showing that using animation in a graphical user interface can help improve the user’s decision-making process. Research by Kraft and Hurtienne shows that animation can help users build a more accurate mental model of the application structure without increasing the burden on the user [7]. Because of its advantages in user experience, animations are widely used in interface interaction design.

In order to further optimize the experience of interactive animation, some scholars study the design theory of interactive animation from the perspective of usability and cognitive psychology. Some scholars promote research in the direction of emotion and brand. Dong proposed that the dynamic effect should be simple and smooth from the perspective of animated sports language [8]. Tan et al. proposed a design method based on imagery. Based on this design method, the animation will be more cultural and brand-oriented [9]. Liu integrated emotional design into animation design to optimize user experience [10]. From the perspective of ease of use, Xu proposes effective design strategies such as simplicity, metaphor paradigm, memory burden minimization, inheritance, manipulation behavior validity, perception principle, and moderate design [11]. Although scholars have proposed strategies for interactive animation design from many aspects, the “12 basic principles of animation” proposed by Johnston and Thomas [12] is still the basis of the actual design of interactive animation. Therefore, interactive animation has some of the same basic features as traditional animation, and narrative is one of them that cannot be ignored.

Narrative organizes events on a timeline according to a certain level and logical relationship by adding time and space elements, and arranges and controls events on the time axis to form an event collection [13] (see Fig. 1). With the development of narratology and the application of narrative to many fields of research, the medium of narrative has become increasingly rich. The narrative research of language, image, animation, film, space, music and other media has gradually formed a system. There are many kinds of narrative media, but the essence of narrative is storytelling. Events are the core of narrative. As a basic unit in narrative, events have different expressions in different media. In movies, story events are film shots, dances are dance moves, and in motion, elemental movements (see Fig. 2). Animations add time attributes and motion patterns to graphics, which increases the narrative nature of the interaction process [9] and improves the efficiency and logic of information communication. Bruner believes that “we mainly organize our experiences and memories of human events in the form of narratives” [14, 15]. There is also evidence that humans can understand the world more easily through narratives [16]. Therefore, due to the narrative nature, the animation is more in line with the user’s cognition than the static information or image, which improves the comprehensibility of the information. Narratives can also create an emotional connection with the audience. Information transfer in a relatively flexible manner, rather than mechanically and bluntly [17]. In summary, due to the narrative characteristics, the animations can improve the user experience in the interactive interface.

Fig. 1.
figure 1

Narrative

Full size image
Fig. 2.
figure 2

Animation

Full size image

Time, distance, path, deformation and shifting are several essential elements in animation design [9]. Time is the basic parameter of animation, and it is also an important parameter that constitutes the characteristics of animation narrative. The time dimension in the study of animation narrative mainly involves three concepts, namely duration, time sequence and time-frequency, that is, the characteristics of an information event can be explained by its position, duration and number of interventions in the narrative sequence [13]. In the current research on the time of animation, most of them study the duration of animation from the perspective of user attention and the appropriateness of animation, while less attention is paid to the study of time sequence. For example, as the time of animation increases, the user’s attention and tolerance will plummet [11]. Yang introduces the time and space dimensions into the two-dimensional coordinate system based on the degree of attraction of the user to attention, and analyzes the characteristics in each quadrant [18]. Although Dragicevic starts from the time rhythm and gets the advantage of slowing out the slowing rhythm [19], this conclusion is more suitable for the design of the moving element’s time-varying motion curve. However, in more cases, in order to make the interactive animation details richer and more realistic, interactive animation often contains multiple motion elements. The relationship and time sequence between these motion elements can more influence the narrative effect of interactive animation. Interactive animation narrative has similarities with traditional animated narratives and film narratives, but interactive animations have different characteristics from other narrative media. These features make the timing dimension design of interactive animation different from other media, and its timing characteristics are worth studying.

2 Characteristics of Interactive Animation Narrative

The research object selected the mobile phone UI system of the two brands of Xiaomi and VIVO in the Chinese mobile phone market, namely MIUI system and Funtouch system, and selected 40 system animation disassembly analysis. Detailed measurement and charting of the timing, duration, motion profile and motion trajectory of each element in the animation. Obtain the animation time and frequency through the screen recording software, measure the data with AE, and finally draw the data. The chart contains three forms, an animated timing diagram (showing the element motion timing on the time axis (see Fig. 3), a motion graph (representing the motion displacement, rotation, and scaling values over time in a plane rectangular coordinate system (see Fig. 4) and motion trajectory maps (visually depicting motion trajectories in the interface (see Fig. 5). Analyze chart data from the perspective of narrative, focus on the narrative features of interactive interface animation, and the law of timing design in the case of multiple motion elements.

Fig. 3.
figure 3

Timing diagram

Full size image
Fig. 4.
figure 4

Motion graph

Full size image
Fig. 5.
figure 5

Motion trajectory maps

Full size image

2.1 Narrative Through “Micro Events”

The narrative time of traditional animations and movies is as short as a few minutes and as long as a few hours. The interactive animation time should generally not exceed 0.5–1 s [20]. The increase in duration will distract the user. Due to the limited duration of interactive animation, it is difficult to have a complete narrative structure like traditional animation and movies, and to detail the causes, passages, climaxes, and results of events. In more cases, the interactive animation succinctly narrates the information in the interactive interface through “micro events”. The “micro event” is the motion of the elements in the interactive animation. The interactive animation narrative conveys the interface information to the user through the “micro event” of the element motion. In the context of limited time, the design of the sequence can bring more layers to the interactive animation design, expand the space for transmitting information, and make it more rhythmic.

2.2 Strong Functionality

Unlike the strong entertainment nature of traditional animations and movies, interactive animation is part of the interface. It is a basic task to satisfy the functional requirements of the user during the interface interaction process. Entertainment is added value. Therefore, the narrative of interactive animation should be based on the clear description of the interactive event as the basic standard. Interactive animation can meet five functional requirements in the interactive interface, namely smooth transition, efficient feedback, enhanced manipulation, help guidance and sublimation experience [18]. Under normal circumstances, interactive animation needs to meet multiple functional requirements in the interface. The deformation design and time dimension design of the elements are affected by these design goals. The design of the animation timing should consider the specific functional requirements and interaction scenarios. Taking the caller animation as an example, the most important function requirement of the caller animation is to guide the user to connect or hang up the phone. The caller animation of the Funtouch system adopts the form of the second change of dot opacity, which shows strong guiding (see Figs. 6 and 7). The MIUI system’s caller animation uses three round buttons to jump in order to show the guiding (see Figs. 8 and 9).

Fig. 6.
figure 6

Timing diagram – Funtouch caller’s animation

Full size image
Fig. 7.
figure 7

Timing diagram

Full size image
Fig. 8.
figure 8

Timing diagram – MIUI caller’s animation

Full size image
Fig. 9.
figure 9

Screenshot – MIUI caller’s animation

Full size image

2.3 Interactive Animation Narrative Through Abstract Graphic Metaphor

The elements that move in an animation can be graphics, text, and images, and they can be thought of as characters in the narrative. The position, shape, color, area, opacity, etc. of the element may change with the movement. But just as the character’s appearance and character setting at the beginning of the design will affect the development of the story, the movement element also has its relatively fixed nature to form a materialized metaphor, so that the animation conforms to the physical law and is more real and natural. For example, a “small” element should start moving more easily than a “massive” element, and a “smooth surface” element should be easier to start moving and grow faster than a “surface rough” element. The nature of this role metaphor is often determined by the importance and function of the information carried by the element. Not only will it affect the timing sequence of the motion of the elements in the animation, but it will also affect the magnitude, duration, and so on. Take the screen unlock animation in the MIUI system as an example. Through the time sequence difference of the movement of the four regional elements, the four regions of the simulated interface have different degrees of force, which reflects the effect of the paper pressing center drop (see Figs. 10 and 11).

Fig. 10.
figure 10

Timing diagram - screen unlocking animation

Full size image
Fig. 11.
figure 11

Motion trajectory maps - screen unlocking animation

Full size image

In summary, the design of the time sequence dimension can help the interactive animation better through the “micro event” narrative, and help improve the narrative effect from the functional and metaphorical narrative. In this paper, from the interactive animation timing research of Xiaomi and VIVO brands, three basic time sequence structures are summarized to expect designers to use the structure and help interactive animation design and improvement.

3 Timing Sequence Structure of Animated Narrative

Timing sequence is the order of events in a narrative and the relationship between the sequence of events in the narrative [13]. The narration of literature and film in order to be more creative will not be carried out in the natural chronological order of the event, so there will be timing arrangements such as flashback and interlude. In order to enable users to understand more clearly the relationship between elements and the hierarchical relationship and interaction logic between interfaces, the animated narrative generally adopts sequential scheduling. Although it is slightly monotonous in timing, it has its own characteristics in the timing combination structure. Based on the syntagmatique theory proposed by Metz in the film narratology [21], this paper selects and enriches the part that fits the animation, and proposes three basic time sequence combination structures of animation.

3.1 Linear Structure

A linear structure is a structure in which another event begins to be described after the event is narrated (see Fig. 12). The events can be movements of different variations of the same element, or movements of different elements (see Figs. 13 and 14: Screen capture animation). The sequential arrangement of events on the time axis forms a linear narrative time series structure. Most of the time series in the linear structure simulates the sequence of real-world events, which will form a visual guide, allowing the user to understand the antecedent consequences of the animation, that is, to better transform the old and new information, and form a real and natural transition experience. At the same time, it can explain the relationship between interface elements and let users understand the interactive logic relationship. Therefore, the interactive animation with linear time sequence structure is more guiding and logical. Because the linear structure has only one element in motion for a period of time, there is only one character in the animated narrative. Although it can quickly focus on the user’s attention and convey the information to the user in a simple and intuitive manner, the linear structure can carry a small amount of information per unit time, and the duration is long, which is difficult to avoid. Therefore, it is less used alone in mobile interface animation design.

Fig. 12.
figure 12

Linear structure

Full size image
Fig. 13.
figure 13

Timing diagram - screen capture animation

Full size image
Fig. 14.
figure 14

Motion trajectory maps - screen capture animation

Full size image

3.2 Parallel Structure

Multiple events are simultaneously described (see Fig. 15). In one case, different variations of a single element move simultaneously. In order to make the animation more delicate, the movement of the element is accompanied by more than one variation, and the combination of displacement, scaling, rotation, opacity, discoloration, and the like is selected according to needs. For example, the animation effect of the image thumbnail enlargement is performed simultaneously with the displacement and the zooming, and the zooming of the pop-up window of the message is accompanied by the change of the opacity. Although combined with a variety of variations, it is often used for widget animations or other simpler feedback. Another situation is the simultaneous movement of multiple elements. Due to the large amount of information carried by the interface, single element motion cannot meet the requirements of interaction and function. A combination of multiple elements is required to form a complete animation to deliver more information or to complete more functional requirements. For example, the MIUI system’s dial switching animation (see Figs. 16 and 17) is essentially equivalent to the switching of secondary pages. The elements in the tab bar, background, dial, hands and other interfaces are almost all designed into animations to transform old and new information. The parallel timing structure makes the user aware of the synchronicity of the element motion and the parallel hierarchical relationship between the elements in the time dimension. The overall animation is stronger and not dragged. For this reason, the parallel structure cannot highlight the primary-secondary relationship of information from the time series, and needs other factors such as the magnitude of change and duration.

Fig. 15.
figure 15

Parallel structure

Full size image
Fig. 16.
figure 16

Timing diagram - dial switching animation

Full size image
Fig. 17.
figure 17

Motion trajectory maps - dial switching animation

Full size image

3.3 Link Structure

Another event begins to be described when an event is being narrated (see Fig. 18). Compared with linear structure and parallel structure, the link structure has visual guidance, narrative logic, large amount of information and rich details. At the same time, the link structure improves the problem that the linear structure narrative is not compact and the parallel structure visual focus is dispersed to some extent, so the link structure is used more frequently. The screen unlocking animation of the MIUI system (see Figs. 19 and 20) uses a sequence structure in which each row of numbers is quickly popped up in order to achieve the interactive function requirements and is also very rhythmic. However, the problem with the link structure is that the rhythm of the animated narrative is not easy to grasp, and the timing of the multi-element motion event is not appropriate. It’s easier to make the animation messy and not let the user understand the content of the animated narrative.

Fig. 18.
figure 18

Link structure

Full size image
Fig. 19.
figure 19

Timing diagram - digital unlocking animation

Full size image
Fig. 20.
figure 20

Motion trajectory maps - digital unlocking animation

Full size image

In the interactive animation narrative, the three basic time series structures are often combined to take advantage of their respective advantages. Regardless of the structure or combination of structures, the purpose is to pass the interface information and interaction logic to the user in a more realistic and natural way through the narrative function. In addition, this paper organizes the timing structure of the MIUI system and the Funtouch system (see Figs. 21 and 22). Through the animation analysis in the MIUI system and the Funtouch system, the Funtouch system animation uses linear time sequence structure more than the MIUI system (see Fig. 21), while the MIUI system uses more parallel and linked time sequence structure (see Fig. 22). Although the details of the 1MIUI system animation are more abundant, the timing structure of the parallel and link makes the animation narrative more compact and rhythmic. Instead of letting the user feel the drag and drop, it highlights the system concept of “fast lightning” and makes the user feel exquisite and fun. The more linear structure in the Funtouch system animation makes the user feel more concise and smooth. The timing sequence and timing structure of the visible animation can help shape the brand features to some extent.

Fig. 21.
figure 21

MIUI animation

Full size image
Fig. 22.
figure 22

Funtouch animation

Full size image

4 Conclusion

Optimizing interactive animation has become an important part of improving the interface experience. Grasping narrative features can better guide the design of interactive animation. Exploring interactive animation design from the perspective of narrative is essentially a visual information design based on time dimension. The time series of design element motion is an important link. The three basic narrative time sequence structures such as linear structure, parallel structure and link structure can provide more reference for interactive animation design. The just-in-time structure not only better communicates the logic between information and information, but also gives users a richer emotional experience and cultural experience.