Conversio Design - How to use animation to increase conversion

Imagine you’re in the savanna. Imagine you’re in the savanna 30 000 years ago. Now you see a lion run towards you.
Our ancestors evolved to survive by noticing movements. Any movement detection has direct access to our brain.

Companies learned to hack our evolutionary behaviors to their advantage. Like social media using our natural dopamine craving. But that’s another story.

You don't have to be an expert in animations

Believe me or not but the most effective animations are the subtle ones. I know Apple product pages are cool and inspiring. They are done by great designers and engineers. But, one subtle "fade in" or "move" of individual elements on your page can be as effective. If not more.

What can animations do?

As mentioned in my other article about the purpose of design: grab attention and convey a message. Some of the techniques to emphasize something are size, color, position, or contrast. Animations override all of them. It's the equivalent of !Important CSS property. Use it with caution.

Grab attention

Your visitors will scan your hero image or graphic first. Take advantage of that. Create subtle animations that explain better your product or offer. How will the interface be used? How simple it is? Keep it simple.
I use Principle or Figma smart animate feature.
If it's too complicated for you it might be very easy for a designer. Hire one for a small gig.

Example of showing quality of the product by Amie.so — Example of showing the quality of the product by Amie.so

Get your website evaluated by me

Get your landing analysed for conversion for 5$.
Use 90%off promo code: XK1NVSWR

Convey a message

Channel your visitor's attention to the area of the website you want. If you have a unique selling proposition that you want to convey and it comes after your main headline: use animation to guide people's gaze in that area. Make sure it's valuable.

Example from an E-commerce landing page concept. Notice the "Will be made" highlight. Design by Ugem

Another technique is to guide your visitor's attention while scrolling your landing page. People find their own way of scanning the entire website: usually from top to bottom, left to right. You can still guide them and highlight an important part of your message.

Example of guiding the flow for Cerbo. Design by Outcrowd

What animations can't do

No amount of fancy animations or parallax effects will substitute a clear message. Or product people will want to use. Make sure to take care of the basics first. Animation is a sparkle on top.

‍

Don't go crazy with animations

Please animate one element at a time.
People can easily get overwhelmed by many things moving at the same time. Sometimes get even nauseous.
If you want to take your website to another level hire a designer that knows how to sequence animations properly.

‍

Practically creating animation. A simple way

For graphics animations I use Figma. It's free and its Smart Animate feature is simple and straightforward. For me at least.
Here's a great tutorial by Jesse Showalter.

Next, I use Giphy Capture to record my screen running the Figma prototype and convert it to GIF or Video. There might be a better way to export animations with plugins but for me, this works.

I then add the GIF or Video in my visual development tool. Videos have higher quality and lower size.