Animation is a double-edged sword. If not wielded by a master swordsman, not only does it pose a danger to the wielder (designer) himself, but also to those around him (his users).

Analogy aside, web animation isn’t a tool to be feared (although it was a decade ago when it used to plague the Internet with horrible simulations). Animation is built to fascinate the eyes of the users, ranging from minimalist to detailed renditions. And over the years, the role of animation has extended beyond the conventional, “eye-pleasing” nature it’s known for.

Used in the right context and settings, animations can add meaning to a user interface and offer immersive interactivity as well. Moreover, upon giving animation a touch of subtlety, it can appear less ostentatious yet more instinctual, fun and user-oriented.

Evolution of Web Animation

In the past few years, animation has evolved into a more diverse yet appealing form. That credit goes to the introduction of the new and improved CSS3. Its advent has brought with it a whole new wave of dynamic properties (animations and transitions), thereby making it fairly easy for designers to create smooth animations as they see fit.

UI animation should be logically capitalized on to make web interactions more refined

This also means that designers can finally say farewell to the more complex JavaScript animations. After all, JS has always cost a great amount of time and a lot of brainpower, which designers would rather keep from depleting too early while designing a web or app.

Apart from the competency that CSS3 @keyframes and other -webkit properties offer, designers have now the convenience to access an infinite pool of custom codes shared by affable designers. Communities like Github or Codepen offer free access to a plethora of codes that can be a good source of inspiration, as well as a great place to find ready-to-use animations.

UI Animation Best Practices and Examples

Our minds are genetically engineered to sense movements in our surroundings. Such innate senses can be leveraged to influence and enhance the user experience of web visitors. Let’s see a touch of immersive interactivity, coupled with subtle animation, can help us improve the user experience.

Provide Attractive Prompts

Ideal user interfaces never rely on the user’s intellect to figure things out, such as where to go from a certain point on the website, where to look for more info, where to click to go to a desired page. After all, the purpose of a UI is to act as an information-rich canvas where desired information can be easily located. That’s the reason you see designers keeping consistency in the structure of a website.

For instance, familiarity with web usage has taught us to look at the bottom of the page to check for the Terms of Service or Privacy Policy. Likewise, when we want to search anything in a website, our view automatically floats to the top-right search bar.

However, such consistency can’t always be retained throughout the layout. There may be certain areas that are foreign to users. To help the users navigate through the unknown and with little to no confusion, guiding beacons should be placed.

Such as in this example, the animated arrow keeps bouncing down, prompting the users to scroll down and explore the rest of the content.

See the Pen CSS arrow down bouncing by dodozhang21 (@dodozhang21) on CodePen.

Give Modification Cues

Visitors don’t want to be left in the dark, trying to figure out what changes, if any, they have made to the interface. They want to be kept informed of any modifications caused by their activity.

To do this, you don’t need to notify them of their actions through descriptive popups. Instead, you can create meaningful visuals to indicate changes due to their current activity.

Take, for instance, the following examples showing eloquent animation and transition when an item is added and removed.

See the Pen Adding Items by Val Head (@valhead) on CodePen.

The example illustrates a variety of different animations and transitions that are possible via CSS3 and JS. When users add an item, it smoothly slides into the deck while the top and bottom row make more space for the new entry. Likewise, when an item is removed, it slides out of the deck while the other items close the space. The transition of colors gives sensory cues to the users when something is added or removed, making it easy for them to follow along.

Inform Toggle Status

As mentioned earlier, one thing that users totally dislike is an unstated change, especially if it is abrupt. Sudden changes tend to impair user experience, since the user doesn’t know what just happened and how should he react.

Therefore, it is the job of the designers to provide users with an on-site hints to help them understand what’s going on. Here’s one such example that best tells how stateful toggles actually work.

See the Pen Menu Toggle button with flat menu by Geoffrey Crofte (@CreativeJuiz) on CodePen.

However, what they would definitely want to know is how to exit out of it. This problem is addressed with the straightforward toggle. When a user clicks the menu icon, it immediately transforms to an “X,” a universally-accepted “Exit” or “Close” icon. If the user doesn’t want the menu, he simply clicks the “X” to make the menu disappear.

Track Scrolling Behavior

Just like with the straightforward toggle, stateful scrolling is also essential in helping users follow the flow of information.

Prompt or abrupt changes can cause loss of context, which ends up ruining the user experience. It usually happens when users hop from one page to another.

For instance, while skimming through the Home page, the user may want to contact the site owner. To do that, he’d jump from Home page to Contact-Us skipping all the other pages in between.

Sometimes this leads to a loss of context, leaving the user to connect the dots and figure out what happens. One of the ideal ways to keep users informed of the flow of information is by using stateful scrolling, like in the example below:

See the Pen Easy One Page Scroll by André Cortellini (@AndreCortellini) on CodePen.

Hover To Inform

Yes, controlled animations can be used as cues or guiding beacons. However, in the right settings, they can also be used to inform. The information could be about anything, from nudging on an error (like that of WordPress login) to turning green on notification (such as the Google Hangout).

When used solely to inform, animation can be the ideal tool to capture the attention of the user immediately just like in this Codepen example.

See the Pen Hover effects with CSS3 by Jacob Stone (@JacobStone420) on CodePen.

Upon image hover, the elegant animations and transitions inform the users of the description of the image. This could be used for a feature image or a testimonial.

So, Let’s Animate!

UI animation shouldn’t be used to show off the fancy skills of the designers or gaudy animations techniques. It should be logically capitalized on to make web interactions refined and easy to navigate.

You’ve been presented with some of the best practices in this piece. You can find dozens of more out there to get inspiration from and develop your own.

Image of artist drawing courtesy of Shutterstock.