Cinnamon logo
Cinnamon logo
Cinnamon logo
Close

Home

Projects

Services

About Us

Careers

Blog

Contact Us

Close

The Usability of the Animated FAB PART 2/2

Hrvoje A. M.

2021-12-13

9min

Design

Our first part discussed the floating action button (FAB), its pros, and its cons. Now we will discuss animation and its effect on the user experience (UX).

placeholderThe_Usability_of_Animation_Pt2.png

Share this blog:

twitter logo
facebook logo
linkedin logo
link logo

To view PART 1/2 of this article , click here.

Animation and UX, briefly

First, let’s go over some main points of animation and the user experience. If you have ever read about animation, you couldn’t have avoided the twelve principles of classic animation. To be brief, these twelve principles are squash & stretch, anticipation, staging, straight ahead & pose to pose, follow through & overlapping action, slow in & slow out, arcs, secondary action, timing, exaggeration, solid drawing, and appeal. You can read more about them here

In the 1990s the question emerged whether these principles could be applied to user interfaces and if they would have any effect on the user experience. That’s why Chang and Ungar tried to apply them to a UI by creating an operating system called Self. Their study found that the animation had a positive effect on the UX, making it easier for the users to use it. The animated system also reminds the users of real-world interactions and “drags” the user easier in the system itself. (9)

Since the user interface is not an animated movie, it must have its animation principles. There are two groups of these principles. The first group, made by Nielsen and Petersen, focuses more on the UX itself. According to them, there are three principles of animation in the user experience. The first one is “catching the eye” which encourages the use of gentle and harmonious movements. The second one describes how the movement must start in the peripheral vision, far from the user’s focus. The last principle says that unnecessary motion should be avoided. (10) 

The second group of principles is based on the twelve principles of classic animation but adapted for use in user experience design. There are also twelve principles: easing, offset & delay, parenting, transformation, value change, masking, overlay, cloning, obscuration, parallax, dimensionality, and dolly & zoom. You can read about them in more detail here. (11)

Since the FAB is part of Google Material Design’s system, it’s good to mention the main principles the animation in GMD is founded on. The principles of animation in GMD are mostly based on the twelve principles already described but are more focused on practical advice. Motion is here to show the hierarchical relation between the interface elements. Motion also gives feedback to the user after taking an action and gives a notion of what is going to happen after an action is taken. Special attention is given to the speed and duration of motion. It should not be too fast or too slow and should last somewhere between 100 and 400 milliseconds (ms) depending on the element. Google also takes one step further when it comes to motion principles. It states the choreography, i.e. the relation and layout of the elements that are animated. (4)

The FAB and animation

In general, the animation of the FAB should start from the inside out and the icon in the container can be animated separately. Although the FAB is an important part of the screen it is not tied to it and therefore it is animated independently. For example, if the user swipes between two screens, the FAB does not have to move with the screen but rather disappears from its outside to the inside. 

There are three most common types of FAB animation. The first type is the transition and transformation of the FAB. There are two possibilities here – one when the FAB shows more mini FABs displaying more possibilities (Figure 5), the second one when the FAB is transformed into the menu containing more actions (Figure 6). The number of possibilities should be between three and six and must be related to the main action of the FAB. After the FAB is pressed again, it should go back to its initial state. (3, 4)

Figure 5 FAB showing more available actions accessible via mini FABs
Figure 5 FAB showing more available actions accessible via mini FABs

Figure 6 FAB transforming into a menu
Figure 6 FAB transforming into a menu

The second type of FAB animation is morphing. The FAB morphs either into a new surface (Figure 7) or into an entirely new screen (Figure 8). This way the FAB can make orienting and managing the space of the app easier for the user. It can also connect the actions and let the user know what has happened and how that action can be taken again. The FAB’s morphing should be reversible, i.e. the user should be able to bring back the new surface that has emerged from its initial state.

Figure 7 FAB morphing into a new surface
Figure 7 FAB morphing into a new surface

Figure 8 FAB morphing into an entirely new screen

The third type is hiding the FAB while the user is browsing and scrolling the content of the app. This animation is usually used when the FAB blocks the use of additional options.

Static FAB and UI vs. animated FAB and UI

To test if the animated FAB is seen as a better solution than the static FAB, research in two phases has been conducted. 

In the first phase, we analyzed some of the existing animated FABs used in the apps like Evernote, Remind, Behance, Gmail, Google Authenticator. This short analysis has shown that most FABs use similar UX animation principles, easing, obscuration, and transformation. Next, it has shown that the use of specific principles depends on the FAB function, that is if it shows new action or if it performs an action itself. Lastly, the analysis has shown that the GMD guidelines on animation, principles and real-life practice do not always meet. In its guidelines, GMD uses examples of few fictive apps, where even the FABs look more interesting and the transitions and their animations more attractive and useful. 

After the analysis, in the second phase, two video prototypes were made. The prototypes were unfortunately not interactive due to the lack of tools for this level of interaction fidelity. Despite that, the user's attention is guided through a circle-shaped pointer with some transparency. The first prototype (Figure 9) was completely static. It used no animation and no transition effect. The second prototype (Figure 10) on the other hand was completely animated and it followed some of the principles of classic animation (ease in and out, overlapping) and UX animation (offset & delay, easing, transformation, cloning, obscuration, and parenting). These prototypes were created using a few very well-known tools, Adobe XD, Adobe Illustrator, and Adobe After Effects.

Link to examples:

Figure 9 Static FAB and UI prototype

Figure 10 Animated FAB and UI prototype

To measure and evaluate the user experience and the perception of usability we used the AttrakDiff survey. It’s a list of 10 adjectives with opposite meanings, like simple-complicated, ugly-beautiful, pleasant-unpleasant, etc. The results are calculated automatically and show the comparison between the two evaluated systems. 

There were 15 research participants, and they were all between the age of 18 and 35 since the rate of people who get along with new technologies is the highest in this age group. (12) First, they were shown the static prototype and then they evaluated it through the already mentioned survey. Then the process is repeated with the animated prototype. 

The first generated chart is called the portfolio of results and shows how the product is generally perceived (Figure 11). It is divided into nine areas and shows two big and transparent and two small rectangles. The big rectangles show the reliability of results and the smaller they are, the more accurate results are, which also means that the participants evaluated the prototypes similarly. Small rectangles indicate the average value, i.e. the average evaluation. With it being said, it is visible that the static prototype is between neutrality and the task-oriented area. The animated prototype is mostly on the desired area, partially on the self-oriented area, and tends to go down towards the task-oriented area.

Figure 11. The portfolio of results 
Figure 11. The portfolio of results 

The second chart is the average values diagram showing the average results in three areas – pragmatic qualities, hedonic qualities, and attractiveness (Figure 12). When it comes to pragmatic quality, both prototypes achieved the same result and in both hedonic quality and attractiveness, the animated prototype scored better results.

Figure 12 Diagram of average values
Figure 12 Diagram of average values

The third chart is the word pairs chart (Figure 13). The extremes in this chart are of particular interest since they show either the critical or very well resolved areas. We can see from the chart that the animated prototype scores better results in all word pairs in the hedonic quality and attractiveness area. The only area where the static prototype is better is the pragmatic area and it’s only better in two values.

Figure 13 Description of word pairs
Figure 13 Description of word pairs

To conclude…

So what is it? Is the animated FAB better than the static one? The first diagram shows that the animated FAB is more desirable for users, while the static FAB is more task-oriented. That means the research participants believe that the static FAB is dull, not interesting, and focused only on taking an action. The animated FAB on the other hand is more attractive and more interesting, but its “self-orientedness” is not a good indicator.

That confirms the second and the third chart. On the second chart, both prototypes scored an equal score in pragmatic qualities. In the third one the animated prototype, surprisingly, was rated as more confusing and unpredictable. In pragmatic qualities, i.e. the qualities that describe the usability itself, both animated and static FAB have equal results. That means that when it comes to the strict definition of usability, no solution is better. The animated FAB, however, scores more on every other quality, which means the research participants consider it to be more intuitive, more related to the real world, and easier to use. In general, we can say that the animation does have a positive influence on the user experience. 

Like every research, this one also has its downside. The most obvious one was that the prototypes were not interactive, but recorded videos. Another limitation is the use of classic and UX animation principles, which may not be the most suitable for this research. Regardless of that, the data obtained by this research is very indicative and shows the positive relationship between animation, usability, and user experience. That’s why we can conclude that speaking in a broader sense, the animated FAB has indeed overall better usability and a positive impact on user experience. 

This small research shows how important animation is for the user experience. As technology moves forward and as it tries to be more close to humans, the use of animation in user interfaces will become inevitable.

References:

  • 9.B.-W. Chang and D. Ungar, “Animation: from cartoons to the user interface,” Proc. 6th Annu. ACM Symp. User interface Softw. Technol. - UIST ’93, pp. 45–55, 1993.

  • 10.J. Nielsen and H. Petersen, “The eye of the user: the influence of movement on users’ visual attention,” Digit. Creat., vol. 13, no. 2, pp. 109–121, 2002.

  • 11.I. Willenskomer, “Creating usability with motion: The UX in motion manifesto,” - https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc 

  • 12.N. Charness and W. R. Boot, “Aging and Information Technology Use: Potential and Barriers.,” Curr. Dir. Psychol. Sci., vol. 18, no. 5, pp. 253–258, 2009.

Share this blog:

twitter logo
facebook logo
linkedin logo
link logo

Subscribe to our newsletter

We send bi-weekly blogs on design, technology and business topics.

Similar blogs

placeholderFlutter Template.png

Development

Samantha Holstead

2022-10-03

3min

Cinnamon Flutter Template Overview
placeholderTinder_blog.png

Design

Jan Marin

2022-09-15

10min

How Tinder Swindled User Experience
placeholderiOS_Project_Templatelast2.png

Development

Hana Spolador

2022-09-01

8min

Cinnamon iOS Project Template
Job application illustration

You could use our expertise?

Let's work together.