When anyone watches a Disney or Dreamworks animated movie we always hear them say : “Wow! It’s so beautiful and well done!
What is really impressive about Disney movies is the quality of the animations. There are several techniques to ensure that these appear as realistic as possible. They can also be applicable to the web, which is a much younger medium, and can greatly improve the user experience. Animation principles for the web and movies are very similar in some aspects and these will be outlined in the following paragraphs with a more scientific point of view.
The Scientific Parentheses
Why are we drawn to everything that is colorful and animated?
Take the color red for example. There are several studies that have explained how the brain reacts when it is exposed to different colors. If we go back in time, a bright color like red could indicate food like fruit in a tree. In animation, a sudden movement in a bush can indicate the presence of a predator ready to pounce. This primitive learning has been transmitted over the course of evolution until today.
Our brain has retained many of these instincts. This is why, in the marketing industry, the color red is the most used because it always attracts a lot of attention. We come across a variety of similar examples every day: school buses are orange with a red sign to warn us of potential danger when driving nearby; ambulances are fluorescent yellow in order to be easily spotted from hundreds of meters away.
The eye is naturally challenged since our brain has been conditioned for a long time to quickly analyze the environment around us. Finally, education also plays an important role in all the associations and interpretations that we have and it is an important factor that varies in every society.
Animation on a Website and the Impact on the User Experience
Establishing an animation project requires reflection. Think about this when designing mockups with the graphics team. The aim is an optimal balance and to avoid putting too many animations since this will impact the user experience. The performance of your site can also be influenced by a faulty implementation and cause the opposite of the desired effect.
When designing a site, we are often asked to add a wow effect by putting emphasis and movement on certain elements of the pages. In the best of all worlds, you have to plan extra time for this portion before even starting the models, during the creative phase of the user’s experience.
The Purpose of Animation
The purpose of animation is to make all movements of an object or a character appear as if it is"alive". This is not a random principle since in nature, any acceleration normally ends up decelerating like a bird taking flight or a wave of water approaching the shore. Our eyes are used to this velocity. It is for this reason that movements which are constant, and do not change in speed over time, are quite unusual to the eye.
The same applies to animations on a website. It’s more interesting for a user to navigate on a site that emphasizes its interactions with the various components.For example, the mouse hover effect on a button changes its color, or shape, etc. Thus, when a user clicks on it, they have a visual confirmation of the action.
This button should have a color that will attract the user's eye and encourage them to click on it. The result of the click will open a popup window to subscribe to the newsletter. The animated popup must be fluid and entertaining so that the person wants to continue to browse your site.
An Example of a Button Without Visual Interaction
The mouse hover of the lower button has no animation effect. Only the mouse cursor changes to indicate that there is a link or an action.
An Example of a Button with Visual Interaction Effects
The mouse hover of the lower button has several animation effects. The text color and background color are animated and slightly shift up, when hovered, with a shadow to accentuate the action of the user.
An Example of Unnatural Animation of a Newsletter Subscription Popup
Imagine that the popup we were talking about earlier opened from the top of your web browser window, revealing itself downwards for over a second, at a constant speed and without fluidity. The movement seems jerky and unnatural to the eye. We notice it immediately. The user's experience will probably be affected by this unnatural animation and their interest in visiting your site will diminish.
An Example of Natural and Fluid Animation of a Newsletter Subscription Popup
If we add a little acceleration at the start of the popup’s descent as well as a low opacity, to reveal it discreetly, everything is much more natural to the eye. Eventually, having a deceleration when the animation is about to end will have a much more engaging effect.
This animation is much more pleasing and satisfying to the eye since it feels closer to something “real’’ that we are used to, compared to constant motion, which is more mechanical and unnatural.
In Conclusion
Whether on the web, in advertising, marketing or in movies, the representation of movement is extremely important to keep people's attention. On the web, you have to plan in advance what you want in terms of animation and it is very important to discuss it with the graphic team who is creating the models of your site. This project will also impact, in some way, the programming of the different elements that make up the pages of the site.
Adding a well-thought-out layer of animation to your site comes at an added cost to development, but, in the end, users will enjoy browsing it, will be much more likely to stay on your site longer and even come back.
