ANIMATION PRINCIPLES APPLIED TO UI DESIGN

Anoop PS

Humans have a weird tendency of comparing things that they encounter; which is an unconscious deed of our brain. We try to associate certain things with each other—like all living things with movement. Hence even when we see a picture of a living thing our subconscious mind associate that thing with its movement. It is easy for us to understand anything if a certain pattern of motion is associated. If we are asked to imagine a cycle or a train, we will never imagine a cycle or train stationary; there will be some motion associated that image in our mind. This tendency of the human mind has led to many inventions and discoveries. We all love to watch animated films rather than read a picture book saying the same story. That is the magic of motion.

When technology developed, knowingly or unknowingly this affinity towards movement also was incorporated into each new technology. Same with the UI designs. Animation gives life to the app and its interaction with the user. Animation gives an illusion of motion which the human brain can easily associate to objects. An animated app is more user-friendly and liked by the users than an un-animated app. Animation gives the user a sense of control over the app and the processes. A wisely added animation can increase the user experience. Let us look into some of the animations used in the app industry.

VISUAL FEEDBACK

Visual feedback is important for the user interface. It gives the user a sense of control and indicates that the app is working properly. For example when a button changes size or a when the image moves in a particular direction, it’s clear that the app is “working,” that it is responding to the input.

component
Source: Dmitriy Goncharov

Here the Fav button and Close buttons have two different animations. The cards move to left if the X icon tapped and to the right if the button is tapped.This gives the user an idea that depending on the input the cards move. So, if the user swipes the cards left or right, the corresponding action takes place; either it will be closed or will be selected as the favorite.

FUNCTION CHANGE

This type of animation displays how the element changes when the user interacts with the same. Functional change animation is the best to illustrate how the elements change its function and are used with icons, buttons, and small design elements. For example, you might have encountered button changes from a hamburger menu to an “X” icon, which indicates that the function has changed.

illustrate
Source/ by Vitaly Rubtsov

UTILISATION OF SPACE

Most mobile apps have complicated structures and the designer has to simplify the navigation through these elements as easier as possible. Animation helps in accomplishing this task. For example, the animation should show where an element is hiding and the user will find it next time easily.
In the below-given animation, the + button when clicked will display the hidden items.

mobile-apps
Source/ by Karol Ortyl

HIERARCHY AND ANIMATION OF ELEMENTS

Every element has a purpose and place within an animation. Animations should describe the parts of the interface and show how they relate to each other. Animations should illustrate how elements are connected. This hierarchy and interaction of elements are essential for a natural interface of the app. For example, if a pop-up menu is activated by a button, the menu should appear from the button and not slide from anywhere of the screen. This will show the user that these two elements (button and pop-up) are connected.

The up swiping of the cards, in the below-given animation, displays more content about the cards and the down swiping hides the content. This indicates that the image cards and the content cards are interconnected.

mobile-apps
Source/ by Leo Leung

VISUAL CLUES

Animation hints how to interact with the elements in an app. It offers visual cues whenever an app has a random interaction pattern among the elements. You might have opened a blog which has images with articles. Here, when we open the blog, the pages will primarily have a carousel movement of the cards and it will stop with a portion of the card displayed on both right and left-hand side of the screen. This gives the users the idea that they have to swipe horizontally to go through the cards.

Here, you can see that a third of the image card is visible on the right side of the screen, which indicates that you have to swipe the card from right to left to view the card.

visual-clues
Source/ by Valentin Salmon

PERFORMANCE INDICATION

An app consist of a number of elements and a similar number of processes is happening at the backstage in the app. Hence, there should be visual signs to show that the app has not frozen and backend processes are going on. A visual sign of these progress will give the user a sense of control on the app and its functionalities. Each process in your app should be supplemented by a separate animation. When an audio recording is in the progress, the app shows a moving audio track and the real-time sound wave animation indicates loudness of the sound. This indicates the
audio is being recorded and the app is working.

In the below animation, the green loading circle (for the estimating cycle) indicates that the app is working and waiting for the calculations to be completed.

visual-signs
Source/ by Josh Soto

FUN ANIMATIONS

Fun animations can be useful and distract at the same time. Most often these animations are used senselessly by developers and hence can sophisticate the development of an app. Unique animations can be alluring to users and will make the app stand out. This can also help to create a recognizable brand. For example, if an element can be moved around the screen which brings enjoyment and “gamification” then your app will look appealing to the users.

In the animation given below, the steam from the burger, dripping drop from the popsicle and the bouncing fries are fun animations which makes the app bubblier.

discount-saving-system-concept
Source/ by Dima Panchenko

CONCLUSION

Designers should be cautious while animating the elements in UI. Too much animation confuses a user and too little will make the app boring. The motion accent should support the layout of the app and should engage the user when they are interacting with the app.

Also while creating the animations you should follow the principles of animation which are: ‘Timing’, “Ease-in and Ease-out”, “Follow Through”, ‘Overlapping’, ‘Exaggeration’ and ‘Anticipation’ etc.

Always share your ideas with the developers before going to create the animations. This way you’ll always be able to check the feasibility of the proposed animation.

 

ebook: Intro 360 degree videos

about the author

Anoop PS