Adding animations to your website is a lot more than making things go "woosh". If used tactically, they can do wonders for your business.
Web animations are actually an extremely powerful psychological tool. Used strategically, they can significantly increase leads and sales on your website and mobile app.
It all comes down to attention and emotions
Because the majority of items displayed on your app/website are static (i.e., meaning they do not move), these animations are eye catching by their very nature. Because of this, they can be used to direct attention to sections of the screen that we want out users to interact with.
Animations are also very effective way to bring out emotions in the viewer. If you can make your user feel something when the use your app or website, you are already 80% of the way into their pocket.
Now, because of the power of this tool, it is very easy to overuse it and dilute its usefulness. What you don't want to do is have your user's attention directed in so many places they do not know where they should be looking or what they should be doing.
to truly benefit from this tool, it is imperative that you use this tool sparingly.
Below are two examples various ways in which animations are used on the web :
Good use of Animations:
link: Animated Storytelling
Reasons why this is good:
- Animations here are used to tell a story.
- It is clear where your attention should be directed.
- Few distractions. Nice use of "woosh" without being tacky.
Image gallery (Emotion - Premium and Sophisticated):
Gif link - Property Listing Gallery
Simple Practical Animations for evoking emotion:
loading Animation (Emotion - Fun and Folly) :
Gif Link - Mobile App Loader
Poor use of Animations:
Website Link: Event Wesbsite
Reasons:
- Animations just for animations sake. Not much practicality applied to it's use.
- Too many distractions. What is this website about?
Your website is not a Hollywood movie. Less is more.