Home » conversions

Tag: conversions

Using animations the wrong way

Website builders and new technology have made it super easy to add animations to your web pages. But just because you can do something doesn’t mean that you should.

When I first learned how to animate page elements, I wanted to animate everything. Make things flow, pop, fade in, fade out, create a dance on my webpage. In my mind, slick animations would make for a luxuriant experience and showcase how edgy my design is and how smart I am.

That theory quickly falls apart when you need to load a page often, and you have to wait for animations to kick in or finish, and everything seems to fly in all directions.

For movement to look good and guide the user, it needs to be choreographed, have a flow, and purpose: it needs to guide the user into experiencing your site. Otherwise, it quickly turns into jarring distractions!

There are two main uses of animation that make sense:

  • evoke a feeling or emotion
  • help increase your conversion rate that will turn visitors into customers.

The first use is very subjective, and I believe it is more art than science, and it takes study and practice to get it right. Just because you now have a video recorder on your phone does not make you a master motion picture creator. In the same way, just because you can animate things, it does not mean it’s easy to create a coherent storytelling experience. 

The second use, which is to increase conversions, I have much more experience with, and it is easier to measure and get right.

Here are the rules of animation

  1. Do not animate anything unless you know it will bring you closer to your goals.
  2. The animation must have a purpose. E.g., a blinking notification icon that needs the user’s attention; a sliding in and out navigation panel to will subtly inform the user where to go if they need to find the navigation element; a page transition animation that will hide a slow loading time keeping the user engaged with the page. 
  3. The animation must make sense. E.g., text flying in will undoubtedly grab the attention, but it is impossible to read until the animation ends.
  4. All the animations on the page must work together. They need to feel choreographed. So not only it’s more pleasing to the eye, but if done well, it shows to the user where everything is and how to navigate the site best.
  5. If your user notices the animation instead of the story you are trying to convey, you are doing it wrong.

Some good examples:

  • Apple products are great examples of animation done well. Both the website and the user interfaces on their devices. (At the moment of writing, there is no animation of the home page. As I said above, just because they can do it doesn’t mean they should do it!)
  • Displaying live data in animated charts can use good animation that makes it easier for the brain to digest what is changing. 
  • Navigation hints: new elements (like dialog boxes) slide in from the right, and when you dismiss them, they slide out to the left. New pages fade in. Notifications pop up. Using a consistent system like this allows our brains to quickly figure out what we are looking at just by how it is animated. 

Keep performance in mind.

Animation requires more resources in both bandwidth and processing power. In addition, page speed affects conversion rates. Therefore, if you choose to animate, make sure it will not affect your loading times and works fast enough on older devices.

Resources

Audit your website animations and keep only those that get you closer to your goals.

Conversions versus Beauty

As a designer, or even as a client, you are thinking of starting a new project, and you need to begin your UI design. 

And you’re thinking: it has to be modern, it has to be beautiful, it has to be exciting, it has to evoke these feelings and then from the infinite number of possibilities you need to choose something that will be your design. 

This can be daunting, and it may not actually serve you. And I confess I had made this mistake in the past a lot! I would learn new fancy ways to do something, and then I would use it everywhere because, drum rolls, I knew how! That is an excellent way to learn and practice your craft, but it is a terrible way to think about design. 

When I began working in projects that had a real business behind them, it became evident that once the design was done, other questions would come to the fore:

– how many visitors do we have

– out of those, how many became leads (subscribers)?

– out of those, how many purchased a product? 

– and out of those, how many become huge fans or joined the mastermind groups? 

These questions have something in common. They are not about esthetics, they are about numbers, and specifically about conversion rates: how much of X turned into Y? 

Now I start all the projects with these questions before even considering the design!

Who is supposed to use this website, and what for? And once I have an answer, what kind of action do I want my audience to take when they interact with my site? How will I measure that? And how do I maximize that? 

The answers to these questions will limit my design choices. And that is a good thing because fewer choices increase the chance of making the “right choice!”. If you go too crazy with your design, users will not be able to relate to it. If you are the same, then why should a client choose you? You need to find the sweet spot! Something that the potential customers can relate to, but that is also customized to serve their needs. 

This means you will need to choose specific fonts, certain colors, and image themes that will be dictated by your target audience and not by what you think “is beautiful.” 

If you are a designer and you need to make a choice, ask yourself: will this bring me closer to my conversion goals or not (pretty comes second).

And if you are a client, be very careful when you ask for a change because your brother does not like the colors, or you don’t like green. If you build something to serve an audience, then their preferences matter over yours. 

Of course, every decision you make can be wrong. You can make informed assumptions about your audience, read the studies about how color influences people and how the font face can make you look serious or playful, but you can still be wrong and not meet the conversion rates you were aiming for. This does not mean you have failed, it means you need to adapt.

An excellent way to adapt is to use A/B testing. I am still studying this concept myself, and it looks like a powerful way to reach “DDD” which is Data-Driven Design, versus “Beauty Driven Design” (which is a polite way to say “Guess Driven Design”). 

My challenge with A/B testing so far is that you need to have a broad test audience to be able to safely conclude that one variant of the test is definitely better than the other and by how much. If you’re into statistics, you’ll love this, and you can do the math yourself! If you are not, choose your testing tool wisely to avoid running meaningless tests with results that are not actually relevant. 

A case study is the website PenguinMagic. When I first looked at it, my design eye judged it as ugly and imaged someone lost their money paying for that. But I have learned that this “ugly design” converts for the people it is addressed to. Believe it or not, this is a multi-million dollar business. They made the clear choice of conversions over beauty!

How about your web project? Do you have goals for it? Are they conversion goals or “being pretty” goals? 

And finally, if you can recommend a useful A/B testing resource, I’d love to read more about it.