Functional Use of Animation in User Interfaces
Dec. 14, 2013 in Interactivity by Jake Blakeley
Create a More Fluid Transition
The main property of any animation is time. Creating a fluid transition involves using time to smoothen a change of state or appearance. This involves transitioning from the start state to the end state over a set period of time rather than an instant and abrupt change from start state to end state. Animations do not always happen in a linear manner. This means that they can be transitioned slower or quicker throughout parts of the transition. For example, an animation can be slowed down or “eased-out” as it reaches the end state. Think of an animation’s state changing based
The main property of any animation is time on a graph or bezier curve where the X-axis represents the time, and the Y axis represents the change from start to end state.
To show the benefit of creating fluid transitions, an example can be made of something that everyone has seen before - a pop up window. If a window was to just appear, most people would be confused as to where it came from. However, if a window expanded outwards from where the user clicked, they would have a much better context as to where it appeared from and why.
This is arguably the most necessary use of animation for creating a fluid experience and an easy to navigate interface. It is both more visually appealing and functional in the respect that it shows the viewer a changing state by giving them visual context over time instead of abruptly.
Give Visual Feedback or Context
Animations can be used to better communicate what is happening and display that information in a visual manner. The most basic example of this is a progress bar. A progress bar indicates that there is a process happening or loading, and how far along it is. If no visual feedback, such as a progress bar or loading icon after a form submit, a user can be left wondering if the form was actually submitted and if anything is really happening.
Create Hierarchy and Guide the User’s Attention
As with any design, hierarchy is key in creating interesting and effective layouts. Animated or moving elements have a unique ability to be the most apparent element within the hierarchy because, as a survival instinct, we are naturally drawn to motion. This is frequently used technique that video game designers use to direct players where to go on maps.
However, in the words of Uncle Ben, “With great power comes great responsibility”. Do not overuse animations, and always ask yourself what is being achieved and how the animation benefits the experience. Something such as a constantly looping animation can be distracting. Remember Navi from Ocarina of Time? Do you really want the animation to say “hey, listen!” whenever the user looks away?
Always ask yourself what is being achieved and how the animation benefits the experience.
That being said, animations can be used to automatically control the user’s eyeflow to an element. A good example of this is a submit button that goes from grey to a colour once the form is complete. A good submit button would transition form grey to colour to quickly draw attention to the area and subsequently guide the user’s navigation.
Animations can give users hints to where they should go, and even point towards interactions to ensure the users know what they should be doing with the interface.
Hinting Possible Interactions
To further expand on using animations to draw a user’s attention, animations can also use this hinting to point towards an interaction or even a possible gesture. I will use my website, shameless self plug, as an example of this. When the content on the page loads, the images in the gallery slide in from the right side to the left side to show that the website scrolls horizontally rather than vertically.
An example of an animation that points towards an interaction is an auto refreshing content list. As the user scrolls down the list, new content could have been added at the top, and since the user is scrolled down, they cannot see this content. As a way to fix this, a notification could slide down from the top saying “load new content”, and clicking this could scroll back to the top to see the new content.
Just like any other aspect of design, there is a time to use animation and motion and there is a time to avoid it altogether. There are many ways to misuse animations in interfaces. One infamous example is an animation that moves links or other interactive elements as the user may be trying to click them. It is important to question the purpose of an animation and if it is adding to the interface or just creating fluff. If used properly, animations and motion can add to almost any interface experience and create a more immersive, easier to navigate and fluid interface.