21Oct 2017

Animation: Enhancing User Experience (UX) with the basic principles

Wikipedia defines Animation as the process of making the illusion of motion and change by means of the rapid display of a sequence of static images that minimally differ from each other.


Human beings are illusionist creatures. Anything that appears to be appealing to the eyes attracts people. They love visualizing virtual motion, and animation is all about creating this visual magic.

At Acodez IT Solutions, my team of web designers love to explore all possible exponents of animation to generate a great user interface. We believe this helps in enabling and speeding up the process of interaction.

My explanation for animation is simple as I believe it is the process of breathing life across the non-living objects with an active soul that is capable of sparking an interaction. When we think of animation, “motion” is the word that strikes the mind. How about anything that moves in virtual space. Lovely!!!

This game of motion didn’t start today or yesterday. But, it already existed since the day human beings started discovering and utilizing the gifts of nature in a quest to find what else is in place that we can utilize for making our lives more pleasant. Archeological findings that depict cave carvings and rock paintings extend back in time when there was no technology in place. But with technology and its development we realized a great deal can be done.

The people or things in motion that you can find  in these paintings and carvings is the evidence of how human beings are closely related to the aesthetic beauty of motion. This brings us to our topic of discussion. Here, I have summed up a brief on how designers develop designs using animation.

Also Read: Benefits of Using HTML5 Animation Over Flash

Let us begin with functional animation:

From a designer’s perspective, we could simply put it as the thing that we include in a user interface design to meet the demands of the process.

This principle works because people are easily drawn to anything that is visually enthralling, which means animation is the only essential tool that you can use to attract your people.

What was the driving force?

The impact of mobile phones and the growing influence of these on the lives of people is one of the reasons that made designers think of animation as the most important aspect of the design process. Animations help to brighten up a product while making it simple, clear and user-specific ultimately ensuring a better user experience.

It serves a logical purpose.

Logic? I know Logic is not the key word for a designer, as we are creative people, but if we implement an animation that is part of a logical process, then we are possibly using a valid functional animation and this is how I justify the use of animation in designs.

I would rather view animation as a tool that fits into user needs.

Let me take you across the types of interface animations, which forms the focus of our discussion:

  • Decorative Animation
  • Animations defining microinteractions
  • Flowchart Animations
  • Explanatory Animations

I. Decorative Animations

I don’t have to explain too deep about what is meant by decorative animations. The word “decorative” says it all. The main purpose of decorative animations is to attract people. This intends to develop user interface designs that are original and appealing to the eyes. It gives life to the interfaces as well as presents it in a more interesting form to the viewer though it will not contain any important features to give spark to an interaction process. The main objective is to grab user’s attention towards the image that stands apart from the rest.

II. Animations defining microinteractions

We discussed that decorative animations do not focus on interaction but it is about the interface. Microinteraction animations mainly satisfy the need to trigger interaction.

Ever used animation to wind up a microinteraction? This kind of a situation arises when a user successfully completes an operation such as when they fill up a form, or when toggles are pushed, or when a button gets closed. Also, animations have developed so far that now these have the ability to notify the user when actions are incomplete and this helps the user through the process. Also, this is another way of providing a smooth interaction for the users.

III. Flowchart animations

This process is a broader aspect of the microinteractions phase. Here the users will not only be notified with the completed tasks, but also the process involved across each task.

IV. Explanatory animations

Usually used in tutorials and tooltips, though they have a greater level of application.

Now, I will take you across the most important principles of Animation as specified by the ‘nine old men’ of Walt Disney Studios. Sorry, I should have mentioned Disney a little earlier, as it is the thing that hits our mind when we think of animation.

The evolution of a few of the best animation principles:

As we know, necessity is the mother of all inventions. All humans love motion alike and this is what prompted these great men at Disney to churn out something that would express character and personality with ease and their practice helped them enhance these principles further.

#1. Compress and then stretch:
I know you are goggling your eyes at the screen. But, the fact is this forms the most important part of your animation process. How do you apply this principle to the objects that are drawn? Simple, all that we want is to enliven the objects that are in discussion. So how do you accomplish this?

Add some weight and flexibility to your objects.

For instance, just think of the Disney’s looney cartoon character Mickey Mouse and the various expressions that forms across its face. Wonderful! Ain’t it? Now you have a clear picture of what compress and stretch is.

Remember Bluto the villain from the popular “Popeye” series, a scene from the series where he gets stuck in a doorway when compression and expansion extends a certain limit it gives a lot of colors to the comics. I know you are laughing at the thought of how Popeye gulps in the spinach and his body expands, there was a time when we were kids and used to think whether he is a piece of a rubber band, how beautifully he can stretch? Hehe… Now we know the secret.

So let me reveal the secret – the volume of your object remains the same regardless of whether it is subjected to compression or expansion.

#2. Apprehension:
It is like generating a curiosity in the minds of audience who wait eagerly to know what next! Here, what we are doing is getting the audience ready for an action that is going to happen the next second and moreover, our aim is to ensure that this action appears pragmatic. For instance, let me take Jurassic World and Mad Max: Fury Road, the two of the highest grossing movies in the gone year. We already have an idea, the dinosaurs breathing fire, what the next move might be and look at how people jump from their seats when the dinosaur springs up and pounces the next moment. The War Rig across the deserts in Mad Max: Fury Road had audiences eagerly waiting for the next action. Also, apprehension can be used to depict actions that involve less physical activity, like when a caracter turns the focus away from the screen or something of that sort.

#3. Organizing:
Let us view this aspect from the perspective of staging as in films and theater. As always, our main intent is to attract audience attention, working on everything in power to hit their eye. Also, once you manage to grab their attention the next step is to help them realize the most important portion of the scene. Taking a page from Peperzaken’s blog on animation and interfaces design,  which describes in detail all the 12 principles of animation, wherein they have mentioned a definition for organizing which states, “the presentation of any idea so that it is completely and unmistakably clear, whether that idea is an action, a personality, an expression or a mood”. How do you get this done? Quite simple, ensure that the lights and shadow are aptly placed, the angles and camera position and also, last but not the least the proper positioning of the character in the frame. Let me put it in a simpler form, our focus is just the object in discussion and why not push the unnecessary details into the trash?

Also Read: Top 15 UX & UI Design Tools for Developers

#4. Start, action, camera:
Now I will take you across the process of drawing! How we do it? There are two options when it comes to drawing. You can start drawing scene by scene from the scratch which comes under “Straight ahead action” and then the next is you can just draw a few of the key elements while you can fill in the incomplete blanks at some point of time. The first one helps in producing more pragmatic views of a particular action sequence but difficult to manage proportions while the latter helps to depict emotional and dramatic scenes with enhanced ease. It would be great if you can combine these.

#5. Chase and conquer:
Remember the never- ending chase of “Tom and Jerry”. We all wanted to see Jerry being captured. It was just a sugar cube for my dear readers. Well, let me not deviate from our main topic of discussion. What is chase and conquer? In this context, by conquering, I refer to overriding. Chasing and conquering are closely related when it comes to depicting movement that is pragmatic. You can see characters becoming alive and moving across as if straight out of your Physics standard textbooks, even taking into account the law of inertia as stated by Newton. So what really happens in this process? Chase- Once the body ceases to move, the parts of the body keeps on moving while overlapping is nothing but the various parts of the body move at different times. This technique is combined with a third technique known as dragging to provide a better visual experience for the viewer.

#6. Keep up with the timing:
As we have already seen, that the law of physics is applied to animation, which contains how exactly the human body moves and the time it takes to speed up and slow down. This is what makes animation pragmatic and this is why it is suggested that you use more drawings at the start and towards the end of an action, which helps to regard extreme poses that involves sitting and standing. The same is applicable for inanimate objects too.

#7. Attraction:
When it comes to the cartoon characters there must be a certain deal of attractiveness in it that can hold on the crowd. Even monstrous characters and villains can be attractive. The magic lies in how the audience perceives your characters and its personality.

These are just the basics, though the animation is a topic deeper than the deep sea and a single blog space will never be sufficient to explain everything in detail.

Are you an animator or do you use animations to make your designs more interesting? What kind of methodologies do you adopt? How far do you think your designs are appealing? Share with us your experiences in animation and help us enhance the article further.

Acodez IT Solutions, is a web development company based in India with a wide range of clients all over the world. We provide excellent web design and development services that have helped us build client trust over the years bringing them back to us every time they need a service or solution for their business. We are also a digital solutions provider flaunting a great deal of expertise at providing all the inbound marketing strategies that are trending in the industry which helps us to customize solutions that lead to business growth. Start utilizing the advantages of UX designs for your website today from a ux agency india.

Tell us your business needs and we will provide a free quote on what we can do for you. Talk to us today!

[download file=”https://acodez.in/wp-content/uploads/2016/01/nloa.pdf”]

Looking for a good team
for your next project?

Contact us and we'll give you a preliminary free consultation
on the web & mobile strategy that'd suit your needs best.

Contact Us Now!
Rajeesh PK

Rajeesh PK

Rajeesh P.K. is the Director and Creative Head at Acodez . With an experience of 10+ years in UX Design & User Interface Design, when coupled with his expert coding skills in HTML5, CSS3 and Javascript, makes him one of the top UX Architects in India, with more than 15 international awards to his credit.

Get a free quote!

Brief us your requirements & let's connect

Leave a Comment

Your email address will not be published. Required fields are marked *