How tiny Animations improve the user experience
Quant UX is an open-source design tool that anyone can build upon. In this article, I demonstrate the how the effect of animations can be measured with the user testing and analytics features.
Animations are the cornerstone of modern user interface design. They serve mainly two purposes: bringing life into your design and delight users; and, more importantly, help your users understanding the inner mechanics of your design. Moving elements draw attention and make the conceptual connection between different screen elements visible. One cannot underestimate the impact that even a subtle animation has on the user’s perception. To better understand this, take a look at the Googles Material Design guide or Issara Willenskomer outstanding article about the different motion principles and how they affect the user.
I was curious to understand better to what extent animations can improve the user experience and to measure and quantify their impact. To study this, I ran two UX experiments around a mobile shopping application in which I asked the users to fulfil a straightforward task. I choose the shopping domain, as I expected that most of the users would be familiar with the tasks at hand.
The experiment got inspiration from the design of the current Amazon mobile app. The users were presented with the product page and asked to add the given item to their shopping basket. Once done, a page with related articles was displayed. This page also included a “checkout” button in the top navigation bar, linking to the checkout page: on click, the test was finished; if the user did not click on the checkout button, a popup with task instructions was shown.
To measure the impact of animations, I created two versions of the prototype in Quant-UX and ran an A/B test. In the static version, the checkout button is immediately visible whereas in the animated version the button fades in after 0.7 seconds. This animation has a duration of 0.5 seconds. An additional status indicator, to show the number of items in the basket, slides in after 1.2 seconds with a duration of 0.5 seconds as well.
With this experiment, I wanted to find out if the users of the static version would take longer to discover the checkout button and click on it. Consequently, I had to measure the time between the moment one arrives on the second page and the moment the checkout button is clicked.
To study this, I’ve asked 78 users to participate remotely in the experiment. Each user was randomly assigned to the static or animated prototype. The users of the static prototype took, on average, 8.6 seconds and 2.9 interactions to click on the checkout button, whereas the users of the animated prototype took, on average, 6.6 seconds and 1.9 interactions. Thus, an average improvement of 21% on the time to complete the task and a reduction of 30% on clicks was experienced.
Animations improved the task duration by 21%
The simple calculation of the mean seems already to indicate that the animation made it easier for the users to discover the checkout button. However, as the statistical mean is sensitive to outliers, a single user — one that did not find the checkout button — can distort the results, leading to wrong conclusions.
Therefore, a more in-depth look at the time and number of interactions was needed. To do this, I used a box-plot in Quant-UX. A box-plot summarizes how the observed measurements are distributed. It shows the minimal and maximal values as a line and the mean as a red bar. In addition, it shows a band around the mean. The size of the band corresponds to the variance within the data set. The larger the band is, the higher the variance. A high variance means in this context that the users behave very differently to each other and that there might be several groups of users where some have problems understanding the design.
The box-plot shows that there is a significant difference between the two designs with regards to the variance. Although the mean values are rather close, the variance is much smaller in the animated version than in the static one. Also, the difference in the max values is very high. These differences seem to indicate that more users had problems discovering the checkout button in the static version.
Given the simplicity of the task — only one click was needed — I considered that more than four interactions are a sign that the user had difficulties finding the checkout button. When plotting the duration against the number of interactions, the difference between the static and animated design becomes more clear: 10 users of the static design took more than 4 interactions and seemed to be lost in the design.
So what does this mean for the designs? The lower mean values indicate already that it is easier for the users of the animated version to discover the checkout button. But a more detailed look revealed something slightly different. The majority of the users did not have any problems fulfilling the tasks, but more users in the static version had issues discovering the checkout button: 10 out of 38 users took more than 4 clicks in the static version, whereas only 2 out of 40 had problems in the animated prototype. These results indicate that the animation helped to discover the button and reduce the rate of lost users.
To further confirm my hypothesis, I ran a second experiment. In this case, I changed slightly the design and placed the checkout button at the lower right corner of the screen. Very much like the Material Design floating action button.
Again, I created a static and an animated version of the third page. In contrast to the first prototype, I did not fade or move-in the button but transformed the progress-bar into the checkout button to highlight the relation between the elements and the logical order in the checkout process.
I ran an A / B test with Quant-UX, this time with 72 participants. The users of the static version took 8.8 seconds to discover the checkout button and needed 3.8 clicks, whereas the users of the animated version took 6.6 seconds and, once again, 1.9 clicks. The scatter plot confirms the observations from the first test: the majority of the users had no issues finding the checkout button, but the number of lost users was significantly lower; 12 of 40 users took 4 or more clicks, whereas 4 of 32 users experienced these issues in the animated prototype.
In conclusion, both experiments confirm that animations can steer the user’s attention towards certain UI elements. Well placed animation helps the users to discover the next actions faster and reduce the time and interactions needed to fulfil a task. In both cases, users of the animated version were 30% faster and used 30 % fewer interactions. A possible explanation for this reduction can be the fact that the animation prevented users from getting lost in the design and application process.
The most interesting insight was that only a fraction of the users benefited from the additional guidance. I assume that experienced users did not benefit much; however, new or inexperienced users benefit from the supplementary advice that was provided by the animation. In both studies, the number of lost users was reduced by more than 300%.
The number of lost users was reduced by more than 300%.
Both experiments proved that animations can increase the discoverability of tasks and help the users. I used Quant-UX to create both prototypes and conduct the analysis. All graphics were directly copied from Quant-UX. You can try out the prototypes here and here.
