There's such a thing as too much of a good thing, specially with web animations
The great thing about websites is the level of interactivity they can offer users. As web designers we have several tools at our disposal to enhance a websites interactivity. One of these tools web designers can use is animation. However, a mistake most people make is using to many animations on their website. They think it will make their site look nice and if they ad more it will make their site look even nicer. In this case usability is tossed out of the window in favor for flashy designs. Much like the scientists in Jurassic park, they are so busy with what they can do they never consider if they should.
Adding to many animations can also cause a visual overload or worse slows your site down. I can’t stress how important it is to avoid anything that might slow down your site. Animations much like any web element should serve a purpose. In most cases website animations serve two purposes, to create visual interest and to act as a response.
This is where people often go overboard when it comes to animations. Things like having text fade in, pages slide in and animated headers serve no real purpose and are only added for visual appeal. This is good since there’s nothing wrong with adding a little flare to your site. However most people fill their pages with these animations to the point that it becomes distracting for to user or brings page speed down to a crawl. There are allot of these types of sites out there that rely heavily on animation. Each interaction triggers an animation and more often than not these sites take ages to load and navigating them is a confusing mess. These sites are unique and often well designed however at what cost? No user will bother putting themselves through the trouble of navigating these sites to find what they are looking for. Plenty of other more user-friendly fish in the sea, and users know this and they will leave your site if it’s to visually cluttered or slow. And even if done correctly it can still bother users, imagine if you had to sit trough an animation every time you visited your favorite site . Sooner or later it would start to annoy you, much like putting your favorite song as your alarm clock.That’s why it’s important to use these types of animations in moderation.
This type of animation is elements that react to a user’s input. It can be something as simple as a button changing color on hover to something more complex like a slide out menu on mobile. It’s important to note that these animations must always remain subtle. They shouldn’t steal the spotlight from the element they are used on, instead they should help highlight them Imagine hovering over a button and having to sit through a 5 second animation before being able to click. This would drive any user away from your site costing you a potential client. Instead like I said earlier they should highlight the element and help guide users. For example, using animation on form submit to show a user that the form was filled in successfully, or an read more text on an image that appears on hover that directs users to more information.
We are no stranger to animations ourselves. The animated header, portfolio screens, hover animations and our contact form that fades in on click are all animations we use on this site. The thing all these have in common is that they’re subtle and never interrupt the users experience. Most importantly they are done with CSS and if not are kept as lightweight as possible as to not hinder page load times. These are things you always have to pay attention to when using animation your site. Before you place that flashy slide in text or page transition, ask yourself the following. Will it interrupt the user experience? Do you need extra resources like plugins, images and extra code? And most importantly will it improve how your users experience your website? Because as long as you use animations in a way that is both useful and visually appealing without bothering the user and most importantly in moderation, it should serve as a valuable addition to your site.
© Illusion Media 2020 | Info@illusionmedia.co