When browsing websites hosted on Behance and Awwwards, you need to be patient to find a site without several advanced animations/interactions.
Interaction design is already one of the main web design trends. These visual elements in motion create the illusion of life and many designers believe that animations bring a lot of value to their sites by making them more attractive .... and easy to use? How do they really affect usability? Can a site safely perform its engagement goals without animation?
I/ Too many animations, for the sake of aesthetics, negatively affect usability
The study included structured user interviews on the topic "Why don't people use animation?". 30% thought animations were useless. According to some participants, animations are useless if it: “without a clear purpose”, “fast”, “intrusive”, “makes it difficult to see the main information”. One of the important comments: "it's hard when it is used only for aesthetics." A.Chalbi Neffati, N. Roussel, F. Chevalier: "Understanding and designing animation in user interface", 2018
The aim of the University of Manchester study was to analyze 2 sites with the same content but different interface styles: a lot of animations, interactive and their absence. Participants rated the site in terms of attractiveness and convenience. According to the results, it was revealed that a lot of animated objects caused inconvenience in use: about 10 errors occurred when interacting with the animated interface (difficulty in navigation, factors distracting from the text, low readability of the text). Animated site was remembered for its multimedia and problematic, while another site with a minimum of animation - a serious design and convenience. Antonella De Angeli, Alistair Sutcliffe & Jan Hartmann: "Interaction, convenience and aesthetics: what influences user preferences?", 2008
According to one study: 78% of interview participants use animation in their interfaces. For almost 42% of the participants, the most memorable animation was the one that increased interest in the site and did not worsen the convenience: “structured and energetic transitions look good on the site, but not quick ones.” A.Chalbi Neffati, N. Roussel, F. Chevalier: "Understanding and designing animation in user interface", 2018
Animations should not distract the user from the content. Many different types of animation on one site only interfere with the user. Moving effects on the site are good, but as long as they do not become its main asset.
II/ Animations do not make the site special to use
The aim of one of the Tallinn University studies was to study the impact of functional animations on user experience (on the example of an online store). For the study, an A / B test was conducted: the first site was without animations, the second - with them. Results: Overall, both sites scored equally high on both attractiveness and usability. Animated site was rated as attractive by 71%, while without animation - by 78%. An animated site turned out to be more pleasant to use - 91%, without animations - 86%. The researchers made an important point: it is wise to use only one animation at a time, because multiple animating objects are confusing and confusing for the user. Piret Alvre: "The Impact of Animated UI on User Experience", 2017
In a study by an American University (Arizona), the question was asked: "Does animation speed affect the enjoyment of use?". 3 prototypes of the site were developed, on which the participants had to complete the order, with different animation speeds: 0 ms, 300 ms and 650 ms. The results revealed that 68% of the participants did not find a significant difference between the 3 speeds and did not determine which prototype was preferable for them. Animation did not affect the pleasure of interacting with the site. Only 27% said that animated prototypes at medium speed were "smoother". Kusum Ijari: "Understanding the effect of animation and its consequences. Speed on consumer delight”, 2019
A study from the University of Finland tested a hypothesis: Do animated transitions affect user experience in real-time and perspective? The participants evaluated 2 sites: a site with many animated transitions versus a site without these effects. Study results: For the user, there were no differences between the two. Using animated transitions did not help to improve the perceived UX. The difference between the sites was not statistically significant: an animated site - 69 b, without animations - 57 b. Sampo Noponen: “Are memories consistent with experience? Studying the Time Aspects of UX Site Hedonism, 2019
The site can perform its functions without the use of animated elements. Before implementing them into your site, analyze for what purpose you need it. Animation for the sake of animation will only negatively impact users.
III/ Resume
Moving web elements can add visual interest to a site, but only if they are used in small numbers and inappropriate places. It is important to be able to maintain this balance. As soon as animations start appearing everywhere, they already annoy and disorientate the user. An animated site and one without adding animation work equally well. Adding this effect does not affect the user much. He cares about convenience and content, not your skills in applying animations. Animated web elements are good for:
When there are few of them, and they do not interfere with the user
When they have a clear purpose
Web animations add that extra visually appealing layer to any digital design. With the way the digital world is constantly shifting and progressing, animations offer an engaging edge. There are many opportunities to make animations unique to a brand image, as the possibilities are endless.
Comments