If you run an eCommerce website and your website looks better, more user-friendly and has a higher search ranking than your competitors, you can be sure that your website is generating more traffic than your competitors. Good websites also ensure good conversion rates and will generate more revenue for your business.
We’ve previously talked about how to improve your search ranking with SEO. In this article, we will focus on the UX and appearance of your website. Particularly with CSS animations.
Cascading Style Sheets, aka CSS, is a style sheet language that was first introduced in 1996. After more than 20 years of evolution, it has become as flexible and versatile as ever. CSS animations can give your website the wow-factor, it differentiates your website from your competitors’ website. Imagine you are looking at a plain static website, and all of a sudden, something on the screen moved. Your eyes will subconsciously focus on the element that moved, this is because our brain is hardwired to pay attention to moving objects. Due to the natural reflex to notice movement, adding animation to your website is a powerful way to draw the users’ attention.
Transition vs Animation
Both CSS transition and animation can improve the UX of the website. For example, when hovering your mouse over a button and the button changes colour, the user will recognize this is probably something clickable. This applies to links, images, and other CTA elements. It gives a clear indication of what element on the webpage is interactive.
Animation, on the other hand, can attract the attention of the user without any user input. For example, a CTA button that continually changes colour on the screen or background elements that move around. Both CSS transitions and animations can improve the appearance of the website.
What are the common rules to follow?
1. Don’t animate ALL the things.
It can be overwhelming to the site visitor and turn them away. In fact, animating too many elements at the same time may result in a decreased performance which will decrease the search ranking of your website.
2. How are you animating the elements?
Another common issue about using CSS animation is not realizing when you change the width and height of some elements, it may mess up the layout of the website, especially when it comes to responsive design. One animation might look good on a desktop, but make things look out of place when viewing the website on a tablet. The general rule of thumb is to try to make use of ‘transform’ and ‘opacity’ when working with transition and animations. If other properties have to be animated, then make sure there aren’t a lot of layout changes happening at the same time.
3. Get a second opinion
It is easy to overlook things when working on CSS animations, your eyes might become tired of seeing the same things over and over and the animation might look great to you. Get someone else to look at it might give a different perspective and point out areas to be improved. Another option is to record it on video, play it back in slow motion. This can also provide a different perspective and make sure everything is running smoothly.
4. Responsive
A lot of developers get carried away while developing animations on a desktop. But keep in mind that if you only start testing on mobile devices after you are pretty much done on a desktop, there is a high chance that you will have to patch or re-do a lot of the work. Make sure you start testing your animations on mobile devices early and work accordingly.
This also applies to different devices, operating systems and browsers. Make sure you test frequently on these different systems to reduce the extra effort you have to do.
5. Duration and timing
Depending on what is being animated, different durations and timing of animation can have very different effects. It is always good to try to find the best duration of the animation to achieve optimal UX. Here are some best practices.
For fades and colour animations, use almost instant durations (<100ms). When working with small elements such as a link or a small button with simpler effects, use shorter durations (100ms - 300ms).
This also applies to transitions that target user interaction. For more complex animations such as page transitions, or larger elements moving in and out of the screen, use longer durations (>300ms). Lastly, for large movements of background elements and is not interactive but purely for aesthetic reasons, try to get to move really slow (>500ms) so it doesn’t interfere with foreground elements.
We hope you find these recommendations useful in your next projects. If you have any questions, feel free to contact us and we will be happy to help you achieve your website goal.