How to use animations without hurting solar website conversions

▶ 0:00Good evening. Tonight, we're going to talk about micro interactions and animations for your solar website. So particularly relevant if you've got a solar website you're looking to improve, or if you're looking to develop out a new solar website. So the reason this topic has come to mind is that a lot of developers that were applying for our frame of position put very, very significant emphasis on animations.

▶ 0:22And the reason for that is that Framer allows you to do some really fantastic stuff with animations quite easily and quite quickly. It's super fluid and you can build some really complex stuff that's very interactive, that tells a story and things like that. So the problem with this is that when you overload a page with animations, no matter how good they are, if they're quite extensive and complex, you're going to slow the page down, which is going to impact your SEO.

▶ 0:47It's going to impact your page user experience, all that kind of stuff. You're also going to cause distraction for the user and even maybe elements of motion sickness. And it may also be quite difficult for some people with more extensive kind of accessibility needs. And finally, you take attention away from the call to actions and the actual things that you really want people to do when they come on your website, like call you, get a quote, email you.

▶ 1:18I'm going to take you through a few examples of animations that we've used in a tasteful way that is conversion considerate. Hopefully, there are a few of the designers watching that are currently in our application process because this is something that is super important to us. While a lot of you guys have fantastic skills with Framer using animations, we've unfortunately or fortunately got to put our users experience first and our clients conversion first.

▶ 1:44So I'll show you a few quick examples. This is Infinite Energy's website and right off the bat, you can see that the only thing moving on this page is that button and funnily enough, that button is the one that we really, really, really want them to actually click because that is going straight through to the quote tool, which we found to have the highest conversion across the site and to have the highest buy in from the user.

▶ 2:08Now, there are a lot of other kind of like small animations that we've done, for example, you can do things like this, micro interactions that just give you a little bit more information, encourage a click. Okay, you can do things like this where you're hovering over information, you get a bit more text and that makes the page feel really clean and simple and easy to consume until you want more information.

▶ 2:32And then maybe you get, you know, some more information like this right in the tooltips they're called. Okay, next up, we've got quite a fun one. So you can have a bit of fun with this, as long as it doesn't take away from the conversion goals. And on this section of the page, we don't have any call to action. So we're not too concerned about distracting away from them.

▶ 2:54And we can do this nice thing where the plane goes from left to right. Yeah, and it just makes the site feel a little bit more alive, a little bit more fluid. You can also do things like this that again, just encourage the click. This one's a bit more extensive. If I go to battery storage, we've got that they're an official Power Vault partner, which I think is a really cool one.

▶ 3:14And we've also got that on the business side because we just really want to emphasize this. So again, we've done this, this hover animation with this cool like flicker effect, because we want to emphasize this specific partnership. Right. If we didn't want to emphasize this, we would not have put this animation here because it is taking so much attention and it's probably adding a bit of a load time as well.

▶ 3:35Right. So a couple others, this arrow that your cursor turns into an arrow, that's really nice for just getting the click through to the case studies and sustained case study pages are excellent. So they convert really well and it's definitely a priority for us to push people through to them. Then another one, you've got projects coming across here and when you hover over, you just get a nice little view project.

▶ 4:00Right. You're hopefully starting to see that it's really less is more with these. You have really subtle animations like this arrow moving to the right slightly. Yeah. And this button going yellow is just encouraging the click, but it's not doing anything crazy. It's the same with stuff like the locations we've got. When you hover over a location, it kind of highlights in yellow from left to right.

▶ 4:21It's nicer than it just flashing or not doing anything at all, but it's not it's not crazy. Right. It's not going to impact page load too much. It's not going to make everything shift around and all that kind of stuff. It's not crazy. The best example of this that is just super, super subtle, but serves a purpose is this little green highlight that goes around residential solar installers on our website.

▶ 4:48It draws attention and it makes the site feel alive. It makes it feel modern and there's been a lot of thought put into it. But at the same time, it's not it's not stopping anyone from clicking this big green button that we really want them to click. It's not preventing that. It's drawing some attention to the top after probably after they've read the headline and then they're going to hopefully click that button and go ahead and book a call with us.

▶ 5:14So I thought I'd do a quick breakdown there because I see far too many websites that are just packed with these animations. You've got every section coming in left to right and headings animated separately to the section. It just becomes overwhelming. And if you're looking to get a new website built and your web developer or website partner is constantly you can't get them to shut up about animations and these clever effects that they're going to do on the website.

▶ 5:39Then you should probably raise it with them as a little bit of concern because their primary objective should be winning you business. And unfortunately, as much as I love them, pretty animations don't really do that unless they serve a purpose. So that's all for tonight. I hope you enjoyed and found that valuable. If you have got a website currently and you want me to take a look at it and basically say which animations I would scrap and which ones I'd keep more than happy to do that at no charge.

▶ 6:08And I'm always interested in this kind of stuff. So be good to see. Cool. I will love you and leave you for this one and I'll catch you in the next.