Excessive Animations Can Kill User Experience

In early 1987, CompuServe created Graphics Interchange Format (GIF), and as a side note, it's pronounced with a hard 'G', not a 'J'. One is a graphics animation and the other is a brand of peanut butter…YUM! Peanut butter! Anyway, back to the topic. When GIFs were invented, they were all the rage. Websites soon started to implement them in their designs to dress up the web appeal and make it a 'fun' website to visit. Being the new thing that it was, it didn't cause too much stress at the time. It was the only form of animation at the time and in many cases, it was a necessary evil for designers and web marketers to bring attention to specific areas of the screen. And then it became abused. We all remember the days of fireworks exploding on your screen; the dancing bear, the Christmas lights, the winter snow, and the great news ticker! Some designers went overboard and used several of these on one page alone. Combine that with the restrictions of color in the 80s (maximum of 256 colors), and you can imagine what that must look like now. In fact, if you spend enough time on the internet, you may still be able to come across one of these websites. Why do they still exist? That's beyond my understanding. Hopefully, they are abandoned personal websites and not one that depends on user experience to market products and services.

Fast-forward about 10 years and Adobe innovated a revolutionary method of creating animations called Flash. It took the internet by storm! The graphics were clean and very detailed. It was almost as if you were watching a movie or video game on a website. Honestly, I fell for it as well. Over time, Flash proved itself to be impractical as well. Apple users couldn't open a website because Flash wasn't supported in Apple devices. The flash elements were incredibly large, and it consumed a large amount of data, thus killing many people's data plans; especially when data wasn't offered as an unlimited plan by cell phone providers. And finally, Google drove the final dagger through Adobe's heart and straight to the Flash jugular when web marketers realized that Flash elements were impossible to crawl by Google because it wasn't readable content, but a movie instead. As Google started to build itself as an SEO (Search Engine Optimization) authority, more people started to ditch Flash to allow their websites to be crawled and ranked in search engines.

And then, CSS finally came to a great compromise - CSS Animations! Once the browsers caught up to CSS3 and its power, animations became extremely light, did not need JavaScript to function, and did not interfere with the content or search engine crawling abilities. It was a life-saver that is still relevant today after all these years and doesn't look like it will go away for a very long time. Not until a better and lighter method shows up and let's face it, does it get any lighter than CSS? Probably not.

To Use Or Not To Use

And there lies the question. There is no yes or no answer to this. Instead, you should consider the face value of what your animations are trying to convey. Before you start rubbing your hands together and pulling your sleeves up ready to show up your incredible skills, consider a few things. One animation too many can make a difference in how the users will react to your design. And this can cause page abandonment which will lead to low interaction on your page, low traffic, low user return percentage, and on many occasions a decrease in revenue for those clients of yours who depend on the website to generate sales or leads. Let’s take a look at some of these points you should consider.

Cognitive Friction

Cognitive friction relates to the amount of mental effort it takes for a normal person to decipher or read your design and content. What is a “normal person”? A normal person is the most common persona that would interact with the application you are trying to build - The End User. Not your client, not yourself, and not an expert user, but the most common user. Let's see an example. Let's say you are designing a public accessed website for a doctor's office. It will be fair to say, that the most common users are the patients. These are people with hardly any knowledge of medical terms. They mostly come to the website for contact information, online appointments, insurance issues, or something usually unrelated to medical advice. Going deeper into the rabbit hole, if this doctor's office was a vision clinic, you could probably expect patients are experiencing problems that will make reading the website slightly more difficult. This can make font size, line height between paragraph lines, and font color over colored backgrounds a little more challenging.

For the sake of comparison, let's look at another example. In this case, you are tasked with designing a privately used web application for processing tax payments for a county. The normal user is usually trained in the verbiage and terms related to taxation. The user, most likely an employee, has been accommodated to use his equipment (computer) in the proper lighting, sitting area, eyeglasses, etc. In this type of design, you can be more technical with terms and more relaxed on some design aspects. Of course, this is a vague example. I am not touching the Accessibility Compliance issue which can be enforced for many government sites. But that is a topic for another day.

The important takeaway here is to consider who you are designing for to maintain the lowest level of cognitive friction. An office web application may have no interest in animations and probably be annoyed by it. Whereas, the public sector website could be more inclined to some flair but too much will have the user's eyes jumping all over the screen when something moves. Thus making the design very distracting and hard to focus on what the user is trying to read or find.

Feedback

The entire purpose of User Interfaces is to provide feedback to the user of all communications between the user’s computer and the website’s server. One thing you need to realize is that when you are using a website, you are communicating with the server. You are telling the server, “fetch this”, “put this in their”, “calculate this too”, “take me somewhere else”, etc. It is the User Interface’s job to show on the screen all that is happening. A button, an input field, a menu item, a slider, and many other elements, are the visual tools for the user to communicate. Labels, text, checked boxes and radio buttons, a jumbotron, etc. are the elements the UI uses to return to the user whatever it is that was fetched or calculated in the server.

When you design a website, you must keep in mind what feedback is most important to the user according to their action. In many cases, this can be an attention grabber to direct the user’s attention to a sale or discounted product. In other cases, it helps direct the user’s attention to the results from a search or query that was requested on a hit of a button or filled form. And in other situations, it can be used to let the user know that something went wrong or something destructive happened or is about to happen. In any of these circumstances, a slight animation can be very helpful so that the feedback is evident and therefore addressed appropriately.

Performance

I mentioned CSS is a very light and efficient way to produce animations. However, take that with a grain of salt. A piece of animation can be coded to run too long. Be considerate of the amount of time an animation is supposed to take before it produces feedback. Making the user wait too long can also raise cognitive friction. Likewise, be considerate of animations that may be too short, especially for sliders with content in it. It is hard to predict the level of readability for every user you will have. Knowing if the content has been on-screen long enough for the user to read it can be tricky when everyone can read at different speeds. One piece of advice I can give is to let the user move to the next item on the screen on his or her own terms by not allowing automatic transitions and letting the user navigate when ready. This may require extra clicks, but it's all about picking the lesser of two evils here. And clicks are not necessarily bad. Click counting is a thing of the past, and it has been discussed by the greatest UI/UX gurus and debunked. That's good news, right!

Conclusion

Animations are great! I use them and many other designers do too. They become a problem when they are abused. If you are a client looking into adding an attractive combination of vitality and glamour to your website, consult with your designer and communicate your needs, your end-users, and what you would like your users to pay the most attention to. Not everything is worthy of attention. If your designer is advising against it, he or she most likely knows the risks and is trying to warn you. If you are a designer, pull back on the trigger, ask questions, research the end-users, research the competition, and whatever you do, remember, your client's website is not an opportunity to showcase your skills.