Beyond just making things move around the page

Introduction

Interfaces have evolved from their static predecessors as animation and motion have become an integral part in creating a more consistent and fluid experience in almost any UI design. Although this article avoids the technical implementations in favour of explaining the functional use of animations, a few methods of creating web animations include; CSS transitions, CSS animations or Javascript such as Velocity.js. Through my research I have found that the use of motion and animation in interfaces can be broken down into five major functions, as described below.

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 a start state to an end state over a set period of time, rather than an instant and abrupt change between states. However, this change does not always happen in a linear manner. This means that they can be transitioned slower or quicker throughout the duration of the transition. For example, an animation can slow down or “ease-out” as it reaches the end state. Think of an action movie scene where someone is falling, but as they’re about to hit the ground everything switches to slow motion and gets all dramatic. Here is a more boring, but more accurate depiction:

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.

No transition Linear transition Transition with easing

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 a change of state in a more contextual manner rather than by an abrupt change.

Give Visual Feedback or Context

Animations can be used to better communicate what is happening and display this 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 is given, such as a loading icon after a form submit, a user can be left wondering if the form was actually submitted and if anything is really happening.

Submit Sending

Sent

Another example of an animation giving context is when a new section slides into view as it pushes the previous section out of view. This gives the user an idea of where they are navigating to, where they navigated from, and sometimes shows a way to get back to where they came from.

Page 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Previous page Page 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Next Page

Create Hierarchy and Guide the User’s Attention

As with any design, hierarchy is key in creating interesting and effective layouts. Animated or moving objects have a unique ability to be the most prominent element within a 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 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?

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 to quickly draw attention to the area and subsequently guide the user’s navigation.

Random Internet Form submit

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. A common example of this is used a lot on infinite scrolling websites. When the user scrolls to the bottom, more content slides/fades in from the bottom to infer that you can can keep scrolling down to have more content appear.

Another strong example is a list item that when the user touches it, it slightly slides to the right to imply that you can use a slide gesture to remove the item.

#1. Tap or Drag me Lorem ipsum dolor sit amet consectetur. #2. Tap or Drag me Lorem ipsum dolor sit amet consectetur. #3. Tap or Drag me Lorem ipsum dolor sit amet consectetur. #4. Tap or Drag me Lorem ipsum dolor sit amet consectetur. #5. Tap or Drag me Lorem ipsum dolor sit amet consectetur.

Elicit an Emotion Response

This is one of the most powerful and effective uses of animations in interfaces, but also the most abstract since it is hard to quantify. If animations are used in the right manner they can trigger an emotional response based on an interaction from the user. This response can be either positive or negative to connotate what kind of interaction the user has completed.

To use the example of video games, this type of animation is common to show success or failure in a quick and easy to digest way. Common gamification patterns such as achievements banners or level up’s give a very happy and congratulatory animation to give immediate gratification. This is the basic principle that makes video games addicting, through classical conditioning and rewarding time spent interacting.

Click Me Thank you for reading!

Conclusion

Just like any other aspect of design, there is a time to use motion and animation, and there is a time to avoid it altogether. There are many ways to misuse animations, just like any other element of design. It's 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.