We've all been told that animation increases engagement and will keep users on web pages for longer durations of time. However, we've grown to accept this as fact without fully understanding animation's impact on consumers.
Thankfully, researchers from The Hong Kong University of Science and Technology performed a study comparing how online shoppers allocate attention to animated versus static page elements on websites. We review the research and why Lottie is the first animation format that truly allows designers to implement motion to pages without hindering a quality user experience.
What is a Lottie Animation?
Lottie is a JSON-based file format that supports lean, customizable vector animations. The size and usability make Lottie far easier to work with than GIF and SVG, helping developers incorporate motion graphics into their designs without increasing page load speeds.
The Fight for Attention Online
Modern internet users have infinite options at their fingertips. Between social media, YouTube, and their curated news feed, marketers constantly struggle to keep users engaged with their content.
Psychologists believe that the amount of attention resources an individual allocates changes under different conditions. For example, you’ll enjoy your TikTok feed more than your grandmother's because the content is placed algorithmically based on whom you follow and how you've allocated attention in the past.
Research on Webpage Animation
Before our featured study, most research focused on animated advertisements and failed to compare the results to static page elements. Success and failures were calculated on time spent on a page rather than the animation, creating a gap in our understanding of what is truly driving attention allocation. Past studies are insightful but don't address the totality of web design and its effect on users.
The research paper published in the Journal of the Association for Information Systems, Effects of Animation on Attentional Resources of Online Consumers, focuses on animated and static page elements while consumers shop online. The approach gives us a better understanding of the effects of animation when incentivizing various tasks (not limited to clicking on an ad).
Below is a review of the study. We cover the most important information from a design perspective; however, we encourage our readers to read its entirety for a comprehensive understand the findings.
Overview of the study
The paper's authors are Muller Y.M Cheung and James Y.L. Thong from The Hong Kong University of Science and Technology and Weiyin Hong from The University of Nevada. Their goal was to "fill the knowledge gaps" from past studies by addressing the 3 questions below:
- How does animation impact the time individuals spend viewing web pages?
- How does animation impact the attention individuals pay to both animated and non-animated items?
- How does animation's effect on the attention individuals pay to both animated and non-animated items vary across online tasks?
How data was collected
The team recruited 60 undergraduate students from a public university in Hong Kong to participate in the study. Each participant was asked at random to perform browsing or searching tasks. Data was collected with an ASL 504 eye tracker to measure attention given to pages and page elements.
Participants were tracked while performing six shopping trips in a randomized order of product categories. The searching group would be given a specific product to find on each trip, while the browsing group was told to choose a product of their preference.
Animation was used on 3 of the shopping trips. The dependent variables are as follows:
- Number of fixations on a page element
- Duration of fixations on a page element
- Average time spent on a shopping trip
The study's findings
Below are the 4 hypotheses that were supported:
- Animation's presence on a webpage increases the length of time individuals view the content.
- Animation's presence on a webpage increases the amount of attentional resources that individuals allocate to all items on the webpage.
- Animation's presence on a webpage decreases the proportion of attentional resources individuals allocate to non-animated items.
- Task type moderates the effects of animation on the proportion of attentional resources to an animated item. For example, more attention was allocated to animated items when browsing rather than searching.
Conclusion from the authors
The study successfully improved our understanding of animation on web pages, so much so that the results contributed to previously published research. In the conclusion, the authors write, "animation increased the duration that consumers spent on viewing the webpage and also the attentional resources that they allocated to its content."
The authors also give some practical implications based on their research reviewing Alexa's top 100 shopping websites. 81.3% of the websites used animation featuring 3 characteristics:
- Non-intrusive designs.
- Subtle animation is applied to the main content area rather than the top of the page or right-hand column to avoid banner blindness (condition internet users have developed after seeing thousands of banner ads).
- Animated graphics were used rather than text.
Not only do the researchers acknowledge animation's effectiveness, but they also recognize that implementation is essential. According to the researcher's conclusions, placement and non-intrusive animation are crucial to achieving a higher allocation of attention.
Our Thoughts on the Study
We already firmly believed that animation adds value to web pages, especially when convincing users to fill out forms, buy products, click links, and perform other tasks. However, there are 2 revelations that dramatically shape our understanding of animated webpages and how to apply the findings in design.
First, the presence of animation increases the attention to all page elements, not just the animations themselves. While the data suggests that animated items win the battle for attention, users are more engaged with all areas of the page when an animation is present. Going into the study, the researchers hypothesized that attention would be taken away from non-animated items and given to page elements with motion. The hypothesis was proven to be false according to the eye tracking data.
This realization can help designers be more open-minded regarding placement. For example, animation doesn't necessarily be in direct proximity to call-to-action buttons to increase engagement. Including animation in page elements before the CTA can have a similar effect giving the designer more options.
Second, attention resources were higher when browsing animated pages than searching for a specific product on the same web page. Based on this revelation, we recommend including animated elements in areas with the goal of selling a product. Sections communicating the value can influence a purchasing decision by attracting a user's attention.
Challenges Implementing Animation
In the past, including animation has been a calculated trade-off. Designers hope the increased attention from animations outweighs the decrease in user experience caused by lengthy page load times.
Another challenge is finding the balance between an engaging animation and one that's too intrusive. One of the authors from a past study reviewed by researchers from Hong Kong notes, "finding an optimal balance that won't overpower users is the key to success." The research on "banner blindness" found that intrusive ads lead to avoidance behavior.
The Clear Case for Lottie
Lottie solves the first challenge by utilizing superior technology. JSON-based animations allow more freedom when implementing designs because the files are exponentially smaller than other commonly used file formats. In addition, Lottie is made from vectors offering higher quality regardless of the size of the design.
Finding the optimal balance between engagement and intrusion can't be directly solved with Lottie's superior file format; however, it does help when adjusting to find the perfect balance of motion. Changes to Lottie designs can be carried out and added back to the page in seconds instead of reworking the animation in the software.
Creattie is the best Lottie library online because the designers help web developers find the balance that leads to the highest conversion rate possible. Providing a selection of subtle, non-intrusive designs is the only way to capitalize on the effects animation has on resource allocation. Try Creattie animations for free, and don't forget to check out the thousands of designs available on the platform.
